H5基础知识
0. HTML概念
HTML：超文本标记语言（Hyper Text Markup Language)。是用来描述网页的一种语言。
HTML不是一种编程语言，而是一种标记语言（markup language）。
标记语言是一套标记标签（markup tag)。
1. 标签语言化
目的：
- 方便代码的阅读和维护；
- 同时让浏览器或是爬虫可以很好地解析，从而更好分析其中的内容；
- 使用语义化标签会具有更好的搜索引擎优化。
根据标签的语义，在合适的地方给一个最为合理的标签，让结构更清晰。
1.1 HTML标签格式
- html标签是由尖括号包围的关键字，如：<html>、<body>、<div>等；
- html标签通常是成对出现，如<div> </div>，第一个是开始，第二个有斜线的是结束；
- 有些标签是单独呈现的，如：<br/>、<hr/>、<img>等；
- 标签里面带有若干属性，也有不带的。
标签语法：
<标签名 属性1=“属性值1” 属性2=“属性值2”…>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…>
2. HTML文档结构
- <!
DOCTYPE html>：声明为html5文件，必须是html文档的第一行，在<html>标签之前；- <
html></html>：文档开始和结束的标记，是HTML页面的根元素；- <
head></head>：定义文档开头部分，包含文档元(meta)数据，配置信息等，是给浏览器看的；- <
title></title>：定义了网页标题，在浏览器标题栏显示；- <
body></body>：之间的内容是可见的网页主体内容。
2.1 head内常用标签
| 名字 | 描述 |
|---|---|
| <title> 内容 </title> | 定义网页标题 |
| <style> 内容 </style> | 定义内部样式 |
| <script> 内容 </script> | 定义JS代码或引入外部JS文件 |
| <link/>（单标签） | 引入外部样式表文件 |
| <meta/>（单标签） | 提供有关页面的元信息 |
meta标签：
<meta>标签永远位于head元素内部；元数据总是以名称/值的形式被成对传递的。
meta标签组成：
http-equiv属性：相当于http的文件头作用，向浏览器传回一些有用的信息，正确显示网页内容，与之对应的属性值content，content中的内容是各个参数的变量值；name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎查找信息和分类信息用的。
2.2 body常用标签
| 名字 | 描述 |
|---|---|
| <b> 内容 </b> <strong> 内容 </strong> | 加粗（XHTML推荐使用strong） |
| <i> 内容 </i>` <em>内容<em> | 斜体（XHTML推荐使用em） |
| <u> 内容 </u> | 下划线 |
| <s> 内容 </s> `<del>内容</del> | 删除（XHTML推荐使用del） |
| <p> 内容 </p> | 段落标签 |
| <h1> 内容 </h1> | 作为标题使用，h1, h2…h5依据重要性递减 |
| <div> 内容 < /div> | 定义一个块级元素 |
| <span> 内容 < /span> | 定义内联（行内）元素 |
| <img src=“图像URL”/> | 插入图片 |
a标签
- 定义超链接：用于从一张页面链接到另一张页面(比如<a
href=“http://www.baidu.com”>百度</a>)； - 锚：用于从页面当前位置跳转至指定锚点，博客的目录经常用到(比如<a
href="#top">内容</a> <h2><aname=“top”>内容</a></h2>)； - 它最重要的属性是
href，指示链接的目标。所有的浏览器都支持a标签。
2.2.1 列表
- 无序列表
里面只能包含li，没有顺序，布局中最常用。基本语法如下：
<ul
type=“desc”>
<li>第一项</li>
<li>第二项</li>
</ul>
| type属性 | 描述 |
|---|---|
| disc | 实心圆点（默认值） |
| circle | 空心圆圈 |
| square | 实心方块 |
| none | 无样式 |
- 有序列表
里面只能包含li，有顺序，使用情况较少。基本语法如下：
<ol
type=“1”start=“2”>
<li>第一项</li>
<li>第二项</li>
</ol>
| type属性 | 描述 |
|---|---|
| 1 | 数字列表（默认值） |
| A | 大写字母 |
| a | 小写字母 |
| I | 大写罗马 |
| i | 小写罗马 |
start是从数字几开始
3.自定义列表
定义列表常用于对术语或名词进行解释和描述，里面有2表兄弟，dt和dd。基本语法如下：
<
dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
… …
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
… …
</dl>
- table标签：定义
表格； - tr标签：定义
行，必须嵌套在table标签中； - td标签：定义
单元格，必须嵌套在tr标签中。
2.2.2 表格
创建表格的基本标签table、tr、td，缺一不可。基本语法如下：
<
table>
<tr>
<td>单元格内的文字</td>
… …
</tr>
… …
</table>
2.2.2.1 表格常用属性
| 属性名 | 作用 | 常用单位 |
|---|---|---|
| border | 设置表格的边框（默认值为0，无边框） | 像素值（px） |
| cellspacing | 设置单元格与单元格边框之间的空白间距 | 像素值 |
| cellpadding | 设置单元格内容与单元格边框之间的空白距 | 像素值 |
| width | 设置表格的宽度 | 像素值 |
| height | 设置表格的高度 | 像素值 |
| align | 设置表格在网页中的水平对齐方式 | left、center、right |
2.2.2.2 表格结构
在使用表格进行布局时，可以将表格划分为头部、主体和页脚，如下所示：
- <
caption></caption>：用于定义表格标题；
caption标签必须紧随table标签之后。且只能对每个表格定义一个标题，通常这个标题会被居中于表格之上。
- <
thead></thead>：用于定义表格的头部；
必须位于table标签中，一般包含网页的logo和导航等头部信息。
3.<
th></th>：用于定义表格的表头；
只需用表头标签th替代相应的单元格标签td即可。一般位于表格的一行或第一列，并且文本加粗剧中。
- <
tbody></tbody>：用于定义表格的主体。
必须位于table标签中，一般包含网页中除头部和底部之外的其他内容。
- <
tfoot></tfoot>：用于定义表格的页脚（脚注或表注）。
必须位于table标签中，与thead和tbody元素结合起来使用。
总结：
thead元素用于对HTML表格中的表头内容进行分组，而tbody元素用于对HTML表格中的主体内容进行分组，tfoot元素用于组合HTML表格中的表注内容。
2.2.2.3 合并单元格
合并属性：
| 属性名 | 作用 |
|---|---|
| rowspan | 跨行合并 |
| colspan | 跨列合并 |
合并顺序： 遵循先上、后下、先左、后右的顺序。
合并步骤：
- 确定是跨行合并还是跨列合并；
- 找到目标单元格，写上合并方式和要合并的单元格数量；
- 删除多余的单元格（删除的个数=合并的个数-1）。
2.2.3 表单标签
作用：<from>标签用于定义表单区域，收集用户输入的数据，向服务器传输这些数据。
完整的表单通常由表单控件、提示信息、表单域3个部分构成。基本语法如下：
action属性：表单数据提交的地址；method属性：表单发生提交操作的时候的请求方式，有get和post；enctype属性：编码类型。
2.2.3.1 input控件
input标签是表单标签中最重要的标签。input标签是个单标签。
input标签在使用时，type、name、value这三个属性是最常用的。
type属性：规定input标签的类型；
| type属性值 | 描述 |
|---|---|
| button | 生成按钮 |
| radio | 生成单选按钮 |
| submit | 生成提交按钮 |
| text | 生成文本框 |
| file | 生成浏览按钮 |
| hidden | 生成隐藏的输入字段 |
| password | 生成密码输入框 |
| checkbox | 生成复选框 |
| image | 生成图片形式的提交按钮 |
| reset | 生成重置按钮 |
name属性：定义input元素的名称。在进行前后端交互时，可以根据这个名称找到对应的标签，是前端和后端交互时非常重要的属性；
3.value属性：规定input元素的值，在获取表单数据时获取的就是value属性的值。
3. HTML5新增标签
3.1 新的语义和结构元素
| 属性名 | 描述 |
|---|---|
| <nav>内容</nav> | 定义导航链接 |
| <article>内容</article> | 定义文章标签 |
| <figure>内容</figure> | 定义媒介内容的分组 |
| <dialog>内容</dialog> | 定义对话框或窗口 |
| <menu>内容</menu> | 定义命令的列表或菜单 |
| <progress>内容</progress> | 进度条的标签 |
3.2 新多媒体元素
| 属性名 | 描述 |
|---|---|
| <canvas>内容</canvas> | 定义图形 |
| <audio>内容</audio> | 定义音频内容 |
| <video>内容</video> | 定义视频 |
| <source>内容</source> | 定义多媒体资源 |
| <embed>内容</embed> | 定义嵌入的内容 |
| <track>内容</track> | 为诸如video和audio元素之类的媒介规定外部文本轨道 |
3.3 新表单元素
| 属性名 | 描述 |
|---|---|
| detalist | 定义选项列表 |
| keygen | 规定用于表单的密钥生成器字段 |
| output | 定义不同类型的输出 |
188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
