一篇文章快速学会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

一个小盒子

特殊字符

空格：&nbsp

小于号：&lt

大于号：&gt

按位与：&amp