Html整体知识架构
html基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 在网页中的多个空格默认情况下都被浏览器解析为一个空格
<b> 加粗标签
在html中有些情况我们不能直接书写一下特殊符号，比如多个连续的空格，比如大于小于号。
如果我们需要在网页中书写某些特殊的符号，则需要在html中的实体
实体的语法：
&实体的名字
= 空格
©
-->
<p>
今天 天气真不错
</p>
<p>
a≪b> c
</p>
<p>©@wiselee</p>
</body>
</html>
整体标签的含义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <mate> 元数据 -》 浏览器看的
name ： 指定的是数据的名名称
content ：指定数据的内容
charaset en zh 表示网页的语言
<meta name="description"
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>
content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，
囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"/>
keywords / description
description : 网站的描述会在搜搜引擎的结果中。
title 是在浏览器中的显示
-->
<meta name="keywords" content="Html,前端,css">
<meta name="description" content="这是一个非常不错的网站">
<title>Document</title>
</head>
<body>
</body>
</html>
标签详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 标题标签 h1-h6 六级标题
h1最重要 h6最不重要 h1在网页的重要性仅次于<title>标签，一般一个页面中只会有一和一级标签
一般情况下 标签值使用h1-h3 h4-h6基本可以忽略不计
<语义>而不是关注他长什么样子
标题标签也是块元素
在页面中独占一行的元素 称为块元素 block element
-->
<h1>
一级标题
</h1>
<h2>二级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
<p> 我是在p标签中的显示的文字</p>
<!-- p标签 p元素也是一个块元素-->
<!-- hgroup 标签用来为标签分组，可以将一组有联系的标签进行分组 -->
<hgroup>
<h1>回乡偶书</h1>
<h2>其一</h2>
<p>
内容
</p>
</hgroup>
<!-- em标签表示语音语调的一个加重 不会独占一行 这种标签称为行内元素(inline element)
em 表示语调的加强
strong 表示强调
blockqutoe 独占一行 块元素
-->
<p>今天天气<em>真不错！</em></p>
<p>今天必须<strong>完成作业</strong></p>
鲁迅说:
<blockquote>
这句话我是从来没有说过的
</blockquote>
子曰：
<q>学而时习之，不亦乐乎</q>
<!-- 表示一个短引用 q是行内元素 不会独占一行 -->
</body>
</html>
关系选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关系选择器</title>
<style>
/* 为div的子元素span设置一个字体颜色
(为div直接包含的span设置一个字体颜色)
子元素选择题；
选择父元素的指定子元素
语法： 父元素 > 子元素
*/
/* 后代元素选择器
选择指定元素的所有后代元素
语法： 祖先 后代
*/
div > span{
color: orange;
}
div span{
color: aqua;
}
div > p >span{
color: brown;
}
/* 兄弟元素选择器 语法：前一个 + 下一个 */
/* */
p~span{
color:red;
}
</style>
</head>
<body>
<!-- 父元素：
-直接包含子元素的
子元素：
-直接被父元素包含的元素是子元素
祖先元素：
直接或间接包含后代元素的元素叫做祖先
一个元素的父元素也能被称为祖先元素
后代元素：
-直接或间接被祖先元素包含的元素叫做后代元素
兄弟元素：
-拥有相同祖先的元素被称为兄弟元素
-->
<div>我是一个div
<p>我是div中的p元素
<span>我是p元素中的span</span>
</p>
<span>我是div中的span元素</span>
</div>
<span>我是div外的span</span>
<span>我是div外的span</span>
<span>我是div外的span</span>
<span>我是div外的span</span>
</body>
</html>
快元素和行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 块元素 和行内元素
块元素：
在网页中一般使用块元素布局
行内元素：
行内元素主要用来包裹文字
一般在会在块元素中放入行内元素
而不会在行内元素中放块元素
块元素中可以放行内元素也可以放块元素
-p元素中不能放任何的块元素
浏览器在解析网页时 ，会自动对网页中不符合规范的内容进行修正，比如：
标签写在了html元素之外
p元素中出现了块元素
根元素中出现了 head 和body以外的元素
-->
</body>
</html>
<h1>我就要写在 html 标签的外边</h1>
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 列表 ：
列表(list):
1.铅笔
2.尺子
3.橡皮
在html中可以创建列表 一共为三种： 有序列表 无序列表 定义列表
无序列表 ul
使用li表示列表项
解析后的结果
ol 表示有序列表
dl 定义列表 使用dd来对内容来进行解释
-->
<!-- 无序列表 -->
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<!-- 定义列表 -->
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构，结构用来规定哪里是标题，那里是段落</dd>
</dl>
<ul>
<li>
aaaa
<ul>
<li>
aa-1
</li>
<li>aa-2</li>
</ul>
</li>
</ul>
</body>
</html>
内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 内联框架 用于向当前页面中引入一个其他页面
使用的机会不太多
-->
<iframe src="http://www.atguigu.com" width="800" height="600" frameborder="1"></iframe>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* [属性名] 指定含有指定属性的元素
[属性名= 属性值] 选择含有指定属性和属性值的元素
[属性名^ =属性值] 选择属性值一指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值的元素的元素
*/
P[title $=abc]{
color:orange;
}
</style>
</head>
<body>
<h1>我是标题</h1>
<p title="abc">少小离家老大回</p>
<p title="abcef">乡音未改鬓毛衰</p>
<p title="helloabc">儿童相见不相识</p>
<p>秋水共长天一色</p>
<p>落霞与孤鹜齐飞</p>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 将ul里的第一个li设置为红色 */
/* 伪类：不存在的类：特殊的类
伪类用来描述一个元素的特殊状态
伪类一般都是:first-child 第一个子元素
:last-child 最后一个元素
:nth-child()
n: 第n个范围
:last-of-type
*/
ul > li:not(:nth-child(3)){
color: green;
}
</style>
</head>
<body>
<ul>
<li>haa</li>
<li>haha</li>
<li>ahhah</li>
<li>haha</li>
</ul>
</body>
</html>
音视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 如果设置了autoplay 则会自动播放 -->
<audio controls >
对不起，你的浏览器不支持播放音频
<source src="./sound/黄安-新鸳鸯蝴蝶梦-(电影《路边野餐》插曲).mp3" >
</audio>
<video src="https://www.bilibili.com/video/BV1JV4y137tm/?spm_id_from=333.1007.tianma.1-1-1.click&vd_source=4330d5900032f8fb56011e49b3424f01" autoplay></video>
</body>
</html>
图像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>img</title>
</head>
<body>
<img src="./imgs/1.jpg" alt="团队照片" width="200">
<!-- alt ： 图片的描述
width： 图片的宽度
height： 图片的高度
-宽度和高度中 如果只修改了一个，则另一个会等比例的缩放
- 一般在pc端，一般不建议修改图片的大小
图片的格式： jpeg(jpg) 支持的颜色比较丰富，不支持透明效果 一般用来表示照片可以压缩
gif 颜色不丰富 支持简单透明 - 表示颜色单一的图片，动图
png 支持透明效果，颜色丰富，不支持动图 - 透明复杂 并且 颜色丰富 用的最多的一种格式
webp
效果一样用小的，效果不一样用效果好的。
-->
</html>
本文来自博客园，作者：wiselee/，转载请注明原文链接：https://www.cnblogs.com/wiseleer/p/16895962.html
