HTML学习

作者: Imkata | 来源:发表于2022-03-03 19:56 被阅读0次

块级元素有<h1>、<p>、<div>，以及列表标签<ul>、<ol>、<li>、<dl>、<dt>、<dd>
行内元素有<a>、<span>、以及文本格式化标签<b>、<strong>、<i>、<em>
行内块元素 <img/>、<input/>，以及<button>标签，<button>的本质就是<input/>

一般行内元素、行内块元素都使用 div 包裹一下。

CSS三大特性：层叠性继承性优先级（优先级：继承或者 * 为 0，!important无穷大，行内 > ID > 类 > 标签)。

一. 浏览器和Web标准

1. 浏览器

① 浏览器市场份额

浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等，我们平时称为五大浏览器。

浏览器占有的市场份额，谷歌占37.85%，IE8.0占16.41%，谷歌浏览器最多。

② 电脑的浏览器内核

首先解释一下浏览器内核是什么东西。英文叫做：Rendering Engine（渲染引擎）。浏览器内核包括两部分，渲染引擎和js引擎。渲染引擎负责读取网页内容，整理讯息，计算网页的显示方式并显示页面，js引擎是解析执行js获取网页的动态效果。后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

深度阅读：五大主流浏览器内核的源起以及国内各大浏览器内核总结

因为浏览器太多啦，但是现在主要流行的就是下面几个：

浏览器	内核	备注
chrome	Blink	在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核，二次开发。
Safari	webkit	Safari浏览器的内核是webkit。
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
firefox	Gecko	可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
Opera	blink	现在跟随chrome用blink内核。

③ 移动端的浏览器内核

移动端的浏览器内核主要说的是系统内置浏览器的内核，目前移动设备浏览器上常用的内核有 Webkit，Blink，Trident，Gecko 等。

iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit。
Android 4.4 之前的 Android 系统浏览器内核是 WebKit，Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink。
Windows Phone 8 系统浏览器内核是 Trident。

2. Web标准

通过以上浏览器的内核不同，我们知道他们工作原理、解析肯定不同，显示就会有差别。
由于不同的浏览器解析出来的效果可能不一致，开发者常常为了多版本的开发而艰苦工作，所以我们需要一个标准，也就是Web标准。

① Web标准的好处

让Web的发展前景更广阔
内容能被更广泛的设备访问
更容易被搜寻引擎搜索
降低网站流量费用
使网站更易于维护
提高页面浏览速度

② Web标准构成

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

Web标准	说明
结构	结构用于对网页元素进行整理和分类，咱们主要学的是HTML。
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为	行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript

理想状态我们的源码：.html .css .js

二. HTML初识

1. 什么是HTML

HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
HTML 不是一种编程语言，而是一种标记语言 (markup language)

所谓超文本，有2层含义:

因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制）
不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

<img src="timg.jpg" />

总结：

html 是超文本标记(标签)语言
我们学习html，主要学习html标签
我们用html标签描述网页元素，比如图片标签、文字标签、链接标签等等
标签有自己的语法规范，所有的html标签都是用 <> 表示的

2. HTML骨架格式

日常生活的书信，我们要遵循共同的约定，同理：HTML 有自己的语言语法骨架格式：

<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>

html骨架标签总结：

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，我们成为根标签
<head></head>	文档的头部	用于存放：title，meta，base，style，script，link 注意在head标签中我们必须要设置的标签是title
<titile></title>	文档的标题	让页面拥有一个属于自己的网页标题
<body></body>	文档的主体	页面在的主体部分，用于存放所有的HTML标签

团队约定大小写

HTML标签名、类名、标签属性和大部分属性值统一用小写

推荐：

<head>     
        <title>我的第一个页面</title>
 </head>

不推荐：

<HEAD>     
        <TITLE>我的第一个页面</TITLE>
</HEAD>

3. HTML标签分类

双标签

<标签名> 内容 </标签名>

该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。
和开始标签相比，结束标签只是在前面加了一个关闭符“/”。

单标签

<标签名 />

空元素用单标签来表示，简单点说，就是里面不需要包含内容。单标签只有一个标签，只是把关闭符“/”放到了标签名后面了。
这种单身狗标签非常少，一共没多少，我们多记忆就好

4. HTML标签关系

主要针对于双标签的相互关系分为两种：请大家务必熟悉记住这种标签关系，因为后面我们标签嵌套特别多，很容易弄混他们的关系。

嵌套关系

<head>  
    <title> </title> 
</head>

并列关系

<head></head>
<body></body>

5. 文档类型<!DOCTYPE>

用法：

<!DOCTYPE html>

作用：

<!DOCTYPE> 标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用<!DOCTYPE>标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。我们使用的是 html5的版本，就是告诉浏览器按照HTML5规范解析页面。

一些老网站可能用的还是老版本的文档类型比如 XHTML之类的，但是我们学的是HTML5，而且HTML5的文档类型兼容很好(向下兼容的原则)，所以大家放心的使用HTML5的文档类型就好了。

6. 页面语言lang

用于指定html 语言种类：

<html lang="en">

最常见的2个：

en定义语言为英语
zh-CN定义语言为中文

考虑浏览器和操作系统的兼容性，目前仍然使用 zh-CN 属性值。简单来说，可能对于程序来说没有太大的作用，但是它可以告诉浏览器，搜索引擎，一些处理html的程序对页面语言内容来做一些对应的处理或者事情，比如可以：

根据根据lang属性来设定不同语言的css样式，或者字体
告诉搜索引擎做精确的识别
让语法检查程序做语言识别
帮助翻译工具做识别
帮助网页阅读程序做识别
…...

7. 字符集

字符集(Character set)是多个字符的集合。计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。

<meta charset="UTF-8" />

UTF-8是目前最常用的字符集编码方式，基本包含全世界所有国家需要用到的字符，这句代码非常关键，是必须要写的代码，否则可能引起乱码的情况。

一般情况下统一使用 "UTF-8" 编码，请尽量统一写成标准的 "UTF-8"，不要写成 "utf-8" 或 "utf8" 或 "UTF8"。

8. HTML标签的语义化

所谓标签语义化，就是指标签的含义。

方便代码的阅读和维护
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
使用语义化标签会具有更好地搜索引擎优化

语义是否良好：当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。( 裸奔起来一样好看 )

遵循的原则：先确定语义的HTML ，再选合适的CSS。所以，我们接下来学习html标签，要根据语义去记忆。 HTML网页中任何元素的实现都要依靠HTML标签。

9. 路径

页面中的图片会非常多，通常我们会新建一个文件夹专门用于存放图像文件（images），这时插入图像，就需要采用“路径”的方式来指定图像文件的位置。路径可以分为：相对路径和绝对路径。

相对路径

以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

路径分类	符号	说明
同一级路径	./	同一级路径可以省略，只需输入图像文件的名称即可，如：`<img src="baidu.png" />`
下一级路径	/	图像文件位于HTML文件同级文件夹下（例如文件夹名称为：images) 如：`<img src="images/baidu.png" />`
上一级路径	../	在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如：`<img src="../baidu.png" />`

绝对路径

绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。比如完整的硬盘地址，如：D:\web\img\logo.gif，或完整的网络地址，如：“http://www.itcast.cn/images/logo.gif”。

三. HTML标签

首先 HTML和CSS是两种完全不同的语言，我们学的是结构，就只写HTML标签，认识标签就可以了，不会再给结构标签指定样式了。HTML标签有很多，这里我们学习最为常用的，后面有些较少用的，我们可以查下手册就可以了。

标题标签：<h1> </h1>

单词缩写：head 头部. 标题

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

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>

标题标签语义：作为标题使用，并且依据重要性递减

其基本语法格式如下：

<h1>   标题文本   </h1>
<h2>   标题文本   </h2>
<h3>   标题文本   </h3>
<h4>   标题文本   </h4>
<h5>   标题文本   </h5>
<h6>   标题文本   </h6>

注意：h1 标签因为重要，尽量少用，不要动不动就向你扔了一个h1，一般h1 都是给logo使用。

小结 :

加了标题的文字会变的加粗，字号也会依次变大
一行是只能放一个标题的

段落标签：<p> </p>

单词缩写：paragraph 段落

作用语义：可以把 HTML 文档分割为若干段落

在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是

<p>  文本内容  </p>

是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

水平线标签：<hr />

单词缩写： horizontal 横线

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，<hr />就是创建横跨网页水平线的标签。其基本语法格式如下：

<hr /> 是单标签

在网页中显示默认样式的水平线。

换行标签：<br />

单词缩写：break 打断 ,换行

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

<br />

这时如果还像在word中直接敲回车键换行就不起作用了。

div span 标签

div span 是没有语义的，是我们网页布局主要的两个盒子。

div 就是 division 的缩写，分割、分区的意思，其实有很多div来组合网页。
span, 跨度，跨距；范围。

语法格式：

<div> 这是头部 </div>    <span>今日价格</span>

他们两个都是盒子，用来装我们网页元素的，只不过他们有区别，现在我们主要记住使用方法和特点就好了：一行只能放一个div，一行上可以放好多个span。

文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

标签	显示效果
<b></b>、<strong></strong>	文字加粗
<i></i>、<em></em>	文字倾斜
<s></s>、<del></del>	文字加删除线
<u></u>、<ins></ins>	文字加下划线

b 是 bold，粗体的意思，只是加粗，strong 除了可以加粗还有强调的意思，语义更强烈。
i 是 italic，斜体的意思，em 全称是 emphasis是强调的意思。
s 是 strike through，del 是 delete，都是为文本添加删除线效果，del 是 html5 中的标签。
u 是 underline，ins 是 inserted，都是为文本添加下划线，ins 是 html5 中的标签。

标签属性

使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：

<标签名 属性1="属性值1" 属性2="属性值2" … > 内容 </标签名>

在上面的语法中：

标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
标签的属性都有默认值，省略该属性则取默认值。
采取键值对的格式 key="value" 的格式

图像标签：<img />

单词缩写：image 图像

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签<img />以及和他相关的属性（它是一个单身狗）。

其基本语法格式如下：

<img src="图像URL" />

该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

src：全称source，是源的意思。alt：全称alternative，代替的意思。

链接标签：<a </a>

单词缩写：anchor 的缩写，锚钉、铁锚的意思

在HTML中创建超链接非常简单，只需用标签把文字包括起来就好。

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性	作用
href	用于指定链接目标的url地址，是必须属性，当为标签应用href属性时，它就具有了超链接的功能，Hypertext Reference的缩写，意思是超文本引用。
target	用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

如果是外部链接，需要写详细地址： http:// www.baidu.com。
如果是内部链接，直接写内部页面的名称即可：< a href="index.html"> 首页 </a >。
如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”，即href="#"，表示该链接暂时为一个空链接。
不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
a标签，默认鼠标放上去文字会变红色。

锚点定位：

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

使用 <a href=#id名> 链接文本 </a> 创建链接文本。
使用相应的id名标注跳转目标位置。

比如：点击a，就会跳到h3

<a href="#movie">2 点击演艺经历</a>
<h3 id="movie">演艺经历</h3>

base 标签

<base target="_blank" />

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

特殊字符标签：  > <

一些特殊的符号，我们再html 里面很难或者不方便直接使用，我们此时可以使用下面的替代代码。

是以运算符&开头,以分号运算符;结尾。
他们不是标签，而是符号。
HTML 中不能使用大于号和小于号特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用特殊字符。
虽然有很多，但是我们平时用的比较较少，大家重点记住空格： ，大于：<，小于：>就可以了，剩下的回来查阅。
nbsp全称Non-breaking Space，不间断空格的意思，lt是 less than 小于的意思，gt是 greater than 大于的意思。

注释标签

在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

语法格式：

<!-- 注释语句 -->

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

快捷键是：ctrl + / 或者 ctrl +shift + /

列表标签

① 无序列表 ul

ul 全称 unorder list，是无序列表的意思，无序列表的各个列表项之间没有顺序级别之分，是并列的，其基本语法格式如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
<li>与</li>之间相当于一个容器，可以容纳所有元素。
无序列表会带有自己样式属性，放下那个样式，一会让CSS来！

② 有序列表 ol

ol 全称 order list，是有序列表的意思。效果如下：

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

所有特性基本与ul 一致，但是实际工作中，较少用 ol 。

③ 自定义列表

dl 全称 definition list，意思是定义列表。
dt 是 definition title，意思是定义标题。
dd 是 definition description，意思是定义描述。

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<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

在HTML网页中，要想创建表格，就需要使用表格相关的标签。

table 是表格的意思。
tr 全称是 table row，意思是表格的一行。
td 全称是 table data cell，意思是表格数据单元格。

① 创建表格

<!-- table -->
<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
  <caption>我是表格标题</caption>  <!-- caption是文字、字幕的意思 -->
  <thead>  <!-- 头部 -->
    <tr>  
      <th>姓名</th> 
      <th>性别</th>
      <th>电话</th>
    </tr>
  </thead>
  
  <tbody>  <!-- 主体 -->
    <tr>
      <td>小王</td>
      <td>女</td>
      <td>110</td>
    </tr>
    <tr>
      <td>小明</td>
      <td>男</td>
      <td>120</td>
    </tr>   
  </tbody>

  <tfoot>  <!-- 尾部 -->
  
  </tfoot>
</table>

要深刻体会表格、行、单元格他们的构成。在上面的语法中包含基本的三对HTML标签，分别为 table、tr、td，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释：

一个完整的表格有表格标签（table），行标签（tr），单元格标签（td）组成，没有列的标签
tr标签用于定义表格中的行，必须嵌套在 table标签中。
td 用于定义表格中的单元格，必须嵌套在<tr> </tr>标签中。
字母 td 指表格数据（table data cell），即数据单元格的数据，它就像一个容器，可以容纳所有的元素。

② 表格属性

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

通过表格的cellspacing="0",将单元格与单元格之间的距离设置为0，但是两个单元格之间的边框会出现重叠，从而使边框变粗，可以通过如下css属性将相邻边框合并在一起。

// 默认边框会被分开，collapse表示边框会合并为一个单一的边框
table { border-collapse: collapse; }

③ 表头单元格标签：th

th 的全称是 table header，是表头的意思。

一般表头单元格位于表格的第一行或第一列，并且文本加粗居中，只需用表头标签<th> </th>替代相应的单元格标签<td> </td>即可。th 也是一个单元格只不过和普通的 td 单元格不一样，它会让自己里面的文字居中且加粗。

④ 表格标题：<caption> </caption>

<table>
   <caption>我是表格标题</caption>
</table>

caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。
caption 标签必须紧随 table 标签之后。
这个标签只存在表格里面才有意义。

效果图：

⑤ 合并单元格

跨行合并：rowspan
跨列合并：colspan

将多个单元格合并的时候，就会有多余的单元格，把多于的单元格删除，例如把 3个 td 合并成一个，那就多余了2个，需要删除，删除的时候保留左、上的单元格，然后在保留的单元格里面写合并代码。

合并单元格三步曲：

先确定是跨行还是跨列合并
根据先上后下先左后右的原则找到目标单元格，然后写上合并方式、要合并的单元格数量，比如：

 <!-- 代表的是跨列合并，把3个合并为1个 -->
 <td colspan="3">合并之后的单元格</td>

删除多余的单元格

表单 form

现实中的表单，类似我们去银行办理信用卡填写的单子，如下图：

表单目的是为了收集用户信息。在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时也需要表单。

在HTML中，一个完整的表单通常由表单域、提示信息、表单控件三部分构成。

① 表单域

在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

常用属性：

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
method	get/post	用于设置表单数据的提交方式，其取值为get或post。
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单。

每个表单都应该有自己表单域。我们现在做页面，不写看不到效果，但是如果后面学 ajax 后台交互的时候，必须需要 form表单域。

② 提示信息

一个表单中通常还需要包含一些说明性的文字，用于提示用户进行填写和操作，label标签用于绑定一个表单控件，当点击label标签的时候，被绑定的表单控件就会获得输入焦点。

如何绑定元素呢？

第一种用法：用label直接包裹表单控件

<label> 用户名： <input type="radio" name="usename" value="请输入用户名">   </label>

第二种用法：for="表单控件的id值"

<label for="man">男</label>
<input type="radio" name="sex" id="man">

③ 表单控件

表单控件包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等，下面讲的input控件、label标签、textarea控件、下拉菜单都属于表单控件。

<input type="属性值" value="你好" />

常用属性：

在html5中，input标签也新增了许多类型，当type="number"时，可以设置最大值最小值，当type="tel"时，可以设置正则规则。

<!-- max、min:允许的最大值最小值 -->
<input type="number" max="100" min="0" value="0" id="score"><br>

<!-- pattern:正则规则 -->
<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>

1. type属性

这个属性通过改变值，可以决定了你属于哪种input表单控件。
比如 type = 'text' 就表示文本框，可以做用户名、昵称等。
比如 type = 'password' 就是表示密码框，用户输入的内容是不可见的。

用户名: <input type="text" /> 
密  码：<input type="password" />

2. value属性值

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

value表示控件的文本值，有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置默认值。

3. name属性

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

name表示表单控件的名字，这样后台可以通过这个name属性找到这个表单控件，从而获取表单控件的值，表单域中的表单控件很多，name主要作用就是用于区别不同的表单控件。

name属性后面的值，是我们自己定义的。
radio 如果是一组，我们必须给他们命名相同的 name ，这样就可以多个选其中的一个啦

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

name属性，我们现在用的较少，但是当我们学ajax 和后台的时候，就是必须的。

4. checked属性

表示默认选中状态，较常见于单选按钮和复选按钮。

性    别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女

上面这个，表示就默认选中了男这个单选按钮。

textarea控件(文本域)

语法：

<textarea >
  文本内容文本内容文本内容
</textarea>

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

文本框和文本域的区别：

表单	名称	区别	默认值显示	用于场景
input type="text"	文本框	只能显示一行文本	单标签，通过value显示默认值	用户名、昵称、密码等
textarea	文本域	可以显示多行文本	双标签，默认值写到标签中间	留言板

select下拉列表

如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表。

语法：

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  <option>选项4</option>
  ...
</select>

<select> 中至少包含一对option，在option 中定义selected =" selected "时，当前项即为默认选中项，但是我们实际开发会用的比较少。

四. HTML5

① 什么是HTML5

HTML5 定义了HTML标准的最新版本，定义了新的标签、特性和属性，是对HTML的第五次重大修改，号称下一代的 HTML，HTML5拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript，这也是广义上的HTML5。
HTML5 拓展了哪些内容
- 语义化标签
- 本地存储
- 兼容特性
- 2D、3D
- 动画、过渡
- CSS3 特性
- 性能与集成
HTML5绝大多数新的属性，都已经被浏览器所支持。

② H5新增语义化标签

语义化就是看名字就知道这个标签是干什么的，HTML5新增了许多语义化标签，如下：

<header> 语义：定义页面的头部、页眉</header>
<nav> 语义：定义导航栏 </nav> 
<article> 语义：定义文章 </article>
<section> 语义：定义区域 </section>
<aside> 语义：定义其所处内容之外的内容、侧边 </aside>
<footer> 语义：定义 页面底部、页脚 </footer>

datalist 数据提示列表标签

datalist 标签定义提示数据列表，使用 datalist 搭配 input 可以实现输入的时候有提示的效果，使用list="datalist的id值"进行匹配，如下：

<input type="text" value="输入明星" list="star"/>
<datalist id="star">
    <option>刘德华</option>
    <option>刘若英</option>
    <option>刘晓庆</option>
    <option>郭富城</option>
    <option>张学友</option>
    <option>郭郭</option>
</datalist>

fieldset 元素分组标签

fieldset 元素可将表单内的相关元素分组，和 legend 搭配使用。
legend是图例、说明、刻印文字的意思。

<fieldset>
    <legend>用户登录</legend>
    用户名: <input type="text">
    <br /><br />
    密　码: <input type="password">
</fieldset>

使用语义化标签的注意：

语义化标签主要针对搜索引擎，在移动端支持的更好
在 IE9 浏览器中，需要把语义化标签都转换为块级元素，所以上面的语义化标签其实都是块级元素

③ H5新增的input标签

新增的表单属性：

autocomplete是啥意思呢？就是光标闪动的时候会自动提示以前提交成功的值，如下：

autocomplete 和 datalist 不一样，autocomplete是自动显示以前提交成功的值，datalist是输入的时候根据输入文字有提示的效果。

④ 综合案例