学习笔记
1. html 是什么
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
2.标记简介
<!DOCTYPE html> // 声明是h5文档
<html> // 元素的根标签
<head> // 元素的头标签
<meta charset="utf-8"> // 是定义网页格式标签
<title>菜鸟教程(runoob.com)</title> // 文档的标题
</head>
<body> // 元素的内容标签
<h1>我的第一个标题</h1> // 定义一个大标题
<p>我的第一个段落。</p> // 定义一个段落
</body>
</html>
3.html分为3部分 ， 结构，元素，属性
①结构 代表的标签本身
<h1></h1>
<p></p>
<a></a>
②元素 代表的是标签附带的功能
<a href=""></a> // href代表元素
<img src="" alt=""> //src 代表元素
<input type="text"> // type 代表元素
③属性 代表附加的样式
<a href="" style="width: auto;"></a> // style里面的代表属性
<input type="text" id="id"> // id 对应的css 叫属性
4.html标签
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<hr> // 水平线标签
<!-- --> // 注释标签
<p></p> // 段落标签
<br> // 换行标签
<b></b> // 定义粗体
<em></em> // 强调文本
<i></i> // 协调标签
<small></small> // 小号字体
<strong></strong> // 加重语气 粗体标签
<sub></sub> // 定义下标字
<sup></sup> // 定义上标字
<ins></ins> // 定义插入字 删除线在字体下方
<del></del> // 定义删除字 删除线
<code></code> // 定义计算机代码
<kbd></kbd> // 定义键代码
<var></var> // 定义变量
<pre></pre> // 预定义格式化
<abbr title=""></abbr> // 定义缩写字的
<address></address> // 定义地址
<bdo dir=""></bdo> // 定义文字方向
<blockquote></blockquote> // 定义长度的引用
<q></q> //定义引用语
<cite></cite> // 定义引用
<dfn></dfn> // 定义一个项目
<img src="" alt=""> // 图标标签
<map name=""></map> // 定义图像地图
<area shape="" coords="" href="" alt=""> // 定义图像地图中的可点击区域
<table></table>// 定义表格
<th></th> // 定义表格的表头
<tr></tr> // 定义表格的行
<td></td> // 定义表格的单元
<caption></caption> // 定义表格标题
<colgroup></colgroup> // 定义表格列的组
<col> // 定义表格列的属性
<thead></thead> // 定义表格的页眉
<tbody></tbody> // 定义表格的主体
<tfoot></tfoot> // 定义表格的页脚
<ol></ol> // 定义有序列表
<ul></ul> // 定义无需列表
<li></li> // 定义列表项
<dl></dl> // 自定义列表
<dt></dt> // 自定义列表项
<dd></dd> // 自定义列表项描述
<div></div>// 定义块级 盒子
<span></span> // 定义内联 盒子
<form action=""></form> // 定义表单
<input type="text"> // 定义输入域
<textarea name="" id="" cols="30" rows="10"></textarea> //定义文本域
<label for=""></label> // 定义 input标签的 输入标题
<fieldset></fieldset> // 定义一组相关的表单元素
<legend></legend> // 定义元素的标题
<select name="" id=""></select> // 定义下拉选项列表
<optgroup></optgroup> // 定义选项组
<option value=""></option> // 定义下拉列表的选项
<button></button> // 定义一个点击按钮
<datalist></datalist> // 定义一个预先输入控件列表
<output></output> // 定义一个计算结果
<iframe src="" frameborder="0"></iframe> //引入外部页面
<script></script> // 定义客户端脚本 也叫 定义js
<noscript></noscript> // 客户端不支持js 的时候执行输出的文本
5. html案例
HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
① html基本文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
②基本标签
<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->
③文本格式化标签
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）
④链接
普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>
⑤图片
<img loading="lazy" src="URL" alt="替换文本" height="42" width="42">
⑥样式/区块
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>
⑦无序列表
<ul>
<li>项目</li>
<li>项目</li>
</ul>
⑧有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
⑨自定义列表
<dl>
<dt>项目 1</dt>
<dd>描述项目 1</dd>
<dt>项目 2</dt>
<dd>描述项目 2</dd>
</dl>
⑩表格
<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>
①①框架
<iframe src="demo_iframe.htm"></iframe>
①②表单
<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
</form>
①③实体
< 等同于 <
> 等同于 >
© 等同于 ©
发表评论