HTML笔记
1、HTML介绍
HTML指的是超文本标记语言（Hyper Text Markup Language）
HTML不是一种编程语言，而是一种标记语言（markup language）
标记语言是一套标记标签（Markup tag）
HTML使用标记标签来描述网页
2、HTML标签
HTML标签：
HTML标记标签通常被称为HTML标签（HTML tag）。
HTML标签是由尖括号包围的关键词，如<html>
HTML标签是成对出现的
标签对中的第一个标签是开始标签，第二个标签的结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML标签不区分大小写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是啥？</title>
</head>
<body>
文本主体
</body>
<!-- 注释快捷键：Ctrl+/
HTML文件主要包含两个部分：
头部head：meta标签（置网页编码格式）itle标签（设置网页标题）、
体部body：主要放置我们的HTML页面内容
-->
</html>
2.1标题标签
<h1>第1级标题</h1>
<h2>第2级标题</h2>
<h3>第3级标题</h3>
<h4>第4级标题</h4>
<h5>第5级标题</h5>
<h6>第6级标题</h6>
2.2图片标签
<!-- 相对路径和绝对路径 属性width：宽，height：高， title：鼠标移到图片上会提示文字，atl：图片加载失败是提示--> <img src="img/srt.jpg" width="200" height="200" title="鼠标移到我就显示出来" alt="没有找到这个图片"/> <img src="img/rt.jpg" width="200" height="200" title="鼠标移到我就显示出来" alt="没有找到这个图片"/>
2.3段落标签
<!-- 段落 独占一行 -->
<p>段落1</p><p>段落2</p>
2.4链接标签
<!-- 链接标签 href:跳转路径(域名或文件路径)，
target(属性):_blank(打开新窗口)，_self(覆盖原来窗口) 不独占一行-->
<a href="https://www.baidu.com/?tn=65081411_1_oem_dg" target="_blank">百度1</a>
<a href="https://www.baidu.com/?tn=65081411_1_oem_dg" target="_self">百度</a>
2.4.1锚点
<!-- 锚点 href：跳转到的位置（） -->
<a href="#bottom">跳转到底部</a>
<p id="p">段落8</p>
<a id="bottom" href="#">跳转到顶部</a>
<a id="p" href="#">跳转到段落8</a>
2.5列表标签
2.5.1有序列表标签
<!-- 有序 ：li必须在ol里面 type:1(默认值)，A，I，i，a有这几种，
start="2"：表示编号从2开始排列 都独占一行-->
<ol type="1" start="2">
<li>2</li>
<li>1</li>
</ol>
2.5.2无序列表标签
<!-- 无序 itemtype：disc实心，cirecle空心圆，square实心方块 都独占一行-->
<ul itemtype="cicrle">
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
2.6div标签
<div> 内容框 </div>
2.7表格标签
<!--表标签：table（表示表格），thead（表头），tr（表的一行），th（表头列）
tbody（表体），td（表体列）
属性：border（表格边框），width（表格宽高），cellspacing（表格空间，设置为0 可以取消边框之间的间隙）
cellpadding（每个格的大小），align（对齐方式）rowspan="合并列数"（合并列），colspan="合并行数"（合并行）-->
<table border="1px" width="600px" cellspacing="0" cellpadding="10">
<!-- 表头 -->
<thead>
<tr align="ceter">
<th>id</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<!-- 表体 -->
<tbody>
<!-- 第一列 -->
<tr align="ceter">
<td>1</td>
<td>雨</td>
<td rowspan="2">25</td>
</tr>
<!-- 第二列 -->
<tr align="ceter">
<td>2</td>
<td>阳</td>
</tr>
<tr align="ceter">
<td>2</td>
<td colspan="2">总结</td>
</tr>
</tbody>
</table>
2.8表单标签
<!--form表单自动提交数据 属性：action（表单要交到哪个页面），method（提交的方式get 和 post）
input（文本框）：name（名称属性 form表单默认获取value内容，其他根据name获取value内容）
placeholder（文本框提示）
-->
账号：<input type="text" name="userName" placeholder="请输入账号"/><br />
密码：<input type="text" name="pass" placeholder="请输入密码"/><br />
<!-- name必须保持统一才能实现单选 -->
性别：<input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" value="female"/>女<br />
<!-- name不一定一致，建议一致好进行数据处理 -->
爱好：<input type="checkbox" name="boy" value="basketbll"/>篮球
<input type="checkbox" name="boy" value="football"/>足球<br />
星座：<select name="star">
<option value="1">白羊座</option>
<option value="2">狮子座</option>
<option value="3">射手座</option>
</select><br />
<!-- 根据name提交数据，rows="5"（空白页面显示的行数） cols="60"（备注框的宽度）-->
备注:<textarea name="reamrk" rows="4" cols="60"></textarea><br />
<!-- 两种按钮方式：input，button -->
<input type="submit"/>
<button id="btn">注册</button>
2.9span标签
<!-- span標簽:不能设置属性，不换行-->
<span>文字1</span><br />
<span>文字2</span>
2.10换行标签
<!-- br标签：换行-->
<span>文字1</span><br />
<span>文字2</span>
2.11水平线标签
<!-- hr标签：水平分割线，独占一行-->
<hr />
2.12粗体/斜体/下划线标签
<!-- 粗体b,stong(语句强调) --> <strong>神1</strong> <b>神</b> <!-- 斜体 i，em(语句强调)--> <i>阳1</i> <em>阳</em> <!-- 下划线 --> <u>雨</u>
2.13上标/下标标签
<!-- 上标 --> <br /> 4<sup>2</sup> <!-- 下标 --> h<sub>x</sub>
2.14HTML字符实体
<!-- 文本空格 --> <!-- 大于 --> > <!-- 小于 --> < <!-- 大于等于 --> ≥ <!-- 小于等于 --> ≤ <!-- 注册商标 --> ® <!-- 版权 --> ©
2.15iframe
<h3>第3级标题</h3> <h4>第4级标题</h4> <h5>第5级标题</h5> <h6>第6级标题</h6>
3、块元素和行元素
块元素独占一行，可以直接style=""属性操作。行元素不独占一行，不能直接style=“”操作属性