一.简介
什么是HTML ?
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
网页==HTML文档，由浏览器解析，用来展示的
静态网页：静态的资源，如xxx.html
动态网页：html代码是由某种开发语言根据用户请求动态生成的
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>这是标题</h1> </body> </html>
实例解释：
- <html> 与 </html> 之间的文本描述网页
- <body> 与 </body> 之间的文本是可见的页面内容
- <h1> 与 </h1> 之间的文本被显示为标题
二.HTML元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码
嵌套的 HTML 元素
大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
HTML 文档由嵌套的 HTML 元素构成
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>这是标题</h1> </body> </html>
<body> 元素：
<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。
元素内容是另一个 HTML 元素（p 元素）
<html> 元素：
<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>。
元素内容是另一个 HTML 元素（body 元素
空的 HTML 元素:
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障
三.HTML标签
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码
开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）
标签属性：
- 通常是以键值对形式出现的. 例如 name="alex"
- 属性只能出现在开始标签 或 自闭和标签中.
- 属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="alex"
- 如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly
1.head头部元素标签
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>
<title> 标签定义文档的标题
title 元素能够：
- 定义浏览器工具栏中的标题
- 提供页面被添加到收藏夹时显示的标题
- 显示在搜索引擎结果中的页面标题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JD</title> <link rel="icon" href="http://www.jd.com/favicon.ico"> </head> <body> <a>第一章</a> </body> </html>
<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <base href="https://wwwbaidu.com/" /> <base target="_blank" /> </head> <body> <h1>这是标题</h1> </body> </html>
HTML <link> 元素
<link> 标签定义文档与外部资源之间的关系。
<link> 标签最常用于连接样式表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- <meta http-equiv="REFRESH" CONTENT="2;https://www.baidu.com"> --> <title>JD</title> <link rel="icon" href="http://www.jd.com/favicon.ico"> </head> <body> </body> </html>
HTML <style> 元素
<style> 标签用于为 HTML 文档定义样式信息。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head> <body> </body> </html>
HTML <meta> 元素
<meta>meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页 功能
<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务
针对搜索引擎的关键词
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">
meta 元素定义页面的关键词：
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">
name 和 content 属性的作用是描述页面的内容
HTML <script> 元素
<script> 标签用于定义客户端脚本，比如 JavaScript
2.body标签
基础标签：
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- <meta http-equiv="REFRESH" CONTENT="2;https://www.baidu.com"> --> <title>JD</title> <link rel="icon" href="http://www.jd.com/favicon.ico"> </head> <body> <a>第一章</a> <!--定义超链接(本地)--> <a href="#t">第二章</a> <!--样式--> <h1 style="background-color: aqua;color: brown">JD</h1> <!--段落--> <p>这是一个段落</p> <!--字体加粗--> <b>呵呵</b> <!--换行--> <br> <!--水平线--> <hr> <!--斜体--> <em>哈哈</em> <hr> <!--上标--> 3<sup>2</sup>=6 <br> <!--下标--> C<sub>u</sub> <br> <!--为文字加上一条中线--> <strike>错误</strike> <hr style="color: cyan;height: 10px"> <!--图片--> <img src="mac.jpg" width="600px" height="500px" title="MAC"> <h1 id="t">第二章</h1> </body> </html>
图像标签
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- <meta http-equiv="REFRESH" CONTENT="2;https://www.baidu.com"> --> <title>JD</title> <link rel="icon" href="http://www.jd.com/favicon.ico"> </head> <body> <!--水平线--> <hr> <!--图片--> <img src="mac.jpg" width="600px" height="500px" title="MAC"> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- <meta http-equiv="REFRESH" CONTENT="2;https://www.baidu.com"> --> <title>JD</title> <link rel="icon" href="http://www.jd.com/favicon.ico"> </head> <body> <!--水平线--> <hr> <!--图片--> <figcaption>MAC 图片</figcaption> <img src="mac.jpg" width="600px" height="500px" title="MAC"> </body> </html>
链接
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <!--定义文档与外部资源的关系（本例是调用了JD的logo）--> <link rel="icon" href="http://www.jd.com/favicon.ico"> <!--定义锚--> <a href="https://www.baidu.com">搜索引擎</a> <!--定义导航链接--> <nav> <a href="ex1.html">file1</a> <a href="ex2.html">file1</a> </nav> </head> <body> 呵呵 </body> </html>
列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table</title> </head> <body> <a>这是列表</a> <a href="2" >这是表格</a> <h1>列表</h1> <hr> <!--这是无序的--> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <hr> <!--这是有序的--> <ol> <li>1</li> <li>2</li> <li>3</li> </ol> <hr> <!--自定义--> <dl> <dt>北京</dt> <dd>昌平区</dd> <dd>海淀区</dd> </dl> <hr> <!--表格--> <table id="2" border="1" cellpadding="2px" style=" 300px"> <tr > <td>1</td> <td>2</td> <td>3</td> </tr> <tr > <td>4</td> <td>5</td> <td>6</td> </tr> <tr > <td>7</td> <td>8</td> <td>9</td> </tr> </table> </body> </html>
表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table</title> </head> <body> <!--表格--> <table id="2" border="1" cellpadding="2px" style=" 300px"> <tr > <td>1</td> <td>2</td> <td>3</td> </tr> <tr > <td>4</td> <td>5</td> <td>6</td> </tr> <tr > <td>7</td> <td>8</td> <td>9</td> </tr> </table> </body> </html>
<html> <head> <style type="text/css"> #customers { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; width:100%; border-collapse:collapse; } #customers td, #customers th { font-size:1em; border:1px solid #98bf21; padding:3px 7px 2px 7px; } #customers th { font-size:1.1em; text-align:left; padding-top:5px; padding-bottom:4px; background-color:#A7C942; color:#ffffff; } #customers tr.alt td { color:#000000; background-color:#EAF2D3; } </style> </head> <body> <table id="customers"> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Apple</td> <td>Steven Jobs</td> <td>USA</td> </tr> <tr class="alt"> <td>Baidu</td> <td>Li YanHong</td> <td>China</td> </tr> <tr> <td>Google</td> <td>Larry Page</td> <td>USA</td> </tr> <tr class="alt"> <td>Lenovo</td> <td>Liu Chuanzhi</td> <td>China</td> </tr> <tr> <td>Microsoft</td> <td>Bill Gates</td> <td>USA</td> </tr> <tr class="alt"> <td>Nokia</td> <td>Stephen Elop</td> <td>Finland</td> </tr> </table> </body> </html>
表单
1.表单属性
HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.
action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web
method: 表单的提交方式 post/get 默认取值 就是 get（信封）
get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.
post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.
get/post是常见的两种请求方式
2.表单元素
<input> type: text 文本输入框
password 密码输入框
radio 单选框
checkbox 多选框
submit 提交按钮
button 按钮(需要配合js使用.) button和submit的区别？
file 提交文件：form表单需要加上属性enctype="multipart/form-data"
《HTML5新加》
-
- email email 类型用于应该包含 e-mail 地址的输入域，在提交表单时，会自动验证 email 域的值
- url url 类型用于应该包含 URL 地址的输入域，在提交表单时，会自动验证 url 域的值
- number number 类型用于应该包含数值的输入域
- range range 类型用于应该包含一定范围内数字值的输入域，range 类型显示为滑动条
- Date pickers (date, month, week, time, datetime, datetime-local)
HTML5 拥有多个可供选取日期和时间的新输入类型：
-
-
- date - 选取日、月、年
- month - 选取月、年
- week - 选取周和年
- time - 选取时间（小时和分钟）
- datetime - 选取时间、日、月、年（UTC 时间）
- datetime-local - 选取时间、日、月、年（本地时间）
-
-
- search search 类型用于搜索域，比如站点搜索或 Google 搜索
<select> 下拉选标签属性：
name:表单提交项的键.
size：选项个数
multiple：multiple
<option> 下拉选中的每一项 属性：value:表单提交项的值. selected: selected下拉选默认被选中
<optgroup>为每一项加上分组
<textarea> 文本域
name:表单提交项的键. cols:文本域默认有多少列 rows:文本域默认有多少行
<!DOCTYPE html> <!--表单--> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://www.sogou.com/web" method="post"> <p>用户名:<input type="text" name="query"></p> <p>密码:<input type="password" name="passwd"></p> <p style="color: orange"><b>性别</b></p> <!--单选--> <p>男<input type="radio" name="sex" value="male"></p> <p>女<input type="radio" name="sex" value="female"></p> <p style="color: orange"><b>爱好</b></p> <!--多选--> <p>篮球<input type="checkbox" name="hobby" value="basketball"></p> <p>足球<input type="checkbox" name="hobby" value="football"></p> <p>乒乓球<input type="checkbox" name="hobby" value="table tennis"></p> <!--文本上传--> <p><input type="file" name="filename"></p> <p>备注<textarea name="login_info"></textarea></p> <select name="location"> <optgroup label="河南省"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </optgroup> <optgroup label="河北省"> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </optgroup> </select> <input type="submit" > </form> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--表单input新增元素 --> <form action="http://www.sogou.com/web" method="post" enctype="multipart/form-data"> <b style="color: black">调查问卷</b> <p>姓名:<input type="text" name="query"></p> <!--date--> <p>出生年月:<input type="date" name="user_birth" /></p> <p style="color: orange"><b>性别</b></p> <!--单选--> <p>男<input type="radio" name="sex" value="male"></p> <p>女<input type="radio" name="sex" value="female"></p> *请选择每次访问页面等待时间 <p>wait_time: <input type="number" name = "wait_time" min="1" max="10" style=" 100px"></p> <!--rang--> *请对每次体验评分 <p>rang-are: <input type="range" name="rang" min="1" max="100" step="1" /></p> *请填写您的主页及联系方式 <!--url--> <p>Homepage: <input type="url" name="user_url" /><br /></p> <!--email--> <p>E-mail: <input type="email" name="user_email" ></p> <!--提交按钮--> <p><input type="submit" ></p> </form> </body> </html>
块级标签和内联标签
块级标签：<p><h1><table><ol><ul><form><div>
内联标签：<a><input><img><sub><sup><textarea><span>
block（块）元素的特点
① 总是在新行上开始；
② 高度，行高以及外边距和内边距都可控制；
③ 宽度缺省是它的容器的100%，除非设定一个宽度。
④ 它可以容纳内联元素和其他块元素
inline元素的特点
① 和其他元素都在一行上；
② 高，行高及外边距和内边距不可改变；
③ 宽度就是它的文字或图片的宽度，不可改变
④ 内联元素只能容纳文本或者其他内联元素
对行内元素，需要注意如下
设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
特殊字符：
< >；"；©®