HTML标签归纳

Komorebi゛

已于 2022-09-28 10:00:57 修改

阅读量348

点赞数

分类专栏： HTML 文章标签： html 前端

于 2020-11-08 15:46:12 首次发布

本文链接：https://blog.csdn.net/Komorebi_00/article/details/109559315

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、样式的引入及加载优先级

样式有三种方式引入：

外链的方式：<link rel="stylesheet" href="">
头部style标签内定义
行内style属性定义

优先级：行内style>头部style标签>外链

二、脚本引入的方式区别

script标签可以头部引入也可以在body后引入，但是有一些区别：

因为页面是从上而下执行的，所以如果有些和页面有关的脚本会阻塞页面渲染，甚至报错
一般外部引用的插件会放在头部引用，和页面有关的都会放在页面底部去加载

三、代码语义化

1. 什么是HTML语义化？

HTML语义化是指在用标签构建HTML页面时避免大篇幅地使用无语义的标签

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

2、为什么要语义化？

为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构；
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
有利于SEO优化：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

四、标签类型、特点以及转换

1. 行内元素：

特点：无法自动换行，无法设置宽高
常见元素：a、b、i、em、sub、sup、span、strong、label、br、big

2. 块级元素：

特点：自动换行，可设置宽高
常见元素：div、p、ul、ol、li、h1-h6、hr、table、form

3. 行内块元素：

特点：拥有内在尺寸，可设置高宽，不会自动换行
常见元素：button、img、input、select、textarea

4. 元素之间转换

可通过display设置：

将元素变为块级元素：display: block;
将元素变为行级元素：display: inline;
将元素变为行级块元素：display: inline-block;

五、重要标签的作用：

<!DOCTYPE html>的作用
- DOCTYPE是document type(文档类型)的简写，告诉浏览器以什么样的文档类型来解析文档
- DOCTYPE的声明必须是 HTML 文档的第一行
lang="en"申明页面语言

meta 标签的作用：

参考文章：meta标签的作用及整理

<!-- 1.声明文档使用的字符编码 -->
<meta charset="UTF-8">

<!-- 2.告诉浏览器用webkit内核解析（前提是浏览器有webkit内核才可以） -->
<meta name="renderer" content="webkit">

<!-- 3.浏览器禁止缩放（viewport主要是影响移动端页面布局的） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 4.百度禁止转码（http-equiv属性是添加http头部内容） -->
<meta http-equiv="Cache-Control" content="no-siteapp" />

<!-- 5.禁止浏览器缓存 -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

<!-- 6.SEO优化 -->
<!-- 页面标题<title>标签(head 头部必须) -->
<title>your title</title>
<!-- 页面关键词 keywords -->
<meta name="keywords" content="your keywords">
<!-- 页面描述内容 description -->
<meta name="description" content="your description">
<!-- 定义网页作者 author -->
<meta name="author" content="author,email address">
<!-- 定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 -->
<meta name="robots" content="index,follow">

http-equiv：添加http头部内容
name：供浏览器解析
charset：声明文档使用的字符编码，解决乱码问题，要放在第一行

content参数：

width:device-width：自适应手机屏幕的尺寸宽度
maximum-scale：缩放比例的最大值
minimum-scale：缩放比例的最小值
initial-scale：缩放的初始化
user-scalable：用户是否可以缩放

a标签的各种使用方式

<a href="">刷新页面</a> <!-- 刷新页面 -->
<a href="#">#top 跳转</a> <!-- 默认 #top -->
<a href="#anchor">锚点跳转</a> <!-- 跳转指定id的锚点 -->
<a href="javascript:void(0)">无反应</a> <!-- 没有任何反应 -->
<a href="javascript:void(console.log('123'))">void：表达式计算</a>
<a href="javascript:void(openPage())">void：方法调用</a>
<a onclick="openPage()">链接</a>
<a href="https://www.baidu.com" target="_blank">跳转新页面</a>
<a href="https://www.baidu.com" target="_self">本页面跳转</a>

表单内各种标签的使用

<form>
    <label for="radio1">单选框1</label>
    <input name="radio" type="radio" id="radio1" value="" />
    <label for="radio2">单选框2</label>
    <input name="radio" type="radio" id="radio2" value="" />
    <br />
    <label for="checkbox1">复选框1</label>
    <input name="checkbox" type="checkbox" id="checkbox1" value="">
    <label for="checkbox2">复选框2</label>
    <input name="checkbox" type="checkbox" id="checkbox2" value="">
    <br />
    <select name="select" multiple>
        <option>---请选择---</option>
        <option value="1">选项1</option>
        <option value="2" disabled>选项2</option>
        <option value="3" selected>选项3</option>
    </select>
    <br />
    <label for="text">输入框</label>
    <input name="text" type="text" id="text" value="" />
    <input type="file" accept=".jpg" multiple>
    <br />
    <button onclick="submitForm()">提交</button>
</form>

input标签新增H5 type属性：

color、date、time、week、month、email、url、tel、number、range、search

自闭和标签
<img />、<input />、<br />、<hr/ >、<meta />、<link />
注释标签

p标签的注意点
p标签内无法包裹块级元素

一些有趣的h5新增标签
header、nav、article、section、aside、footer、audio、video、mark、progress、meter、details、datalist、canvas

<mark>用来展示高亮的文字</mark>
<!-- 下载进度 -->
<progress value="82" max="100"></progress>
<!-- 显示度量值 -->
<meter value="3" min="0" max="10">3/10</meter>
<!-- 描述文档或文档某个部分的细节 -->
<details>
    <summary style="outline: none">summary标签</summary>
    包含details元素的标题
</details>
<!-- 选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值 -->
<input list="cars" />
<datalist id="cars">
    <option value="BMW">
    <option value="Ford">
    <option value="Volvo">
</datalist>