什么是 HTML?
描述:HTML超文本标记语言 (Hyper Text Markup Language), 它不是一种编程语言,而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag), 其使用标记标签来描述网页。
HTTP 请求连接流程HTTP协议遵循请求(Request)/应答(Response)模型,所有HTTP连接都被构造成一套请求和应答;
答:HTTP是一种无状态的协议,无状态是指Web浏览器和Web服务器之间不需要建立持久的连接,这意味着当一个客户端向服务器端发出请求,然后Web服务器返回 响应(response) 连接就被关闭了,在服务器端不保留连接的有关信息。温馨提示: 当前可以通过web容器或者中间件将HTML请求连接保持为长连接。
HTTP 请求响应报文
HTTP 方法描述: 两种最常用的 HTTP 方法是 GET 和 POST, 他们是在客户机和服务器之间进行请求-响应时最常用的方法。
扩展说明: 针对Form 中的 get 和 post 方法,在数据传输过程中分别对应了 HTTP 协议中的 GET 和 POST 方法, 二者主要区别如下:
温馨提示:因为当前HTML5被广泛使用,所有后续文中HTML名词皆代表HTML5。
描述: 网页文档由嵌套的 HTML 元素构成,大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。
描述: HTML 标记标签通常被称为HTML 标签(tag),完整标签被称为HTML 元素 (element),例如,我们从上面的HTML结构中可以看到。
注释:开始标签常(opening tag),内容(Content)即元素的内容,结束标签(closing tag),例如 <h1>我是标题</h1>,整个元素即由开始标签、内容、结束标签三部分组成的整体。
温馨提示:W3School 使用的是小写标签,因为万维网联盟(W3C)在 HTML 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。
温馨提示: 但是并非所有的标签都是成对出现,例如 换行标签 <br /> 和 分割线标签 <hr /> 特殊标签,它是一种没有内容(空内容-empty content)、空的 HTML 元素(被称为空元素), 空元素在开始标签中进行关闭(以开始标签的结束而结束)
温馨提示: 在 XHTML、XML 以及可能在未来版本的 HTML 中,所有元素都必须被关闭。在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式,即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。
实时结果输出:
请点击执行,即可显示结果!可编辑代码:<h1> WeiyiGeek Blog => <br /> <p> 花开堪折直须折,莫待无花空折枝。 </p> <hr /> </h1><br>
描述: 同许多编程语言一样,HTML标记语言也支持单行与多行注释,注释标签用于在源代码中插入注释,注释不会显示在浏览器中。使用注释可以对您的代码进行解释,这样做有助于您在以后的时间对代码的编辑,当您编写了大量代码时尤其有用。
注释:示例2的注释行结尾处的两条斜杠 (//) 是 JavaScript 注释符号。这可以避免 JavaScript 执行 –> 标签。
描述:HTML 文档描述网页,也被称为网页, 文档包含 HTML 标签和纯文本。
Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们,浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容。
定义文档类型描述: 所有浏览器都支持 <!DOCTYPE> 声明,帮助浏览器正确地显示网页。Web 世界中存在许多不同的文档,只有了解文档的类型,浏览器才能正确地显示文档。HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面,这就是 <!DOCTYPE> 的用处, <!DOCTYPE> 声明对大小写不敏感,并且其声明没有结束标签.
温馨提示: <!DOCTYPE> 不是 HTML 标签,它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。
HTML 版本
从 Web 诞生早期至今,已经发展出多个 HTML 版本 :HTML(1991)HTML+(1993)HTML 2.0(1995)HTML 3.2(1997)HTML 4.01(1999)XHTML 1.0(2000)HTML5 (2012)XHTML5 (2013)
HTML 4.01 Strict (adj. 严格的;绝对的):该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font),不允许框架集(Framesets)。
HTML 4.01 Transitional (adj. 变迁的;过渡期的):同上
HTML 4.01 Frameset(n. 框架集;框架型):该 DTD 等同于 HTML 4.01 Transitional,但允许框架集内容
描述: 在前面【全栈之前端前置知识】我们介绍前端开发必备的几种IDE编辑器,此处我们来看看,在没有安装上述编辑器(VScode)可以使用其他那些编辑器进行修改和编写。
例如:如下html代码编辑器
通常每一种操作系统都带有简单的文本编辑器:
温馨提示: 在初学时,推荐使用文本编辑器来学习 HTML,比如 Notepad (PC) 或 TextEdit (Mac),我们相信,使用一款简单的文本编辑器是学习 HTML 的好方法,便于手敲记忆。
例如,标签元素中属性位置 class 用于标识高度可复用组件,因此应该排在首位,而id 用于标识具体组件,应当谨慎使用(例如,页面内的书签)因此排在第二位。
基础实例:
描述:使用属性为 HTML 元素提供附加信息,分为标准(全局)属性与标签属性。
常见的标准属性有id, class, title, style, dir, lang, xml:lang,值得注意属性和属性值尽量小写,除此之外详细的HTML列表如下:
参考地址:
描述: id 属性规定 HTML 元素的唯一的 id(HTML 文档中必须是唯一的),其属性可用作链接锚(link anchor),通过 JavaScript(HTML DOM)或通过 CSS 为带有指定 id 的元素改变或添加样式。
即id 属性只能为元素单独设置 id=" "(只能填写一个,多个无效)
语法: <element id="idname">
属性: idname 规定元素的唯一id。
规则:
1)必须以字母 A-Z 或 a-z 开头2)其后的字符:字母(A-Za-z)、数字(0-9)、连字符(“-“)、下划线(“_”)、冒号(“:”) 以及点号(“.”)3)值对大小写敏感
HTML 4.01 与 HTML5之间的差异说明
注意: HTML 4.01 对于 id 的值有严格的限制 (例如:在 HTML 4.01 id 值不能以数字开头)。
示例: 利用Javascript的Dom来改变插入网页的文字:
WeiyiGeek.使用id属性效果图
描述: class 属性定义了元素的类名,通常用于指向样式表的类,来修改标签元素的样式。但是,它也可以用于 JavaScript 中(通过 HTML DOM), 来修改 HTML 元素的类名。
语法: <element class="classname">
属性: classname 规定元素的类的名称。
如需为一个元素规定多个类,用空格分隔类名,例如 <span class="left important">. HTML 元素允许使用多个类。
规则:
扩展说明: HTML 4.01 与 HTML5之间的差异?
描述: title 属性规定关于元素的额外信息,这些信息通常会在鼠标移到元素上时显示一段工具提示文本(tooltip text)。
语法:<element title="text">属性值: 规定元素的工具提示文本(tooltip text)示例:实时结果输出:
请点击执行,即可显示结果!可编辑代码:<br> <p><abbr title="世界卫生组织">WHO</abbr> 成立于 1948 年</p><br /><br> <p title="title属性设置效果">查询title属性效果,请把鼠标移动到此处</p><br>
描述: hidden 属性规定对元素进行隐藏,隐藏的元素不会被显示,可以对 hidden 属性进行设置,使用户在满足某些条件时才能看到某个元素(比如选中复选框,等等), 然后可使用 JavaScript 来删除 hidden 属性,使该元素变得可见。
语法: <element hidden>示例: 隐藏标签元素显示。示例:
温馨提示:
描述:规定激活(使元素获得焦点)元素的快捷键。注释:以下元素支持 accesskey 属性:<a>, <area>, <button>, <input>, <label>, <legend> (fieldset连用)以及 <textarea>。语法:<element accesskey="character|快捷键">。示例: 使用指定快捷键访问绑定的超链接
温馨提示: 请使用Alt + accessey 或者 Shift + Alt + accessKey来访问带有指定快捷键的元素。
描述:规定元素的 tab 键控制次序(当 tab 键用于导航时)。注释:以下元素支持 tabindex 属性:<a>, <area>, <button>, <input>, <object>, <select> 以及 <textarea>。语法:<element tabindex="number|按次序">示例: 使用tab按键切换访问链接。
温馨提示: 请尝试使用键盘上的“Tab”键在链接之间进行导航
描述: 规定是否应该翻译元素内容,在国外的一些网站常常不能翻译。语法:<element translate="yes|no">参数: 当值为yes是规定该元素内容可被翻译,当值为no时则不翻译。示例: 规定不应翻译某些元素。
描述: 规定是否对元素进行拼写和语法检查, 我们通常可以对以下内容进行拼写检查。
语法: <element spellcheck="true|false">参数: 当值为true是规定该元素内容进行拼写和语法检查,当值为false时则不进行检查。示例: <p spellcheck="true">元素内容拼写检查</p>
描述: 规定元素内容是否可编辑,如果元素未设置 contenteditable 属性,那么元素会从其父元素继承该属性。
语法: <element contenteditable="true|false">参数: 进行拼写检查的可编辑段落且可以编辑内容。示例: <!--P标签也能被修改内容--> <p contenteditable="true" spellcheck="true">这是一段可编辑的段落,尝试编辑</p>
描述: 该全局属性是一类被称为自定义数据属性的属性,它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力,并可以通过脚本在 HTML 与 DOM 表现之间进行专有数据的交换。
语法: <element data-*="somevalue">参数: 属性包括两部分,属性名不应该包含任何大写字母,并且在前缀 “data-“ 之后必须有至少一个字符,属性值可以是任意字符串。示例:
WeiyiGeek. data-*属性使用图
温馨提示: 用户代理会完全忽略前缀为 “data-“ 的自定义属性。
描述:规定元素是否可拖动,链接和图像默认是可拖动的,draggable:可拖动的提示:draggable 属性常用在拖放操作中,请在我们的拖放教程中学习更多内容。语法:<element draggable="true|false|auto">参数: true 可拖动,false 不可拖动,auto 使用浏览器默认行为。示例:
描述: 是一个指示元素中文本方向的枚举属性。它的取值如下:语法:<element dir="ltr|rtl|auto">
ltr,指从左到右,用于那种从左向右书写的语言(比如英语);rtl,指从右到左,用于那种从右向左书写的语言(比如阿拉伯语);auto,指由用户代理决定方向, 它在解析元素中字符时会运用一个基本算法,直到发现一个具有强方向性的字符,然后将这一方向应用于整个元素。示例:<div dir="ltr">从左向右书写的语言</div> <div dir="rtl">从右向左书写的语言</div> <div dir="auto">指由用户代理决定方向</div>
描述: 规定在元素上拖动数据时,是否拷贝、移动或链接被拖动数据。提示:draggable 属性常用在拖放操作中,请在我们的拖放教程中学习更多内容。语法:<element dropzone="copy|move|link">参数:
copy :拖动数据会产生被拖动数据的副本move : 拖动数据会导致被动数据被移动到新w位置link :拖动数据会产生指向原始数据的链接
温馨提示: 当前没有主流浏览器支持 dropzone 属性。
描述:除了全局属性之外,HTML 标签也可以拥有自己属性(后续学习标签时会学到),从而提供了有关 HTML 元素的更多的信息。
属性格式:描述: 属性总是以名称/值对的形式出现,比如:name="value"(用等号给属性赋值),属性总是在 HTML 元素的开始标签中规定, 并且属性值应该始终被包括在引号内,双引号是最常用的,不过使用单引号也没有问题。
在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='Student "HelloWorld" HTML'