HTML基础内容小结
- HTML主要用于设计网页的结构，凡是牵涉到网页的表现尽可能用CSS来实现，用HTML设计时，不必关注网页的样式，重在关注网页的结构.
- HTML的主要结构是标签(Tags)，网页依托标签来进行描述，也叫元素(Element)，标签的书写不区分大小写，标签具有属性(Attributes， 类似于对象拥有成员变量)，通过修改标签的属性来对标签进行微调
- HTML最基本的标签是<html></html>，一个网页只能有一个,html标签内应该包含<head></head>标签和<body></body>标签两个子标签。head标签用于定义网页中没有表现的部分，主要是用来给搜索引擎和浏览器识别检索用的。
- 由于HTML有许多老版本的标准，所以需要告诉浏览器按照什么标注来渲染，所以需要在代码的最开始写上<!doctype 标准>一般情况下写<!doctype html>就行了。
- 在head标签中有一个<title></title>标签，用于设置网页的主题，一般在浏览器最上面的标签页栏显示，同时给搜索引擎的爬虫提供检索。比如某网页这么写<title>CSDN - 专业开发者社区</title>
- 在head标签里有一个<meta>标签他是自结束标签(不需要后面加结束标签)，较老的HTML版本中会写成<meta />。meta用于设置网页的元(网页底层的东西，用户无法查看，主要为浏览器和搜搜引擎提供)。
- meta的属性：
- charset：
- 用于设置网页所使用的的字符集（常见的字符集有：ASCII,ISO-8859-1,GBK2312,GBK, utf-8）,大多数情况下使用utf-8。具体实现 <meta charset=”utf-8”
- name与content:
- 最基础的用法是用于给搜索引擎的爬虫提供信息
- 当name=”keywords”时，content的内容便是关键词，比如某网站这么写 <meta name="keywords" content="CSDN博客,CSDN学院,CSDN论坛,CSDN直播">
- 当name=”description”时，content便是本网页内容的大致介绍,比如 <meta name="description" content="CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.">
- 最基础的用法是用于给搜索引擎的爬虫提供信息
- http-equiv和content:
- charset：
将http-equiv=”refresh”,可进行网页的跳转，这时content用于设置跳转信息比如
<meta http-equiv=”refresh” content=”3; url=https://www.csdn.net/”>分好前面的3表示跳转倒计时，url=后面的内容是要跳转的地址(可以是本地服务器的相对路径，也可以是网址)，这句话的意思是3秒后跳转到https://www.csdn.net/
8．body用于表示网页中用户可见的部分其中body有一套子标签用于按照重要性来表示网页的标题<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4> ,<h5></h5> ,<h6></h6>一般情况下只会用到1-3级标题，数字越小，代表越重要，搜索引擎的爬虫在爬取信息时，会根据重要性来建立数据库。3级以下的标题基本没有什么意义。比如<h1>这里是一级标题</h1>
<h2>这里是二级标题</h2>
9.用来表示正文的元素<p></p>:举例: <p>正文</p> 当显示文字的标签需要显示特殊的字符(比如< > 空格 等)需要用到实体，或转义字符,用法(& + 实体的名字 + ;)例如：
<p>今天 天气真不错</p>常见的实体(转义字符)如下在html中有时需要要书写多个特殊字符，比如说-空格，<和>。
表示空格 > > < < © 版权符号©
10.由于需要考虑各个国家不同的语言，所以网页需要标识当前网页所使用的语言，来方便浏览器来对网页提供翻译，html标签里有一个属性lang来表示网页所使用的语言。最常见的值：ch和en用来表示中文和英语.例如：<html lang=”ch”></html>
以上内容可构成一个较为标准的完整网页
<!doctype html>
<html lang=”ch”>
<head>
<meta charset=”utf-8”>
<meta name=”keywords” content=”第一个网页”>
<meta name=”description” content=”这是我的第一个网页”>
<title>第一个网页的主题</title>
</head>
<body>
<h1>第一个标题</h1>
<h2>第二个标题</h2>
<p>Hello world!</p>
</body>
</html>11.块元素(block element)和行内元素(inline element也叫内联元素)；块标签用于表示网页中的一个的版块，行内标签不单独占一个版块；在不加修饰的情况下HTML块标签最直观的显示是单独占一行，行内标签不单独占一行。
一些行内元素及作用
| <q></q> | 用于短引用,直观表现为加引号 |
| <em></em> | 用于语气加重，直观表现为斜体 |
| <strong></strong> | 用于内容强调，直观表现为加粗 |
| <br> | 用于换行 |
一些块元素及作用
| <h1 ></h1>......<h6></h6> | 分级标题 |
| <p></p> | 用来表示一个段落 |
| <hgroup></hgroup> | 用于表示一个标题组 |
| <blockquote></ blockquote > | 用于引用一个块，常用于长引用 |
| < header ></ header > | 表示网页的头部（可以有多个头部） |
| < main ></ main > | 表示网页的主题部分(一个页面中只会有一个主要部分) |
| < footer ></ footer > | 表示网页的底部，最下面 |
| < nav ></ nav > | 表示网页中的导航，菜单 |
| <aside></aside> | 和主体相关但不属于主体的东西，例如侧边栏 |
| <article></article> | 表示一个独立的文章 |
| <section></ section > | 表示一个独立的区块，例如：其他栏,上面标签无法表示时使用section |
| < div ></ div > | 用的最多，用来表示一个区块，可以代替上面从header开始的所有标签 |
| < span ></ span > | 常与div搭配，是一个内敛标签 ,没有任何语义，用来选中网页中的文字 |
12.一般情况下
块元素主要用于网页的宏观布局
行内元素主要用来包裹文字
- 一般情况下在块元素中放行内元素，而不是行内元素中放块元素
- 块元素中能放任何块元素
注意:<p>元素中不能放块元素
浏览器解析网页时，会自动对不符合规范的内容进行纠正
比如<p>元素中放<h1>或者<h1>放在<html>外面
<p><h1>我就要把h1放在p里面</h1></p>实际上,上面代码在浏览器解析时会纠正成
<p></p>
<h1>我就要把h1放在p里面</h1>
<p></p>13.
列表(list)
1，铅笔
2，尺子
3，橡皮
list分类：
1， 有序列表(用ol标签来创建, 用li来表示列表中的项)
2, 无序列表(用ul标签来创建, 用li来表示列表中的项)
3， 定义列表(用dl来创建列表，使用dt来表示定义的内容，使用dt来对内容进行解释)
一般情况下会将列表项前边的表现去掉（在不同浏览器中显示可能不同）
列表之间可以互相嵌套
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<dl>
<dt>结构</dt><dd>这是结构的解释</dd>
</dl>
<ul>
<li>aa</li>
<ul>
<li>aa</li>
<li>aa</li>
<li>aa </li>
<ul>
<li>aa</li>
</ul>
</ul>
</ul>14.超链接：
超链接可以进行网页跳转，或者跳转到网页的其他位置
使用a标签来定义,是行内元素inline element
a标签比较特殊, a标签中可以嵌套除了自身外的任何元素
a标签中的属性:
target:用于设置跳转方式，值为_self(默认值)时不新建页面跳转；值为_blank时新建一个新的页面跳转
href 用于指定跳转的路径
<a href=”http://www.baidu.com” target=”_blank”>外部超链接（百度）</a><br>
<a href=" https://www.csdn.net/ ">外部超链接(csnd)</a><br>
<!-- 同一目录下的内部链接跳转(在同一目录下) ,使用相对路径-->
<a href="07.列表.html">07.列表</a>
<a href="path/09.相对路径.html">09.相对路径.html</a>当我们需要跳转达到页面的顶部时将href的值设置为#
<a href=”#”>Go to top</a>每个标签都可以设置一个id属性，我们可以通过id来跳转到网页中任何标签的位置, -同一个页面中不可以出现相同的id属性，而且id属性区分大小写,必须字母开头
<p id=”testP1”>这里是p1</p>
<p>这里是p2</p>
<p>这里是p3</p>
<a href=”#textP1”>跳转到P1</a>当设置一个超链接但暂时还不确定超链接的地址时，可以将其的值设定为javascript:;
<a href=”javascript:;”>这是一个空的超链接</a>15.注释，写在<!-- -->里面
16.图片的引入
img（自结束标签）图片引入标签
img是替换元素(介于块元素和行内元素之间)
属性：
src： 用于引入外部图片(路径规则同超链接)
alt:
用于对图片的描述（默认不显示）,有些浏览器在图片显示不了时会显示alt信息.
主要作用是给搜索引擎提供一个搜索识别
width: 设置图片宽度（单位：像素）
height: 设置图片的高度（单位：像素）
宽度和高度只修改一个时，会同时把另一项属性等比例改变
替换元素：
通过所给的路径或者链接给标签所占位置替换
<!-- 下面的链接引入方式不建议，可能出现侵权·图片来源删图等可能，建议使用本地服务器的图片 -->
<img width="600" height="730" alt="大美女" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2F279affb0-86b2-78b3-b226-2f40a384913f%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639310256&t=68e713ae33b69c400026596275607a70" >
<!-- pc端不建议进行图片的放大缩小 -->
<br><img width="600" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2F279affb0-86b2-78b3-b226-2f40a384913f%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639310256&t=68e713ae33b69c400026596275607a70" alt="大美女">图片格式：
jpeg(jpg) -支持的颜色比较多，不支持透明效果，不支持动图
gif -支持的颜色比较少，支持简单透明，支持动图
png -支持的颜色丰富，支持复杂透明，不支持动图
webp -谷歌新推出的专门用于网页中图片的一种格式
-具备了其他图片格式的所有优点,而且文件特别小
-缺点，兼容性不太好，比如一些老版本的浏览器(比如IE9以下)不支持
图片使用原则：效果一样用小的，效果不一样用好的
base64
-将图片使用base64进行编码，这样可以将图片转换为字符，通过字符的形式来引入图片，
-一般用于图片和网页需要同时出现时使用
-可以通过网上的在线base64进行图片加密解密
例如以下代码使用base64编码直接加载:
<img alt="直接加载出来的图片" src="https://img-blog.csdnimg.cn/2022010622350092148.jpeg" >17.内联框架: 用于向页面中引入另一个页面
src 指定要引入的网页路径
width 宽度
height 高度
frameborder 值为0时内联框架无边框，值为1时内联框架有边框
问题：内联框架里的东西不会被搜索引擎的爬虫爬取,一些网页会拒绝重定向
<iframe width="500" height="500" src="https://www.bilibili.com" frameborder="0"></iframe>18.音视频的引入(以下的音视频很多是本地路径)：
音视屏文件引入时，默认情况下时不允许用户操作的
-如果需要用户控制，则需要添加属性controls（不需要给值）
audio -用于向网页中引入音频文件
属性：
-controls 允许用户控制音频播放（不需要给值）
-autoplay 自动播放（不需要给值）
-loop 循环播放（不需要值）
<!-- autoplay大部分浏览器不支持自动播放, 可能会影响用户体验 -->
<audio src="./souce/音视频/audio.mp3" controls loop></audio></audio><br>除了src还可以通过souce来指定播放路径
特点：
-可以提示
-可以指定多个路径用于兼容(优先使用前一个)
<audio controls>
对不起你的浏览器不支持，请升级浏览器
<source src="./souce/音视频/audio.mp3">
<source src="./souce/音视频/audio.ogg">
<embed src="./souce/音视频/audio.mp3", type="/audio/mp3" width="300" height="100">
</audio>在老版本的浏览器中使用embed来插入音视频
<embed src="./souce/音视频/audio.mp3", type="/audio/mp3" width="300" height="100">video向网页中引入视频文件
属性： 和audio大同小异
<video controls autoplay loop>
对不起你的浏览器不支持
<source src="./souce/音视频/flower.webm">
<embed src="./souce/音视频/flower.mp4" type="video/mp4" width="500" height="800">
</video>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
