1、常用标签以及适用场景
ps：前面有感叹号的是自闭合标签
<html>
<head> //页面的头部， 一般来说只有以下6个标签能放在<head>标签内<script>、<base>
<title> //标题仅支持纯文本，不支持嵌套其它标签
<style>
<script>
!<meta charset="utf-8"/> //定义页面的说明信息，供搜索引擎查看
!<link rel="icon/stylesheet" href="链接"> //用于连接外部的CSS文件或脚本文件
!<base href="页面中所有相对路径的基准地址" target="页面中所有链接的打开方式"> //定义页面所有链接的基础定位，a标签自身的target属性可以覆盖base的全局属性
<body> //页面的身体，会在页面中展现
<div> //主要用来为HTML文档内大块的内容提供结构和背景
<hgroug> //HTML5新增，用于组合标题，一般来说这个标签可以替换以前使用div的场景
<h1>~<h6> //设置不同大小的标题
</hgroug>
<p> //paragraph，段落
<span> //没有明确语义，可组合文档中的行内元素
<pre> //可以保留文本中的空格和换行符，常与code配合使用
<code></code> //用于表示计算机源代码
</pre>
!<img src="图片地址" title="鼠标移到图片上显示的文字" alt="图片加载失败显示的文字" height="300"> //设置一个图像 //alternative供选择的;供替代的
!<br/> //换行
!<hr/> //水平分割线
<em> //斜体，强调
<strong> //加粗，语义更强调
<b> //样式上加粗
<u> //underline，下划线
<i> //italic，斜体，由于i和icon首字母相同，很多情况会用于表示图标
<marquee> //文字飘动，现在不使用
<blink>
<a><iframe><map>
列表<ol><ul><dl>
表单<form><input><label><button><select>
表格<table>
往下继续浏览查看
标签通用属性
id
class="aaa bbb ccc"
title
style
tabindex="-1" //按tab键时跳转的顺序，默认值为-1时不参与排序
contenteditable //表示元素是否可被用户编辑，true/false或者空相当于true
contenteditable
2、a链接
<a href="链接地址" target="_self" download="下载文件的名字"> //anchor，超链接
href链接地址有如下几种情况：
https://baidu.com //某个网址
#top //页面顶部，top也可以更改为页面其他特定位置
https://baidu.com/#top //其它页特定位置跳转
mailto:电子邮件 //需要点击人电脑安装邮件客户端
tel:电话号码
tencent://temp-chat?QQ=QQ号码
thunder://迅雷下载地址
href="" //空的属性点击后链接当前页面
##/javascript:;/javascript:void(0); //表示浏览器地址无#，不跳转也不刷新页面
target属性
_blank //新窗口打开
_self //当前窗口打开
以下两个属性通常与iframe一起使用
_parent //链接在父窗体显示，若无则行为与_self相同
_top //链接在顶层窗体显示，若无则行为与_self相同
target="自定义值"，自定义值要求不能以_开头
target="自定义值"，该设置打开窗口变少，网站流量会变小一般不采用了
download属性（html5）
表示点击这个链接将下载链接对应的文件，而不是跳转到目标页面，下载的文件名以download属性的值来命名，若无值则浏览器会自行命名
<a href="./pic.jpg" target="_blank" download="01.png">点我下载图片(默认命名是01.png)</a>
如果同时有target=“_blank”，又有download属性，浏览器会下载，不会开新窗口
3、iframe
<a href="https://www.baidu.com" target="frame1">点击我会在下面的frame里打开百度</a>
<iframe src="https://nodejs.org" name="frame1" frameborder="1"></iframe>
窗口层层嵌套
<iframe src="a.html" name="frame2" frameborder="1" width="500" height="200">
<p>您的浏览器不支持框架，请升级您的浏览器</p> //退化内容
</iframe>
//a.html
<h1>this is a</h1>
<iframe src="b.html" frameborder="1" width="400"></iframe>
//b.html
<h1>this is b</h1>
<iframe src="c.html" frameborder="1" ></iframe>
//c.html
<h1>
this is c
<a href="https://nodejs.org" target="">nodejs</a>
</h1>
_top 在最顶层窗口打开 → 下图中为a
_parent 在父窗口打开 → 下图中为b
frame2 在名称为frame2的窗口中打开
target无属性默认自身窗口打开
目前target无属性，点击a链接后默认自身窗口打开
sandbox(将一个网页分成多个窗口)
<frameset cols="30%, 30%, *">
<frameset rows="200, *"> <!-- 窗口占比30% -->
<frame src="http://xieranmaya.github.io"> <!-- 窗口占比200 -->
<frame src="http://xieranmaya.coding.me"> <!-- 窗口占剩下的 -->
</frameset>
<frame src="https://www.baidu.com"> <!-- 窗口占比30% -->
<frame src="https://www.baidu.com"> <!-- 窗口占剩下的 -->
</frameset>
<noframe>您的浏览器不支持frameset</noframe> //退化内容
frameset
为什么<iframe>的退化内容写在标签内部？而<frameset>的退化内容在外部？
由于<frameset>正常使用的时候，标签内是有内容的，所以当浏览器不支持<frameset>标签的时候不会读取里面的内容，<noframe>标签需要放在外面才能被读取。同理<script>标签，正常使用的时候标签内有内容的，<noscript>标签需要放在外面
而
<iframe>、<canvas>标签，正常使用的时候里面无需内容，所以回退内容(fallback)就可以放在里面，也有助于HTML结构更加紧凑
4、ol, ul, li, dl, dt, dd等这些标签都适合用在什么地方，举个例子
1、ol,ul,li适用无描述的列表。例如：新闻展示页面，一共N条新闻，点进去可浏览详情。
<ol> //ordered list，有序列表
<li></li>
<li></li>
</ol>
<ul> //unordered list，无序列表
<li></li>
<li></li>
</ul>
2、dl,dt,dd适用有描述的列表。例如：简历页面，介绍自己的信息、年龄、住址等。
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
dl、dd、dt 标签展示
5、Form表单、<input>
<label>、<button>、<select>、<fieldset>
点击链接查看https://www.jianshu.com/p/57f1dfa9d880
6、<table> 表格
<table border="1">
<caption>货品列表</caption><!-- 定义了表格标题，caption必须在table标签之后立即插入 -->
<colgroup><!-- 用来分组col标签，必须出现在caption后面，thead/tbody前面 -->
<col> <!-- 用来设置表格列的属性和样式，第一列没有设置 -->
<col bgcolor="red"> <!-- 第二列背景颜色红色 -->
</colgroup>
<thead><!-- 表头 -->
<tr>
<th>编号</th><!-- 用于表头的单元格，字体加粗 -->
</tr>
</thead>
<tbody><!-- 表体 -->
<tr>
<td>001</td><!-- 用于一般的单元格 -->
<td rowspan="2">5</td> <!-- rowspan 定义跨行数 -->
<td colspan="2">5</td><!-- colspan 定义跨列数 -->
</tr>
</tbody>
<tfoot><!-- 表尾 -->
<tr>
<td>tfoot</td>
</tr>
</tfoot>
</table>
<table> 表格
7、HTML5新增标签
<header> //定义了文档的头部区域
<hgroup> // header group 标题组
<footer> //定义 section 或 document 的页脚
<nav> //导航
<article> //定义页面正文内容
<section> //定义文档中的节（section、区段）
<aside> //定义页面内容之外的内容
<figure> //用于文档中插入图片，实现图文混排效果（注意：figure容器自带margin值），块级元素
<figcaption> //<figure>的子元素，作为<figure>的第一个或者最后一个元素，为<figure>中的图片添加一个可视标题，块级元素
<progress>
绘制一个进程条，可设置属性：value（当前值） max（最大值），若无value属性，根据浏览器的不同有可能显示“正在下载...”文本、一个下载的进度条动画，通常与js一起使用，用于动态显示进度
<meter>
和progress标签很像，绘制一个计量条，与progress不同的是，它表示某种计量，适用于温度、容量等，可设置value max min等属性。
<ruby>
<rt></rt>
</ruby>
ruby标签用于注释（中文注音或字符），rt内为注释的内容，rp内为浏览器不支持ruby元素时显示的内容
<contentdeditable>
<contextmenu>
新增媒体标签
<source>
<video>
<progress value="" max=""> 进度条
需通过CSS在不同浏览器显示相同效果
8、网页标题图标设置
标题图标
- html标签添加图片链接
<link rel="icon" href="图片链接">
- 网站根目录添加 favicon.ico 文件，浏览器会自动读取
9、<map> 可以让图片不同区域对应不同的链接
<img width="300" usemap="#themap" src="图片地址" alt="">
<map name="themap">
<!-- shape支持三种形状，rect矩形，圆形，不规则 -->
<area title="xxxx" href="xxx" shape="rect" coords="0,0,100,100">
<area title="xxxx" href="xxx" shape="circle" coords="0,0,100,100">
<area title="xxxx" href="xxx" shape="poly" coords="0,0,100,100">
</map>
网友评论