一篇文章快速学会HTML

注：适合有一定编程基础的来快速掌握HTML

超文本标记语言

超文本：文本，声音，图片，视频，表格，链接

标记：许多的标签组成

HTML页面是运行到浏览器上的

HTML

文件根标签

head

编写页面相关属性

title

页面标题

body

页面内容展示信息

DOM树

head , body ... 相当于 html 的子标签

head 和 body是兄弟标签

head 与 title 是父子标签

每一个标签相当于一个对象，可以通过代码拿到这些对象进行增删查改。

$0表示标签像素为0

代码框架

HTML标签

注释标签

html 复制代码

 <!-- 注释 -->

标题标签

html 复制代码

 <h1>标题</h1>
 <h2>标题</h2>
 <h3>标题</h3>
 <h4>标题</h4>
 <h5>标题</h5>
 <h6>标题</h6>

段落标签

HTML 复制代码

  <p>段落</p>

换行标签

html 复制代码

<br/>

换行后间隙比段落小

格式化标签

加粗：

html 复制代码

<strong>《星际宝贝史迪奇》</strong>

倾斜：

html 复制代码

<em>《皇后》</em>

删除：

html 复制代码

<del>《星际》</del>

下划线：

html 复制代码

<ins>《星际》</ins>

img 标签

_src 属性

相对路径

html 复制代码

<img src="img/OIP-C.jfif">

绝对路径

1.直接写图片路径

html 复制代码

<img src="D://img//OIP-C.jfif">

2.网络上的路径

html 复制代码

<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 属性

图片加载失败显示的文字

html 复制代码

<img src="img/OIP-C.jfif" alt="萝莉加载失败！">

title 属性

鼠标移动时显示的文字

html 复制代码

<img src="img/OIP-C.jfif" title="这是萝莉！">

width height 属性

改变图片大小

html 复制代码

 <img src="img/OIP-C.jfif" width="200" height="300">

border 属性

给图片加载边框

html 复制代码

<img src="img/OIP-C.jfif"  border="2px">

超链接标签

href 属性

html 复制代码

 <a href="https://www..wangzhi">跳舞</a>

占位符停留在当前界面

html 复制代码

<a href="#">

通过图片跳转

html 复制代码

 <a href="https://www..wangzhi">
     <img src="xxxxx">
 </a>

target 属性

_self _blank

默认是 _self

html 复制代码

 <a href="https://www..wangzhi"
     target="_blank">跳舞</a>
// 跳转到新页面

表格标签

table标签

html 复制代码

<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 标签

html 复制代码

<thead>
    <th>
    	<td>姓名</td>
        <td>年龄</td>
        <td>身高</td>
     </th>
</thead>

合并单元格

html 复制代码

<td rowspan="2">13</td>
<td>145cm</td>
// 合并两行

列表标签

无序列表

html 复制代码

 <ul>
        <li type="disc">我爱萝莉！  </li>
        <li type="square">我爱萝莉！</li>
        <li type="circle">我爱萝莉！</li>
    </ul>

有序列表

html 复制代码

 <ol>
        <li type="a">我爱萝莉！</li>
        <li type="1">我爱萝莉！</li>
        <li type="A">我爱萝莉! </li>
    </ol>

自定义列表

HTML 复制代码

<dl>
        <dt> 萝莉yyds  // 自定义标题
            <dd>我爱萝莉！</dd>
            <dd>我爱萝莉！</dd>
            <dd>我爱萝莉！</dd>
        </dt>
    </dl>

表单标签

完成和服务器的一次交互

表单域：form

表单控件：input

input

用户用来输入的

type 决定类型

HTML 复制代码

<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 提交

html 复制代码

<from action="服务器网址">
        提交内容：<input type="text" name="course">  
        <input type="submit"> <!-- 传服务器-->
        <input type="reset"> <!-- 重置-->
        <br>
        <input type="file"> <!-- 传文件-->
    </from>

lable

搭配input使用

html 复制代码

<!-- 使文字与按钮关联起来 -->
    <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

下拉栏

html 复制代码

<select name="" id="">
        <option value="">请选择侍寝萝莉</option>
        <option value="">萝莉01</option>
         <!-- selected="selected" 设置默认值 -->
        <option value="">萝莉02</option>
        <option value="">萝莉03</option>
    </select>

textarea

多行输入

html 复制代码

<textarea name="" id="" cols = "30" rows="5"></textarea>
    <!-- 
    cols = "30" rows="5" 设置高度宽度
    -->

无语义标签

没有固定用途

通常用来对页面布局进行设计

div

独占一行的大盒子，可以嵌套div，span，head，body，img...

span

一个小盒子

特殊字符

空格：&nbsp

小于号：&lt

大于号：&gt

按位与：&amp