HTML

html（hyperText makeup language)，超文本标记语言，用来搭网页结构。

常用标签

h1-h6
p
strong/em
hr/br
ul/ol/dl
li
div/span
table/th/tr/td
a
img
form
input
textarea
select

结构规范

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>标题</title>
    </head>
    <body>
        
    </body>
</html>

标题标签

定义文章的标题，块级标签，独占一行

简单，没啥说的

段落标签

定义段落，块级标签，独占一行

<p>我是一个段落</p>

强调标签

加粗和倾斜文本，行级

<strong>加粗</strong>
<em>斜体</em>

换行

在html中所有的人为设置空格都是无效的，无论敲了多少空格，只有第一个生效。

<h3>《琵琶行》</h3>
<p>
    一道残阳铺水中，<br>
    半江瑟瑟半江红。<br>
    可怜九月初三夜，<br>
    露似珍珠月似弓。
</p>

分隔符

hr，块级标签，独占一行。

特殊符号

查看特殊符号对照表

列表标签

无序

<h1>新闻列表</h1>
<ul>
    <li>特朗普访日...</li>
    <li>抗击新冠，从我做起</li>
    <li>李诚儒手撕郭敬明</li>
</ul>

有序

<h2>2020年度音乐排行榜</h2>
<ol>
    <li>卡路里</li>
    <li>我的将军啊</li>
    <li>渡劫</li>
</ol>

自定义

<dl>
    <dt>iphone 12</dt>
    <dd>性价比高</dd>
    <dd>最新发布</dd>
    <dt>iphone 11</dt>
    <dd>大降价</dd> 
    <dd>血赚</dd> 
</dl>

表格标签

<table>
    <tr>
    	<th>姓名</th>
    	<th>年龄</th>
    </tr>
     <tr>
    	<td>john</td>
    	<td>25</td>
    </tr>
</table>

表格添加边框

<table border='1'>
    
</table>

表格添加标题

<table>
    <caption>个人信息</caption>
    <tr>
    	<td></td>
        <td></td>
    </tr>
</table>

单元格合并

colspan 合并列
rowspan 合并行

超链接

<a href='#'>百度一下</a>

打开新的链接

<a href='#' target='_blank'>百度一下</a>

当前网页进行跳转

<p id='top'>
    此处是首页内容
</p>
<a href='#top'>跳转到首页</a>

跳转邮箱

<a href='mailto:xxx@qq.com'>联系我</a>

图片标签

<img src="01.jpeg">

路径解析

相对路径

./ 当前，可以省略

../上一级，以此类推

绝对路径：完整路径

表单

<form action="" methods="get/post">
    <p>
        <!--文本框-->
        <label for="username">用户名</label>
    	<input type="text" placeholder="请输入用户名" id="username">
    </p>
    <p>
        <label for="psd">密码</label>
    	<input type="password"placeholder="请输入密码" id="psd">
    </p>
    <p>
        <!--单选框-->
        男<input type="radio" value="" name="sex" checked>
        女<input type="radio" value="" name="sex">
    </p>
    <h1>
        购买的课程：
    </h1>
    <p>
        <!--复选框-->
        web前端<input type="checkbox" checked>
        python开发<input type="checkbox">
        java编程<input type="checkbox">
    </p>
    <p>
        <!--下拉框-->
        <select multiple="">
            <option selected>a</option>
            <option>b</option>
            <option>c</option>
        </select>
    </p>
    <p>
        <!--文本域-->
        <textarea cols="" rows="">个人信息</textarea>
    </p>
    <p>
        <!--按钮-->
    	<input type="submit" value="提交">
    	<input type="reset" value="重置">
    </p>
</form>
<!--普通按钮-->
<button>按钮</button>

div

容器标签，本身不具备任何意义，用于划分区域。

span

文本容器，不具备任何意义。

标签分类

文本级标签

h1-h6
p
strong/em
span
a
img

排版级标签

br/hr
div
input
table
ul/ol/dl/li
select/option
form

自学前端之HTML