HTML知识概括@TOC HTML简介 HTML简介： HTML的注释，注释中的内容会被浏览器所忽略，不会在网页中直接显

HTML简介

HTML简介：

HTML的注释，注释中的内容会被浏览器所忽略，不会在网页中直接显示，但是可以在源码中查看注释，注释用来对代码进行解释说明的开发中一定要养成良好的编写注释的习惯，注释要求简单明了
注释还可以将一些不希望显示的内容隐藏
注释不能嵌套
标签一般成对出现，但是也存在一些自结束标签

标签的属性：

属性，在标签中（开始标签或自结束标签）还可以设置属性
属性是一个名值对（x=y）
属性用来设置标签中的内容如何显示
属性和标签名或其他属性应该使用空格隔开
属性不能瞎写，应该根据文档中的规定来编写，有些属性有属性值，有些没有。如果有属性值，属性值应该使用引号引起来

网页的基本结构：

迭代 ①网页的版本HTML4X，HTML2.0。HTML5，...
文档声明（doctype）：文档声明用来告诉浏览器当前网页的版本 ①html5的文档声明

<!doctype html>
&lt;!Doctype HTML&gt;

举例：

<!-- 文档声明，声明当前网页的版本 -->
<!doctype html>

<!-- html的根标签（元素），网页中的所有内容都要写根元素的里边 -->
<html>

	<!-- head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页 -->
	<head>

		<!-- meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题 -->
		<meta charset="utf-8">
		
		<!-- title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
		<title>网页的标题</title>

	</head>

	<!-- body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里 -->
	<body>

		<!-- h1网页的一级标题 -->
		<h1>网页的大标题</h1>

	</body>

</html>

HTML语法

实体：

在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格
在HTML中有些时候，我们不能直接书写一些特殊符号。比如：多个连续的空格，比如字母两侧的大于和小于号
如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）
实体的语法：&实体的名字; ①  空格 ②> 大于号 ③< 小于号 ④© 版权符号

head标签：

<head> 标签包含了所有的头部标签元素。在 <thead>标签中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>,<link>, <script>, <base>。 ①base标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接: ②link标签定义了文档与外部资源之间的关系。（包括网络或者本地），<link>标签通常用于链接到样式表。 ③style标签定义了HTML文档的样式文件引用地址，在<style> 标签中你也可以直接添加样式来渲染 HTML 文档。 ④script标签既可包含脚本语句，也可以通过 "src" 属性指向外部脚本文件。（包括网络或者本地），<script> 标签用于定义客户端脚本，比如 JavaScript。 ⑤title标签定义了不同文档的标题，<title> 在 HTML/XHTML 文档中是必须的。 <1>title标签定义了浏览器工具栏的标题。 <2>当网页添加到收藏夹时，显示在收藏夹中的标题。 <3>显示在搜索引擎结果页面的标题。

meta标签：

meta主要用于设置网页中的一些元数据，元数据不是给用户看 ①charset 指定网页的字符集 ②name 指定的数据的名称 ③content 指定的数据的内容
keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开

<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
<meta name="keywords" content="网购,网上购物,在线购物,网购网站,网购商城,购物网站,网购中心,购物中心,卓越,亚马逊,卓越亚马逊,亚马逊中国,joyo,amazon">

description 用于指定网站的描述 ① 网站的描述会显示在搜索引擎的搜索的结果中

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>

title标签的内容会作为搜索结果的超链接上的文字显示

语义化标签：

在网页中HTML专门用来负责网页的结构，所以在使用html标签时，应该关注的是标签的语义，而不是它的样式。
标题标签： ①h1 ~ h6 一共有六级标题 ②从h1~h6重要性递减，h1最重要，h6最不重要 ③h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1 ④一般情况下标题标签只会使用到h1~h3，h4~h6很少用
标题标签都是块元素
在页面中独占一行的元素称为块元素（block element）
hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup

<hgroup>
    <h1>回乡偶书二首</h1>
    <h2>其一</h2>
</hgroup>

p标签表示页面中的一个段落，p也是一个块元素。
em标签用于表示语音语调的一个加重。在页面中不会独占一行的元素称为行内元素（inline element）。也就是斜体。
strong表示强调，重要内容！也就是粗体。
blockquote 表示一个长引用，也就是换行加连个tab键。
q表示一个短引用，也就是双引号。
br标签表示页面中的换行，直接换一行。

块元素与行内元素详解：

块元素（block element）：在网页中一般通过块元素来对页面进行布局
行内元素（inline element）：行内元素主要用来包裹文字
一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
块元素中基本上什么都能放
p元素中不能放任何的块元素
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正。比如： ①标签写在了根元素的外部 ②p元素中嵌套了块元素 ③根元素中出现了除head和body以外的子元素 ④......

布局标签（结构化语义标签）：

header 表示网页的头部
main 表示网页的主体部分(一个页面中只会有一个main)
footer 表示网页的底部
nav 表示网页中的导航
aside 和主体相关的其他内容（侧边栏）
article 表示一个独立的文章
section 表示一个独立的区块，上边的标签都不能表示时使用section
div没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
span行内元素，没有任何的语义，一般用于在网页中选中文字

列表：

在html中也可以创建列表，html列表一共有三种： ①有序列表 ②无序列表 ③定义列表
有序列表，使用ol标签来创建无序列表 ①使用li表示列表项
无序列表，使用ul标签来创建无序列表 ①使用li表示列表项
定义列表，使用dl标签来创建一个定义列表 ①使用dt来表示定义的内容 ②使用dd来对内容进行解释说明
列表之间可以互相嵌套

超链接：

超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置。
使用 a 标签来定义超链接 ①属性：href 指定跳转的目标路径 <1>值可以是一个外部网站的地址 <2>也可以写一个内部页面的地址
超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素
target属性，用来指定超链接打开的位置 ①可选值： <1>_self 默认值在当前页面中打开超链接 <2> _blank 在一个新的要么中打开超链接
可以直接将超链接的href属性设置为#，这样点击超链接以后，页面不会发生跳转，而是转到当前页面的顶部的位置。
可以跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值，id属性（唯一不重复的）。
可以使用 javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生。 ①javascript:是表示在触发默认动作时，执行一段JavaScript代码。 ②而 javascript:; 表示什么都不执行，这样点击时就没有任何反应。 ③javascript:是伪协议，表示url的内容通过javascript执行。void(0)表示不作任何操作，这样会防止链接跳转到其他页面。
每一个标签都可以添加一个id属性
id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性

相对路径：

当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径
相对路径都会使用.或..开头。 ①./ ②../
./可以省略不写，如果不写./也不写../则就相当于写了./
./表示当前文件所在的目录
../ 表示当前文件所在目录的上一级目录

图片标签：

图片标签用于向当前页面中引入一个外部图片 ①使用img标签来引入外部图片，img标签是一个自结束标签 ②img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）
属性：src 属性指定的是外部图片的路径（路径规则和超链接是一样的）
alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示 ①搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录
width 图片的宽度 (单位是像素)
height 图片的高度 ①宽度和高度中如果只修改了一个，则另一个会等比例缩放
注意： ①一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大 ②但是在移动端，经常需要对图片进行缩放（大图缩小）
图片的格式： ①jpeg(jpg) <1>支持的颜色比较丰富，不支持透明效果，不支持动图 <2>一般用来显示照片 ②gif <1>支持的颜色比较少，支持简单透明，支持动图 <2>颜色单一的图片，动图 ③png <1>支持的颜色丰富，支持复杂透明，不支持动图 <2>颜色丰富，复杂透明图片（专为网页而生） ④webp <1>这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式 <2>它具备其他图片格式的所有优点，而且文件还特别的小 <3>缺点：兼容性不好
base64 ①将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片
②一般都是一些需要和网页一起加载的图片才会使用base64
总结： ①效果一样，用小的 ②效果不一样，用效果好的

内联框架：

内联框架，用于向当前页面中引入一个其他页面 ①src 指定要引入的网页的路径 ②frameborder 指定内联框架的边框

音频和视频：

audio 标签用来向页面中引入一个外部的音频文件的。音视频文件引入时，默认情况下不允许用户自己控制播放停止
属性： ①controls 是否允许用户控制播放 ②autoplay 音频文件是否自动播放 <1>如果设置了autoplay 则音乐在打开页面时会自动播放，但是目前来讲大部分浏览器都不会自动对音乐进行播放 ③loop 音乐是否循环播放

<audio src="...mp3" controls autoplay loop></audio>

除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径

<audio controls>
    <!--浏览器不支持播放音频，请升级浏览器！-->
    <source src="../music/WinterWithoutYou.mp3">
    <source src="../music/WiterWithoutYou.mp3">
    <source src="../music/WinterWithoutYou.mp3">
    <embed src="../music/WinterWithoutYou.mp3" >
</audio>

embed标签：比较老的版本使用，音视频都可以，默认自动播放。 ①type指定音频文件的类型 ②width height 需要说明高度

<embed src="../music/WinterWithoutYou.mp3" type="audio/mp3" width="300" height="100">

video标签：向网页引入一个视频，使用方式和audio基本一样。

表格：

在现实生活中，我们经常需要使用表格来表示一些格式化数据：课程表、人名单、成绩单....
同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格
在table中使用tr表示表格中的一行，有几个tr就有几行
在tr中使用td表示一个单元格，有几个td就有几个单元格
rowspan 纵向的合并单元格
colspan 横向的合并单元格
可以将一个表格分成三个部分： ①头部 thead ②主体 tbody ③底部 tfoot
th 表示头部的单元格

<table border="1" width='50%' align="center">
        <thead>
            <tr>
                <th>日期</th>
                <th>收入</th>
                <th>支出</th>
                <th>合计</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
            </tr>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
            </tr>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
            </tr>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td>合计</td>
                <td>300</td>
            </tr>
        </tfoot>
    </table>

表单：

在现实生活中表单用于提交数据，在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器，使用form标签来创建一个表单。
form的属性： ①action 表单要提交的服务器的地址 ②method 属性设置提交的方式 GET(默认值)或 POST ③enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。 <1>application/x-www-form-urlencoded 在发送前编码所有字符（默认） <2>multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。 <3>text/plain 空格转换为 "+" 加号，但不对特殊字符编码
input（行内块元素）属性 ①type设置 <1>text 文本框 <2>password 密码框 <3>submit 提交按钮
<4>radio 单选框（需要相同的name值，发送时发送一个参数） <5>checkbox 多选框（需要相同的name值，发送时发送一个数组） <6>button 按钮 <7>reset 重置按钮 <8>color 调色（兼容性差） <9>email <10>等等查文档 ②name，注意：数据要提交到服务器中，要为元素指定一个name属性 ③value <1>单选和多选框中，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器。 <2>在提交按钮中，显示提交按钮的名字 ④checked ：在单选或多选种设置为默认选中 ⑤autocomplete 自动补全 <1>autocomplete=“off" 关闭自动补全 <2>可以放在form中，低下的input都不会自动补全 ⑥readonly将表单项设置为只读，数据会提交 ⑦disabled将表单项设置为禁用，数据不会提交 ⑧autofocus设置表单项自动获取焦点 ⑨placeholder 提示
select下拉列表 ①option 选项 <1>selected 默认选中 <2>value 设置提交值

<form action="target.html">
	//单选框
	<input type="radio" name="gender" checked="checked" value="1"> 男
	<input type="radio"  name="gender" value="2"> 女

	//多选框
	<input type="checkbox" name="interest" checked="checked" value="Car">睡觉 
	<input type="checkbox" name="interest" checked="checked" value="Car">打豆豆 
	<input type="checkbox" name="interest" value="Car">旅游 

	//下拉框
	<select name="haha">
            <option value="i">选项一</option>
            <option selected=“selected” value="ii">选项二</option>
            <option value="iii">选项三</option>
    </select>
</form>

数据没有发送给服务器的三种情况：

表单项没有 name 属性值
单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，以便发送给服务器
表单项不在提交的 form 标签中

HTML补充

role属性说明：

html 里面的 role 本质上是增强语义性，当现有的HTML标签不能充分表达语义性的时候，就可以借助role来说明。
通常这种情况出现在一些自定义的组件上，这样可增强组件的可访问性、可用性和可交互性。
role的作用是描述一个非标准的tag的实际作用。比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个button
举例： ①辅助工具就会知道，这个div实际上是个checkbox的角色，为选中状态。

<div role="checkbox" aria-checked="checked"></div>

state (状态) 和property (属性)说明：

state 的好处是让使用者可以知道这个控制项的状态, 例如aria-checked 的状态有true, false, mixed 三种,我们就知道checkbox 点了没有。
propoerty 可以描述一个栏位允许的最大值,最小值.