HTML：超文本标记语言（多媒体）
以下内容参考自HTML菜鸟教程
- 实例解析
- 练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 网页标题，作者，日期等信息 -->
<title>这是标题</title>
<meta name="作者" content="ZLT" />
<meta name="创建时间" content="2022-4-8"/>
</head>
<body>
<!-- 注释的快捷键是Ctrl + / -->
<!-- 标题有加粗效果，标题一共有六级，常用的为h1，h2，h3 -->
<h1>这是一个一级标题</h1>
<h2>这是一个二级标题</h2>
<h3>这是一个三级标题</h3>
<h6>这是一个六级标题</h6>
<!-- 段落标记，可以存放大量的文本内容 -->
<p>这是一个段落</p>
<!-- 水平线标记，在以上内容下面加一条水平线,
有不同的属性，属性不通用（如段落中不能使用颜色属性）
size为线的宽度，color为线的颜色，aligh可以设置居左居右等，此属性为黑色，表示不建议使用
px为像素，尺寸可以使用像素，也可以使用百分比-->
<hr size="1" color="blue" width="200px">
<hr size="3" color="blue" width="50%" align="right">
<hr size="7" color="red">
<!-- 单标记，br表示换行 -->
<p>这个<br>段落<br>演示了分行的效果</p>
<!-- 一段带有已删除部分和新插入部分的文本：del定义删除字，ins定义插入字 -->
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<!-- 图像标记，src用于指向一个图片的地址，
alt表示给用户一个提示及对图片进行描述，当图片加载不出来的的时候（网速差的时候）。
现多用于爬虫以提示,用于seo，搜索引擎优化
width表示宽度，height表示高度，调整一个另一个随之改变，以防止图片失真
将本地图片复制到img文件下,gif:动图 pg：-->
<img src = "./img/1.png" width=" 50%"/>
<img src = "./img/1.gif" alt="小猫咪" width="30%" />
<!-- 超链接标记 -->
<hr>
<a href="https://editor.csdn.net/md?not_checkout=1&articleId=124032958">这是一个链接，是这篇笔记的地址 </a>
<!-- id 属性可用于创建一个 HTML 文档书签。
提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。 -->
<a id="tips">有用的提示部分</a>
<a href="#tips">访问有用的提示部分</a>
<!-- target用于指定如何跳转 _self表示在当前页面跳转，_blank表示创建一个全新的页面-->
<br>
<a href="http://www.runoob.com/" target="_blank">访问菜鸟教程!</a>
<p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>
</body>
</html>
- 列表
- 表单和输入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 文本格式化标记 -->
<b>加粗文本</b>普通文本
<br>
<strong>强调文本</strong>
<i>斜体文本</i>
<em>斜体文本</em>
<i><strong>斜体加粗文本</strong></i>
<!-- 上标下标 -->
<br>x<sub>2</sub><br>y <sup>2</sup>
<!-- 七档最大 -->
<font size="7" color="red" face="arial black">颜色：红色，字号：7，字体为：rial black</font>
<del>删除线</del>
<!-- 列表标记，无序列表，有序列表，定义列表 -->
<!-- 无序列表：前面编号的类型unorder list -->
<ul type="circle">
<li>无序列表</li>
<li>无序列表</li>
</ul>
<!-- 有序列表order list，前面有可以表示顺序的标记-->
<ol type="I">
<li>有序列表</li>
<li>有序列表</li>
</ol>
<!-- 定义列表：defined list -->
<dl>
<dt>定义列表标题1</dt>
<dd>标题内容</dd>
<dt>定义列表标题2</dt>
<dd>标题内容</dd>
</dl>
<!-- 表格标记 ,每个tr表示一行，每个td表示一个单元格-->
<!--cellspacing表格和数据之间的内间距 -->
<table border="" cellspacing="0" cellpadding="0" width="60%" align="center" bgcolor="yellowgreen">
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
<tr>
<td rowspan="2">Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<!-- 表格属性：行合并 rowspan ，列合并 colspan-->
<!-- 快捷键：Ctrl+D删除光标所在行 -->
<tr>
<td>Data</td>
<td colspan="2">Data</td>
<td>Data</td>
</tr>
</table>
<br>
<table border="" cellspacing="0" cellpadding="0" width="60%" align="center" bgcolor="yellowgreen">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
</table>
<!-- 表单标记 -->
<!-- action表示提交到 哪个服务器地址，method表示提交的方法，get/post-->
<form action="" method="get">
<!-- 属性名和属性值相同的属性，称为布尔属性。只读 -->
<input type="text" placeholder="请输入密码" size="12" maxlength="6" readonly="readonly" />
<br><input type="text" value="" size="12" maxlength="6" />
</form>
<!-- 密码框 -->
<input type="password" />
<!-- 单选按钮 -->
<!-- 名称相同的单元按钮为一组，在组中，实现单选 check表示默认选中 -->
<input type="radio" name="sex" /><b>女</b>
<input type="radio" name="sex" checked="checked" /><b>男</b>
<!-- 复选框，可以选择多个 -->
<input type="checkbox" name="足球" id="1" value="1" />足球
<input type="checkbox" name="" id="" value="2" />篮球
<input type="checkbox" name="" id="" value="3" />羽毛球
<!-- 下拉列表框 selected默认选中-->
<br>
<select name="s1">
<option value="0" selected="selected">东</option>
<option value="0">南</option>
<option value="0">西</option>
<option value="0">北</option>
</select>
<!-- 文本域，多行文本框,用于输入大量文本 ，几行几列，但是意义不大-->
<textarea rows="" cols="">可以输入很多文本</textarea>
<br>
<!-- 按钮，提交按钮，重置按钮，普通按钮 -->
<!-- 把表单中的数据提交到服务器 -->
<input type="submit" name="" id="" value="提交" />
<!-- 把表单中的数据重置为初试状态 -->
<input type="reset" name="" id="" value="重置" />
<!-- 需要开发者自定义 -->
<input type="button" name="" id="" value="普通" onclick=" alert = ('普通按钮') " />
<br>
<!-- 双标记 -->
<button type="button"><strong>提交</strong></button>
<!-- 其他表单元素年月日等，由于兼容性不好，因此不建议使用 -->
<br>
<input type="date" name="" id="" value="" />
</body>
</html>
