HTML
基本知识
1、Visual Studio Code快捷键
ctrl + c :复制
ctrl + v:粘贴
ctrl + x:剪切
ctrl + z:撤销
ctrl + s:保存
2、安装Sublime插件：
ctrl+shift+d:复制当前行
ctrl+shift+↑:上移当前行
ctrl + shift + ↓：下移当前行
按住鼠标滚轮，然后下拉，即可进行多行编辑
3、安装Live server插件
(前提是在文件夹中新建的文件,此插件可以实时展示代码变化，不需要重新打开页面)
ctrl+N： 新建文件
ctrl+shift+p:选择“open with Live server"进入到浏览器
!+tab：自动生成HTML5的骨架。（推荐使用)
什么是什么HTML?
(1)HTML指的是超文本标记语言（Hyper Text Markup Language);
(2)HTML不是一种编城语言，而是一种标记语言（markup language);
(3)标记语言是一套把标记标签；
(4)HTML使用标记标签来描述网页；
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如
- HTML 标签通常是成对出现的，比如 和
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
文档基本解释
<head></head>标签对儿是网页的配置，不要认为是网页的头部。
<body></body>标签对儿书写网页的内容，包括网页的头部、主要内容、页脚等各个部分。
字符集（charset)
（1）UTF-8：涵盖全国所有国家、民族的文字和大量图形字符（一个汉子占3个字节）。
（2）gb2312（gbk）:收录所有汉字字符（包括简体、繁体）和英语、少量韩文、日语和少量图形字符（一个汉子占2个字节）。
（3）无论使用哪种字符集，一定要在VScode编辑器中将文件也设为相同字符集，否则会出现乱码，然后更改meta标签：
（4）Live Server插件仅仅支持UTF-8字符集。
（5）改变字符集的方法：点击下方“UTF-8",选择"通过编码保存",
选择相应的字符集。
meta标签
使用meta标签设置网页关键词和描述，name属性非常关键，用来设置meta的具体功能。
<meta name="Description" content="">
<meta name="Keywords" content="">
文档声明类型DTD
<!DOCTYPE html>(Document Type Definition)
8、SEO(Search Engine Optimization,搜索引擎优化)
规则
在逗号或分号之后添加空格，是所有书写类型的通用规则
块标签：
div p h1-h6 hr ul ol li dl dd dt form
①支持宽高，自上而下排列
②不受空格影响
③一般用于其他标签的容器
④默认宽度为100%（独占一行）。
行内标签：
span i a b strong em sub sup u label br font
①不支持宽高（宽高根据内容大小自动撑开），自左向右排列；
②受空格影响；
③不独占一行；
行内块标签：
img textarea input
①支持宽高，自左向右排列；
②受空格影响；
③不独占一行；
标题和段落标签
标题标签
HTML标签是通过<h1>-<h6>标签来定义的；
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
段落标签
HTML 段落是通过标签 <p> 来定义的。
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
div标签
div是英语division"分割“的缩写，
顾名思义<div></div>标签对用来讲相关的内容组合在一起，以和其他内容分割，使文章结构更清晰。（盒子）
空白折叠现象
（1）文字和文字之间的多个空格、换行会被折叠成一个空格；
（2）标签“内壁”和文字之间的空格会被省略。
常见转义字符
实体名称 描述
< 小于号
> 大于号
空格（不会被折叠）
© 版权符号
& 和
6、HTML注释
ctrl+/
<!-- --!>
7、div常见类名
添加class属性表示类名，
页头:header;
logo:logo;
导航条：nav;
横幅：banner;
内容区域：content；
页脚：footer;
1、HTML 水平线
hr标签在 HTML 页面中创建水平线。
<hr> 元素可用于分隔内容。
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
2、html注释
<!-- 这是注释 -->
3、html换行
如果您希望在不产生一个新段落的情况下进行换行，请使用<br />标签；
<p>这个<br>段落<br>演示了分行的效果</p>；
注：</br>元素是一个空的HTML元素。由于关闭标签没有任何意义，因此它没有结束标签；
HTML文本格式化标签
<b> 定义粗体文本
<em> 定义着重文字 //倾斜
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> <u></u> 定义插入字 //下划线
<del> <s></s> 定义删除字
pre
预格式文本它保留了空格和换行
<html>
<body>
<pre>
这是
预格式文本。
它保留了 空格
和换行。
</pre>
<p>pre 标签很适合显示计算机代码：</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
计算机输出文本
<code>计算机输出</code>；
<!-- <code>元素不保留多余的空格和行 -->
<kbd>键盘码</kbd>；
<tt>打字机代码</tt>;
<samp>计算机代码样本</samp>;
<var>计算机变量</var>
code
<!DOCTYPE html>
<html>
<body style="font-size:16px">
<p>code 元素不保留多余的空格和换行：</p>
<code>
var person = {
firstName:"Bill",
lastName:"Gates",
age:50,
eyeColor:"blue"
}
</code>
</body>
</html>
地址
用于联系信息的 HTML <address>
HTML <address>元素定义文档或文章的联系信息（作者/拥有者）。
此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。
<address></address>
地址例子
<!DOCTYPE html>
<html>
<body>
<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>
缩写与首字母缩写
<html>
<body>
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>
<p>仅对于 IE 5 中的 acronym 元素有效。</p>
<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
</body>
</html>
文字方向
HTML <bdo> 元素定义双流向覆盖（bi-directional override）。
<bdo> 元素用于覆盖当前文本方向：
<bdo dir="rtl">表示内部的文字从左到右显示</bdo>
<bdo dir="ltr">表示内部的文字从左到右</bdo>
文字方向实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<bdo dir="rtl">hello world</bdo>;
<ddo dir="ltr">hello world</ddo>;
</body>
</html>
块引用
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>
<q>这是短的引用</q>
<!-- 使用blockquote元素的话，浏览器会插入换行和外边距，而q元素不会有任何特殊的呈现-->
删除字效果和插入字效果
<del>del标签中的文字在中间有一条横线</del>
<ins>ins内的文字有一条下划线</ins>
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<blockquote>
<del>del标签中的文字在中间有一条横线</del><br />
<ins>ins内的文字有一条下划线</ins>
</body>
</html>
head元素
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
5、base元素
HTML <base> 元素
<base> 标签为页面上的所有链接规定默认地址或默认目标；
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
6、link元素
HTML <link> 元素
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
7、style元素
<style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
8、meta元素
1、meta标签描述了一些基本的元数据。
2、<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
3、META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
4、元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
5、<meta> 一般放置于 <head> 区域
9、meta元素实例
1、为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
2、为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">
3、每30秒钟刷新当前页面：
<meta http-equiv="refresh" content="30">
4.name和content属性的作用是描述页面的内容；
10、HTML实体字符
1、在 HTML 中不能使用小于号(<)和大于号（>），这是因为浏览器会误认为它们是标签。
2、如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 字符实体类似这样：
3、&entity_name;或&#entity_number;
如需显示小于号，我们必须这样写：< 或 < 或 <
11、字符实例
空格  
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' (IE不支持) '
￠ 分 ¢ ¢
£ 镑 £ £
¥ 人民币/日元 ¥ ¥
€ 欧元 € €
§ 小节 § §
© 版权 © ©
® 注册商标 ® ®
™ 商标 ™ ™
× 乘号 × ×
÷ 除号 ÷ ÷
图片标签
img标签
(1)<img />标签用来在网页中插入图片；//src是source的缩写；
例子：
<img src="../images/2.jpg">//..为上一级目录
如下图所示：
我们可以看到图片2.jpg在images下；而我们所编辑的1.html在practice下；因此当1.html需要引用图片2.jpg时，需要先进入上一级目录practice,才能访问到images里面的图片2.jpg(打个比方说，你需要对面二楼的花，这时你需要先出自己家，进入对面家二楼)，若1.html也在images下，路劲直接写2.jpg;
其次，图片需要复制到images目录下；
img标签的alt属性
(1)alt属性是alternate"替代品"的缩写，替换文本，图像不能显示时展现的文字，它是对图像的文本描述，不是强制性的；
<img src="images/2.jpg" alt="女孩">//当文件2.jpg不见时会显示alt内的内容
img的title属性
(1)提示文本，鼠标放到图像上显示的文字；
<img src="img.jpg" alt="中国人" title="猪猪是中国人">
img标签的width、height属性
<img>标签的width、height属性分别设置宽度和高度，单位是像素，但是不需要写单位；
如果忽略其中一个属性，则表示按原始比例缩放图片
网页上支持的图片格式
.bmp:windows画图软件默认保存的格式，位图；
.gif:支持动画（比如表情包）；
.jpeg(.jpg):有损压缩图片，用于照片；
.png:便携式网络图像，用于logo、背景图像等，支持透明和半透明；
.svg:矢量图片；
.webp:最新的压缩算法非常优秀的图片格式；
相对路径
定义：描述从网页出发，如何找到图片。如（前面路口左转，直走300米右转就到了。）
随着网页和图片的位置关系不同，插入图片的代码随之改变；
如果需要回退层级，用"../"这样的写法；
绝对路径
定义：描述图片精准地址。如（北京市海定区西三环北路科技园3号楼；
不管网页在哪里，绝对路径不需要改变
超级链接
链接分类
1.外部链接：例如<a href="http://www.baidu.com">百度</a>;
2.内部链接：网站内部页面之间的相互链接，直接链接内部页面即可，例如<a href="index.html">首页</a>;
3.空链接：如果当时没有确定链接目标时，<a href="#">首页</a>。
4.下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件；
5.网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加到超链接；
6.锚点链接：点我们点击链接，可以快速定位到页面中的某个位置；
(1)在链接文本的href属性中，设置属性值为#名字的形式；如<a href="#two">第二集</a>
(2)找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two">第二集介绍</h3>
超链接定义
定义：超级链接是将网页和网页连结到一起的方法，是互联网成“网”的原因。
1、使用a标签制作超级链接
<a href="2.html">去第二个网页</a>
//a是anchor（锚）的首字母
//hypertext reference:超文字引用
2、href属性支持相对路径和绝对路径
2.html中：
<a href="1.html">返回</a>
<h1>
我的旅游经验
</h1>
1.html中：
<p>
<a href="2.html">我的旅游经验
</a>
</p>
3、a标签的title属性
a标签的title属性用于设置鼠标的悬停文本；
4、新标签中打开网页
(1)target用于指定链接页面的打开方式，其中_self为默认值，_blank为新窗口的打开方式；
(2)_blank：新窗口打开。
_parent：在父窗口中打开链接。
_self：默认，当前页面跳转。
_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。
将a标签的target属性设置为blank，即可在新标签页中打开标签；
<a href="2.html" target="blank">去下一个网页</a>
在html4代，_blank之前有一个下划线
5、图片设置超级链接
图片也可以设置超级链接，只需要用<a>标签包裹img即可；
<a href="2.html" target="blank">
<img src="images/1.png">
</a>
页面内锚点（锚点链接）
(1)在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第2集</a>
(2)找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two">
第二集介绍
</h3>
较长的页面，可以适当的给h系列标签添加id属性，它将成为页面的“锚点”；
<a href="#wuxi">无锡美景</a>
<h1 id="wuxi">无锡美景</h1>
当网址后面添加#时，页面将自动滚动到锚点所在位置；
其他页面的超级链接，可以链接到指定锚点；
//锚点类似于分类文件夹
（1）指向exe、zip、rar等文件格式的链接，将自动成为下载链接；
<a href="1.zip">下载</a>
（2）有mailto:前缀的链接是邮件链接，系统将自动打开email相关软件；
<a href="mailto:me@test.com">给小编发邮件</a>
（3）有tel:前缀的链接是电话连接，系统将自动打开拔号盘；
<a href="tel:12306">打电话买火车</a>
表单
value属性
value属性规定输入字段的初始值：
readonly属性
readonly属性规定输入字段为只读（不能更改);
disabled 属性
disabled属性规定输入字段是禁用的。
被禁用的元素是不可用和不可点击的。
被禁用的元素不会被提交。
size 属性
size 属性规定输入字段的尺寸（以字符计）：
maxlength 属性
maxlength 属性规定输入字段允许的最大长度：
placeholder 属性
placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。
该提示会在用户输入值之前显示在输入字段中。
placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。
required 属性
required 属性是布尔属性。
如果设置，则规定在提交表单之前必须填写输入字段。
required 属性适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.
1、表单的定义
(1)表单用来收集信息，比如注册、登录、发送评论反馈、购买商品等等;
(2)在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成；
2、表单的创建
所有HTML表单都已一个<form>元素开始
<form action="save.php" method="post">
//action属性表示表单要提交到的后台程序的网址
//method属性表示表单提交的方式，有get和post
</form>
3、单行文本框
1、type属性值被设置为text的<input>元素可以创建一个文本框，它是一个单标签；
<input type="text" value="123" disabled>
2、value属性表示已经填写好的值
3、placeholder属性表示提示文本，以浅色文字写在文本框中，并不是文本框中的值；
<input type="text" placeholder="请输入姓名">
4、disabled属性表示用户不能与元素交互，即“锁死”；
4、单选按钮
1、type属性被设置为radio的<input>元素可以创建单选按钮
<input type="radio">
2、互斥的单选按钮应该设置他们的name为相同值；
3、单选按钮要有value属性值，向服务器提交的就是value值；
4、单选按钮如果加上了checked属性，表示默认被选中；
Female
注意：当用户点击一个单选按钮时，它就会被选中，其他同名的单选按钮就不会被选中。
5、label标签
label标签用来将文字和单选按钮进行绑定，用户单击文字的时候也视为点击了单选按钮
<label>
<input type="radio">男
</label>
<label>
<input type="radio">女
</label>
6、复选框
1、使用type属性值被设置为checkbox的<input>元素可以创建复选框
<input type="checkbox">
2、同组复选框应该设置它们的name为相同值；
3、复选框要有value属性值，向服务器提交的就是value值
<p>
<label>
<input type="checkbox" name=hobby value="足球">足球
</label>
<label>
<input type="checkbox" name=hobby value="排球" >排球
</label>
<label>
<input type="checkbox" name=hobby value="蓝球">蓝球
</label>
</p>
7、密码框
1、使用type属性被设置为password的<input>元素可以创建密码框；
<input type="password">
8、下拉菜单
<select>标签表示下拉菜单，<option>是它内部的选项
<select>
<option value="alipay">支付宝</option>
<option value="wx">微信</option>
<option value="bank">网银</option>
</select>
9、多行文本框
<textarea></textarea> 表示多行文本框；
rows和cols属性，用于定义多行文本框的行数和列数；
<textarea cols="100" rows="30"></textarea>
10、三种按钮
表单中常见三种按钮，它们也都是input标签，type属性值不同；
button:普通按钮，可以简写为<button></button>
submit:提交按钮；
reset:重置按钮；
<input type="submit" value="submit">
11、input类型总结
type属性值 控件
text 单行文本框
radio 单选按钮
checkbox 多选按钮
password 密码框
button 普通按钮
reset 重置按钮
submit 提交按钮
12、input种类
type属性值 控件
color 颜色选择控件
date、time 日期、时间选择控件
email 电子邮件输入控件
file 文件选择控件
number 数字输入控件
range 拖拽条
search 搜索框
url 网址输入控件
13
<input type="text" list="province-list">
<datalist id="province-list">
<option value="山东">
<option value="湖北">
<option value="湖南">
<option value="浙江">
<option value="河南">
<option value="河北">
</datalist>
Method属性
method属性规定在提交表单时所用的HTTP方法(GET或POST)
何时使用GET？(默认方法)
(1)如果表单提交是被动的(比如搜索引擎查询)，并且没有敏感信息；
<!-- GET最适合少量数据的提交。 -->
(2)当你使用GET时，表单数据在页面地址栏中是可见的；
何时使用POST?
(1)如果表单正在更新数据，或者包含敏感信息(例如密码)；
POST的安全性更好，因为在页面地址栏中被提交的数据是不可见的；
列表
1、列表的类型
<ul></ul>:无序列表
<ol></ol>:有序列表
<dl></dl>:定义列表
2、无序列表（unordered list)
定义：没有刻意顺序的列表（比如去购物）；
是一个父子组合标签，上阵父子兵，不能单独出现；
<li>标签不能单独使用，只能是<ol>或<ul>的子标签；
<ul>的子标签只能是<li>,绝不能出现其它任何标签；
<li>标签是容器，内部可以放任何其他标签
无序列表使用<ul>标签和<li>标签（list item 列表项）
<ul>
<li>面包</li>
<li>牛奶
<p>要脱脂</p>
</li>
<li>黄油</li>
<li>水果</li>
</ul>
3、无序列表的嵌套
<ul>
<li>
<h3>西瓜种类</h3>
</li>
<ul>
<li> 红西瓜</li>
<li>白西瓜</li>
<li>黃西瓜</li>
</ul>
4、ul标签的type（了解）
无序列表有type属性，在HTML已经被废弃了
disc：默认值，实心圆；
circle：空心圆；
square：实心方块;
5、有序列表（ordered list)
定义：有刻意顺序的列表（比如排名）；
有序列表使用<ol>标签和<li>标签；
<ol>
<li> 红西瓜</li>
<li>白西瓜</li>
<li>黃西瓜</li>
</ol>
6、ol标签的type
a:表示小写英文字母编号；
A:表示大写英文字母编号；
i:表示小写罗马数字编号；
I:表示大写罗马数字编号；
1：表示默认数字编号
<ol type="a" start="1">
<ol type="a" reversed>
<!-- reversed与start不要同时使用，以免干扰 -->
</ol>
<li> 红西瓜</li>
<li>白西瓜</li>
<li>黃西瓜</li>
</ol>
6、ol标签的reversed属性
(1)reversed属性指定列表中的条目是否是倒序排序的；
(2)reversed属性不需要值，只需要写reversed单词即可，这是HTML5的全新特性。
7、定义列表(definition list)
定义：需要逐条给出定义描述的列表，就是定义列表。交替或不交替
<dt>:data term(数据项)；
<dd>:data definition(数据定义)解释说明<dt>这个词条的
哪里应该使用定义列表？
(1)使用什么标签，不应该看样式，应该看语义；
(2)只要语义上有“解释说明”含义的文字，且为列表形态，应该使用定义列表。
表格
表格的主要作用
(1)表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现的很有条理。
(2)<table>
<tr>
<th></th>/<td></td>
</tr>
</table>
<!-- td table dock -->
1、table属性
2、table的border属性
为了让表格能显示边框,<table>标签通常有border属性；
<table border="1">
<!--- 是表格的意思 --->
<tr>
<!---table row表格行--->
<td>A</td>
<!--- table data表格数据--->
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td>G</td>
<td>K</td>
<td>L</td>
</tr>
</table>
5、table的caption属性
<caption>是表格的标题，它常常作为<table>的第一个子元素出现；
<table border="1">
<caption>地图标题</caption>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td>G</td>
<td>K</td>
<td>L</td>
</tr>
</table>
表格内的标签
<html>
<body>
<table border="1">
<tr>
<td>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</td>
<td>这个单元包含一个表格：
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>这个单元包含一个列表：
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
th标签
<th>是“标题小格，可以替代<td>的作用，表示标题小格(一般位于表格的第一行，里面的文字会加粗居中显示)；
<table border="1">
<caption>我是表格的标题</caption>
<tr>
<th>第一季度</th>
<th>第二季度</th>
<th>第三季度</th>
<th>第四季度</th>
</tr>
</table>
<table>
<tr>
<th>姓名</th> <th>性别</th> <th>年龄</th>
<td>琉璃</td> <td>女</td> <td>18</td>
<td>刘夏</td> <td>男</td> <td>45</td>
</tr>
</table>
cellpadding
(1)像素值；规定单元边沿与其内容之间的空白，默认1像素；
<html>
<body>
<h4>没有 cellpadding：</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>带有 cellpadding：</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
cellspacing
(1)规定单元格之间的空白，默认2像素；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<html>
<body>
<html>
<body>
<h4>没有 cellspacing：</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>带有 cellspacing：</h4>
<table border="1"
cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
</html>
</body>
</html>
给表格添加背景颜色
<html>
<body>
<h4>背景颜色：</h4>
<table border="1"
bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>背景图像：</h4>
<table border="1"
background="/i/eg_bg_07.gif">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
在表格单元中排列内容
<html>
<body>
<table width="400" border="1">
<tr>
<th align="left">消费项目....</th>
<th align="right">一月</th>
<th align="right">二月</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">化妆品</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">食物</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">总计</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>
</body>
</html>
表格其他特性
<thead>标签定义表头；(里面必须有tr)
<tbody>标签定义表核心内容；
<tfoot>标签定义表脚，通常是汇总行；
单元格的合并
1、colspan属性
colspan属性用来设置td或者th的列跨度；
<table border="1">
<tr>
<td colspan="2">A</td>
<td>B</td>
<td>C</td>
<td colspan="4"></td></tr>
</table>
2、rowspan属性
rowspan属性用来设置td或者th的行跨度；
<table border="1">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td rowspan="3">F</td>
</tr>
<tr>
<td>G</td>
<TD>H</TD>
</tr>
</table>
3、同时拥有rowspan、colspan属性
<table border="1">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td rowspan="2">F</td>
<td rowspan="3" colspan="2">G</td>
</tr>
<tr>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td>J</td>
</tr>
</table>
合并单元格三部曲
1.先确定是/跨行/还是/跨列/合并；
2.找到目标单元格，写上合并方式=合并的单元格数量。比如：<td colspan="2"></td>；
3.删除多余的单元格；
语义化标签
1、span标签
<span>标签是文本中的区块标签，本身没有任何特殊的显示效果，可以结合CSS来丰富样式；
2、span实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
color:red;s
}
</style>
</head>
<body>
<p>
<span>北京</span>的区号是<span>010</span>
</p>
<p>
<span>北平</span>的区号是<span>020</span>
</p>
</body>
</html>
3、b、u、i标签
<b>、<u>、<i> 标签充满浓浓的样式意味，已经被CSS替代，但是在网页中也可以表示需要强调的文本；
<b>被加粗的文字，css已经替代了它的功能
<u>加下划线的文字，css已经替代了它的功能
<i>倾斜的文字，css已经替代了它的功能
4、b、u、i标签实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
<b>慕课网</b>
<u>慕课网</u>
<i>慕课网</i>
</p>
</body>
</html>
4、strong、em、mark标签
<strong>、<em>、<mark>标签均表示强调语义；
<strong>代表特别重要文字
<em>代表强调文字；
<mark>代表一段需要被高亮的文字；
5、strong、em、mark标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
我<strong>一定</strong>好好学习
</p>
<!-- 默认一定为加粗样式 -->
<p>
我<em>一定</em>好好学习
</p>
<!-- 默认一定为倾斜样式 -->
<p>
我<mark>一定</mark>好好学习
</p>
<!-- 默认一定为黄色背景样式 -->
</body>
</html>
6、figure、figcaption标签
<figure>元素代表一段独立的内容，与说明<figcaption>配合使用，它是一个独立的引用单元，比如建议读者拓展视野的图片等，当这部分转移到附录中或者其他页面时不会影响到主体
7、figure、figcaption标签实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
的引用单元，比如建议读者拓展视野的图片等，当这部分转移到附录中或者其他页面时不会影响到主体
</p>
<!-- 默认一定为加粗样式 -->
<p>
<figure>
<img src="../project/images/beijing/1.jpg" alt="">
<figcaption>北京鸟巢</figcaption>
</figure>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<b>这个文本是加粗的</b>
<br />
<strong>这个文本是加粗的</strong>
<br />
<big>这个文本字体放大</big>
<br />
<em>这个文本是斜体的</em>
<br />
<i>这个文本是斜体的</i>
<br />
<small>这个文本是缩小的</small>
<br />
这个文本包含
<sub>下标</sub>
<br />
这个文本包含
<sup>上标</sup>
</body>
</html>
HTML语义化
所谓HTML语义化指的是，根据网页中内容的结构，选择适合的HTML标签进行编写。
好处：
在没有CSS的情况下，页面也能呈现出很好的内容结构。
有利于SEO，让搜索引擎爬虫能更好的理解网页。
方便其他设备解析（如屏幕阅读器、盲人阅读器）。
便于团队开发与维护。
HTML5 语义元素
HTML5 中的语义元素
下面列出了以字母顺序排列的 HTML5 新语义元素。
这些链接指向完整的 HTML 参考手册。
| 标签 | 描述 |
|---|---|
| article | 定义文章。 |
| aside | 定义页面内容以外的内容。 |
| details | 定义用户能够查看或隐藏的额外细节。 |
| figcaption | 定义 figure元素的标题。 |
| figure | 规定自包含内容，比如图示、图表、照片、代码清单等。 |
| footer | 定义文档或节的页脚。 |
| header | 规定文档或节的页眉。 |
| main | 规定文档的主内容。 |
| mark | 定义重要的或强调的文本。 |
| nav | 定义导航链接。 |
| section | 定义文档中的节。 |
| summary | 定义 details元素的可见标题。 |
| time | 定义日期/时间。 |
| header | 定义文档或节的页眉 |
|---|---|
| nav | 定义导航链接的容器 |
| section | 定义文档中的节 |
| article | 定义独立的自包含文章(应用于论坛，博客，新闻) |
| aside | 定义内容之外的内容（比如侧栏） |
| footer | 定义文档或节的页脚(页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。) |
| details | 定义额外的细节 |
| summary | 定义 details 元素的标题 |
HTML相应式设计
RWD指的是响应式Web设计(Responsive Web Design);
RWD能够以可变尺寸传递网页；
RWD对于平板和移动设备是必须的；
语义元素是拥有语义的元素。
什么是语义元素？
语义元素清楚地向浏览器和开发者描述其意义。
非语义元素的例子：<div> 和 <span> - 无法提供关于其内容的信息。
语义元素的例子：<form>、<table> 以及 <img> - 清晰地定义其内容。
在 HTML 中使用表情符号
表情符号（Emoji）是来自 UTF-8 字符集的字符：😄 😍 💗
什么是 Emoji？
表情符号（Emoji）类似图像或图标，但它们并不是。
它们是来自 UTF-8 (Unicode) 字符集的字母（字符）。
**提示：**UTF-8 几乎涵盖世界上所有字符和符号。
HTML 统一资源定位器/符(URL:Uniform Resource Locator)
- scheme - 定义因特网服务的类型。最常见的类型是 http
- host - 定义域主机（http 的默认主机是 www）
- domain - 定义因特网域名，比如 w3school.com.cn
- :port - 定义主机上的端口号（http 的默认端口号是 80）
- path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
- filename - 定义文档/资源的名称
URL Schemes
| Scheme | 访问 | 用于… |
|---|---|---|
| http | 超文本传输协议 | 以 http:// 开头的普通网页。不加密。 |
| https | 安全超文本传输协议 | 安全网页。加密所有信息交换。 |
| ftp | 文件传输协议 | 用于将文件下载或上传至网站。 |
| file | 您计算机上的文件。 |
canvas
(1)作用:canvas元素用于在网页上绘制图形。
在浏览器中使用canvas时，只用引入<canvas></canvas>标签即可；
(2)兼容老版本浏览器：
1)在canvas标签内写入文字，如果浏览器支持就不会显示文字，不支持的话就会显示文字；
<canvas width="320px" height="240px">您的浏览器版本过低,请升级浏览器或者使用chrome打开</canvas>
<!--低于IE9 -->
2)指定画布大小：直接在标签中指定width和height;
3)对于canvas来说，不能直接使用margin:0 auto;进行居中，如果需要居中，可以给他添加一个父元素!让父元素居中即可；
1.获取画布；
2.获取画布的上下文；
3.开始一条路径；
4.确定起始点；
5.确定结束点；
6.着色；
7.结束路径；
//获取画布
var canvas=documet.getElementById('canvas');
//获取画布上下文；
var c=canvas.getContext('2d');
//开始路径
c.beginPath();
//确定起始点
c.moveTo(100,100);
//确定结束点；
c.lineTo(200,200);
//进行上色
c.stroke();
//关闭路径
c.closePath();
创建Canvas元素
向HTML5页面添加canvas元素。
规定元素的id、宽度和高度：
<canvas id="myCanvas" width="200" height="100"></canvas>
canvas三要素：
id作为唯一的标识；
width:画布内容宽度的像素大小；
height:画布内容高度的像素大小；
使用JavaScript来绘制图像
canvas元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成；
实例解析
var c=document.getElementById("myCanvas");
console.log(c);
/*先找到<canvas>元素*/
/*找到画布对象*/
var ctx=c.getContext("2d");
console.log(ctx);
/*上下文对象(画笔)*/
/* 创建context对象*/
ctx.fillStyle="#FF0000";
/*fillStyle属性可以是CSS颜色，渐变，或图案，fillStyle默认设置是#000000(黑色)*/
ctx.fillRect(0,0,150,75);
/*fillRect(x,y,width,height)*/
/*在画布上绘制150*75的矩形，从左上角开始，(Canvas的左上角坐标为(0,0))*/
Canvas路径
在Canvas上画线，我们将使用以下两种方法：
(1)moveTo(x,y)定义线条开始坐标；
(2)lineTo(x,y)定义线条结束标签；
实例
绘制线条我们必须使用到"ink"的方法，就像stroke();
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
/*定义开始坐标和结束坐标，然后使用stroke()方法来绘制线条*/
绘制圆形
实际上我们在绘制圆形时使用了"ink"的方法，比如stroke()或者fill();
arc(x,y,start,stop);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Canvas - 文本
使用 canvas 绘制文本，重要的属性和方法如下：
- font - 定义字体
- fillText(text,x,y) - 在 canvas 上绘制实心的文本
- strokeText(text,x,y) - 在 canvas 上绘制空心的文本
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
Canvas - 渐变
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变：
(1)createLinearGradient(*x,y,x1,y1*) - 创建线条渐变
(2)createRadialGradient(*x,y,r,x1,y1,r1*) - 创建一个径向/圆渐变
注意事项：
(1)当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
(2)addColorStop()方法用来指定颜色停止，参数使用坐标来描述，可以是0至1.
(3)使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。使用 createLinearGradient():
线性实例
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
径向渐变
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
Canvas - 图像
把一幅图像放置到画布上, 使用以下方法:
- drawImage(image,x,y)
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
3.2 绘制矩形
<canvas> 只支持一种原生的图形绘制：矩形。所有其他图形都至少需要生成一种路径 (path)。不过，我们拥有众多路径生成的方法让复杂图形的绘制成为了可能。
canvast 提供了三种方法绘制矩形：
- 1、fillRect(x, y, width, height)：绘制一个填充的矩形。
- 2、strokeRect(x, y, width, height)：绘制一个矩形的边框。
- 3、clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明。
**说明：**这 3 个方法具有相同的参数。
- x, y：指的是矩形的左上角的坐标。(相对于canvas的坐标原点)
- width, height：指的是绘制的矩形的宽和高。
什么是 SVG？
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
Canvas 与 SVG 的比较
下表列出了 canvas 与 SVG 之间的一些不同之处。
Canvas
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用
object元素
所有浏览器均支持 <object> 元素。
<object> 元素定义 HTML 文档中的嵌入式对象。
它旨在将插件（例如 Java applet、PDF 阅读器和 Flash 播放器）嵌入网页中，但也可以用于将 HTML 包含在 HTML 中：
实例
<object width="100%" height="500px" data="snippet.html"></object>
<object data="audi.jpeg"></object>
注意：如果浏览器不支持flash,将无法播放视频
iPad和iPhone不能显示flash视频。
embed 元素
所有主要浏览器均支持 <embed> 元素。
<embed> 元素也可定义了 HTML 文档中的嵌入式对象。
Web 浏览器长期以来一直支持 元素。但是，它不属于 HTML5 之前的 HTML 规范的一部分。
实例
<embed src="audi.jpeg">
请注意， 元素没有结束标记。它无法包含替代文本。
<embed> 元素也可用于在 HTML 中包含 HTML：
实例
<embed width="100%" height="500px" src="snippet.html">
注意：如果浏览器不支持Flash,那么视频将无法播放；
-
您必须把视频转换为很多不同的格式
-
元素无法通过 HTML 4 和 XHTML 验证。
-
元素无法通过 HTML 4 和 XHTML 验证。
**注释：**使用 (HTML5) 解决验证问题。
新的媒介元素
| 标签 | 描述 |
|---|---|
| 定义声音或音乐内容。 | |
| 定义外部应用程序的容器（比如插件）。 | |
| 定义 和 的来源。 | |
| 定义 和 的轨道。 | |
| 定义视频或影片内容。 |
Web SQL 数据库
核心方法
以下是规范中定义的三个核心方法：
-
openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
-
transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
-
executeSql：这个方法用于执行实际的 SQL 查询。
打开数据库
我们可以使用 openDatabase() 方法来打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库，使用代码如下：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);openDatabase() 方法对应的五个参数说明：
- 数据库名称
- 版本号
- 描述文本
- 数据库大小
- 创建回调
第五个参数，创建回调会在创建数据库后被调用。
执行查询操作
执行操作使用 database.transaction() 函数：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');插入数据
在执行上面的创建表语句后，我们可以插入一些数据：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")'); });我们也可以使用动态值来插入数据：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]); });*注意：*实例中的 e_id 和 e_log 是外部变量，executeSql 会映射数组参数中的每个条目给 “?”。
删除记录
删除记录使用的格式如下：
db.transaction(function (tx) { tx.executeSql('DELETE FROM LOGS WHERE id=1'); });删除指定的数据id也可以是动态的：
db.transaction(function(tx) { tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]); });
更新记录
更新记录使用的格式如下：
db.transaction(function (tx) { tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2'); });更新指定的数据id也可以是动态的：
db.transaction(function(tx) { tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]); });
| 定义视频或影片内容。 |
Web SQL 数据库
核心方法
以下是规范中定义的三个核心方法：
-
openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
-
transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
-
executeSql：这个方法用于执行实际的 SQL 查询。
打开数据库
我们可以使用 openDatabase() 方法来打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库，使用代码如下：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);openDatabase() 方法对应的五个参数说明：
- 数据库名称
- 版本号
- 描述文本
- 数据库大小
- 创建回调
第五个参数，创建回调会在创建数据库后被调用。
执行查询操作
执行操作使用 database.transaction() 函数：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');插入数据
在执行上面的创建表语句后，我们可以插入一些数据：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")'); });我们也可以使用动态值来插入数据：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]); });*注意：*实例中的 e_id 和 e_log 是外部变量，executeSql 会映射数组参数中的每个条目给 “?”。
删除记录
删除记录使用的格式如下：
db.transaction(function (tx) { tx.executeSql('DELETE FROM LOGS WHERE id=1'); });删除指定的数据id也可以是动态的：
db.transaction(function(tx) { tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]); });
更新记录
更新记录使用的格式如下：
db.transaction(function (tx) { tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2'); });更新指定的数据id也可以是动态的：
db.transaction(function(tx) { tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]); });
扫一扫
2535
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
