这篇博客详细介绍了HTML的基础知识，包括标题、文字格式、段落、列表、链接、图片和多媒体元素的使用。重点讲解了各种标记符和属性，如href、target、img元素、audio和video元素的布尔属性等。
书：
HTML:
1.超文本标记语言，并非编程语言。
2.通过标记符来标识网页中内容的显示方式，如图片的显 示尺寸，大小，文字的大小、颜色、字体。
3.浏览器负责解释标记符，依次显示内容。
第一个HTML：
<!DOCTYPE html> //声明为 HTML5 文档
<html>
<head> //包含了文档的元（meta）数据
<meta charset="UTF-8"> //中文声明
<title>大傻子</title> //网页标题,有且仅有一个title
</head>
<body>
<h>傻子的第一个标题</h> //定义一个大标题
<p>傻子的第一个段落。</p> //定义一个段落
</body>
</html>标记符：<标记符> 内容 </标记符>
<标记符 属性1=属性值1 属性2=属性值2...>内容</标记符>
标记符可以嵌套，但不可交叉.
<p><font color="red" face="楷体">我是个大傻子</font></p>文字与段落标记
1. 标题字标记：定义文章内章节标题的显示格式
<hn align="对齐方式">标题文字</hn> //n表示标题的级数
<body>
<h1 align="right">一级标题</h1>
<h2 align="center">二级标题</h2>
<h3 align="left">三级标题</h3>
</body>2. 文字格式标记：网页中普通文字的显示效果
<font face="字体" size="字号" color="颜色">文字</font>3. 字型标记：设置文字风格
<b>粗体 <i>斜体 <u>下划线
<strike>删除线效果 <big>使字体相对于前面的文字增大一倍 <small>...减小一倍
<sup>下标 <sub>上标 <blink>闪烁效果 <cite>斜体（表示引用） <strong>斜体加黑体
4. 段落标记和强制换行标记：
<p>段落标记 <br>换行
1. 水平线标记：显示一条水平线，将不同内容分隔开
<hr align="对齐方式" size="横线粗细" width="横线长度" color="横线颜色"noshade> noshade表示没有三维效果。
2. 其他标记：
(1).分区显示标记：使一段文字统一对齐方式
<div align="对齐方式">文本或图像</div>(2).特殊符号标记： &xx;内容&xx;
xx:lt=< gt=> quot=" nbsp=空格
列表标记
1. 无序列表标记
<ul type="符号类型"> //<ul>中的type表示统一类型
<li type="符号类型">列表项目一
<li type="符号类型">列表项目二
<li type="符号类型">列表项目三
</ul>type: disc实心圆 circle空心圆 square实心方块
2. 有序列表标记
<ol type="序号类型" start="起始号码"> type=1,A,a,大小写罗马字母
<li type="序号类型">列表项目一
<li type="序号类型">列表项目二
<li type="序号类型">列表项目三
</ol>3. 自定义列表标记:
<dl>
<dt>列表条目一
<dd>条目一的说明
<dt>...<dd>
</dl>网课：
快速输入批量元素
h[属性]>{内容}*6 可添加$自增符
常见文本元素
<h>
<p>
<span>无语义
<pre>无空白折叠，常用于在网页中显示一些代码
a元素
href属性:
1. 普通链接
<a href="https:/www.luogu.com.cn">洛谷<a>2. 锚链接
<a href="#chapter1">章节一</a>
<h1 id="chapter1">章节一</h1>二者并无本质区别
3. 功能链接：点击后，触发某个功能
- - 执行JS代码,javascript:
<a href="javascript:alert('你好')">弹出：你好！<a>- - 发送邮件,mailto:（要求用户安装邮件发送软件）
<a href="mailto:676467947@qq.com">点击给我发送邮件<a>- 拨打电话，tel:(手机端，电脑则需拨号软件)
<a href="tel:10086">点击给我拨打电话<a>target属性:
- _self:在当前页面窗口打开，默认值
- _blank:在新窗口中打开
开始胡编：
<!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>
</head>
<body>
<h><font face="楷体" color="red">马学长推荐的学习网站:<br></font></h>
<a href="https://developer.mozilla.org/zh-CN/" target="_blank">MDN</a>
<a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
<a href="https://juejin.cn/" target="_blank">掘金</a>
<a href=" https://www.cnblogs.com/" target="_blank">博客园</a>
<a href="https://www.csdn.net/" target="_blank" title="程序员的万能网站">CSDN <br></a>
<h><font face="楷体" color="blue">刷题网站:<br></font></h>
<a href="https://www.luogu.com.cn/" target="_blank">洛谷</a>
<a href="https://pintia.cn/problem-sets/dashboard" target="_blank">PTA</a>
<a href="https://leetcode.cn/" target="_blank">力扣 </a>
</body>
</html>
路径的写法
站内资源和站外资源
站内资源：当前网站的资源 相对路径
站外资源：非当前网站的资源 绝对路径
1. 绝对路径
绝对路径的书写格式：
协议名://主机名:端口号/路径
https://www.luogu.com.cn/
2. 相对路径
必须以./开头（可以省略），./表示当前资源所在的目录
可以书写../表示返回上一级目录
图片元素
img元素 （空元素，无需</img>)
- src属性(source):<img src="地址">
- alt属性(alternative):当图片资源失效时，将使用该属性的文字替代图片
<img src="地址" alt="内容">和a元素联用
<a href="网页地址">
<img src="图片地址">
</a> //点击图片即可跳转到相应网页和map元素(在图片中“指哪打哪”)
map的子元素area：
<a href="网页地址">
<img usemap ="#xxx"src="图片地址">
</a>
<map name="xxx">
<area shape="" coords="" href="" alt="">
</map>- - shape=circle,rect(矩形),poly(多边形)
- - coords=坐标（以图片左上角为原点）
circle(x,y,r) rect(左上角，右上角) poly(各端点坐标)
- - 衡量坐标时，为了减小误差，可以用专业的图片工具：ps pxcook
和figure元素
指代、定义，通常用于把图片、图片标题、描述包裹起来。
子元素figcaption，表示标题。
<figure>
<figcaption>
<h1>标题</h1>
</figcaption>
<img src="" alt="">
<p>内容</p>
</figure>开始胡编：
最后一次握手
<!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>
</head>
<body>
<figure>
<figcaption>
<h1 align="center">最后一次握手</h1>
</figcaption>
<a>
<div align="center"><img usemap="#合影"
src="https://ts1.cn.mm.bing.net/th/id/R-C.10c8a4e44a8cfe10813a7d7d6dcbf623?rik=nn44mBMau4BUvw&riu=http%3a%2f%2fimg1.voc.com.cn%2fUpLoadFile%2f2013%2f12%2f25%2f201312251727502773.jpg&ehk=D%2fc1zyu%2f2lLTz64NGFkDnlfg41C2%2bucq7PWUEShjqss%3d&risl=&pid=ImgRaw&r=0">
</div>
</a>
<p>1974年5月的一个夜晚，在马来西亚的总理走出毛泽东的书房时，随着随行记者注意到了一直在门口的周恩来，两人都没有说话，但是却紧紧地握住了彼此的双手，时间定格的同时，却是一个时代的结束和另一个时代的开始。
</p>
</figure>
<map name="合影">
<area target="_blank" title="毛泽东" shape="circle" coords="643,151,111"
href="https://www.baidu.com/link?url=9Hm6FQ15aYlPaWsQW6Rygq6QbNOpuYqWgSjGG5aWXJL-z0L-XYVp1tbBBg_gXPTb8lLF8wWvEv2wrazKl3pNIyilpMQdTRkQyY1OXPwVPLSezFM5qQU1WxnAny1tMKBH&wd=&eqid=ab70dcf1001ad4ca000000026378dabf"
alt="毛泽东">
<area target="_blank" title="周恩来" shape="circle" coords="248,128,114"
href="https://www.baidu.com/link?url=I3CFfYCSRHCM0uJKXPfhfQzRRgqViZ0At8VbyzW06LQM9mfIUVxwRdJugXzvJZj-lYgRvAFTHIOe-pwH1--sOkvvuWrBfJVkk7FGF4RdVaiD6TMFcCAqQeOZ9-0r-Ilh&wd=&eqid=fd5341e0001bcda0000000026378dad4"
alt="周恩来">
</map>
</body>
</html>多媒体元素
video audio
布尔属性
只有两种状态：1.不写 2.取值只能为属性名
在HTML5中，可以不用书写属性值
controls 显示控制栏 autoplay 自动播放 muted 静音播放 loop 循环播放
<video controls autoplay muted loop src="./video/桂其鑫打呼噜.mp4"></video>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
