HTML
用于网页结构的构建
1.总括
1.1HTML标签成对出现：
<b>****</b>
1.2只有body间的内容才会显示在浏览器中
<body> </body>
1.3声明，帮助浏览器正确显示页面不区分大小写，放在文档第一行
<!doctype heml>
2.HTML标签
2.1标题标签
<h1>这是一个标签</h1>
标题标签支持1-6
2.2段落标签
<p>这是一个段落</p>
2.3链接标签
<a herf="这里放链接”>这是一个链接</a>
如
2.4图像标签
<img decoding="async" src="/images/logo.png" width="258" height="39" />
2.5换行标签
<br />
2.6注释标签
<!-- 这是一个注释 -->
<!---->
2.6其余标签
https://www.runoob.com/tags/html-reference.html
3.HTML元素
3.1元素语法
元素就是：开始标签+元素内容+结束标签大多数元素有属性且元素可嵌套
3.2空元素
无内容的元素
4.HTML属性
4.1属性一般性质
4.1.1属性用于在元素中添加附加信息
4.1.2一般描述于开始标签
4.1.3形式为：名称=值
4.1.4小写属性
4.2属性常用引用属性值
属性值应该被引号引用如属性值本身有双引号，那么就用单引号引用
5.HTML标题
5.1层次
<h1>定义最大的标题</h1>
<h6>定义最小的标题</h6>
浏览器会在标题前后添加空行
5.2HTML水平线
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
效果如下
这是一个段落。
这是一个段落。
这是一个段落。
6.HTML段落
6.1段落标签
<p>这是一个段落标签</p>
<!--不要忘记结束标签-->
效果如下
这是一个段落标签
6.2折行
<p>这个<br>段落<br>演示了分行的效果</p>
效果如下
这个
段落
演示了分行的效果
7.HTML文本格式化
7.1相关标签
<b>加粗</b>
<strong>加粗</strong>
<i>斜体</i>
<em>斜体</em>
<big>放大</big>
<small>缩小</small>
<sup>上标</sup>
<sub>下标</sub>
加粗
加粗
斜体
斜体
放大
缩小
上标
下标
7.2预格式文本
<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>
预格式文本可以使文本等宽字符表示
此例演示如何使用 pre 标签 对空行和 空格 进行控制
7.3缩写和首字母缩写
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
光标移到缩略词上时，可以显示title
etc.
WWW
7.4文字反向
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>
该段落文字从右到左显示。
7.5块引用
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
WWF's goal is to:
Build a future where people live in harmony with nature.
We hope they succeed.
7.6其余文本格式化标签
https://www.runoob.com/html/html-formatting.html<—见此
8.HTML链接
基本链接方式可以在总括中看到，对元素定义不同的属性可以有不同的效果
8.1图像链接
<a href="lianjie"><img img属性></a>
上面为基本格式，菜鸟示例如下
8.2锚点链接
<a href="#标记">文字</a>
<!--同一页面其他位置-->
<a name="标记”></a>
8.3下载链接
使用download属性
<a href>="地址" download>文字说明</a>
8.4其余形式见详细属性页
https://www.runoob.com/tags/tag-a.html
9.HTML头部
9.1头部可添加的标签
<title>
<style>
<meta>定义文档的描述、关键词、作者等
<link>定义文档与外部资源间的关系
<script>
<noscript>
<base>定义页面链接标签的默认链接地址
10.HTML 图像
10.1基本语法
<img src="url" alt="text" width="32" height="32">
10.2图像的浮动
<img src="url" alt="text" style="float:left/right">
10.3图像链接
<a href="dizhi"><img src="url" alt="text"></a>
采用style中float属性来定义浮动的位置
10.4 图像映射
<img src="url" alt="text" width="32" height="32" usemap="#name">首先在图片中使用usemap属性，#标记开始
<map name="name">使用map元素
<area shape="rect/circle/poly/default各个图形" coords="像素点位” alt="该区域的名称" href="url"该区域的映射链接>
<area...>
<area...>
<!--一个map元素里可以有多个area元素-->
</map>
11.HTML表格
<table>
<!--表格由table标签开始-->
<thead>
<!--thead定义表格的标题，会有加粗效果-->
<tbody>
<!--表格主体-->
<tr>
<!--tr表示一行-->
<th>一行一列内容</th>
<th>一行二列</th>
<th>一行三列</th>
</tr>
<tr>
...开启第二行
</tr>
</tbody>
10.HTML属性与标签的简单运用
<!doctype html>声明文档
<html>开始
<head>
<base href="相对链接基准的URL" target="属性">
<title>文档标签</title>
<link href="" rel="" target="" media="" hreflang="">link无结束标签
<meta name="" content="" http-equiv="">
</head>头部
<body>网页显示部分
<h1>这是第一个标题</h1>
<a name="maodian">这是一个锚点</a>
<p>这是第一段<q><bdo dir="rtl">在这一段里引用一句话,尝试逆向输出</bdo></q>引用完毕。</p>
<h2>这是第二个标题</h2>
<br>
<p><big>尝试一下放大</big><small>缩小r后折行</small><br><i>斜体</i><b>加粗</b><sub>下标</sub><sup>上标</sup></p><br><br>
<p><abbr title="external">ext缩写</abbr></p><br><br>
<h3>这是第三个标题</h3><br><br>
<p>在这里尝试一下锚点链接</p>
<br>
<a href="#maodian">点击这里跳转</a>
<br>
<p>插入一个图片</p>
<p><img src="E:\图片\keli.jpg" width="640" height="640"></p>
<!--路径可以是网址、本地文件夹路径和磁盘中的路径-->
</body>
</html>