关于html:初识HTML

HTML 是 HyperText Markup Language(超文本标记语言)不是编程语言

它不是一种编程语言，而是一种标记语言，用于通知浏览器如何结构你的页面。它能够由一系列 HTML 元素组合成 web 开发人员想要的简略或者简单的页面。“超文本”就是指页面内能够蕴含图片、链接，甚至音乐、程序等非文字元素。HTML 也是一种标准，一种规范，它通过标记符号来标记要显示的网页中的各个局部。网页文件自身是一种文本文件，通过在文本文件中增加标记符，能够通知浏览器如何显示其中的内容（如：文字如何解决，画面如何安顿，图片如何显示等）。浏览器按程序浏览网页文件，而后依据标记符解释和显示其标记的内容，对书写出错的标记将不指出其谬误，且不进行其解释执行过程，编制者只能通过显示成果来剖析出错起因和出错部位。能够应用.html 与.htm 作为 HTML 文件的后缀名（扩展名）
HTML 的历史版本倒退
①HTML 1.0：在 1993 年 6 月作为互联网工程工作小组(IETF) 工作草案公布。

②HTML 2.0：1995 年 1 1 月作为 RFC 1866 公布，于 2000 年 6 月公布之后被发表曾经过期。

③HTML 3.2：1997 年 1 月 14 日，W3C 举荐规范。

④HTML 4.0：1997 年 12 月 18 日，W3C 举荐规范。

⑤HTML 4.01（渺小改良）：1999 年 12 月 24 日，W3C 举荐规范。

⑥HTML 5：2014 年 10 月，HTML5 是公认的下一代 Web 语言，极大地晋升了 Web 在富媒体、富内容和富利用等方面的能力，被喻为终将扭转挪动互联网的重要推手。Internet Explorer 8 及以前的版本不反对。

HTML 特点

超文本标记语言文档制作不是很简单，但功能强大，反对不同数据格式的文件镶入，这也是万维网（WWW）流行的起因之一，其次要特点如下：

1. 繁难性：超文本标记语言版本升级采纳超集形式，从而更加灵便不便。

2. 可扩展性：超文本标记语言的广泛应用带来了增强性能，减少标识符等要求，超文本标记语言采取子类元素的形式，为零碎扩大带来保障。

3. 平台无关性：尽管集体计算机大行其道，但应用 MAC 等其余机器的大有人在，超文本标记语言能够应用在宽泛的平台上，这也是万维网（WWW）流行的另一个起因。

4. 通用性：另外，HTML 是网络的通用语言，一种简略、通用的全置标记语言。它容许网页制作人建设文本与图片相结合的简单页面，这些页面能够被网上任何其他人浏览到，无论应用的是什么类型的电脑或浏览器。

CSS (Cascading Style Sheets) 层叠样式表

是一个用于润饰文档（能够是标记语言 HTML，也能够是 XML 或者 SVN）的语言，能够将文档以更优雅的模式出现给用户

HTML 是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，能够蕴含文字、图片、视频等。
CSS 款式是体现。就像网页的外衣。比方，题目字体、色彩变动，或为题目退出背景图片、边框等。所有这些用来扭转内容外观的货色称之为体现。

HTML 就像是一个人，而 CSS 就像是衣服和化妆品，用来装璜 HTML

构造

HTML 用于形容页面的构造

体现

CSS 用于管制页面中元素的款式

行为

JavaScript 用于响应用户操作

可用于编写 HTML 的编译工具有很多

记事本：特点：无代码提醒、无代码高亮显示、用户界面不敌对；
Sublime（举荐）：特点：运行速度快、代码提醒、高亮显示、插件拓展、html 插件 emmet、sublime text3 装置 emmet 插件；
VSCode（举荐）：特点：丰盛的插件反对、可进行 git 治理；
Idea：特点：集成开发工具、相似 DW,node,npm… 运行速度较慢；

Html 是在浏览器上解析执行的，每种浏览器对雷同的 Html 代码解析可能产生不同的后果，所以咱们须要装置多种支流的浏览器进行兼容性测试；

支流浏览器：Google Chrome（谷歌）、Firefox（火狐）、Opera、Safari、Microsoft Edge。

VSCode 插件举荐

HTML CSS Support – Html 提醒 Css 主动补全

HTML Preview – 提供预览 HTML 文档的性能

HTML Snippets – 残缺的 HTML 标签，包含 HTML5 片段

Live Server – 启动一个开发本地服务器，为动态和动静页面提供实时重载性能

open in browser – 能够在默认浏览器或应用程序中关上以后文件。

关上 VSCode，新建后缀名为.html 的文件，输出 ”!” 或 ”html:5″ 生成根本的 html5 构造

<!-- 文档头信息 -->
<!-- html5 规范网页申明 -->
<!-- 不加这一行，就示意页面采纳浏览器自身的解析规范，这样会造成页面在不同的浏览器（IE、火狐等）可能呈现不同的显示成果。-->
<!-- h5 的文档申明，申明以后的网页是依照 HTML5 规范编写的编写网页时肯定要将 h5 的文档申明写在网页的最上边。如果不写文档申明，则会导致有些浏览器会进入一个怪异模式，进入怪异模式当前，浏览器解析页面会导致页面无奈失常显示，所以为了防止进入该模式，肯定要写文档申明
-->
<!DOCTYPE html>
<!-- 属性 lang 是单词 language 的缩写，意思是语言，”en”代表英语，”zh-CN”代表中文 -->
<!-- 
    html 根标签，一个页面中有且只有一个根标签，网页中的所有内容都应该写在 html 根标签中
-->
<!-- 只有两个子标签 head: 浏览器设置 body：可视区展现 -->
<html lang="en">
<!-- head 标签，该标签中的内容，不会在网页中间接显示，它用来帮忙浏览器解析页面的 -->
<head>
  <!--
                meta 标签用来设置网页的一些元数据，比方网页的字符集，关键字、简介
        meta 是一个自完结标签，编写一个自完结标签时，能够在开始标签中增加 一个 / 
  -->
  <!-- 
        字符编码，浏览器会依据字符编码进行解析
        常见的字符编码有：gb2312、gbk、unicode、utf-8。-->
  <meta charset="UTF-8">
  <!-- 
        viewport 设施的屏幕
        width=device-width width 属性管制设施的宽度。假如您的网站将被带有不同屏幕分辨率的设施浏览，那么将它设置为 device-width 能够确保它能正确出现在不同设施上。initial-scale=1.0 确保网页加载时，以 1:1 的比例出现，不会有任何的缩放。-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 浏览器选项卡上的名字 -->
  <title>Hello HTML</title>
</head>
<!--
    body 标签用来设置网页的主体内容，网页中所有可见的内容，都应该在 body 中编写
-->
<body>
  <!-- 在 body 里的内容都是显示在浏览器的视图区的 -->
  <!-- 
        在这个构造中，能够来编写 HTML 的正文正文中的内容，不会在页面中显示，然而能够在源码中查看咱们能够通            过编写正文来对代码进行形容，从而帮忙其余的开发人员工作, 肯定要养成良好的编写正文的习惯，然而正文一             定要简单明了        
    -->
</body>
</html>

HTML 文档（HTML document）
DOCTYPE
在 Html 十分年老的时候（1991、2 年左右），doctype 是用来作为一组规定的链接，HTML 页面必须遵循这些规定能力被认为是好的 HTML，这些规定会用来检测网页是不是存在问题。然而，这些年没有人真正的关怀 doctype，他们只是一个历史产物必须蕴含在页面中。

严格的文档类型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">

宽松的文档类型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

H5 文档类型（HTML document）阐明该文档为 Html5 文档

<!DOCTYPE html>

HTML 的根元素，用来蕴含 HTML 文档的所有元素，所有的 html 标签应该位于 html 标签外部

<html>

示意 html 的头部，head 外部标签次要用于设置或者导入内部文件，个别不间接显示在浏览器视口中，罕用的子标签为 meta、title、link、script，别离示意元信息设定、文档题目、css、js

编码：

utf-8 万国码

GBK 国标码

Big5 繁体字（环球新闻导报社）

解码：浏览器

<head>

用来申明以后文档的编码方式为 utf-8

<meta charset="utf-8">

用来申明以后文档的题目，题目将会呈现在浏览器的选项卡中

<title>

示意 html 的体部，其外部次要放网页内容，其内容会显示到浏览器视口中，所有想要显示在浏览器中的元素都被蕴含在该元素中。

<body>

html4 文档构造：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <style type="text/css"></style>    <script type="text/javascript"></script>    <title>Document</title></head><body></body></html>

2.3.1. 正文

html 中只有一种正文，即 <!– 正文内容 –>

记录编程思路，解释阐明业务性能

2.3.2. 元素

单标签元素，仅有一个标签

<meta />、<img />、<br/>

双标签元素，由开始标签和完结标签组成

<div></div><p></p>

标签能够进行嵌套应用，即能够将一个标签写入到另外一个标签内。倡议镜面嵌套。

举荐：镜面嵌套

<p> 段落 <strong> 增强 </strong> 标签 </p>

以下是非法的：穿插嵌套

<p> 非法 <strong> 穿插 </p> 嵌套 </strong>

2.3.4. 属性

HTML 标签都领有本人的属性，属性应该呈现在元素的开始标签外部，属性名和属性值通过 ”=” 宰割，属性与属性之间通过空格宰割，属性名不辨别大小写，属性值辨别大小写并且属性值能够应用双引号引起来。

外围属性：绝大多数标签都具备的属性。title、id、class、style。

title：形容信息

<div title="div1">div1</div>

id：惟一标识

<div id="div1">div1</div>

class：标识一类元素

<div class="box1">box1</div>

style 款式

<div style="color: red;"> 我是一个 div</div>

2.3.3. 其余

空白
在文档中无论呈现多少个空白或者换行，浏览器都解析为一个空白
实体
在 HTML 中，某些字符是预留的。例如：不能应用小于号 < 和大于号 >，这是因为浏览器会误认为它们是标签。如果心愿正确地显示预留字符，咱们必须在 HTML 源代码中应用字符实体（character entities)，实体以 & 符开始，以; 结尾。以下是常见的实体

显示后果	形容	实体名称	实体编号
	空格	&nbsp
<	小于号	&lt	<
>	大于号	&gt	>
&	和号	&amp	&
“	引号	&quot	“
‘	撇号	&apos (IE 不反对)	‘
￠	分（cent）	&cent	¢
£	镑（pound）	&pound	£
¥	元（yen）	&yen	¥
€	欧元（euro）	&euro	€
§	大节	&sect	§
©	版权（copyright）	&copy	©
®	注册商标	&reg	®
™	商标	&trade	™
×	乘号	&times	×
÷	除号	&divide	÷

作用：搭建网页构造

特点：

独占一行空间
默认宽度为 100%
高度由子元素或内容决定
能够通过 css 指定其宽度

元素：html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address…

倡议：不要将块级元素嵌套在行内元素中。

元素	作用	已有 CSS 成果
div	无意义的块元素
h1~h3	题目题目	margin font-size font-weight
p	段落	margin
ul,li	无序列表	margin padding list-style
ol,li	有序列表	margin padding list-style
dl,dt,dd	定义列表	dl – margin dd – margin
html
body		margin
header	H5 新增的语义化标签`<br>`(款式与 div 相似)	`<div class="header"></div>`
footer		`<div class="footer"></div>`
nav		`<div class="nav"></div>`
article		`<div class="article"></div>`
section		`<div class="section"></div>`
aside		`<div class="aside"></div>`
address		`<div class="address"></div>`

作用：在构造中填充网页内容

特点：

与其余行内元素共享一行空间
宽高由本身决定
因为不用来搭建网页构造，所以也无需通过 css 指定其宽度
行内元素中不能够嵌套块元素

元素：span、a、img、strong、b、i、em、sub、sup…

– h 标签

h 标签题目标签
在 HTML 中，一共有六级题目标签
h1~h6
在显示成果上，h1 最大，h6 最小，然而文字的大小咱们并不关怀
6 级题目中，h1 的最总要，示意一个网页中的次要内容，h2~h6 重要性顺次升高，对于搜索引擎来说，
h1 的重要性仅仅次于 title，搜索引擎检索完 title 会立刻查看 h1 中的内容
h1 标签十分重要，它会影响到页面在搜索引擎中的排名，一个页面最好只写一个 h1 标签
个别的页面中，咱们只应用 h1 h2 h3，其余的根本不必

<h1> 这是一个 h1 标签 </h1>

– p 标签

段落标签，段落标签用于示意内容中的一个自然段
应用 p 标签来示意一个段落
p 标签中的文字，会独占一行，并且段与段之间会有一个间距

<p>    段落标签，段落 &quot; 标签 &quot; 用于示意内容中的一个自然段,<br><hr>    应用 p 标签来示意一个段落,    p 标签中的文字，会独占一行，并且段与段之间会有一个间距 </p>

– br 标签

br 标签示意换行标签 br 标签是一个自完结标签 br 标签的语义是不另起一个段落换行, 而在企业开发中个别状况下须要换行都是因为须要另起一个段落, 所以在企业开发中很少应用 br 标签

-hr 标签

hr 标签能够在页面中生成一个分割线

– 字符实体

空格  &nbsp;  <  &lt;  >  &gt;“&quot;  &  &amp;‘&apos;

– img 标签

img 标签通知浏览器要显示一张图片

img 标签的格局 <img class="lazy" referrerpolicy="no-referrer" data-src=""alt="">

src: 设置一个图片的门路（绝对路径和相对路径，最好应用相对路径）
alt: 能够用来设置在图片不能显示的时，对图片的形容
img 标签的其余属性
width: 设置图片的宽度
height: 设置图片的高度
title：用于通知浏览器，鼠标悬停的时候，须要弹出的形容框中显示什么内容。

<img src="图片的 url 或本地门路地址" alt=""width="100px"height="100px"title="">

留神点：

1.px 单位名称为像素，绝对长度单位，像素 px 是绝对于显示器屏幕分辨率而言的。像素的应用性特地广。

2. 如果不设置 img 标签的宽度和高度，那么图片就会依照默认的款式显示，如果设置了宽高，img 就

会依照设置的宽高来显示。

3. 有时设置 img 的宽高会使图片失真，这时只须要设置宽度或者高度中的一个，另外一个会等比例调整。

4. 个别除了自适应的页面，不倡议设置 width 和 height。

5. 和 h 标签以及 p 标签不同的是，img 标签不会独占一行

– a 标签

a 标签的作用用于管制页面与页面之间跳转的
a 标签的格局

<a href="指定须要跳转的指标界面"> 须要展示给用户查看的内容 </a><a href="https://www.baidu.com" target="_blank" title="百度"> 百度一下 </a>

a 标签中还有一个叫做 target 的属性，这个属性专门用于管制如何跳转

self: 用于以后的选项卡中进行跳转，也就是不新建页面跳转，默认就是_self
_blank: 用于在新的选项卡中进行跳转，也就是新建页面跳转

a 标签也有一个 title 属性，成果和 img 标签的 title 相似

留神点:
1.a 标签不仅能够让文字点击，也能够让图片被点击
2. 一个 a 标签必须有一个 href 属性，否则 a 标签不晓得要跳转到什么中央
3. 如果通过 a 标签 href 属性指定一个 URL 地址，那么必须在地址后面加上 http:// 或者 https://
除了 URL 地址，还能够指定一个本地地址

– mailto 链接

mailto 链接是一种 html 链接，可能设置你电脑中邮件的默认发送信息。然而须要你电脑中装置默认的 E -mail 软件，相似 Microsoft Outlook 等等。如果您曾经装置了 Microsoft Outlook，那么间接点击 mailto 链接就能够取得默认设置的邮件信息。

应用形式：

<a href="mailto:name@email.com">Email</a>

更多应用形式

参数	形容
mailto:name@email.com	电子邮件收件人地址
cc=name@email.com	抄送地址
bcc=name@email.com	密件抄送地址
subject=subject text	e-mail 的题目
body=body text	e-mail 的内容
?	和浏览器地址操作一样，第一个参数合乎是？
&	其余参数符号是 &

– base 标签

base 标签就是专门用来对立指定以后页面中所有的 a 标签须要如何关上

    留神点
    1.base 标签必须要写在 head 标签之间
    2. 如果既在 base 中指定了 target 又在 a 标签中指定了 target，那么浏览器会依照 a 标签中指定的来执行

<head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <base target="_blank"></head><body>    <a href="https://www.baidu.com" target="_self"> 百度 </a>    <a href="https://www.baidu.com"> 百度 </a></body>

- 假链接

什么是假链接？
就是点击之后不须要跳转的链接咱们称之为假链接

在企业开发初期，其余的界面都没有实现，所以不晓得跳转到什么中央，这个时候先用假链接来代替，我的项目实现后再换成真链接

假链接的格局

1.# 间接回到页面的顶部
2.javascript: 不会主动回到页面的顶部

<a href="#"> 回到顶部 </a><a href="javascript:"> 点我啊 </a>

– 锚点

1. 要想通过 a 标签跳转到指定的地位, 那么必须通知 a 标签一个举世无双的身份证号码, 这样 a 标签能力在以后界面中找到须要跳转到的指标地位

2. 如何和 HTML 中的标签绑定一个举世无双的身份证号码呢?
在 HTML 中, 每一个标签都有一个名称叫做 id 的属性, 这个属性就是用来给标签指定一个举世无双的身份证号码的

3. 所以要想实现通过 a 标签跳转到指定的地位分为两步
3.1 给指标地位的标签增加一个 id 属性, 而后指定一个举世无双的值
3.2 通知 a 标签你须要跳转到的指标标签对应的举世无双的身份证号码是多少
格局:

<a href="#center"> 跳转 </a><br><br><br><br><br><br><br><br><p id="center"> 我是中部 </p><br><br><br><br><br><br><br><br>

留神点:

1. 通过咱们的 a 标签跳转到指定的地位, 是没有适度动画的, 是间接一下子就跳转到了指定地位
2.a 标签除了能够跳转到以后界面的指定地位以外, 还能够在跳转到其它界面的时候间接跳转到其它界面的指定地位
格局:

//a.html<a href="b.html#bottom" target="_blank"> 跳转 </a>

//b.html<p id="bottom"> 找到我 </p>

– em

意为强调，突出文章重点

– strong

意为强调，内容更为有用

– b

加粗

– i

斜体

– u

下划线

– div

div 是一个无语义的标签，就是一个纯正的块元素，并且不会为它里边的元素设置任何的默认款式，div 元素次要用来进行页面根本构造的搭建

<div class="header"></div><div class="content"></div><div class="footer"></div>

– span

span 没有任何的语义，span 标签专门用来选中文字，而后为文字来设置款式

– video(H5 新增)

作用：播放视频
webm 网页中专用的视频格式

格局:<video src=""></video>

video 标签的属性
src: 通知 video 标签须要播放的视频地址
autoplay: 用于通知 video 标签是否须要自动播放视频
controls: 用于通知 video 标签是否须要管制条
poster: 用于通知 video 标签视频没有播放之前显示的占位图片
loop: 个别用于做广告视频，用于通知 video 标签视频播放结束之后是否须要循环播放
muted: 静音
width/height: 和 img 标签中的截然不同
video 的第二种格局
1. 格局:

<video>    <source src=""type=""></source>    <source src=""type=""></source></video>

2. 第二种格局存在的意义:

因为视频数据十分十分的重要, 所以五大浏览器厂商都不违心反对他人的视频格式, 所以导致了没有一种视频格式是所有浏览器都反对的
这个时候 W3C 为了解决这个问题, 所以推出了第二个 video 标签的格局
video 标签的第二种格局存在的意义就是为了解决浏览器适配问题
video 元素反对三种视频格式, 咱们能够把这三种格局都通过 source 标签指定给 video 标签, 那么当前当浏览器播放视频时它就会从这三种中抉择一种本人反对的格局来播放

3. 留神点:

3.1 以后通过 video 标签的第二种格局尽管可能指定所有浏览器都反对的视频格式, 然而想让所有浏览器都通过 video 标签播放视频还有一个前提条件, 就是浏览器必须反对 HTML5 标签, 否则同样无奈播放
3.2 在过来的一些浏览器是不反对 HTML5 标签的, 所以为了让过来的一些浏览器也可能通过 video 标签来播放视频, 那么咱们当前能够通过一个 JS 的框架叫做 html5media 来实现

<video autoplay="autoplay" controls="controls">    <source src="images/sb1.webm" type="video/webm"></source>    <source src="images/sb1.mp4" type="video/mp4"></source>    <source src="images/sb1.ogg" type="video/ogg"></source></video>

– audio(H5 新增)

作用: 播放音频

格局:

<audio src=""></audio><audio>    <source src="" type=""></audio>

留神点:

audio 标签的应用和 video 标签的应用根本一样, video 中可能应用的属性在 audio 标签中大部分都可能应用, 并且性能都一样
只不过有 3 个属性不能用, height/width/poster

除语义外，与 div 雷同。新的标签带来的是网页布局的扭转及晋升对搜索引擎的敌对。

header

<header>是一种具备疏导和导航作用的构造元素，通常用来搁置整个页面或页面内的一个内容区块的题目，但也能够蕴含搜寻表单或 logo。

nav

<nav>是一个能够用作页面导航的链接组，其中导航元素链接到其余页面或以后页面的其余局部。

article

<article>代表文档，页面或应用程序中独立的，残缺的，能够单独被内部援用的内容，也能够嵌套应用。能够是一篇博客或者报刊中的文章，一篇论坛帖子，一段用户评论或者独立的插件，或其余任和独立的内容。

section

<section>作为 Html 文档独立的性能。

aside

<aside>元素用来示意以后页面或文章的从属信息局部，它能够蕴含以后页面或次要内容相干的援用，侧边栏，广告，导航条，以及其余类型的有别于次要内容的局部。

footer

<footer>元素作为其下层父级内容区块或是一个根区块的脚注。footer 通常包含其相干区块的脚注信息，如作者，相干浏览连贯以及版权信息等。与 header 相似，一个页面中也未限定 footer 元素的个数。

address

<address>元素用来在文档中出现分割信息，包含文档作者或文档维护者名字，他们的网站链接，电子邮箱，实在地址，电话号码，以及跟文档相干的联系人的所有分割信息。
在不反对 Html5 的浏览器中，因为浏览器无奈辨认 Html5 新增标签，所以默认将这些标签设置为行内元素（display:inline）, 为了兼容性，须要：
section, article, aside, footer, header, nav, hgroup {display:block;}
然而上述办法有局限性，比方在 IE8 以及更早版本，是无奈对未知元素进行款式的润饰，因而须要：图

figure& figcaption

figure 元素是一种元素的组合，带有可选题目，figure 元素用来示意网页上一块独立内容，将其从网页上移除后不会对网页上的其余内容产生任何影响，figure 元素所示意的内容能够是图片，统计图或代码示例，也能够是音频插件，视频插件，统计表格等。figcaption 元素示意 figure 元素的题目，它从属于 figure 元素，必须书写在 figure 元素外部。一个 figure 元素内最多只容许搁置一个 figcaption 元素，然而容许搁置多个其余元素。

多用于用作文档中插图的图像。

details

details 元素是一种用于标识该元素外部的子元素能够被开展, 膨胀显示的元素。details 元素内并不仅限于搁置文字，也能够搁置表单, 插件或对于一个统计图提供的具体数据表格。

open 属性

当该属性值为 true 时，该元素外部的子元素应该被开展显示；当该属性的值为 false 时，其外部的子元素应该被收缩起来不显示。默认值为 false

summary 子元素

summary 元素从属于 details，用鼠标单击 summary 元素中的内容文字时，details 元素中的其余所有从属元素将会开展或膨胀。如果 details 元素内没有 summary 元素，浏览器会提供默认文字 (详细信息) 以供单击。