SS1 简介
超文本标记语言（HyperText Markup Language，HTML）是一种用于创建网页的标准标记语言（一套标记标签markup tag）
可以使用HTML来建立自己的Web站点，HTML运行在浏览器上，由浏览器来进行解析
HTML文档也可叫做web页面
一、HTML实例
PS：对于中文网页需要使用<meta charset = "utf-8">声明编码，否则会出现乱码，有些浏览器会（如360）设置为GBK编码，则需要使用<meta charset = "gbk">声明编码
HTML文件的后缀名可以是“.html”和“.htm”
1、实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>运行结果：
2、实例解析
<!DOCTYPE html>：元素声明为html5文档
<html>：页面的根元素
<head>：元素包含了文档的元数据（meta）用来定义网页的编码格式为utf-8
<title>：元素描述了文档的标题
<body>：元素包含了可见的页面内容
<h1>：元素定义一个大标题
<p>：元素定义一个段落
PS：在浏览器界面上按下F12按键可以开始调试模式，看到组成标签
二、HTML标签和元素
1、HTML标签
HTML标签通常是成对出现的，第一个标签是开始标签（开放标签），第二个标签是结束标签（闭合标签）
实例：
<标签>内容<标签>2、HTML元素
HTML元素通常与标签描述的是同样的意思
严格来说，HTML元素包括开放标签和闭合标签
实例：
<p>这是一个段落。</p>PS：web浏览器可根据HTML文件中的标签来决定怎么展示一个HTML的页面给用户
三、HTML网页结构
最简单的结构：
<html>
<head>
<title>页面标题</title>
</head>
<body>
<p>我是页面内容</p>
</body>
</html>运行结果：
四、<!DOCTYPE>声明
doctype声明有助浏览器中正确显示页面，在此声明中需要声明正确的HTML版本
doctype声明不区分大小，以下表述都可以;
<!DOCTYPE HTML>
<!DOCTYPE html>
<!doctype html>
<!Doctype Html>
通用声明
1、HTML5
<!DOCTYPE HTML>2、HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">3、XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">五、中文编码
目前在大部分浏览器，直接输出中文会出现乱码的情况，所以我们需要在<head>标签内使用<meta charset = "UTF-8">
六、编辑器推荐
专业的HTML编辑器：
Notepad++、Sublime Text、VScode
SS2 HTML 基础
一、HTML标题
实例1：
<body>
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
</body>
执行结果：
二、HTML段落
段落是用标签<p>来定义的
<body>
<p>这是段落1</p>
<p>这是段落2</p>
<p>这是段落3</p>
</body>执行结果：
三、HTML链接
链接是用标签<a>来定义的
<body>
<a href="http://www.runoob.com">这是一个链接，使用了href属性</a>
</body>执行结果：
四、HTML图像
HTML图像使用标签<img>来定义
实例：
<body>
<img src=".\images\Logo.jpg" width="200" height="200">
</body>执行结果：
SS3 HTML元素
一、HTML元素语法
1、HTML元素由起始标签开始，以闭合标签结束
2、元素内容是起始标签和结束标签中间的内容
3、有些HTML元素具有空内容，空元素可在起始标签中关闭
4、大多数HTML标签中可拥有属性
二、包含三个元素的实例
<!DOCTYPE HTML>
<html>
<body>
<img src=".\images\Logo.jpg" width="200" height="200">
</body>
</html>实例解析：
<img>元素：定义HTML文档中的一个图片，是一个空元素，在开始标签中结束
<body>元素：定义了HTML文档的主体，开始标签<body>和结束标签</body>，元素内容是另一个HTML元素<img>
<html>元素：定义了整个HTML文档，开始标签<html>和结束标签</html>，元素内容是另一个HTML元素<body>
PS：即使忘记了结束标签，大多数浏览器也会正常显示，因为关闭标签是可选的（但可能会产生不可预料的结果或错误）
三、空元素
空元素是在开始标签中关闭的，例如<br>用来定义换行
虽然<br>可以在任何浏览器中正常使用，但是使用<br/>时更长远的保障（因为<br>时没有关闭的空元素）
PS：标签对大小写不敏感，但是在万维网联盟（W3C）在HTML4中推荐使用小写，在未来的(X)HTML版本中强制使用小写
SS4 HTML 属性
1、属性可以在元素中添加附加信息
2、一般描述于开始标签，以名字/值对的形式出现，例如：
<img src=".\images\Logo.jpg" width="200" height="200">3、HTML属性值应始终在引号中（双引号或单引号），某些情况下，如果属性值含有双引号，则必须使用单引号将属性值括起来
例如：name='John "ShotGun" Nelson'
4、元素标签参考手册（菜鸟教程）：https://www.runoob.com/tags/html-reference.html
5、适用于大多数的HTML元素的属性：
- class：为html元素定义一个或多个类名（类名从样式文件中引入）
- id：定义元素唯一的id
- style：定义元素的行内样式（inline style）
- title：描述了元素额外的信息（作为工具条使用）
SS5 HTML标题、水平线、注释、段落
一、标题
1）标题是通过<h1>-<h6>标签进行定义的，<h1>是最大的标题，<h6>是最小的标题
2）实例
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
运行结果：
3）标题的重要性
要确保将HTML标题标签仅用于标题，不仅仅是为了生成粗体或大号字体的文本而使用标题标签
搜索引擎使用标题为您的网页和结构内容进行编制索引
用户可以通过标题来快速浏览你的网页，所以用标题来呈现文档结构是很重要的
二、水平线
1）用<hr>标签在网页中创建水平线
2）实例
<h1>我是标题1</h1>
<hr>
<h2>我是标题2</h2>
<hr>
<h3>我是标题3</h3>执行结果：
三、HTML注释
1、将注释插入代码中，增加代码的可读性，浏览器对注释会予以忽略
2、代码格式：<!--注释-->
3、实例：
<h1>我是标题1</h1><!--这是一个注释-->
<hr>执行结果：
四、段落
1、使用标签<p>实现，使用时别忘了结束标签</p>
2、折行使用标签<br/>实现，没有结束标签
PS：</p>是块级元素，<br/>是空元素，所以<br/>不需要结束标签
3、HTML输出提醒，屏幕的大小以及窗口的调整都会使得相同的HTML代码显示出不同的结果
所以在HTML中，不能通过增加多余的空行和空格来改变输出的结果，浏览器会自动地删除多余的空行或空格
4、实例：
<p>
春眠不觉晓
处处闻啼鸟
夜来风雨声
花落知多少
</p>执行结果：（省略了源代码中的空白字符，包括空格空行）
SS6 文本格式化
一、HTML文本化格式标签
1、<b>
1）定义粗体文本，根据HTML5的规范，应当在没有其它标记适合它时使用<b>
2）HTML5规范说明：
- 标题：用<h1>-<h6>
- 强调：用<em>
- 重要的文本：用<strong>
- 被标记的高亮文本：用<mark>
PS：可以使用CSS中的“font-weight”来设置粗体属性
3）<b>标签支持HTML全局属性和HTML事件属性
2、<em>
1）短语标签，用来呈现被强调文本
2）如果只是为了达到某种视觉效果而想使用这个标签时，建议您考虑使用CSS，会取得更丰富的效果
3）所有短语标签：
- 被强调的文本：<em>
- 定义重要的文本：<strong>
- 定义一个定义项目：<dfn>
- 计算机代码文本：<code>
- 样本文本：<samp>
- 键盘文本：<kbd>（表示从键盘上键入的，经常用在与计算机相关的手册中）
- 定义变量：<var>（可将此标签与<pre>及<code>搭配使用）
4）<em>标签支持HTML全局属性和HTML事件属性
3、<i>
1）用来定义斜体文本
2）在使用标签<i>之前，应优先考虑使用以下标签
<em>、<strong>、<mark>、<cite>（表示作品标题时使用）、<dfn>
3）<i>标签支持HTML全局属性和HTML事件属性
4、<small>
1）定义小型文本
2）<small>标签支持HTML全局属性和HTML事件属性
5、<strong>
1）短语标签，用来定义计算机程序的重要文本
2）如果只是为了达到某种视觉效果而使用这个标签的话，建议使用 CSS ，这样可能会取得更丰富的效果
3）<strong>标签支持HTML全局属性和HTML事件属性
6、<sub>
1）定义下标文本，会显示在当前字符高度的一半为基准线的下方
2）<sub>标签支持HTML全局属性和HTML事件属性
7、<sup>
1）定义上标文本，会显示在当前字符高度的一半为基准线的上方
2）<sup>标签支持HTML全局属性和HTML事件属性
8、<ins>
1）定义已被插入文档中的文本
2）可与<del>搭配使用，浏览器通常会在已删除的文本上添加一条删除线，给插入的文本添加下划线
3）属性：
- cite：URL（统一资源定位符，互联网上每一个文件都有唯一的URL），该文档解释了文本被插入的原因，该属性在普通的浏览器上没有视觉效果
- datetime：规定文本被插入的时间和日期，语法：<ins datetime="YYYY-MM-DDThh:mm:ssTZD">
YYYY - 年（例如 2009）
MM - 月（例如 01，表示一月份）
DD - 月中的日（例如 08）
T - 必需的分隔符
hh - 小时（例如 22，表示下午 10.00）
mm - 分钟（例如 55）
ss - 秒（例如 03）
TZD - 时区标志符（Z 表示祖鲁，同时也是格林威治时间）
4）<ins>标签支持HTML全局属性和HTML事件属性
9、<del>
属性相同于<ins>
10、实例
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>test.com</title>
</head>
<body>
<p>1、使用b标签的文本：<b>粗体文本</b></p>
<p>2、使用em标签的文本：<em>强调文本</em></p>
<p>3、使用i标签的文本：<i>斜体文本</i></p>
<p>4、使用small标签的文本：<small>小型文本</small></p>
<p>5、使用strong标签的文本：<strong>计算机程序的重要文本</strong></p>
<p>6、使用sub标签的文本：<sub>下标文本</sub></p>
<p>7、使用sup标签的文本：<sup>上标文本</sup></p>
<p>8、使用ins标签的文本：<ins>已被插入文档中的文本</ins></p>
<p>9、使用del标签的文本：<del>删除文本</del></p>
</body>
</html>执行结果：
二、HTML“计算机输出”标签
1、<code>
1）短语标签，用来定义计算机代码
2）如果只是为了达到某种视觉效果而使用这个标签的话，建议使用 CSS ，这样可能会取得更丰富的效果
3）<code>标签支持HTML全局属性和HTML事件属性
2、<samp>
1）短语标签，用来定义计算机程序的样本文本
2）<samp>标签支持HTML全局属性和HTML事件属性
3、<var>
1）短语标签，用来定义变量
2）<var>标签支持HTML全局属性和HTML事件属性
4、<pre>
1）定义预格式化的文本
2）被包围在<pre>标签中的文本通常会保留空白字符（空格、换行），文本也会呈现等宽字体
3）<pre>标签支持HTML全局属性和HTML事件属性
5、实例
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>test.com</title>
</head>
<body>
<p>1、使用code标签的文本：<code>计算机代码</code></p>
<p>2、使用samp标签的文本：<samp>计算机程序的样本文本</samp></p>
<p>3、使用var标签的文本：<var>定义变量</var></p>
<p>4、使用pre标签的文本：<pre>预格式化文本第一行
预格式化文本第二行
预格式化文本第三行
</pre></p>
</body>
</html>
执行结果：
三、HTML引文、引用、及标签定义
1、<abbr>
1）定义缩写，用来表示一个缩写词或者首字母缩略词
2）通过对缩写词语进行标记，就能够为浏览器、拼写检查程序、翻译系统、以及搜索引擎分读器提供有效信息
3）在某些浏览器中，当您把鼠标移至带有 <abbr> 标签的缩写词/首字母缩略词上时，<abbr> 标签的 title 属性可被用来展示缩写词/首字母缩略词的完整版本
4）<abbr>标签支持HTML全局属性和HTML事件属性
<p>使用abbr标签的文本：<abbr title="World Wide Web">WWW</abbr></p>执行结果：
2、<address>
1）定义文档所有者的所有信息
2）如果<address>标签位于<body>标签的内部，则它表示该文档所有者的有关信息
3）如果<address>标签位于<article>标签的内部，则它表示该文章所有者的有关信息
4）元素<address>通常位于元素<footer>的元素内容中
5）HTML 4.01 不支持 <article> 标签，因此在 HTML 4.01 中 <address> 标签总是定义文档的作者/所有者的联系信息
6）<address>标签支持HTML全局属性和HTML事件属性
<p>使用address标签的文本：<br/>
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</p>执行结果：
3、<bdo>
1）用来覆盖默认的文本方向
2）dir属性：必需的，用来定义<bdo>标签内的文本方向（ltr、rtl）
3）<bdo>标签支持HTML全局属性和HTML事件属性
<p>使用标签bdo的文本：（反着读）<br/>
<bdo dir="rtl">
属性为rtl的文本
</bdo>
</p>执行结果：
4、<blockquote>
1）定义摘自另外一个源的块引用
2）浏览器通常会对<blockquote>元素进行缩进
3）如果标记不需要段落分隔的短引用，请使用<q>
4）在 HTML 4.01 中，<blockquote> 标签定义一段长引用
5）属性：cite（说明引用来源，即网址）
6）<blockquote>标签支持HTML全局属性和HTML事件属性
<p>使用标签blockquote的文本：<br/>
<blockquote dir="ltr" cite="https://www.w3.org/Consortium/">
The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. Led by Web inventor and Director Tim Berners-Lee and CEO Jeffrey Jaffe, W3C's mission is to lead the Web to its full potential. Contact W3C for more information.
</blockquote>
</p>执行结果：
5、<q>
1）定义短引用
2）浏览器一般会在这个引用的周围添加引号
3）属性：cite（说明引用来源，即网址）
4）<q>标签支持HTML全局属性和HTML事件属性
<p>使用标签q的文本：<br/>
<q dir="ltr" cite="https://www.w3.org/Consortium/">
ABOUT W3C
</q>
</p>执行结果：
6、<cite>
1）定义作品标题（书籍、电影名、绘画、雕塑等）
2）在 HTML 4.01 中，<cite> 标签定义一个引用
3）<cite>标签支持HTML全局属性和HTML事件属性
<img src="./images/sunwukong.jpg">
<p>
<cite>
孙悟空
</cite>
</p>执行结果：
SS7 HTML链接
一、概述
1、HTML使用超链接与网络上的另一个文档相连，点击链接可以跳转到目标文档
2、使用标签<a>来设置超文本链接，超链接可以是一句话、一个词、一幅画
3、标签<a>使用了href属性来说明链接的地址
4、默认情况下，链接文本会以以下形式出现在浏览器中：
- 一个未访问过的链接为蓝色字体并带有下划线
- 访问过的显示为紫色并带有下划线
- 点击链接时，链接显示为红色并带有下划线
- PS：如果连接设置了CSS样式，则根据CSS样式来定
二、链接语法：
<a href="url">超链接</a>
三、属性
1）target属性：
可以定义被链接的文档被调出后显示在何处，属性值为"_blank"时会在新窗口打开文档，属性为"_top"时会覆盖显示链接文档
可能的值：_blank（在新窗口打开被链接文档）、_parent（在父框架中打开被链接文档）、_self（在相同的框架中打开被链接文档）、_top（在整个窗口中打开被链接文档）、framename（在指定的框架中打开被链接文档）
2）id属性
id属性可用于创建在一个HTML文档书签标记
提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的
在HTML文档中插入ID：
<a id="tips">有用的提示部分</a>
在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：
<a href="#tips">访问有用的提示部分</a>
或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：
<a href="https://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a>
3）HTML5 的download属性
点击a标签元素下载download属性中的内容（下载链接的地址）
例子：
<a href="./images/sunwukong.jpg" download="./images/sunwukong.jpg">
点击
</a>
<p>
下载孙悟空照片
</p>执行结果：
4、href属性
1）用于指定超链接目标的URL，如果没有指定href，a标签将不再是一个链接
2）HTML5中，如果没有指定href属性，则a标签将是一个指定占位符的超链接
3）语法：<a href="URL">超链接</a>
4）URL的可能值有：
- 绝对URL：指向某一个站点（href="http://www.baidu.com/"）
- 相对URL：指向站内的某一个文件（href="index.htm"）
- 锚：指向页面中的锚（href="#top "）
5、hreflang属性
1）用于指定被连接文档的语言
2）只有指定了href此属性才能起作用
3）与属性lang不同的是，hreflang不会指定元素内容所使用的语言，仅指定被连接文档的语言
4）语法：<a href="http://www.baidu.com/" hreflang="language_code">
5）属性值参考：https://www.w3school.com.cn/tags/html_ref_language_codes.asp
6、media属性
1）规定URL的媒介类型，默认值：all，仅在href属性存在时使用
2）该属性可接受多个值，多个值用and、not、,（or）连接
3）值请参考：https://www.runoob.com/tags/att-a-media.html
4）例子：
<a href="/tags/att-a-media.html?output=print" media="print and (resolution:300dpi)">可打印的媒体属性页</a>7、其他属性
rel（HTML5不支持，指定当前文档与被链接文档之间的关系）
charset（HTML5不支持，规定目标URL的字符编码）
coords（HTML5不支持，规定URL的坐标）
name（HTML5不支持，规定锚的名称）
shape（HTML5不支持，规定链接的形状）
四、注意
请始终将正斜杠添加到子文件夹。假如这样书写链接：href="https://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="https://www.runoob.com/html/"
五、例子
1）使用图片链接代码：
<a href="https://www.runoob.com/" target="_blank">
<img src="./images/sunwukong.jpg">
</a>2）使用书签代码：
<a href="#SWK">
<img src="./images/sunwukong.jpg">
</a>
<p>
<cite id="SWK">
孙悟空
</cite>
</p>PS：在SWK前加#的目的是实现页内瞄点（点击此链接后，会调到当前页面的指定书签处）
3）覆盖当前页面跳到链接处代码：
<a href="https://www.runoob.com/" target="_top">
<img src="./images/sunwukong.jpg">
</a>4）创建电子邮件链接代码：
<a href="mailto:981517604@qq.com?Subject=Hello%20luoluo&body=You20%are20%invited20%to20%a20%summer20%party">
发送邮件给落落
</a>PS：Subject的值为邮件主题，body为内容，“%20”为单词分隔符，用20%可保证浏览器正常显示
SS8 HTML头部
一、HTML <head>元素
1、<head>元素包含了所有头部标签元素
2、可以在<head>元素中插入脚本（script）、样式文件（CSS）及各种media信息
3、可以添加在头部的标签有：
<title>、<style>、<meda>、<link>、<script>、<noscript>、<base>
二、<title>
1、定义了不同文档的标题
2、在HTML/XHTML文档中必需的
3、title元素的用处：
- 定义了浏览器工具栏的标题
- 当网页添加到收藏夹时，显示在收藏夹中的标题
- 显示在搜索引擎结果页面的标题
三、<base>
1、base标签规定的整个页面的默认地址和默认目标
2、默认情况下，浏览器根据URL提取相应的元素来填写相对URL中的空白，但是使用base标签之后，浏览器将不再使用当前文档的URL，而是使用指定的基础URL来解析所有的相对URL
3、在HTML中，<base>没有结束标签。在XHTML中，<base>标签必须被正确地关闭
4、必需的属性：href；可选的属性：target【_blank（在新窗口打开被链接文档）、_parent（在父框架中打开被链接文档）、_self（在相同的框架中打开被链接文档）、_top（在整个窗口中打开被链接文档）、framename（在指定的框架中打开被链接文档）】
5、实例：
PS：要在网页上显示标签，可使用<xmp></xmp>将其包围可实现目的，或者使用<代替<，使用>代替>（此方法更好）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>test.com</title>
<base href="http://www.baidu.com" hreflang="en" target="_blank">
</head>
<body>
<p>
<a href="s?ie=utf-8&tn=02003390_36_hao_pg&wd=<base>标签" hreflang="en" target="_blank">
点击
</a>
进入百度搜索<base>标签
</p>
</body>
</html>点击后结果：
四、<link>
1、<link>定义了文档与外部资源的联系，通常链接到样式表
2、在HTML中，<link>没有结束标签；在XHTML中，<link>标签必须被正确地关闭
3、<link>标签只能出现在<head>元素中，但是可以出现多次
4、属性：
- charset：HTML5不支持，规定被链接文档的字符编码方式
- href：规定被连接文档的位置（可以是绝对URL，也可以是相对URL）
- hreflang：规定被链接文档中的文本语言
- media：规定链接文档将被显示在什么设备上，默认为screen（链接屏幕）
- rel：规定当前文档与被链接文档的关系
- rev：HTML5不支持，规定被链接文档与当前文档的关系（相反于rel）
- sizes：规定被链接文档的尺寸，仅适用于rel="icon"
- target：规定在哪个窗口或框架中打开被链接文档，_blank（在新窗口打开被链接文档）、_parent（在父框架中打开被链接文档）、_self（在相同的框架中打开被链接文档）、_top（在整个窗口中打开被链接文档）、framename（在指定的框架中打开被链接文档）
- type：规定被链接文档的MIME类型，最常见的MIME类型是"text/css"，该类型描述样式表
五、<style>
1、用于为HTML文档定义样式信息，可以规定在浏览器中如何让呈现HTML文档
2、type属性是必须的，有唯一的值"text/css"
3、该标签只能位于<head>元素中
4、链接外部样式表使用<link>标签
5、media属性：规定此样式将应用到哪个媒介类型上，所有主流浏览器都支持"screen"、"print"、"all"值
5、例子：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>test.com</title>
<style type="text/css">
h1 {color: blueviolet}
p {color:chocolate;}
</style>
<base href="http://www.baidu.com" hreflang="en" target="_blank">
</head>
<body>
<h1>被<style>定义过的标题1</h1>
<p>
<a href="s?ie=utf-8&tn=02003390_36_hao_pg&wd=<base>标签" hreflang="en" target="_blank">
点击
</a>
进入百度搜索<base>标签
</p>
</body>
</html>
执行结果：
六、<meta>
1、提供了元数据，比如针对搜索引擎和更新频度的描述和关键词，不显示在浏览器上，但是会被浏览器解析
2、该标签的属性定义了与文档相关联名称/值对
3、在HTML中，<meta>没有结束符；在XHTML中，<meta>必须被正确地关闭
4、<meta>必须位于<head>元素内部
5、属性：
- name属性：可选属性，提供了名称/值对中的名称，HTML和XHTML都没有预先定义的<meta>名称，通常可以自由使用对自己和源文档的读者具有意义的名称。"keyword"是经常被用到的名称，它所对应的content是一组关键字，在搜索引擎遇到这些关键字时，会用这些关键字对文档进行分类，例如：（如果没有提供name属性，则名称/值对中的名称会采用http-equiv的值）
<meta name="keywords" content="HTML,CSS,JavaScript"- http-equiv属性：提供了名称/值对中的名称，并指示服务器在发送实际文档之前先在MIME 文档头部包含名称/值对并传送给浏览器。当服务器像浏览器发送文档时，会先发送许多名称/值对给浏览器，但是发送的这些名称/值对中至少包含一个：content-type:text/html这将告诉浏览器准备接收一个html文档，使用带有http-equiv属性的<meta>标签，服务器将把名称/值对发送给浏览器的头部内容
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">
<!--送到浏览器的头部包含content-type:text/html，charset:iso-8859-1，expires:31 Dec 2008-->- content属性：该属性提供了名称/值对中的值，可以是任何有效的字符串，content属性是始终要和name或http-equiv属性一起用
- scheme属性用于指定要用来翻译属性值的方案，此方案应该在 由 <head> 标签的 profile 属性指定 的概况文件中进行了定义
SS9 HTML CSS
CSS（Cascading Style Sheets）用于渲染HTML元素标签的样式
一、CSS添加到HTML中的方法
1、使用style属性做一个没有下划线的链接【内联样式：在HTML元素使用style属性】
<a href="mailto:981517604@qq.com" style="text-decoration-line: none">发送邮件给落落</a>
执行结果：
2、使用添加到<head>部分样式信息对HTML进行格式化【内部样式表：在<head>元素中使用<style>元素来包含CSS】
<!DOCTYPE html>
<html>
<head>
<title>test.com</title>
<style>
h3 {color:blueviolet}
p {color: brown}
</style>
</head>
<body>
<h3>
这是一个标题3
</h3>
<p>
这是一个段落
</p>
</body>
</html>执行结果：
3、链接到外部样式表代码头部【外部引用：使用外部CSS文件】
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>二、内联样式
1、当特殊的样式需要应用到个别元素时，就可以使用内联样式（即在相关的标签中使用该样式），可以包含任何CSS属性
2、实例（如何改变段落边距和背景色）：
<h1 style="background-color:cadetblue;margin-left: 50%">
这是一个标题3
</h1>
<p style="margin-top: 10%;align-content: center">
这是一个段落
</p>
执行结果：
3、style的值：color（字体颜色）、background-color（背景色）、margin-left（左边界距离）、font-family（字体），text-align（文本对齐方式）
三、内部样式表
当单个文件需要特别样式时，可在<head>元素中添加内部样式表
四、外部样式表
当样式需要被应用到很多页面时，外部样式表时最佳选择，这样可以通过一个文件改变整个站点的外观
五、不建议使用的标签和属性
标签：<font>、<center>、<strike>
属性：color、bgcolor
SS10 HTML图像
一、实例
<!DOCTYPE html>
<html>
<head>
<title>test.com</title>
</head>
<body>
<div style="text-align: center;">
<cite style="font-size: 200%;">
孙悟空
</cite>
<br/>
<img src="images/sunwukong.jpg" alt="sunwukong">
</div>
</body>
</html>执行结果：
二、图像标签<img>和源属性src
1、<img>是一个空标签（只含有属性，没有闭合标签）
2、要在页面上显示图像，必须使用src属性，属性值为图像的URL
3、定义图像的语法：<img src="URL" alt="some_text">
4、如果baidu.jpg位于www.baidu.com的images文件夹中，则该图像的URL为"http://www.baidu.com/images/baidu.jpg"
5、实例：
<div style="text-align: center;">
<img src="http://www.runoob.com/images/pulpit.jpg">
</div>
执行结果：
三、Alt属性
1、用来为图像定义一串预备的可替换文本
2、当浏览器无法载入图像时，替换文本可告诉读者她们所失去的信息，此时浏览器将显示这个可替换文本而不是图像
3、实例：
<div style="text-align: center;">
<img src="http://www.runoob.com/images/pupit.jpg" alt="风景图">
</div>
执行结果：
四、设置图像的高度和宽度
1、高度：height；宽度：width
2、属性值默认单位为像素
3、指定图像的高度和宽度是一个好习惯，指定高度和宽度页面加载时就会保留制定尺寸，否则加载时可能会破坏HTML的整体布局
五、两条提示
1、假如一个HTML包含十多个图像，为了显示这个页面需要加载11个文件，而加载图片是需要时间的，所要慎用图片
2、如果浏览器不能正确显示图片时，浏览器就会显示一张破碎的图片
3、添加动图和添加图片的语法是一样的
六、几个例子
1、如何在文字中排列图片
<p>这是一些文本<img src="images/smiley.gif" alt="Smiley face">这是一些文本</p>
<h3>-----分割线-----</h3>
<p>这是一些文本<img src="images/smiley.gif" alt="Smiley face">这是一些文本</p>执行结果：
2、如何使图片浮动在段落的左边和右边
<div style="width: 50%;height: 50%;text-align: center;">
<p>
<img src="images/smiley.gif" alt="Smiley face" style="float: left">这是一些文本
</p>
<h3>-----分割线-----</h3>
<p>
<img src="images/smiley.gif" alt="Smiley face" style="float: right">这是一些文本
</p>
</div>
执行结果：
3、如何创建带有点击区域的图像地图
<img src="images/planets.jpg" width="146" height="126" alt="Planets photo" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="images/sun.jpg">
<area shape="circle" coords="90,58,3" href="images/merglobe.jpg">
<area shape="circle" coords="124,58,8" href="images/venglobe.jpg">
</map>
七、涉及到的标签
1、<img>
1）必需的属性：src、alt
2）从技术上讲，图像并不会插入HTML页面，而是链接在该页面上。<img>标签的作用是为被引用的图像创建占位符
3）通过<a>标签中嵌套<img>标签，可将链接到另一个文档
4）HTML5中不支持的属性：alian、border、hspace、longdesc、vspace
5）HTML中<img>没有结束标签，但是在XHTML中<img>标签必须被正确的关闭
6）属性：
alt
- 指定图像的替代文本
- 当浏览器显示不出图像时（src错误、浏览器禁用图像、用户使用的时屏幕阅读器）等，浏览器显示替代文本信息（如果需要为图像创建工具提示信息，请使用title属性）
- 如果图像在<a>元素中，则使用alt属性描述目标链接
- 如果图像仅供装饰，请使用alt=""
crossorigin
- 设置图像的跨域属性
- 值有：anonymous、use-credentials
height：规定图像的高度
width：规定图像的宽度
PS：最不要使用以上两种属性来缩放图像，正确的做法是用图像处理如那件处理好图像之后再使用
在HTML4.01中，高度可为像素或百分比，在HTML5中，只能为像素
ismap
- 此属性是一个布尔属性，将图像定义为服务器端图像映射（带有可点击区域的图像）
- 当你点击一个服务器端图像映射时，点击坐标会以URL查询字符串的形式发送到服务器
- 只有当URL属于带有效href属性的<a>元素时，才允许使用该属性
- 在 XHTML 中，禁止属性最小化，ismap 属性必须定义为 <img ismap="ismap" />
- 语法：<img ismap>
usemap
- usemap属性将图像定义为客户端图像映射
- usemap属性与<map>标签的name或id属性相关联，以建立<img>和<map>之间的关系
- 只有当<img>不属于<a>或<button>的后代时才允许使用该属性
- 语法：<img usemap="#mapname"
- 值为一个 hash 字符 ("#") 加上要使用的 <map> 元素的 name 或 id
2、<map>
1）<map>用于客户端图像映射
2）<img>中的usemap属性可引用<map>标签中的name或id（取决于浏览器）
3）在 HTML5 中, 如果 id 属性在<map> 标签中指定, 则你必须同样指定 name 属性
4）在 XHTML 中，name 属性已经废弃，使用 id 属性替换它
5）name是<map>的必需属性
3、<area>
1）<area>定义图像内部映射的区域，始终嵌套在<map>元素的内部
2）在HTML中，<area>没有结束标签；在XHTML中，<area>标签必须被正确的关闭
3）属性：
alt
- 指定规定区域的替代文本，在图像无法显示时显示
- 如果使用href属性就必须使用alt属性
- 在HTML4.01中alt是必须的。在HTML5中，只有使用了href，alt才是必需的
coords
- 规定区域的x和y坐标
- 与shape属性搭配使用，规定区域的尺寸形状和位置
- 图片左上角的坐标是(0,0)
- shape：rect；coords：x1,y1,x2,y2
- shape：circ；coords：x,y,radius
- shape：poly；coords：x1,y1,x2,y2,...,xn,yn（如果第一个坐标和最后一个坐标不一致，浏览器为了关闭多边形，浏览器必须添加最后一对坐标）
- href：规定区域目标的URL
- hreflang：规定目标URL的语言
- media：规定目标URL是何种设备优化的
- rel：规定当前文档与目标文档URL之间的关系（alternate、author、bookmark、help、license、next、nofollow、noreferrer、prefetch、prev、search、tag）
- shape：规定区域的形状
- target：规定在何处打开目标URL
- type：指定目标URL的MIME类型
PS：MIME类型：描述消息内容类型的因特网标准
SS11 HTML表格
一、概述
1、表格使用<table>标签定义，行使用<tr>标签定义，每行被<td>标签分隔为若干个单元格
2、数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等
3、实例
<table border="1">
<tr>
<td>row1 cell1</td>
<td>row1 cell2</td>
</tr>
<tr>
<td>row2 cell1</td>
<td>row2 cell2</td>
</tr>
</table>
执行结果：
二、表头
1、表头在<tr>标签中使用<th>来定义
2、大多数浏览器会将表头显示为粗体居中的文本
3、实例：
<!DOCTYPE html>
<html>
<head>
<title>test.com</title>
</head>
<body>
<h3>-----垂直显示表头-----</h3>
<table border="1" style="align-self:center; border-width: 6px">
<tr>
<th>表头1</th>
<td>row1 cell1</td>
</tr>
<tr>
<th>表头2</th>
<td>row2 cell1</td>
</tr>
</table>
<h3>-----水平显示表头-----</h3>
<table border="1" style="align-self:center; border-width: 6px">
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>row1 cell1</td>
<td>row1 cell2</td>
</tr>
</table>
</body>
</html>执行结果：
三、<table>
1、<table>标签定义一个HTML表格
2、复杂一点的HTML表格包括<caption>、<col>、<colgroup>、<thead>、<tfoot>、<tbody>
3、在HTML5中，仅支持border属性，并且只允许使用0/1，用来规定该表格是否拥有边框
4、使用了border属性和style属性的<table>标签实例：
<table border="1" style="align-self:center; border-width: 6px">
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>row1 cell1</td>
<td> </td>
</tr>
</table>
执行结果：
四、<th>和<td>
1）定义HTML表格中的表头
2）属性
colspan和rowspan
- 规定表格单元头所横跨的列数和行数
- 语法：<th colspan="number">表示该表头横跨number列
- <th rowspan="number">表示该表头横跨number行
- colspan="0" 告知浏览器使单元格横跨到列组 (colgroup) 的最后一列
- 实例：
<table border="1" style="align-self:center; border-width: 6px"> <tr> <th colspan="3">表头1</th> </tr> <tr> <td>row1 cell1</td> <td>row1 cell2</td> <td>row1 cell3</td> </tr> </table>执行结果：
headers
- 规定与表头相关联的一个或多个表头单元格
- 语法<th headers="header_id1 header_id2"
scope
- 规定表格单元头是否是行、列、行组或列组的头部
五、<caption>
1、定义表格的标题
2、必须直接放在<table>标签之后
3、CSS属性的"text-align"和"caption-side"可设置标题的对齐方式和显示位置
4、实例：
<table border="1" style="align-self:center; border-width: 6px">
<caption style="text-align: center;font-size: 30px">表格标题</caption>
<tr>
<th colspan="2" id="name">表头1</th>
</tr>
<tr>
<th headers="name">row1 cell1</th>
<th headers="name">row1 cell2</th>
</tr>
</table>执行结果：
六、<colgroup>
1、<colgroup>用来对表格中的列进行组合，以便对其进行格式化操作
2、通过使用<colgroup>标签，就可以向整个列应用样式，而不需要重复为每一行或者每个单元格来设置样式
3、在<caption>元素之后，在任何一个<thead>、<tbody>、<tfoot>、<tr>元素之前都能使用<colgrpoup>标签
4、span属性可设置该组横跨的列数
5、实例
<table border="1" style="align-self:center; border-width: 6px">
<caption style="text-align: center;font-size: 30px">表格标题</caption>
<colgroup>
<col span="2" style="background-color: brown">
<col style="background-color: darkgoldenrod">
</colgroup>
<tr>
<th colspan="2">表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>row1 cell1</td>
<td>row1 cell2</td>
<td>row1 cell3</td>
</tr>
</table>
执行结果：
七、<col>
1、<col>用于定义表格列的属性，可以向整列应用样式
2、在HTML5中<col>没有结束标签，在XHTML中，<col>必被正确关闭
3、实例：
<table border="1" style="align-self:center; border-width: 6px">
<caption style="text-align: center;font-size: 30px">表格标题</caption>
<col style="background-color: darkgoldenrod">
<col style="background-color: darkgreen">
<col style="background-color: darkorange">
<tr>
<th colspan="2">表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>row1 cell1</td>
<td>row1 cell2</td>
<td>row1 cell3</td>
</tr>
</table>执行结果：
八、<thead>、<tbody>、<tfoot>
1、<thead>用来定义表格的页眉，<tbody>用来定义表格的主体，<tfoot>用来定义表格的页脚
2、这三个标签应该结合起来使用，通过使用这些标签，使得浏览器有能力独立于页眉和页脚支持滚动，当较长的表格被打印时，保证它可以在每页上都有页眉和页脚部分
3、在使用这三个标签时并不会改变表格的整体布局，不过可以使用CSS来为这些元素定义样式
4、实例：
<!DOCTYPE html>
<html>
<head>
<title>test.com</title>
<style type="text/css">
thead {color: green}
tbody {color: hotpink}
tfoot {color: maroon}
</style>
</head>
<body>
<table border="1" style="border-width: 6px;">
<caption style="text-align: center;font-size: 20px">表格标题</caption>
<tfoot>
<tr>
<th style="width: 50px">ch</th>
<th style="width: 50px">en</th>
</tr>
</tfoot>
<thead>
<tr>
<td>汉语</td>
<td>英语</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>one</td>
</tr>
<tr>
<td>2</td>
<td>two</td>
</tr>
<tr>
<td>3</td>
<td>three</td>
</tr>
</tbody>
</table>
</body>
</html>执行结果：
SS12 HTML列表
html支持有序、无序和定义列表
一、HTML有序列表
1、每个有序列表始于<ol>标签
2、每个列表项始于<li>标签
3、列表项使用数字标记
4、<ol>：
- 使用CSS来设计列表样式
- reversed属性：指定列表倒序，默认倒序最后一位数为1，若指定了start则从start开始倒序（序号可为负数）<ol reversed>（仅对十进制数有效）
- start属性：规定列表开始的序号 <ol start="number">（仅对十进制数有效）
- type属性：规定列表中要使用的标记类型（1：默认，十进制数；a：小写字母的有序列表；A：大写字母的有序列表；i：小写的罗马数字；I：大写的罗马数字）<ol type="1|a|A|i|I">
5、<li>
- 可用在有序列表<ol>、无序列表<ul>和菜单列表<menu>当中
- value属性：可设置当前列表项的序号，之后的列表项从该数字进行排序
6、实例：
<ol reversed start="1" type="1">
<li>这是列表第一个元素</li>
<li>这是列表第二个元素</li>
<li>这是列表第三个元素</li>
<li value="4">这是列表第四个元素</li>
<li>这是列表第五个元素</li>
<li>这是列表第六个元素</li>
</ol>
执行结果：
二、无序列表
1、使用<ul>标签进行定义
2、列表项使用粗体圆点（典型的小黑圆圈）进行标记
3、实例：
<ul>
<li>这是列表第一个元素</li>
<li>这是列表第二个元素</li>
<li>这是列表第三个元素</li>
</ul>
执行结果：
三、自定义列表
1、自定义列表不仅仅是一列项目，而是项目及其注释的组合
2、自定义列表从<dl>标签开始，每个自定义列表项以<dt>开始，每个自定义列表项的定义以<dd>开始
3、实例：
<!DOCTYPE html>
<html>
<head>
<title>test.com</title>
<style>
dt {color:maroon;font-size: 20px}
</style>
</head>
<body>
<dl>
<dt>一班</dt>
<dd>—小明</dd>
<dd>—小红</dd>
<dt>二班</dt>
<dd>—张三</dd>
<dd>—李四</dd>
</dl>
</body>
</html>执行结果：
四、嵌套列表
<ul>
<li>一班</li>
<ul>
<li>小明</li>
<li>小红</li>
<ul>
<li>陕西省</li>
<li>20岁</li>
</ul>
</ul>
<li>二班</li>
</ul>
执行结果：
SS13 HTML区块
HTML元素通常被定义为块级元素和内联元素
块级元素在浏览器显示时通常会以新行来开始或结束，例如：<h1><p><ul><table>
内联元素在浏览器显示时通常不会以新行开始，例如：<b><td><img>
一、HTML <div>元素
1、<div>是块级元素，可用于组合其它HTML元素的容器
2、浏览器会在<div>元素前后拆行显示
3、如果<div>与CSS搭配使用，可用于对大的而内容模块设置样式属性
4、实例：
<body>
<div style="background-color: palegoldenrod">
<h2>这是<div>元素中的一个标题</h2>
<p>这是<div>元素中的一个段落</p>
</div>
</body>
执行结果：
二、HTML <span> 元素
1、<span>元素是内联元素，可以作为文本容器，一般与文档行内元素组合使用
2、没有固定的格式表现，与CSS同时使用时，可为部分文本设置样式属性，即提供了一种将部分文本独立出来的方法
3、实例：
<body>
<p>这是一段使用了<span style="font-size: 20px;color: purple;"><span>标签</span>的文本</p>
</body>
执行结果：
SS14 HTML布局
一、使用<div>布局例子
<!DOCTYPE html>
<html>
<head>
<title>test.com</title>
</head>
<body>
<div id="container" style="width: 1000px;margin: 0 auto">
<div id="header" style="background-color:darkkhaki;height: 100px;text-align:left">
<h1>网页标题</h1>
</div>
<div id="menu" style="width: 150px;height: 400px;background-color: darksalmon;float: left;text-align: left">
<b>菜单</b>
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
</div>
<div id="content" style="width: 850px;height: 400px;background-color: floralwhite;float: left;">
<b>内容在此</b>
</div>
<div style="background-color: dimgray;text-align: center;">
<address>版权@luoluo3664</address>
</div>
</div>
</body>
</html>执行结果：
二、使用<table>标签布局
1、使用HTML <table> 标签是创建布局的一种简单方式
2、大多数站点用<div>或<table>创建多列，CSS用来对元素进行定位，为页面创建背景色以及外观
3、即使可以使用表格来布局，但是设计表格的目的是为了呈现表格化数据，而不是为了布局
4、实例：
<!DOCTYPE html>
<html>
<head>
<title>test.com</title>
</head>
<body>
<table style="width:1000px;margin: 0 auto;">
<tr>
<td colspan="2" style="height: 100px;background-color: burlywood;">
<h1>网页标题</h1>
</td>
</tr>
<tr>
<td style="width: 150px;height: 400px;background-color:lightcoral;vertical-align: top">
<b>菜单</b><br/>HTML<br/>CSS<br/>JavaScript
</td>
<td style="width: 850px;height: 400px;background-color: darkgray;vertical-align: top">
内容
</td>
</tr>
<tr>
<td colspan="2" style="background-color: lightslategray;height: 30px;text-align: center">
<address>版权@luoluo3664</address>
</td>
</tr>
</table>
</body>
</html>执行结果：
三、一些小提示
1、使用CSS的好处是，如果把CSS放到外部样式表中，可以便于网站的维护，通过编辑单一的文件就可以改变整个网站的布局
2、由于创建高级的布局非常消耗时间，使用布局模板是一个快速创建布局的方法，在搜索引擎上可以找到很多免费的网站模板
SS15 HTML表单
一、概述
1、表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等
2、表单使用<form>标签来设置
<form>
input元素
</form>
3、多数情况下被用到的表单标签是输入标签（<input>）
二、<form>标签
1、<form>标签中可包含一个或多个如下标签：<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<fieldset>、<label>
2、属性accept-charset：规定表单提交时使用的字符编码，<form accept-charset="character_set">，character_set的常用值为UTF-8、ISO-8859-1
3、属性action：规定提交表单时向何处发送数据，<form action="URL">，URL可能的值为绝对URL（指向另一个网站）、相对URL（指向站内的一个文件）
4、属性auto-complete：规定是否启动表单的自动完成功能，在用户键入时可根据以前键入过的值预测即将输入字段。<form autocomplete="on|off">，on（默认）
5、属性enctype：规定将表单数据发送到服务器之前如何对其进行编码，只有method="post"时才使用该方法，<form enctype="value">，value的常用值：application/x-www-form-urlencoded（默认，在发送前对所有字符进行编码，将空格转换为"+"，特殊字符转换为ASCII HEX值）、mutlipart/form-data（不对字符进行编码，当有文件上传控件的表单时，该属性时必须的）、text/plain（将空格转换为"+"，但是不转换特殊字符）
6、属性methon：规定用于发送表单数据的HTTP方法，表单数据会被发送到属性action规定的页面。值为get时，表单数据是以URL变量的形式发送的；值为post时，是以HTTP post事务的形式发送的
关于get：
- 将表单数据以名称/值对的形式附加到 URL 中
- URL 的长度是有限的（大约 3000 字符）
- 绝不要使用 GET 来发送敏感数据！（在 URL 中是可见的）
- 对于用户希望加入书签的表单提交很有用
- GET 更适用于非安全数据，比如在 Google 中查询字符串
关于post：
- 将表单数据附加到 HTTP 请求的 body 内（数据不显示在 URL 中）
- 没有长度限制
- 通过 POST 提交的表单不能加入书签
7、属性name：用于规定表单的名称，用在JavaScript中引用元素，或在表单提交后引用表单数据，<form name="text">，在XHTML中，那么元素已废弃，请使用id属性代替
8、属性novalidate：提交表单时不对表单数据进行验证，是一个布尔属性，<form novilidate>，在XHTML中，该属性必须定义为<form novalidate="novalidate">
9、属性target：规定在何处打开action URL
三、文本域（text-field）
1、文本域通过<input type="text">标签设定
2、实例：
<form>
<span style="width: 70px;float: left;">昵称：</span><input type="text" name="昵称"><br/>
<span style="width: 70px;float: left;">个性签名:</span><input type="text" name="个性签名">
</form>
执行结果：
3、在大多数浏览器中文本域的默认宽度是20个字符
四、密码字段
密码字段通过<input type="password">实现
<form>
<span style="width: 70px;float: left;">密码：</span><input type="password" name="pwd"><br/>
</form>执行结果：
五、单选按钮（Radio Button）
使用<input type="radio">标签定义单选框
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
执行结果：
六、复选框（Checkboxes）
使用<input type="checkbox">标签定义
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br/>
<input type="checkbox" name="vehicle" value="Car">I have a car<br/>
<input type="checkbox" name="toy" value="toy">I have toy
</form>
执行结果：
七、提交按钮（Submit Button）
1、使用<input type="submit">来定义
2、当用户点击提交按钮时，表单的内容会被传送到另一个文件，表单的动作属性定义了目的文件的文件名，由动作属性定义的这个文件通常会对接受到的属性做一定的处理
3、实例：
<form name="input" action="http://www.runoob.com/html/html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
执行结果：
八、简单的下拉列表
<form name="input" action="">
<select name="班级">
<option>一班</option>
<option>二班</option>
<option>三班</option>
</select>
</form>
执行结果：
九、<input>标签
1、规定了用户可以在其中输入数据的输入字段，在<form>中使用
2、<input>是空元素，只包含标签属性
3、可以使用<label>元素来定义<input>元素的标注
4、属性
accept
- 规定通过文件上传来提交文件的类型，仅适用于type="file"
- 规定在文件上传中只接受图像文件例子
<form action="demo_form.html"> <input type="file" name="pic" accept="image/*"> <input type="submit"> </form>执行结果：
- 语法：<input accept="audio/*|video/*|image/*|MIME_type">
- 如果需要规定多个值，则这些值中间用逗号分隔开<input accept="audio/*,video/*,image/*" />
alt
- 定义图像的替代文本，当图像因为一些原因（网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器）无法查看时，则显示一张破碎的图片和该属性值
- 语法：<input type="image" alt="text">
autocomplete：规定输入字段是否启用自动完成功能，适用的类型有text、search、url、tel、email、password、datepickers、range 和 color，<input autocomplete="on|off"
autofocus：规定当页面加载时，<input>元素自动获得焦点，在 XHTML 中，禁止属性最小化，autofocus 属性必须定义为 <input autofocus="autofocus" />，在HTML中，使用<input autofocus>
<form action="add.html"> <span style="width: 10%;float: left" >First name:</span><input type="text" name="fname"><br/> <span style="width: 10%;float: left" >Second name:</span><input type="text" name="sname" autofocus> </form>执行结果：
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
