HTML基础总结(完整版)

Posted 2021-02-09 shiyou00

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML基础总结(完整版)相关的知识，希望对你有一定的参考价值。

HTML 概念介绍
HTML 规范
HTML元素
HTML 元素嵌套规则
HTML 属性
HTML meta元素
HTML 锚点
HTML 标签
HTML 表格
HTML 音频和视频
HTML 条件注释
HTML 文档头声明

html 概念介绍

【概念】

(Hyper Text Markup Language)超文本标记语言，是用来描述网页的一种语言
超文本(Hyper Text):不只包括文本，也可以包括图片、链接、音乐、视频等非文本元素
标记语言(Markup Language):标记语言是一套标记标签，HTML使用标记标签来描述网页

【标签】
单标签：<img src="" alt="" />
双标签：<b></b>

** HTML标签对大小写不敏感，但要全小写

【属性】
标签的属性
常用属性：

class 类
id 元素ID
style 元素的行内样式
title 元素的额外信息，可在工具提示中显示

【元素】
HTML元素以开始标签起始，以结束标签终止，元素的内容是开始标签与结束标签之间的内容。

【文档】
HTML文档被称为网页，由嵌套的HTML元素构成

【注释】
注释是在HTML插入的描述性文本，用来解释该代码或提示其他信息。

<!-- 注释内容 -->

ps: 注释只出现在代码中，不会在页面中显示；且注释不可嵌套

HTML 规范

一个HTML的结构和解释

<!DOCTYPE html> // 文件应以“<!DOCTYPE ......>”首行顶格开始，推荐使用“<!DOCTYPE html>”
<html>
<head>
    <meta charset="utf-8"/> // 必须声明文档的编码charset，且与文件本身编码保持一致，指定字符编码的 meta 必须是 head 的第一个直接子元素。推荐使用UTF-8编码<meta charset="utf-8">
    <title>Document</title> // 页面title是不可缺少的一项，title 必须作为 head 的直接子元素，并紧随 charset 声明之后
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="5/style.css"/> // 引入 CSS 时必须指明 rel="stylesheet"
    <link rel="shortcut icon" href="ico.ico"/> // link标签必须在head标签中引入
</head>
<body>

<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>   // 1. js引入要放在body的最下方(防止页面阻塞) 2. 移动环境或只针对现代浏览器设计的 Web 应用，如果引用外部资源的 URL 协议部分与页面相同，建议省略协议前缀。这是因为使用 protocol-relative URL 引入 CSS，在 IE7/8 下，会发两次请求。是否使用 protocol-relative URL 应充分考虑页面针对的环境
</body>
</html>

HTML元素

块级元素

【h1, h2, h3, h4, h5, h6】
含义：标题元素
注意：h1 在一个HTML中最好只出现一次(seo方面)

【hgroup】
含义：用于包括标题组
HTML5新增的标签

【p】
含义：段落元素

【div】
含义：块级空元素

【hr】
含义：分割元素

【pre】
含义：预定义格式文本
在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符(比如空格和换行符)都会显示出来，通常表示已排版的内容，如代码块和字符画等

【blockquote】
含义：HTML块级引用元素
代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进。若引文来源于网络，则可以将原内容的出处URL地址设置到cite特性上，若要以文本的形式告知读者引文的出处时，可以通过元素

【address】
含义：联系信息

骨架类：html body
表单类：form fieldset output legend optgroup option
列表类：ul ol li dl dd dt
HTML5新增结构标签：article aside header footer nav section
HTML5新增多媒体：figure figcaption
HTML5新增功能型：summary details

内联元素

通用容器：span
强调重要：em strong
文字间隔：i(斜体) b(粗体)
不精确文字：s(在HTML5中重新定义为有错的、过时的、不被建议使用的文本，常用于表示价格变动等)
高亮显示：mark
次要评论：small
术语处理：dfn(定义术语) abbr(缩写词)
引用：cite(表示作品标题的引用，可以是书影音画等) q(表示短引用，常用于引用别人说的话，用引号可以表达等价语义)
换行：br wbr(指定单词可以换行的位置)
上下标：sup sub
文本删改：ins(文档中插入的内容) del(文档中删除的内容)
特定时间：time(表示日期)
注音标识：ruby(ruby标签定义注音标识，多用于CJK文字，CJK是指中日韩统一表意文字(Chinese、Japanese、Korean)) rt(标记文字) tp(标记括号)

复制代码
<ruby>
    汉
    <rp>(</rp>
    <rt>hàn</rt>
    <rp>)</rp>
    语
    <rp>(</rp>
    <rt>yǔ</rt>
    <rp>)</rp>    
</ruby>

文字方向：bdi(忽略周围文字方向的文字) bdo(覆盖两种方向的设置，允许显式设置方向，并覆盖所有其他当前方向)

<p>When rendered by a browser, <bdo dir="rtl">these words</bdo> will appear as 'sdroweseht'</p>

代码：code(计算机代码) kbd(键盘码) samp(计算机例子代码) tt(打字机代码) var(变量)

结构元素

section：表示文档中的一个区域(或节)，是区块级通用元素
article：表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构。
aside：表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。
nav：HTML导航栏(

)描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表
header：表示页面头部或区块头部
footer：表示最近一个章节内容或者根节点(sectioning root)元素的页脚
main(IE不支持)：main元素(<main>)呈现了文档<body>或应用的主体部分。

交互元素(浏览器的支持度太低)

details ：主要用于描述文档或文档某个部分的细节
dialog ：用来定义对话框或窗口，且该对话框位于窗口的水平居中位置

HTML 元素嵌套规则

HTML 属性

属性：
【class】
规定元素的一个或多个类
注意: 类不能以数字开头

class = "classA classB" // 多个类的写法

【id】
规定元素的唯一标识
注意：若浏览器中出现多个id名的情况，CSS样式对所以该id名的元素都生效，但javascript脚本仅对第一个出现该id名的元素生效

【dir】
文字的方向
值：ltr/rtl/auto

【lang】
HTML的lang属性可用于标记网页或部分网页的语言。也就是说lang这个属性不仅仅可以用在html标签上

en:英文
zh:中文
zh-CN：简体中文

<html lang="en">

<p>You'd say that in Chinese as <span lang="zh">文献情报中心</span>.</p>

有什么作用？
简单来说，可能对于程序来说没有太大的作用，但是它可以告诉浏览器，搜索引擎，一些处理Html的程序对页面语言内容来做一些对应的处理或者事情。
比如可以
根据根据lang属性来设定不同语言的css样式，或者字体

告诉搜索引擎做精确的识别
让语法检查程序做语言识别
帮助翻译工具做识别
帮助网页阅读程序做识别
等...

【style】
设置行间样式

<div style="background:red;"></div>

【tabindex】
规定元素的tab键次序（1开始）

<div>
    <a tabindex="3">cc</a>
    <a tabindex="2">bb</a>
    <a tabindex="1">aa</a>
</div>

【title】
规定关于元素的额外信息，鼠标移到元素上时显示一段提示文本

<a href="#" title="我是一个超链接">百度</a>

技术图片

HTML5新增的属性

【contenteditable】
作用：指定是否可以在浏览器里编辑内容
值：true/false
注意：设置document.designMode =‘on‘时，页面的任意位置都可以编辑；使用contenteditable =‘true‘则只对具体元素和其包含的元素起作用
移动端：移动端ios5以及android3之后才支持该属性

【data-】
作用：用于存储页面或应用程序的私有定制数据
注意：属性名不应包含任何大写字母，且在前缀"data-"之后必须有至少一个字符；属性值可以是任意字符串
使用：可以在所有浏览器中使用getAttribute方法来获取data-属性的值，也可以使用javascript中dataset属性访问data-*属性的值，不过IE10-浏览器不支持dataset

【draggable】IE8- 不支持
作用：用户是否可以拖动元素
值：true/false/auto
注意：链接和图像默认是可拖动的

【hidden】(IE7-不支持)
作用：显示或隐藏该元素(与display:none的作用一样)
值：hidden="" || hidden= "hidden"

【spellcheck】(IE9-不支持)
作用：规定是否对元素进行拼写和语法检查,对拼写错误的单词会在其下方出现红线
范围：可编辑区域（表单或contenteditable元素）
值：true/false
注意：移动端支持不好

HTML meta元素

标签(meta-information)用于提供页面有关的元数据，除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键词和网页等级的设定。通过设置不同的属性，元数据可以分为以下几种:

<meta charset="utf-8"/> // charset声明声明当前文档所使用的字符编码，但该声明可以被任何一个元素的lang特性的值覆盖。文档的编码一定要与文件本身的编码保持一致，否则会出现乱码，推荐使用UTF-8编码

<meta name="keywords" content="HTML, CSS, XML" /> // 关键词
<meta name="description" content="Free Web tutorials on HTML, CSS, JavaScript" /> // 描述
<meta name="author" content="xxxx"> // 作者
<meta name="copyright" content="版权"> // 版权
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> // 视口设置
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> // IE浏览器渲染 如果安装了GCF(Google Chrome Frame谷歌内嵌浏览器框架GCF)，则使用GCF来渲染页面，如果没有安装，则使用最高版本的IE内核进行渲染
<meta name="renderer" content="webkit"> // 如果是双核浏览器，则使用webkit内核渲染
<meta http-equiv="refresh" content="5"> // 让网页多少秒刷新
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"> // 跳转到其他网页
<meta http-equiv="Expires" Content="Sat Nov 28 2016 21:19:15 GMT+0800"> // 可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式
<meta http-equiv="Pragma" Content="No-cach"> // 用于设定禁止浏览器从本地机的缓存中调阅页面内容，用户无法脱机浏览
<meta http-equiv="windows-Target" content="_top"> // 强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用

base标签

<base href="http://cnblogs.com" target="_blank"> // 用于指定文档里所有相对URL地址的基础URL，为页面上所有链接规定默认地址和默认打开方式。文档中的基础URL可以使用document.baseURI进行查询

HTML锚点

HTML 标签

HTML 表格

HTML 音频和视频

HTML 条件注释(hack常用)

IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句，作用是可以灵活的为不同IE版本浏览器导入不同html元素。很显然这种方法的最大好处就在于属于微软官方给出的兼容解决办法而且还能通过W3C的效验

【识别IE】

<!--[if IE]>
<div class="box" id="box">只在IE中会显示</div>
<![endif]-->

【识别IE具体版本】

6    [if IE 6]
7    [if IE 7]
8    [if IE 8]
9    [if IE 9]

<!--[if IE 7]>
<div class="box" id="box"></div> // 只在IE7中显示
<![endif]-->

【IE范围】

gt          大于(greater than)
gte     　大于等于(greater than or equal)
lt           小于(less than)
lte         小于等于(less than or equal)

<!--[if lte IE 7]>
<div class="box" id="box"></div> // 小于等于IE7识别
<![endif]-->

识别非IE

实际上识别的是IE10+浏览器和其他非IE浏览器

<!--[if !IE]>
<div class="box" id="box"></div>
<![endif]-->

** 实际应用中我们常常用来判断IE版本来引入相应的JS进行hack，或者通过不同IE版本引入不同的jquery版本

HTML 文档头声明

以上是关于HTML基础总结(完整版)的主要内容，如果未能解决你的问题，请参考以下文章

用python拉钩网的完整版

牛逼！阿里巴巴总结的《MySQL学习笔记》火了，完整版PDF开放下载！

UI设计师零基础入门到精通精品视频教程155课高清完整版

Python语言及其应用PDF高清完整版免费下载|百度云盘|python基础教程PDF电子书

中台原创系列全集及大厂总结的设计模式 PDF 完整版开放下载！