一篇文章快速学会HTML
一篇文章快速学会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
一个小盒子
特殊字符
空格： 
小于号：<
大于号：>
按位与：&