⭐️大一小何，还在学习当中，欢迎交流指正~
目录
块与行内
块元素（block element)
在网页中一般通过块元素来对页面进行布局
行内元素（inline element）
行内元素主要用来包裹文字一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
块元素中基本上什么都能放
p元素不能放任何块元素浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
比如：
标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现了除head和body以外的子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
块元素（block element)
在网页中一般通过块元素来对页面进行布局
行内元素（inline element）
行内元素主要用来包裹文字
一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
块元素中基本上什么都能放
p元素不能放任何块元素
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
比如：
标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现了除head和body以外的子元素
-->
<p>
<h1>
哈哈
</h1>
</p>
</body>
</html>
<h1>我写在了根元素外部</h1>
语义化标签
header表示网页的头部
main表示网页的主题部分（一个页面中只会有一个main）
footer表示网页的底部
nav表示网页中的导航
aside和主题相关的其他内容（侧边栏）
article表示一个独立的文章
section表示一个独立的区块，上面的标签都不能表示时用section
div没有语义，就用来表示一个区块，目前来说div还是我们主要的布局元素
span行内元素，没有任何语义，一般用于在网页中选中文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
布局标签（结构化语义标签）
-->
<!--
header表示网页的头部
main表示网页的主题部分（一个页面中只会有一个main）
footer表示网页的底部
nav表示网页中的导航
aside和主题相关的其他内容（侧边栏）
article表示一个独立的文章
section表示一个独立的区块，上面的标签都不能表示时用section
div没有语义，就用来表示一个区块，目前来说div还是我们主要的布局元素
span行内元素，没有任何语义，一般用于在网页中选中文字
-->
<header></header>
<main></main>
<footer></footer>
<nav></nav>
<aside></aside>
<article></article>
<section></section>
<div></div>
<span></span>
</body>
</html>
列表(list)
在html中也可以创建列表，html列表一共有三种：
1.有序列表
2.无序列表
3.定义列表有序列表，使用ol标签来创建有序列表
使用li表示列表项无序列表，使用ul标签来创建无序列表
使用li表示列表项定义列表，使用dl标签来创建一个定义列表
使用dt来表示定义的内容
使用dd来对内容进行解释说明列表之间可以相互嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
列表(list)
在html中也可以创建列表，html列表一共有三种：
1.有序列表
2.无序列表
3.定义列表
有序列表，使用ol标签来创建有序列表
使用li表示列表项
无序列表，使用ul标签来创建无序列表
使用li表示列表项
定义列表，使用dl标签来创建一个定义列表
使用dt来表示定义的内容
使用dd来对内容进行解释说明
列表之间可以相互嵌套
-->
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构,结构用来规定网页中那里是标题,那里是段落</dd>
</dl>
<ul>
<li>aa
<ul>
<li>aa-1</li>
<li>aa-2</li>
<ul>
<li>aa-1</li>
<li>aa-2</li>
</ul>
</ul>
</li>
</ul>
</body>
</html>呈现效果
超链接
超链接可以让我们从一个页面跳转到其他页面
或者是当前页面的其他位置
使用a标签来定义超链接
属性：
href指定跳转的目标路径
值可以是一个外部网站的地址
也可以写一个内部页面的地址
超链接也是一个行内元素，在a标签中可以嵌套除它自身外的任何的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
超链接可以让我们从一个页面跳转到其他页面
或者是当前页面的其他位置
使用a标签来定义超链接
属性：
href指定跳转的目标路径
值可以是一个外部网站的地址
也可以写一个内部页面的地址
超链接也是一个行内元素，在a标签中可以嵌套除它自身外的任何的元素
-->
<a href="http://www.baidu.com">超链接</a>
<br><br>
<a href="07.列表.html">超链接2</a>
</body>
</html> 
点击相应的超链接会进入相应页面，比如点击第一个，会进入百度页面
target属性，用来指定超链接打开的位置
可选值
_self 默认值 在当前页面打开超链接
_blank在一个新的页面中打开超链接
可以直接将超链接的href属性设置为#，这样点击超链接以后
页面不会发生跳转，而是转到当前页面的顶部位置可以跳转到页面的指定位置，只需将href属性设置#目标元素的id属性值
id属性（唯一不重复的）
每一个标签都可以添加一个id属性
id属性就是元素的唯一标识同一个页面中不能出现重复的id属性
在开发中，可以将#作为超链接的路径的占位符使用
可以用javascript:;作为href的属性，此时点击这个超链接什么也不会发生
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
target属性，用来指定超链接打开的位置
可选值
_self 默认值 在当前页面打开超链接
_blank在一个新的页面中打开超链接
-->
<a href="07.列表.html" target="_blank">超链接</a>
<!--
可以直接将超链接的href属性设置为#，这样点击超链接以后
页面不会发生跳转，而是转到当前页面的顶部位置
可以跳转到页面的指定位置，只需将href属性设置#目标元素的id属性值
id属性（唯一不重复的）
每一个标签都可以添加一个id属性
id属性就是元素的唯一标识同一个页面中不能出现重复的id属性
-->
<br><br>
<a href="#bottom">去底部</a>
<br><br>
<a href="#p3">去第三个自然段</a>
<br><br>
<!--
可以用javascript:;作为href的属性，此时点击这个超链接什么也不会发生
-->
<a href="javascript:;">这是一个新的超链接</a>
<p>这里可以输入一段文字</p>
<p>这里可以输入一段文字</p>
<p id="p3">这里可以输入一段文字</p>
<p>这里可以输入一段文字</p>
<br><br>
<!--
在开发中，可以将#作为超链接的路径的占位符使用
-->
<a href="#">这是一个新的超链接</a>
<br><br>
<a id="bottom" href="#">回到顶部</a>
</body>
</html>图片标签
图片标签用于向当前页面中引入一个外部图片
使用img标签来引入外部图片，img标签是一个自结束标签
img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点）
属性：
src属性指定的是外部图片的路径(路径规则和超链接是一样的)alt图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录width 图片的宽度（单位是像素）
height 图片的高度
宽度和高度中如果只改变了一个，则另一个会等比例缩放一般在pc端，不建议修改图片的大小，需要多大就裁多大
但是在移动端，经常需要对图片进行缩放（大图缩小）
jpeg（jpg）
支持的颜色比较丰富，不支持透明效果，不支持动图效果
一般用来显示照片
gif
支持的颜色比较少，支持简单透明，支持动图
颜色单一的图片，动图
png
支持的颜色丰富，支持复杂透明，不支持动图
颜色丰富，复杂透明图片（专为网页而生）
webp
这种格式是谷歌新推出的专门用来表示网页中的图片一种格式
它具备其他图片格式的所以优点，而且文件还特别的小
缺点：兼容性不好
base64
将图片使用base64进行编码，这样可以将图片转换为字符，通过字符的形式引 入图片
一般都是一些需要和网页一起加载的图片才会使用base64效果一样，用小的
效果不一样，用效果好的
<!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>
<!--
图片标签用于向当前页面中引入一个外部图片
使用img标签来引入外部图片，img标签是一个自结束标签
img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点）
属性：
src属性指定的是外部图片的路径(路径规则和超链接是一样的)
alt图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录
width 图片的宽度（单位是像素）
height 图片的高度
宽度和高度中如果只改变了一个，则另一个会等比例缩放
一般在pc端，不建议修改图片的大小，需要多大就裁多大
但是在移动端，经常需要对图片进行缩放（大图缩小）
图片的格式
jpeg（jpg）
支持的颜色比较丰富，不支持透明效果，不支持动图效果
一般用来显示照片
gif
支持的颜色比较少，支持简单透明，支持动图
颜色单一的图片，动图
png
支持的颜色丰富，支持复杂透明，不支持动图
颜色丰富，复杂透明图片（专为网页而生）
webp
这种格式是谷歌新推出的专门用来表示网页中的图片一种格式
它具备其他图片格式的所以优点，而且文件还特别的小
缺点：兼容性不好
base64
将图片使用base64进行编码，这样可以将图片转换为字符，通过字符的形式引入图片
一般都是一些需要和网页一起加载的图片才会使用base64
效果一样，用小的
效果不一样，用效果好的
-->
<img src="./Saved Pictures/QQ图片20220113135246.jpg" alt="小新" >
<img width="500" src="https://www.xtrafondos.com/wallpapers/vertical/nuevo-traje-de-iron-man-6726.jpg" alt="钢铁侠">
</body>
</html>
结语
冲冲冲
339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
