跳到主要内容

Create by fall on 14 Aug 2019 Recently revised in 28 Nov 2024

标签

语义化标签​

标签名作用
header所有头部元素的集合
main主体元素的集合
footer所有脚部元素的集合
hgroup标题组合
nav导航
article可独立分配的或可复用的结构，帖子、杂志或新闻文章、评论
aside辅助信息的内容
section区域，文档中一个通用独立章节，一般来说会包含一个标题，（类似卡片）
figure描述图像或视频
figcaption描述图像或视频部分
details文档细节和 summary 一起使用
summary文档标题和 details 一起使用
progress定义进度条，定义度量范围
time定义日期或者时间

注：header，footer，main 在同一个网页中只出现一次

默认样式​

<div>、<span> 标签没有默认样式

其它标签基本上都有默认样式，来实现最基础的对应功能，下面是常用的标签的默认样式。

标签名称默认样式
<body>margin:8px
<p>margin:16px 0
<ul>、<li>margin:16px 0;padding-left:40px;list-style:disc;
<a>text-decoration:underline;
<h1>margin: 17.42px 0

如何重置默认样式：

方法一：*{margin：0;padding:0}（不推荐

  • 优点：直接清除所有默认样式，不用考虑哪些有没有默认样式
  • 缺点：稍微影响性能

方法二：

<style>
  body,p,h1,ul{padding:0;margin:0;}
  list-style:none
  ul{list-style:none;}
  a{text-decoration :none ;color : blue} 
  /* 取消超链接的颜色和底部的下划线  */
  img{display:block} 
</style>

默认样式的清除，会影响全局样式，应该由一个文件对全局的样式做统一的修改

文字效果标签​

标题标签​

<h1> ... <h6> 分别表示一到六级标题

文本强调标签​

<p> 表示一个文本段落

<strong> 和 <b> 加粗标签

<em> 和 <i> 斜体标签

<strong>加粗</strong>
<b>加粗</b>
<em>斜体：emphasize</em>
<i>斜体</i>

两者表现相同；可以利用语义标准化进行转换；建议使用语义化标签

<del>删除，中划线</del>

<ins>下划线</ins>

按钮标签​

会告诉用户这个标签可以点击

<button>

引用标签​

  • blockquote：引用大段落和解释
  • q：引用
  • abbr：缩写，或者字母字母缩略词
  • address：引用文档地址信息
  • cite：引用著作的标题

换行标签​

<br> 和 <wbr>

  • <br> 进行换行操作
  • wbr是当单词过长时，可以添加到单次从中间，强制换行

特殊段落标签​

<pre></pre> 和 <code></code>

HTML 最多识别一个空格，想要连续空格时，需要使用特殊标签，或者设置 white-space:pre

  • pre 标签会保留空格和换行（但同时也会设置字体样式 font-family:monospace 、
  • code 标签通常把文本变成等宽字体（更改了字体），暗示内容为代码。

注音​

<ruby></ruby> 和 <rt></rt>

Fallshuai

两者进行组合，实现给生僻字注音

高亮标签​

  • mark
标记，通常是将重点高光

脚注​

  • sub：脚标
  • sup：顶部标注

氧气的化学式为：O2

1024 = 210

布局标签​

展开详情​

<detail>、<summary>

<detail>
	<summary>这是一个总结</summary>
  <p>
    这是其余的内容介绍
  </p>
</detail>

hr 间隔​

使用如下

<hr>

aside​

独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响

dialog​

弹窗标签，是最顶层的标签 top-layer，无视其它 z-index 标签，总是在屏幕最上方，默认 display:none，需要用 js 调用标签上的 showModal 方法来展示该标签

使用时有一些问题，等待补充中

资源标签​

img​

图片标签，通过该标签的 src 属性可以引入图片

<!-- src 是 source，资源应用 -->
<!-- 标签在嵌入 div 标签中，由于地线和基线问题，和容器底部有空隙，需要更改 vertical-align 对齐方式 -->
<img src="./app.js" alt="资源">
<style>
  img{
    /* 默认的对齐方式 vertical-align:baseline; */ 
    vertical-align:bottom;
  }
</style>

可以用做 DNS 预解析

Hypertext Reference 即，超文本引用

<!-- 引入网站左侧的小图标 -->
<link rel="icon" href="/favicon.ico" />
<!-- 引入样式内容 -->
<link href="/examples/link-element-example.css" rel="stylesheet">

iframe标签​

引入其他 html 标签在当前 html 标签使用

运用 iframe 进行样式调节（或者是引入广告。。。）甚至是钓鱼网站的实现。

map标签​

利用 map，可以定义一个图片中可以点击的区域，通过 img 的 usemap 进行

<img src="./img/aNavBg.png" alt="" usemap="#good">
<!-- 通过good 绑定使用的 map -->
<map name="good">
  <!-- rent 是矩形，只要设置两个点的宽高即可 -->
  <area shape="rent" coords="200 100 500 400" href="http://www.boy.com" alt="滚粗">
  <!-- circ 是圆形，设置中点和半径即可 -->
  <area shape="circ" coords="100 100 400" href="http://www.baidu.com" alt="滚粗">
  <!-- poly 是自定义图形，设置多个点 -->
  <area shape="poly" coords="200 100 400 300 600 200" href="http://www.baidu.com" alt="滚粗">
</map>

audio、video​

<audio> 用于嵌入音频文件，video 用于嵌入视频文件

<source>

标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源

base 标签​

指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个<base>元素。

<base target="_self">：指定所有页面都在本页面打开

canvas​

使用 JS 控制和绘制内容的标签。

嵌入标签​

标签作用
embed 和 objectobject要搭配parame使用（需要添加flash插件，什么flash早就放弃了？好事啊）
audio 和 video引入音频和视频，H5新功能

表格和表单​

一系列标签，用于表格（数据展示），表单（数据输入）

详细请见：表单和表格标签

表单标签​

表单标签：form、input、textarea、select、label

<div class="preference">
  <label for="cheese">Do you like cheese?</label>
  <input type="checkbox" name="cheese" id="cheese" />
</div>

表格标签​

表格：是以表格的形式展示数据。

  • table：用于包裹表格
  • tr：第一行数据
  • th：加粗的单元格，可以就是单元格的头部
  • td：一行中的数据，在tr标签内部
  • caption：用于放置标题

meta标签​

表示不能由其它元相关元素（<base>、<link>、<script>、<style>、<title>）之一表示的任何元元素信息

  • 可以用作搜索引擎优化（SEO）
  • 实现页面跳转
  • 控制不同浏览器的内容一些配置
  • 控制视图 Viewport

主要属性有以下几个

  • name 属性，提供文档级别(document-level)的元数据，应用于整个页面
  • 设置了 http-equiv，meta 元素则是编译指令，提供信息与类似命名的HTTP头部相同
  • charset，是字符集声明，告诉文挡使用那种字符编码
  • 如果设置了 itemprop，meta 提供用户定义的元数据，同一个 meta 中出现以上三者之一，该属性不能被使用
  • contant，包含 name 或者 http-equiv 的属性值，具体取决于所使用的值。

官方文档：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta

简书总结：https://www.jianshu.com/p/d78cc8e0e3b2

name 中的属性和内容主要是便于搜索引擎机器人查找信息和分类信息用的

name属性​

// 页面描述
<meta name="description" content="大连美 团网精选大连美食餐厅，酒店预订，电影票,旅游景点,外卖订餐,大连">
// 页面关键字
<meta name="keywords" content="大连美食 ,大连酒店,大连团购">
// 网页作者
<meta name='author' content="name,zzzzz@163.com">
// 表示网站用什么制作
<meta name="generator"content="信息参数"/> 
// 说明网站的版权信息
<META NAME="COPYRIGHT"CONTENT="信息参数"> 
// revisit-after 用来限制搜索引擎抓取，网站重访时间，7days 表示 7 天
<meta name="revisit-after" content= "7days">
// 渲染器
<meta name="renderer" content= "webkit">
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式

robots

robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。 content的参数有all,none,index,noindex,follow,nofollow。默认是all。

<meta name="robots" content="index,follow"/>

robots可选参数作用
all文件将被检索，且页面上的链接可以被查询
none文件将不被检索，且页面上的链接不可以被查询；
index文件将被检索
follow页面上的链接可以被查询；
noindex文件将不被检索，但页面上的链接可以被查询
nofollow文件将被检索，但页面上的链接不可以被查询

http-equiv 属性​

// 代码告诉 IE 浏览器，IE8/9 及以后的版本都会以最高版本 IE 来渲染页面。如果安装了 chrome 渲染引擎插件，会用 chrome 进行渲染
<meta http-equiv="x-UA-Compatible" content="ie=edge,chrome=1" >
<!-- 
content如果只包含一个正数，则为重新载入页面的读秒数；
如果加上url指向跳转的页面，则表示重定向到指定网站的秒数
-->
<meta http-equiv="refresh" content="3" url="">
<!-- 禁止浏览器从本地计算机中的缓存访问页面内容 -->
<meta http-equiv="Pragma" content='no-cache'>
// cookie设定，如果页面过期，存盘的cookie会被删除，时间格式为GTM
<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/"> 
// 强制页面在当前窗口以独立页面显示，注：防止别人在框架中吊用自己的页面
<meta http-equiv="Window-target"content="_top"> 
// 用来设定页面使用的字符集
<meta http-equiv="content-type" content="text/html; charset=utf-8">
// 显示语言的设定
<meta http-equiv='Content-Language' content="zh-cn">
// expires(期限)，设定网页的到期时间，一单网也过期，就需要从服务器上重新传输
// 必须使用GMT的时间格式
<meta http-equiv="expires" content= "Wed, 20 Jun 2019 22:33:00 GMT">
// 是否显示图片工具栏 
<meta http-equiv="imagetoolbar" content=false>
// 指明页面中脚本类型
<meta http-equiv="content-Script-Type" Content="text/javascript">
// 告诉爬虫，无需爬该内容
<meta name="robots" content="nofollow" />

Viewport

Viewport 包括 Visual Viewport（可视窗口）和 Layout Viewport（布局窗口）

可视窗口就是看见的那一部分，Layout Viewport 默认宽度为980px，现代网页需要将Viewport，更改成Visual Viewport大小，方便进行网页制作

可以通过js方法document.documentElement.clientWidth获取当前网页宽度

  • width：可以指定一个值，如600，或者是device-width为当前设备宽度
  • initial-scale：初始缩放比例，默认为1，即一倍缩放
  • maximum-scale：允许用户的最大缩放比例
  • minimum-scale：允许用户的最小缩放比例
  • user-scalable：是否允许用户缩放yes no或者0 1
  • viewport-fit=cover 苹果适配，用于检测
<meta name="viewport" content="width=device-width, initial-scale=1.0">

标签相互作用​

固定嵌套规范​

父标签子标签作用
<ol>（有序列表）、<ul>（有序列表）<li>和有序列表
<dl><dt>、<dd>描述列表
<table><tr>、<thead>、<tbody>、<tfoot>、<caption>表格嵌套的内容
<tr><th>、<td>表格行嵌套的列
<ul>
  <li>再见</li>
  <li>昨天</li>
</ul>
<dl>
  <dt>Beast of Bodmin</dt>
  <dd>A large feline inhabiting Bodmin Moor.</dd>
</dl>

类型的嵌套​

  • 块能嵌套内联样式<div><span></span></div>
  • 块能嵌套块，除了部分如：<p><div></div></p>
  • 内联标签不能嵌套块标签，a 标签除外

参考文章​

文章名称（作者）链接
LxxyxHTML meta标签总结与属性使用介绍