一篇文章快速学会HTML
注：适合有一定编程基础的来快速掌握HTML
超文本标记语言
超文本：文本，声音，图片，视频，表格，链接
标记：许多的标签组成
HTML页面是运行到浏览器上的
HTML
文件根标签
head
编写页面相关属性
title
页面标题
body
页面内容展示信息
DOM树
head , body … 相当于 html 的子标签
head 和 body是兄弟标签
head 与 title 是父子标签
每一个标签相当于一个对象，可以通过代码拿到这些对象进行增删查改。
$0表示标签像素为0
代码框架
HTML标签
注释标签
<!-- 注释 -->
标题标签
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
段落标签
<p>段落</p>
换行标签
<br/>
换行后间隙比段落小
格式化标签
加粗：
<strong>《星际宝贝史迪奇》</strong>
倾斜：
<em>《皇后》</em>
删除：
<del>《星际》</del>
下划线：
<ins>《星际》</ins>
img 标签
_src 属性
相对路径
<img src="img/OIP-C.jfif">
绝对路径
1.直接写图片路径
<img src="D://img//OIP-C.jfif">
2.网络上的路径
<img src="https://cn.bing.com/images/search?view=detailV2&ccid=xOa1rOjw&id=C2E45A49F5440934DFA10B505ABF1E0A26D083BC&thid=OIP.xOa1rOjwWguXauADCE-q4QHaKd&mediaurl=https%3A%2F%2Fpicb.zhimg.com%2Fv2-937b610f123ac83d5a09a220908fc2ff_r.jpg&exph=1188&expw=841&q=%E4%BA%8C%E6%AC%A1%E5%85%83%E8%90%9D%E8%8E%89%E5%9B%BE%E7%89%87&simid=608012321895089100&FORM=IRPRST&ck=C57FF1E75526D6B88BE2B1DE8DC7118A&selectedIndex=0&itb=0&cw=1308&ch=736&ajaxhist=0&ajaxserp=0"
其他属性
alt 属性
图片加载失败显示的文字
<img src="img/OIP-C.jfif" alt="萝莉加载失败！">
title 属性
鼠标移动时显示的文字
<img src="img/OIP-C.jfif" title="这是萝莉！">
width height 属性
改变图片大小
<img src="img/OIP-C.jfif" width="200" height="300">
border 属性
给图片加载边框
<img src="img/OIP-C.jfif" border="2px">
超链接标签
href 属性
<a href="https://www..wangzhi">跳舞</a>
占位符停留在当前界面
<a href="#">
通过图片跳转
<a href="https://www..wangzhi">
<img src="xxxxx">
</a>
target 属性
_self _blank
默认是 _self
<a href="https://www..wangzhi"
target="_blank">跳舞</a>
// 跳转到新页面
表格标签
table标签
<table border="1" cellspacing="0" cellpadding="10" align="center">
<!-- 默认无边框
border="2px" 加边框
cellspacing="0" 表格间隙
cellpadding="10" 表格大小
align="center" 表格位置 center 居中
-->
<tr> <!-- 行 -->
<td>姓名</td> <!-- 列 -->
<td>年龄</td>
<td>身高</td>
</tr>
<tr>
<td>萝莉1号</td>
<td>13</td>
<td>145cm</td>
</tr>
<tr>
<td>萝莉2号</td>
<td>15</td>
<td>152cm</td>
</tr>
<tr>
<td>萝莉3号</td>
<td>16</td>
<td>156cm</td>
</tr>
</table>
thead tbody 标签
<thead>
<th>
<td>姓名</td>
<td>年龄</td>
<td>身高</td>
</th>
</thead>
合并单元格
<td rowspan="2">13</td>
<td>145cm</td>
// 合并两行
列表标签
无序列表
<ul>
<li type="disc">我爱萝莉！ </li>
<li type="square">我爱萝莉！</li>
<li type="circle">我爱萝莉！</li>
</ul>
有序列表
<ol>
<li type="a">我爱萝莉！</li>
<li type="1">我爱萝莉！</li>
<li type="A">我爱萝莉! </li>
</ol>
自定义列表
<dl>
<dt> 萝莉yyds // 自定义标题
<dd>我爱萝莉！</dd>
<dd>我爱萝莉！</dd>
<dd>我爱萝莉！</dd>
</dt>
</dl>
表单标签
完成和服务器的一次交互
表单域：form
表单控件：input
input
用户用来输入的
type 决定类型
<form>
文本框 <input type="text"> <!-- 单行-->
<br>
密码框 <input type="password">
<br>
单选框 <input type="radio" name="gender" checked="checked"> 萝莉01
<input type="radio" name="gender"> 萝莉02
<!--
name="gender" 区分是否是同一组单选框
checked="checked" 设置默认值
-->
<br>
复选框 <input type="checkbox"> 萝莉01
<input type="checkbox"> 萝莉02
<input type="checkbox"> 萝莉03
<br>
按钮 <input type="button" value="我要c萝莉">
<br>
</form>
input 提交
<from action="服务器网址">
提交内容：<input type="text" name="course">
<input type="submit"> <!-- 传服务器-->
<input type="reset"> <!-- 重置-->
<br>
<input type="file"> <!-- 传文件-->
</from>
lable
搭配input使用
<!-- 使文字与按钮关联起来 -->
<label for="01"> 萝莉01</label>
<input type="radio" name="gender" id="01">
<label for="02"> 萝莉02</label>
<input type="radio" name="gender" id="02">
select
下拉栏
<select name="" id="">
<option value="">请选择侍寝萝莉</option>
<option value="">萝莉01</option>
<!-- selected="selected" 设置默认值 -->
<option value="">萝莉02</option>
<option value="">萝莉03</option>
</select>
textarea
多行输入
<textarea name="" id="" cols = "30" rows="5"></textarea>
<!--
cols = "30" rows="5" 设置高度宽度
-->
无语义标签
没有固定用途
通常用来对页面布局进行设计
div
独占一行的大盒子，可以嵌套div，span，head，body，img…
span
一个小盒子
特殊字符
空格： 
小于号：<
大于号：>
按位与：&