资源
- 推荐zeal:离线文档查看器 https://zealdocs.org/
- 推荐w3c:线上文档 https://www.w3school.com.cn/
- 本笔记参考视频，尚硅谷:BV1XJ411X7Ud
- 我的笔记：https://gitee.com/plusmile/stackedit-app-data.git
- 我的html文件：https://gitee.com/plusmile/front-code.git
0.一个简单的html框架
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title></title>
</head>
<body>
<h1></h1>
</body>
</html>
<!doctype html>:文档声明为html5类型<html lang='zh'></html>:根标签， 网页内容都写根标签里面，lang表示语言<head></head>:供浏览器识别，其内内容不会被用户看见，帮助浏览器和搜索引擎解析网页，可以提供关键字<title></title>:最上方标题栏的内容，浏览器检索时会参照这里的信息，内容会作为搜索结果超链接上的文字显示<meta charset='utf-8'>:设置网页元数据，其中字符集一般UTF-8<body></body>:网页主要内容<h1></h1>:一级标题
1.一些前置知识
<!-- 内容-->:注释写法，不能嵌套，vscode快捷键ctrl+/<font color='red' size='3'>:在开始标签中用键值对或键设置标签属性，与标签名空格隔开，属性值用引号引开- ctrl+回车：vscode快捷键，光标下移一行
2.实体
- 实体就是转义符号使用
&转义内容;表示。 - 常用的有
空格>大于<小于©版- 权符号。 - 这样可以避免固定写法与文本内容的冲突
- 其他的实体见W3Cschool
3.mate
- meta表示元数据
- 自结束标签，无结尾有开头
- 常用属性：name:指定数据名称;content:指定数据内容;charset:指定字符集
<!--以下为搜索引擎关键字的例子-->
<meta name="keywords" content="html,css,购物">
<!--以下为网站描述的例子,在浏览器搜索列表中的描述-->
<meta name="description" content="专业的购物网站">
<!--以下为对网站的重定向跳转例子，其中conten中的3表示3秒后跳转-->
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
4.语义化标签，包括块元素和行内元素
- html关注语义，关注标签表示的含义，不关注样式，样式由CSS决定
<br>表示换行- 在页面中独占一行的为块元素，通过块元素布局，其内能嵌套大部分标签
- 块元素举例：
<p></p>标签表示段落，其中不能放任何块元素- 标题标签，
<h1></h1>h1-h6共六级标题，重要性递减，常用的是h1-h3 <hgroup></hgroup>标题组，表示其内的标题是同一内容的标题
<!-- 标题组，表示其内的标题是同一内容的标题 -->
<hgroup>
<h1></h1>
<h2></h2>
</hgroup>
<blockquote></blockquote>表示长引用
- 在页面中不独占一行的是行内元素,包裹文字：
<em></em>表示语音语调加重<strong></strong>表示重要内容<q></q>表示短引用<b></b>加粗<i></i>斜体<span></span>span行内元素，没有语义，用于在网页选中文字，与div一样最常用的标签，替代上述标签
- 结构化语义标签，也全为块元素：
<header></header>表示网页/某一部分的头部<main></main>表示网页中的主体部分，只能有一个<footer></footer>表示网页/某一部分的底部<nav></nav>表示网页中的导航<aside></aside>和主题相关的其他内容，侧边栏<article></article>表示一段独立的文字，可嵌套<section></section>表示一个独立的区块，其他的标签不能表示时使用<div></div>没有语义，用来表示一个区块，与span一起作为布局的主要手段
5.列表
- 列表分类：有序列表、无序列表、定义列表
- 列表可以互相嵌套
- 使用
ol表示有序列表，li表示列表项
<ol>
<li>结构</li>
<li>表现</li>
</ol>
- 使用
ul表示无序列表，li表示列表项
<ul>
<li>结构</li>
<li>表现</li>
</ul>
- 使用
dl表示定义列表，dt表示定义的名字，dd表示对名字进行解释说明
<dl>
<dt>结构</dt>
<dd>结构是xxxxx</dd>
</dl>
6.超链接
- 超链接可以跳转到其他页面或当前页面的其他位置
- 使用
<a></a>标签定义，是行内元素，但可以嵌套除自己外的任何元素 - 使用属性
href指定跳转目标，其值可以是以下形式：
- 外部网站地址
- 内部页面地址,使用相对路径，默认./ 表示当前路径，…/表示上一级目录下；开发中一般不用相对路径，使用七牛云等托管图片、视频，减少服务器占用
- 回到顶部，使用
# - 跳到任意位置，使用
id查找，id为元素的属性是其唯一表示，区分大小写，字母开头 - 使用
javascript:;表示值的占位符，类似python中的pass
<a id="first" href="https://www.baidu.com">外部网站地址</a>
<a href="02-meta.html" target="_blank">内部页面地址</a>
<a href="#" >回到顶部</a>
<a href="#first" >跳到id为first的标签处</a>
<a href="javascript:;" >占位符</a>
target属性，是定超链接打开的位置
- 默认值
_self，当前页面
2._blank，新的空白页面
7.图片标签
- 图片标签用于引入外部图片
- 使用
<img>标签，这个标签自结束，不需要成对 <img>为替换元素，基于块与行内元素之间- 属性:
src表示路径alt表示图片描述，不显示，部分浏览器会在无法价加载时显示，搜索引擎可以根据此内容识别图片width图片宽度，height图片高度，只设置一个就会等比例缩放，PC不建议修改图片大小，切图更改；移动端经常对大图片缩小
- 图片类型：
- jpg:颜色丰富，不支持透明和动图
- gif:颜色较少，支持简单透明和动图，体积较小
- png:颜色丰富，支持复杂透明，不支持动图，网页常用
- webp:具备所有格式优点，专门用来表示网页，兼容性不好
- base64:将图片使用base64编码转换为字符，放入
src中使用，适用于需要与网页一起加载的图片
<img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white-d0c9fe2af5.png" alt="百度logo" width="200">
8.内联框架
- 内联框架，用于向当前网页中引入其他页面
<iframe></iframe>，成对出现，替换元素- 属性:
src引入的网页的路径frameborder指定内联框架边框是否显示，0不显示，1显示width,height指定框架大小
例子：
<iframe src="https://www.qq.com" frameborder="0"></iframe>
9.音视频
- audio 替换标签，向页面引入一个音频
- video 替换标签，向页面引入一个视频
- 属性：
- src 资源路径或者使用source标签(推荐)
- controls 音视频文件，默认不让用户操作，加入本属性即可操作
- autoplay 音频是否自动播放，但浏览器大多时候会阻止
- loop 是否循环
<!--audio改为video就是video的例子，改下src内容即可-->
<audio src="音频路径" controls autoplay loop></audio>
<audio controls>
给不能加载的浏览器进行提示
<source src=".mp3">
<!-- 放多个，对不支持.mp3格式的可以使用ogg -->
<source src=".ogg">
<!-- 与提示任选其一，embeds所有浏览器都能用，可以作为不兼容时的备选,需要指定高宽及类型-->
<embed src=".mp3" type="audio/.mp3" width="200" height="50">
</audio>
<!--还可以使用网站提供的内嵌代码-->
<iframe src="//player.bilibili.com/player.html?aid=77217003&bvid=BV1XJ411X7Ud&cid=132017557&page=26" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
10.其他
还有<table></table>表格，<form ></form>表单等标签未介绍，在CSS中遇到时会讲解。
665
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
