html

一、认识 WEB1.浏览器的内核2.Web标准2.1 网页中 web 标准三层组成二、HTML1.HTML初识1.1定义1.2HTML骨架标签1.3HTML标签分类1.4 HTML标签关系1.5 sublime1.6HTML标签的语义化2. HTML常用标签1.1 排版标签1）标题标签h (熟记)2）段落标签p ( 熟记)3）水平线标签hr(认识)4）换行标签br (熟记)5）div 和 span标签(重点)6）排版标签总结1.2 文本格式化标签(熟记)1.3 图像标签img (重点)1.4 链接标签(重点)1.5 注释标签1.6 拓展练习1.1锚点定位（难点）1.2base 标签1.3预格式化文本pre标签1.4特殊字符（理解）1.5什么是XHTML1.6. 路径(重点、难点)3.表格 table(会使用)3.1表格属性3.2表头3.3表格标题3.4合并单元格(难点)3.5表格划分结构（了解）3.6表格总结4.列表（重点）4.1有序无序自定义4.2列表总结5.表单(掌握)5.1input控件5.2label标签（理解）5.3textarea文本域5.4select下来列表5.5表单域三、查字典

一、认识 WEB

1.浏览器的内核

国产浏览器最新版都采用Blink内核，Chrome 浏览器之中使用Blink，其实是 WebKit 的分支。

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n6" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;">移动端的浏览器内核主要说的是系统内置浏览器的内核。

Android手机而言，使用率最高的就是Webkit内核，大部分国产浏览器宣称的自己的内核，基本上也是属于webkit二次开发。

iOS以及WP7平台上，由于系统原因，系统大部分自带浏览器内核，一般是Safari（blink）或者IE内核Trident的</pre>

2.Web标准

Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。

W3C 万维网联盟是国际最著名的标准化组织。1994年成立后，至今已发布近百项相关万维网的标准，对万维网发展做出了杰出的贡献。

w3c就类似于现实世界中的联合国。

2.1 网页中 web 标准三层组成

构成： 主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

二、HTML

1.HTML初识

1.1定义

HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。

标签有自己的语法规范，所有的html标签都是用 <> 表示的
H（很）T（甜）M（蜜）L（啦）是很快乐的一件事情

1.2HTML骨架标签

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，我们成为根标签
<head></head>	文档的头部	注意在head标签中我们必须要设置的标签是title
<titile></title>	文档的标题	让页面拥有一个属于自己的网页标题
<body></body>	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

[图片上传失败...(image-c68042-1635339135908)]

1.3HTML标签分类

常规元素（双标签）

空元素（单标签）

1.4 HTML标签关系

嵌套关系

2.并列关系

1.5 sublime

生成页面骨架结构
- html: 5 按下tab键或者
- ! 按下tab键
文档类型

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="html" cid="n74" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;"><!DOCTYPE html> </pre>

此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
页面语言

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="html" cid="n78" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;"><html lang="en"> 指定html 语言种类</pre>

最常见的2个：
1. en定义语言为英语
2. zh-CN定义语言为中文
字符集

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="html" cid="n87" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;"><meta charset="UTF-8" /></pre>

字符集(Character set)是多个字符的集合。
- gb2312 简单中文包括6763个汉字国标GUO BIAO
- BIG5 繁体中文港澳台等用
- GBK包含全部中文字符是GB2312的扩展，加入对繁体字的支持，兼容GB2312 国标扩展
- UTF-8则基本包含全世界所有国家需要用到的字符
- 一般情况下统一使用 "UTF-8" 编码（不是小写）

1.6HTML标签的语义化

所谓标签语义化，就是指标签的含义，根据标签的语义，在合适的地方给一个最为合理的标签，让结构更清晰。
当我们去掉CSS之后，网页结构依然组织有序
遵循的原则：先确定语义的HTML ，再选合适的CSS。

2. HTML常用标签

1.1 排版标签

排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。

1）标题标签h (熟记)

单词缩写： head 头部. 标题 title 文档标题

为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题

2）段落标签p ( 熟记)

单词缩写： paragraph 段落 [ˈpærəgræf] 无须记这个单词

作用语义：可以把 HTML 文档分割为若干段落，段落之间间隔较大

3）水平线标签hr(认识)

单词缩写： horizontal 横线 [ˌhɔrəˈzɑntl]

4）换行标签br (熟记)

单词缩写： break 打断 ,换行，行与行之间间隔小

5）div 和 span标签(重点)

div span 是没有语义的是我们网页布局主要的2个盒子想必你听过 css+div

div 就是 division 的缩写分割，分区的意思其实有很多div 来组合网页。

span 跨度，跨距；范围

div标签用来布局的，但是现在一行只能放一个div
span标签用来布局的，一行上可以放好多个span

6）排版标签总结

标签名	定义	说明
<hx></hx>	标题标签	作为标题使用，并且依据重要性递减
<p></p>	段落标签	可以把 HTML 文档分割为若干段落
<hr />	水平线标签	没啥可说的，就是一条线
	换行标签
<div></div>	div标签	用来布局的，但是现在一行只能放一个div
<span></span>	span标签	用来布局的，一行上可以放好多个span

1.2 文本格式化标签(熟记)

在网页中，有时需要为文字设置粗体、斜体或下划线效果

[图片上传失败...(image-f6b414-1635339135907)]

b 只是加粗，strong 除了可以加粗还有强调的意思，语义更强烈，其他同理

1.3 图像标签img (重点)

标签属性的格式：放在第一个尖括号内，用逗号隔开

单词缩写： image 图像

src:必须给
一般宽高只给一个

[图片上传失败...(image-71f4b6-1635339135907)]

1.4 链接标签(重点)

单词缩写： anchor 的缩写 [ˈæŋkə(r)] 。基本解释锚, 铁锚的

语法格式：

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n186" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a></pre>

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其取值有self和blank两种，其中_self为默认值，__blank为在新窗口中打开方式。

例子：

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n198" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;">外部链接
<a href="http://www.baidu.com">百度</a>
内部链接
<a href="index.html">本地主页</a>
尚未确定的链接
<a href="#">未指定链接</a>
新窗口打开链接
<a href="http://www.baidu.com" target="__blank">百度</a>
</pre>

不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接

1.5 注释标签

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n201" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"> 快捷键是：ctrl + / 或者 ctrl +shift + / </pre>

注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行

1.6 拓展练习

1.1锚点定位（难点）

通过创建锚点链接，用户能够快速定位到目标内容。

创建锚点链接分为两步：

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n208" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;">1. 使用相应的id名标注跳转目标的位置。 (找目标)
例如：<h3 id="two">第2集</h3>

2. 使用<a href="#id名">第2集具体内容</a>（拉关系）
例如：<a href="#two">第2集具体内容</a> </pre>

1.2base 标签

base 可以设置整体链接的打开状态
base 写到 <head> </head> 之间
把所有的连接都默认添加 target="_blank"

语法：

例如：
<html>
<head>
<title></title>
<base target="_blank"/>
</head>
<body>
</body>
</html></pre>

1.3预格式化文本pre标签

被包围在 <pre> 标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。(现在用的少)

此例演示如何使用 pre 标签

对空行和空格

进行控制

</pre></pre>

1.4特殊字符（理解）

是以运算符&开头,以分号运算符;结尾。
他们不是标签，而是符号。
HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体
Non-breaking space nbsp

[图片上传失败...(image-c3c647-1635339135906)]

1.5什么是XHTML

XHTML 是更严格更纯净的 HTML 代码。

XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。
XHTML 的目标是取代 HTML。
XHTML 与 HTML 4.01 几乎是相同的。
XHTML 是更严格更纯净的 HTML 版本。
XHTML 是作为一种 XML 应用被重新定义的 HTML。
XHTML 是一个 W3C 标准。

XHTML是严格版本的HTML，例如它要求标签必须小写，标签必须被正确关闭，标签顺序必须正确排列，对于属性都必须使用双引号等。

1.6. 路径(重点、难点)

相对路径和绝对路径: 大部分情况用效果路径

3.表格 table(会使用)

表格不是用来布局，常用来后台展示数据，虽然 div 布局也可以做到，但是总没有表格来得方便。

创建表格的基本语法：

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n258" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table></pre>

table用于定义一个表格标签。
tr标签用于定义表格中的行，必须嵌套在 table标签中。
td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签内，<tr></tr>中只能嵌套<td></td> 类的单元格。
字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。

3.1表格属性

表格有部分属性我们不常用，这里重点记住 cellspacing 、 cellpadding。

我们经常有个说法，是三参为0，平时开发的我们这三个参数 border cellpadding cellspacing 为 0

[图片上传失败...(image-f4dd11-1635339135906)]

3.2表头

th 也是一个单元格只不过和普通的 td单元格不一样，它会让自己里面的文字居中且加粗，th放在tr里面

3.3表格标题

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n278" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><table>
<caption>我是表格标题</caption>
</table></pre>

3.4合并单元格(难点)

跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"

合并单元格三步曲：

先确定是跨行还是跨列合并
根据先上后下先左后右的原则找到目标单元格然后写上合并方式，还有要合并的单元格数量比如： <td colspan="3"> </td>
删除多余的单元格单元格

3.5表格划分结构（了解）

对于比较复杂的表格，题头、正文和脚注。thead,tbody,tfoot来标注，前2个长用。

注意：

<thead></thead>：用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签！
<tbody></tbody>：用于定义表格的主体。放数据本体。
<tfoot></tfoot>放表格的脚注之类。
以上标签都是放到table标签中。

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n308" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><table border="1" cellspacing="0" align="center" width="500">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>刘德华</td>
<td>男</td>
<td>55</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>信息地址</td>
<td colspan="2"> 北京市金燕龙校区举办演唱会</td>
</tr>
</tfoot>
</table></pre>

3.6表格总结

标签名	定义	说明
<table></table>	表格标签	就是一个四方的盒子
<tr></tr>	表格行标签	行标签要再table标签内部才有意义
<td></td>	单元格标签	单元格标签是个容器级元素，可以放任何东西
<th></th>	表头单元格标签	它还是一个单元格，但是里面的文字会居中且加粗
<caption></caption>	表格标题标签	表格的标题，跟着表格一起走，和表格居中对齐
clospan 和 rowspan	合并属性	用来合并单元格的

表格提供了HTML 中定义表格式数据的方法。
表格中由行中的单元格组成。
表格中没有列元素，列的个数取决于行的单元格个数。
表格不要纠结于外观，那是CSS 的作用。
表格的学习要求：能手写表格结构，并且能简单合并单元格。

4.列表（重点）

列表就是用来布局的，组合自由度更高

4.1有序无序自定义

无序

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n356" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
3. 无序列表会带有自己样式属性，但是，一般用CSS设置！</pre>

有序

自定义（理解）

dl ——> dt ——>dd

4.2列表总结

标签名	定义	说明
<ul></ul>	无序标签	里面只能包含li 没有顺序，我们以后布局中最常用的列表
<ol></ol>	有序标签	里面只能包含li 有顺序，使用情况较少
<dl></dl>	自定义列表	里面有2个兄弟， dt 和 dd

5.表单(掌握)

5.1input控件

属性：type, name, value, checked

当type=image时必须有src属性

[图片上传失败...(image-d1f904-1635339135906)]

属性	说明	作用
type	表单类型	用来指定不同的控件类型
value	表单值	表单里面默认显示的文本
name	表单名字	页面中的表单很多，name主要作用就是用于区别不同的表单。
checked	默认选中	表示那个单选或者复选按钮一开始就被选中了

例子：

用户名:<input type="text" name=“username” />

用户名:<input type="text" name="username" value="请输入用户名">

<input type="radio" name="sex" />男
<input type="radio" name="sex" />女

5.2label标签（理解）

当我们鼠标点击 label标签里面的文字时，光标会定位到指定的表单里面

2种用法：

第一种用法就是用label直接包括input表单，适合单个表单选择。

第二种用法 for 属性规定 label 与哪个表单元素绑定。

5.3textarea文本域

通过textarea控件可以轻松地创建多行文本输入框，属性cols="每行中的字符数" rows="显示的行数" ，实际开发不用。

5.4select下来列表

用的少
在option 中定义selected =" selected "时，当前项即为默认选中项
<select> 中至少包含一对 option

5.5表单域

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n437" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form></pre>

例子：

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n439" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<form action="" name="form1" method="post">
用户名：<input type="text" name="username">

密码：<input type="password" name="pwd">

<input type="submit" name="sumit">
<input type="reset" name="reset">
</form>
</body>
</html></pre>

常用属性：

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,324评论 6赞 498
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,356评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 162,328评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,147评论 1赞 292
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,160评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,115评论 1赞 296
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,025评论 3赞 417
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,867评论 0赞 274
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,307评论 1赞 310
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,528评论 2赞 332
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,688评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,409评论 5赞 343
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,001评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,657评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,811评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,685评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,573评论 2赞 353