文章目录
html概述
HTML + CSS + Javascript = 网页
HTML : Hyper Text Markup Language 超文本标记语言:定义网页中有什么
CSS : Cascading Style Sheets 层叠样式表:定义网页中的东西长什么样子
MDN :Mozilla Development Network,Mozilla开发者社区
Emmet插件 : 自动生成HTML代码片段
注释 ：
快捷键: ctrl + /
<!--注释内容-->
元素:
element(元素) = ++元素内容+元素属性
<a href="http://www.baidu.com">百度</a>
:起始标记,a为元素名称
:结束标记
百度: 元素内容
href=“http://www.duyiedu.com” : 元素属性（非必要内容）
属性 ： 属性名=“属性值”
属性的分类：
- 局部属性：某些元素特有的属性
- 全局属性：所有属性通用
空元素：
<meta charset="UTF-8">
元素的包含关系
1.容器元素中可以包含任何元素
2.a元素中几乎可以包含任何元素
3.某些元素有固定的子元素(ul>li,ol>li,dl>dt+dd)
4.标题元素和段落元素不能相互嵌套，并且不能包含容器元素
元素嵌套
元素之间不能相互嵌套
父元素，子元素，祖先元素，后代元素，兄弟元素
标准的文档结构
HTML：页面，HTML文档
文档声明：
告诉浏览器，当前文档使用的HTML标准是HTML5,不写则会将导致浏览器进入怪异渲染模式。
<!DOCTYPE>
根元素：
一个页面最多只有一个，包起整个页面，html5可以不写
<html lang="en">
</html>
lang属性：language，全局属性，表示元素内部文字所使用的自然语言类型，en表示English
文档头：
文档头的内容不会显示到页面上
<head>
</head>
文档的元数据： 附加信息
<meta>
charset:指定网页内容编码。
网页标题：
<title>Document</title>
文档体：
存放页面上所显示的内容
<body>
</body>
全局属性
id属性：
是全局属性表示元素在文档的唯一编号
title属性
表示指标指向时所描述文字
路径
站外资源：绝对路径
站内资源：相对路径
文本元素
·htm5元素周期表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本元素</title>
</head>
<body>
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
三原色包含： <span style="color: red">红</span>，<span style="color: green">绿</span>，<span style="color: blue ">蓝</span>
<pre>
#include <stdio.h>
int main(){
return 0;
}
</pre>
</body>
</html>
h元素
·head 标题
·h1~h6:表示一级标题到六级标题
·hKaTeX parse error: Expected '}', got 'EOF' at end of input: *6>{
级标题}
·$:占位符，递增
·*6：表示生成6次
p元素
·paragraphs段落
·p*3>{这是一个段落}
lorem,Tob建可以生成规定字数的假文,
span元素
·无语义元素，仅用于设置样式
以前：将显示时独占一行的称为(块级元素)，显示时不是独占一行的称为(行级元素)
但是html5废除这种说法
pre元素
·预格式化文本元素，该元素通常用于在页面显示代码
·空白折叠：在源代码中的连续空白字符（空格、回车、制表），在页面显示时会被折叠成一个空格>
·在pre中不会空白折叠，会按照pre中源代码的格式显示在页面上
pre元素的功能本质：它有一个默认的css属性
code元素:代码区域，为了显示代码
##实体字符
通常用于在页面上显示一些特殊符号
·小于符号
<
·大于符号
>
·空格符号
·版权符号
©
·&符号
&
##id属性：
是全局属性表示元素在文档的唯一编号
[]:可以写元素属性
{}:可以写元素的内容
a元素，超链接元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接元素</title>
</head>
<body>
<a href="https://www.baidu.com/"target="_blank">百度</a>
<!--目录-->
<a href="#chapet1">章节1</a>
<a href="#chapet2">章节2</a>
<a href="#chapet3">章节3</a>
<a href="#chapet4">章节4</a>
<a href="#chapet5">章节5</a>
<a href="#chapet6">章节6</a>
<h2 id="chapet1">章节1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium blanditiis consectetur corporis,
culpa deleniti dolorem dolores eaque eius et exercitationem explicabo hic illum in ipsam iusto nihil perferendis
porro praesentium quaerat quia quibusdam quisquam quod recusandae reiciendis repudiandae rerum temporibus unde
ut vitae. Aspernatur atque debitis delectus dolorum expedita fugiat porro sunt voluptas. Architecto et eveniet
necessitatibus? Consectetur deleniti, excepturi ipsum libero minima obcaecati officiis omnis pariatur porro
quis, ratione repudiandae sequi. Ab ad architecto corporis dolor dolorum fugit harum id inventore iure labore
laboriosam magnam mollitia necessitatibus nisi perferendis, porro praesentium quod recusandae rem similique
tenetur veritatis vitae voluptatem. Accusamus, aperiam architecto aspernatur dolores eaque earum eligendi iusto
laudantium maxime perferendis porro quaerat quia sapiente similique tempore? Aut, eaque enim incidunt ipsa
libero nam odio possimus ullam! Cum enim error labore nesciunt optio perferendis quasi rem voluptatibus?
Assumenda consequatur hic id, inventore minima mollitia nulla optio quidem rem repellat, soluta ullam unde
veritatis. At atque cumque ea ipsum libero nesciunt nobis provident? Autem facilis fugit impedit incidunt
officia, provident quibusdam. Aliquam aliquid autem beatae cupiditate ducimus ea eius excepturi iure libero
magni minima nostrum pariatur, quas quasi ratione saepe voluptatem. Deleniti hic ipsum officia possimus rerum
sed. Aut!</p>
<h2 id="chapet2">章节2</h2>
<p>Architecto id ipsam iste iusto modi mollitia, nam nemo nesciunt pariatur, quasi qui quibusdam quisquam rem soluta
tempora voluptate voluptates. Ab accusamus atque distinctio doloremque, dolorum ducimus ea eaque earum eligendi
eos et eveniet laboriosam magni molestias neque nisi non officia, placeat quidem reiciendis vero, vitae
voluptatibus. Aliquam aliquid, aut dolorem doloribus eveniet illo ipsa odit quas sequi sint. Aliquam, animi aut
blanditiis cum dolore incidunt ipsa necessitatibus nihil quia saepe veniam voluptas voluptatibus? Aliquid animi,
aspernatur, dignissimos eos, est eum fugit minus nihil nostrum perferendis quas tempore! Eum ipsam magnam
numquam odit quaerat quibusdam similique! Ab accusamus atque deserunt dicta dignissimos doloremque dolorum esse
ex minima obcaecati optio, provident quis reprehenderit sint unde. Ea in itaque obcaecati quidem veniam.
Aliquid, atque est expedita harum impedit, iste, iure maxime neque quae quaerat quam quisquam sit tempora!
Aliquid delectus doloremque earum exercitationem expedita id itaque minima nam, obcaecati, odio praesentium,
voluptatem. Ab autem corporis dicta dignissimos dolor ducimus, exercitationem facilis harum iure laboriosam
laudantium odit recusandae saepe soluta tempora unde, veritatis. Adipisci assumenda aut autem beatae doloribus
eligendi enim error id iusto labore magni minima nesciunt provident, quasi repudiandae similique vero. Ab,
adipisci commodi consequuntur cumque labore nulla placeat saepe! Esse.</p>
<h2 id="chapet3">章节3</h2>
<p>Atque, cum ducimus eum ex expedita fuga, itaque maiores molestias, odit repudiandae sint tempora ut voluptatum.
Consequuntur illo labore nemo nisi odio quas quos sint ut velit veritatis. Ab amet aperiam architecto
consequatur consequuntur est explicabo ipsa, iusto laboriosam maxime molestias neque nulla, officia quae
quisquam repellendus soluta tenetur velit veritatis vero. Doloremque id inventore maiores molestiae molestias
natus nemo quis reprehenderit ut. Aliquam, aliquid atque autem deleniti deserunt doloremque ex fugit ipsam nam
neque. Amet delectus fuga vel? Accusamus, alias aliquid, atque dolore dolores doloribus harum incidunt modi
nesciunt non numquam odit perspiciatis possimus provident quaerat quod ratione sit tempora, velit voluptatibus!
Animi consectetur error illum non porro, quibusdam sequi soluta tempore ut voluptatibus. Accusantium adipisci
animi atque consequuntur corporis doloribus earum eius ex fugit id incidunt inventore laboriosam laudantium
maiores modi necessitatibus nihil odit officia provident quia quod, ratione rerum sequi similique suscipit ullam
ut voluptatum! Aliquam amet architecto commodi corporis dolor, dolorum esse eum id illum in incidunt, ipsam
itaque maiores neque nulla officia officiis placeat quas quod ratione recusandae repellat saepe sunt vel
voluptas. Ad animi commodi cupiditate, distinctio dolore dolores est eum eveniet in iste iure molestiae officiis
quibusdam quis quisquam reprehenderit unde veniam, veritatis.</p>
<h2 id="chapet4">章节4</h2>
<p>Beatae cupiditate facere fugiat illum in itaque repellendus reprehenderit repudiandae voluptas voluptates.
Accusantium aliquam aperiam architecto autem, debitis, distinctio expedita ipsa, obcaecati officia quo
reiciendis similique soluta. Maxime provident sapiente sunt voluptatum. Esse excepturi officiis placeat possimus
quia. Accusamus amet consectetur dolorum fuga suscipit! Ab accusamus deserunt molestias odit? At autem dolore
dolorum, ea facere id, iusto molestias mollitia non odio odit, optio quaerat quas quia totam velit veritatis?
Autem cupiditate facilis id illo magnam obcaecati, officia omnis rerum sed veniam! Animi aperiam, architecto
autem consequatur corporis cum doloribus ducimus earum et expedita facilis fugit hic illum inventore iusto
molestiae natus nostrum obcaecati odio officiis omnis quaerat quo, quos repudiandae sint ut veritatis vero!
Accusamus alias assumenda corporis dolores et ex harum nisi rem soluta? A eum excepturi totam voluptas. Delectus
eaque expedita incidunt necessitatibus numquam omnis rem soluta voluptatum. Alias aspernatur autem consequuntur
corporis doloribus earum eligendi error excepturi expedita facere, fugiat, labore magni minima modi non nulla
officiis qui quod repellendus sit sunt tempora vero! Dolorum eaque minima nobis ut. A beatae consectetur
cupiditate enim eum fuga fugiat in ipsam magni maiores maxime molestias nam quae sed sequi ullam, voluptas.
Accusamus ea incidunt maxime non, placeat tempora veniam!</p>
<h2 id="chapet5">章节5</h2>
<p>Asperiores culpa delectus, ducimus facere minus natus officia quae quisquam! Adipisci aliquam asperiores
assumenda atque consequuntur deleniti dolorum eius est expedita fuga, id illum laboriosam, molestias nihil odio
possimus quae tempora tenetur ullam vitae. A ab accusantium asperiores, culpa dolorem dolorum, earum expedita
ipsam maxime mollitia neque obcaecati odit perferendis recusandae rem sed vel, veritatis voluptatibus. Delectus
magni maxime quae, quas reprehenderit tempore veniam. Beatae culpa dignissimos dolor eligendi inventore odio
quos recusandae saepe, tempore temporibus? Accusantium atque culpa, illo iste libero officiis quasi similique
sint, tenetur unde, velit veniam voluptas voluptatem? Animi aperiam autem consequuntur cumque dignissimos,
doloremque ducimus eligendi eos esse et eum eveniet facere fuga fugiat harum id illum in inventore ipsum magni
modi molestiae molestias nam natus nemo neque nesciunt nihil praesentium quae quibusdam quo saepe sapiente sed,
vel velit voluptas voluptatem. Aliquam assumenda blanditiis et fugit, illo illum incidunt maiores molestiae
neque nulla obcaecati odit officia optio quo quos rem tempore ullam veritatis. Accusantium blanditiis deserunt,
dolore et eveniet illum impedit ipsum maiores molestiae nam nemo neque nesciunt nostrum odio perferendis placeat
quam quia tempora velit voluptas. Accusamus cupiditate hic neque quidem repudiandae. Amet ipsa laborum nemo
quas. Ducimus hic iusto laboriosam libero maxime. Reiciendis?</p>
<h2 id="chapet6">章节6</h2>
<p>Consequatur et fugit magnam non quibusdam quidem quod rerum, vel. Ab aliquam culpa et fuga iusto minima nesciunt
nobis nostrum quaerat rem reprehenderit sed soluta, ullam unde vero. Aliquam animi earum eius eveniet impedit
sed sint tenetur. A aut deserunt illum numquam rem. A consequuntur deleniti doloribus enim error ex excepturi,
facilis in inventore libero minima molestias, nam nemo nostrum obcaecati odio perferendis, possimus praesentium
provident quasi quidem repudiandae rerum suscipit tempore tenetur unde vel vero vitae voluptas voluptatem?
Aliquid atque consequuntur dignissimos earum eveniet in ipsam ipsum maxime nulla omnis perspiciatis placeat
quisquam repellat rerum sunt suscipit tenetur velit, veniam, voluptas voluptatum. Accusamus at eligendi et id
illum maxime nihil perferendis, quo quod saepe similique velit. A ab adipisci autem beatae consectetur culpa
cupiditate dicta dolores ducimus earum error et excepturi facilis id ipsa iusto magnam molestiae mollitia
necessitatibus odio officia officiis omnis quam, quasi quia quidem quis quisquam recusandae repellat sapiente
sequi ut, vel velit. Aut consectetur consequatur dolore, doloremque dolores doloribus ex, hic illo, ipsa nisi
perspiciatis porro suscipit totam. Alias aliquam aliquid beatae consectetur cumque deserunt dolore eum ex, fuga
fugiat, harum incidunt minus natus nisi non placeat porro reiciendis rem saepe sint unde veritatis
voluptatum.</p>
<a href="#" >回到开头</a>
<a href="javascript:alert('你已完成阅读！')">完成阅读</a>
</body>
</html>
href属性
hyper reference(引用)
·1.跳转到指定地址
·2.跳转到指定锚点(目录跳转)
·3.功能链接：
–执行js代码,javascript:
–发邮箱mailto: (要求装有发送邮箱软件exchange等)
–拨打号码tel: （要求计算机装有拨号软件或移动设备点击）
[]:可以写元素属性
{}:可以写元素的内容
target属性
表示跳转窗口的位置
-_self:为默认值，表示在当前窗口打开，
-_blank:表示在空白窗口打开
#图片元素
##img 元素
image， 空元素，无结束标记
·src属性: -source–资源
·alt属性:当图片资源失效时，将使用该属性内的文字替代图片
##和a元素联用
将image元素作为a元素的内容即可
和map元素联用
使用usemap属性调用map的name属性即可使用
和figure元素联用
·指代，定义：通常用于把图片、图片标题、描述包裹起来，
将所有相关联内容放入figure中即可
·子元素：figcaption（标题）
map元素，地图元素
name属性
与锚点的id属性相似，一般利于驼峰命名法
usemap属性
与锚点的href属性相似，用于调用map元素
子元素 area元素
·无结束标记
·shape=“circle(圆)/rect(矩形)/poly(多边形)”:区域形状
·coords="":关键点的坐标，坐标系以左上角为原点
衡量坐标误差时为了避免误差，可以使用ps，pxcook
·href="":链接地址
·alt=“”:资源失效时显示文字
·target：表示跳转窗口的位置
多媒体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多媒体元素</title>
</head>
<body>
<video controls style="width: 400px;height: 500px"loop muted autoplay>
<source src="../../100天.mp4">
<source src="../100天.wbm">
<p>对不起你的浏览器不支持video元素，亲点击这里下载最新浏览器</p>
</video>
<audio autoplay src="../../唯一.mp3" controls loop ></audio>
</body>
</html>
video视频元素
布尔元素
·controls:布尔属性，控制控件的显示。
·autoplay:布尔属性，自动播放
·muted:布尔属性，静音播放
·loop:布尔属性,循环播放
audio音频元素
与video操作一样
兼容性
·旧版本的浏览器不支持这两个元素
·不同的浏览器支持的音频/视频格式可能不一样
mp4 wbm
列表元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表元素</title>
</head>
<body>
把大象装进冰箱，总共分几步
<ol type="i" reversed>
<li>打开冰箱门</li>
<li>大象进去</li>
<li>冰箱门关上</li>
</ol>
<ul >
<li>打开冰箱门</li>
<li>大象进去</li>
<li>冰箱门关上</li>
</ul>
HTML中的术语解释：
<dl>
<dt>HTML</dt>
<dd>超文本标记语言，xxxxxxxxxxxxxx</dd>
<dt>元素</dt>
<dd>组成HTML文档的单元，xxxxxxxxxxx</dd>
</dl>
</body>
</html>
有序列表
-ol元素:ordered list(有序列表)
·type属性(不建议使用)：列表前排列所用数字
·reversed：倒序 ，只将前面序号倒序内容不变
-li子元素:list item(列表元素)
无序列表
-ul：unordered list
没有与顺序相关的属性
定义列表
-dl：definition list
通常用于一些术语的定义
-dt(子元素)：definition title 定义的标题
-dd(子元素)：definition description 定义的描述
容器元素
代表一个块区域，内部用于放置其他元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>容器元素</title>
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam aperiam dolores expedita ipsa modi, molestias nemo non officiis pariatur repellat soluta tempore, veniam. Consequuntur dignissimos porro ratione voluptates. A ab ad aliquid assumenda blanditiis culpa debitis dolorem earum eius eligendi error est ex expedita harum illo in magnam maxime molestiae praesentium quisquam quos recusandae repellendus rerum sequi sit, veritatis voluptates voluptatum. Consequatur dicta dignissimos dolor ducimus esse iure labore magnam odio optio, placeat quae quaerat quas quasi qui quibusdam, sapiente voluptate voluptates. Alias aliquam aliquid asperiores, assumenda blanditiis delectus deserunt dolores eos eum expedita facilis ipsa ipsam libero magnam odit omnis optio perspiciatis porro quam quos rem sequi sint vel vitae voluptas! Ad, error esse et inventore magnam repellat tempore voluptates? Aspernatur autem blanditiis commodi consectetur culpa deleniti distinctio ducimus est harum ipsa ipsum iste laboriosam maiores officiis praesentium quia repellendus saepe sunt, vel vero! Animi beatae corporis delectus dicta distinctio iure minus necessitatibus numquam obcaecati, quis sed voluptatem? Alias aperiam dolores error illo impedit incidunt maiores obcaecati, rerum, sunt suscipit velit veritatis vero voluptate? Aliquam aperiam beatae cumque deleniti dolore doloremque eligendi error facere fuga iusto, magnam necessitatibus, nobis obcaecati quod quos repellendus rerum suscipit ullam unde, voluptates. Accusamus aliquid assumenda, cupiditate enim hic laborum odio qui quod, rem tempore ullam veritatis voluptatibus! At aut beatae commodi, consectetur cupiditate deserunt dolor, eaque eius fugiat harum iusto labore laborum maiores minima nobis obcaecati quam quisquam quod reiciendis rem repellat similique temporibus ullam unde voluptatum. A ad aliquid atque aut beatae dignissimos error excepturi exercitationem expedita id ipsa ipsam iure laborum libero, maiores molestiae mollitia nam necessitatibus neque nostrum possimus qui quidem recusandae repellendus sapiente suscipit voluptatibus. Alias aperiam cumque dignissimos dolorum earum eum minus modi nisi numquam, obcaecati omnis optio qui, voluptate. Alias aspernatur aut consequuntur explicabo fuga hic incidunt natus nulla possimus quidem repellendus saepe sit, voluptatum! Ab deserunt dicta dignissimos et fugiat id labore, laborum odio sunt temporibus. Adipisci architecto dolorum incidunt ipsam labore nobis suscipit. A animi consequuntur cupiditate eveniet laudantium necessitatibus quidem, rerum sed. Adipisci aspernatur aut, ducimus eius expedita fugit, in maiores nemo neque nisi quos reiciendis, sed tempora veniam veritatis. Animi culpa deserunt, dignissimos enim harum illum laudantium neque officia quas quibusdam, recusandae similique suscipit voluptates? A aliquid animi asperiores consequuntur cum debitis deleniti doloremque ducimus excepturi exercitationem impedit inventore ipsa, ipsam minima minus nam nihil obcaecati, pariatur, perferendis porro qui quidem rem reprehenderit soluta totam ullam vel voluptatibus. Ad, animi assumenda autem dicta explicabo illo, impedit iste itaque minima minus mollitia nemo neque nulla officiis quae quia quos similique, sint. Aliquid amet animi asperiores aut distinctio dolores error, ex, labore natus necessitatibus placeat sit! Aliquam atque consectetur eos ex id inventore neque quas unde? Aspernatur consequatur deleniti dolorum ea eaque earum eum eveniet explicabo harum, in incidunt iure nam natus omnis porro quos sunt tempore, tenetur ullam voluptas? Aut debitis, deleniti excepturi laboriosam laudantium quis quo sequi. Animi aut corporis dolore recusandae veritatis. Aut distinctio eos exercitationem id iste, perferendis sunt unde.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, molestiae necessitatibus.</div>
<div>Lorem.</div>
<header>
<div>
<ul>
<il>
<div>Lorem.</div>
<div>Rerum.</div>
<div>Autem?</div>
<div>Incidunt?</div>
<div>Dignissimos.</div>
<div>Rerum?</div>
</il>
</ul>
</div>
</header>
<article></article>
<footer>
页脚
</footer>
</body>
</html>
div元素(无语义)
语义化容器元素
header：通常用于表示页头，也可以用于表示文章的头部
footer：通常用于表示页脚，也可以表示文章的尾部
article：表示整篇文章
section：表示文章的章节
aside：侧边栏