HTML常用标签 - 技术栈

1 重要的文本标签

2 自闭合标签

3 html中常用的块标签

注意：

在html中，根据标签（元素）的表现形式，一般分为两类

块元素
行内元素

在html中，块元素在浏览器显示状态下将独占一行。一般情况下，块元素内部可以容纳其他块元素和行内元素。

4 html中常用的行内元素

在html中，行内元素跟块元素恰恰相反，行内元素可以与其他元素位于同一行。此外，行内元素内部，只可以容纳其他行内元素，不可以容纳块元素。

5 空格的代码是&nbsp

html 复制代码

<p>&nbsp;&nasp;鸭子登高

大象踢腿

黑虎掠过秃鹰

怒爪狐飞群

马尾甩苍蝇

镰刀除草

飞鹰扑影

乌鸦坐飞机

巨斧砍大树

鹞鹰展翅

狮子拜天</p>

6 html中的特殊符号

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>特殊符号</title>
</head>
<body>
    <p>欧元符号：&euro;</p>
    <p>英镑符号：&pound;</p>
</body>
</html>

7 有序列表和无序列表

有序列表：ol
无序列表：ul

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>有序列表</title>
</head>
<body>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ol>
</body>
</html>

7.1 ol的type属性

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>type属性 </title>
</head>
<body>
    <ol type="a">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ol>
</body>
</html>

7.2 ul的type属性

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>type属性</title>
</head>
<body>
    <ul type="circle">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
</body>
</html>

8 定义列表

dl: definition list-定义列表
dt:definition term-定义名词
dd: definition description-定义描述

在该语法中，<dl>标记和</dl>标记分别定义了定义列表的开始和结束；dt标签用于添加要解释的名词；而dd标签用于添加该名词的具体解释。

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>定义列表</title>
</head>
<body>
    <dl>
        <dt>HTML</dt>
        <dd>制作网页的标准语言，控制网页的结构</dd>
        <dt>CSS</dt>
        <dd>层叠样式表，控制网页的样式</dd>
        <dt>JavaScript</dt>
        <dd>脚本语言，控制网页的行为</dd>
    </dl>
</body>
</html>

9 表格的基本结构

table：表格标签
tr：行标签 --table row--表格行
td：单元格标签 --table data cell --表格单元格
caption:表格标题
th:表头单元格 -- table header cell

语法结构

html 复制代码

<table>
    <tr>
        <td>单元格 1</td>
        <td>单元格 2</td>
    </tr>
    <tr>
        <td>单元格 3</td>
        <td>单元格 4</td>
    </tr>
</table>

示例

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>表头单元格</title>
    <!--这里使用CSS为表格加上边框-->
    <style type="text/css">
        table,tr,td{border:1px solid silver;}
    </style>
</head>
<body>
    <table>
        <caption>考试成绩表</caption>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>英语</th>
            <th>数学</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>80</td>
            <td>80</td>
            <td>80</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>90</td>
            <td>90</td>
            <td>90</td>
        </tr>
        <tr>
            <td>小杰</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
    </table>
</body>
</html>

9.1 表格的语义化表示

thead --表头
tbody --表身
tfoot --表尾

html 复制代码

<table>
    <caption>表格标题</caption>
    <!--表头--><thead>
        <tr>
            <th>表头单元格 1</th>
            <th>表头单元格 2</th>
        </tr>
    </thead>
    <!--表身--><tbody>
        <tr>
            <td>表行单元格 1</td>
            <td>表行单元格 2</td>
        </tr>
        <tr>
            <td>表行单元格 3</td>
            <td>表行单元格 4</td>
        </tr>
    </tbody>
    <!--表脚--><tfoot>
        <tr>
            <td>标准单元格 5</td>
            <td>标准单元格 6</td>
        </tr>
    </tfoot>
</table>

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>表格语义化</title>
    <!--这里使用CSS为表格加上边框-->
    <style type="text/css">
        table,tr,td{border:1px solid silver;}
    </style>
</head>
<body>
    <table>
        <caption>考试成绩表</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>英语</th>
                <th>数学</th>
            <tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>80</td>
                <td>80</td>
                <td>80</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
            <tr>
                <td>小杰</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>平均</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

9.2 合并行

html 复制代码

<td rowspan = "跨越的行数"></td>

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>rowspan属性</title>
    <style type="text/css">
        table,tr,td{border:1px solid silver;}
    </style>
</head>
<body>
    <table>
        <tr>
            <td>姓名:</td>
            <td>小明</td>
        </tr>
        <tr>
            <td rowspan="2">喜欢水果:</td>
            <td>苹果</td>
        </tr>
        <tr>
            <td>香蕉</td>
        </tr>
    </table>
</body>
</html>

9.3 合并列

html 复制代码

<td colspan = "跨越的列数"></td>

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>colspan属性</title>
    <style type="text/css">
        table,tr,td{border:1px solid silver;}
    </style>
</head>
<body>
    <table>
        <tr>
            <td colspan="2">前端开发技术</td>
        </tr>
        <tr>
            <td>HTML</td>
            <td>CSS</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>jQuery</td>
        </tr>
    </table>
</body>
</html>

10 图片标签

html 复制代码

<img src="" alt="" title="" />

11 超链接

11.1 a标签

html 复制代码

<a href="链接地址">文本或图片</a>

图片超链接

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <a href="http://www.lvyestudy.com"><img src="img/lvye.png" alt="绿叶学习网"/></a>
</body>
</html>

锚点链接

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div>
        <a href="#article">推荐文章</a><br />
        <a href="#music">推荐音乐</a><br />
        <a href="#movie">推荐电影</a><br />
    </div>
    ......<br />
    ......<br />
    ......<br />
    ......<br />
    ......<br />
    ......<br />
    ......<br />
    ......<br />
    <div id="article">
        <h3>推荐文章</h3>
        <ul>
            <li>朱自清-荷塘月色</li>
            <li>余光中-乡愁</li>
            <li>鲁迅-阿Q正传</li>
        </ul>
    </div>
    ......<br />
    ......<br />
    ......<br />
    ......<br />
    ......<br />
    ......<br />
    ......<br />
    ......<br />
    <div id="music">
        <h3>推荐音乐</h3>
        <ul>
            <li>林俊杰-被风吹过的夏天</li>
            <li>曲婉婷-在我的歌声里</li>
            <li>许嵩-灰色头像</li>
        </ul>
    </div>
    ......<br />
    ......<br />
    ......<br />
    ......<br />
    ......<br />
    ......<br />
    ......<br />
    ......<br />
    <div id="movie">
        <h3>推荐电影</h3>
        <ul>
            <li>蜘蛛侠系列</li>
            <li>钢铁侠系统</li>
            <li>复仇者联盟</li>
        </ul>
    </div>
</body>
</html>

12 表单

form
input
textarea
select
option

表单的外观划分

单行文本框
多行文本框
密码文本框
单选框
复选框
按钮
文件上传
下拉列表

12.1 form 标签

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <form>
        <input type="text" value="这是一个单行文本框"/><br/>
        <textarea>这是一个多行文本框</textarea><br/>
        <select>
            <option>HTML</option>
            <option>CSS</option>
            <option>JavaScript</option>
        </select>
    </form>
</body>
</html>

input、textarea、select、option都是表单标签，我们必须要放在form标签内部。

form标签的属性

12.2 input标签

html 复制代码

<input type="表单类型" />

单选框

html 复制代码

<input type="radio" name="组名" value="取值" />

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        性别:
        <input type="radio" name="gender" value="男" checked="checked"/>男   //默认选中男
        <input type="radio" name="gender" value="女" />女
    </form>
</body>
</html>

多选框

html 复制代码

<input type="checkbox" name="组名" value="取值" />

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        你喜欢的水果：<br/>
        <input type="checkbox" name="fruit" value="苹果"/>苹果
        <input type="checkbox" name="fruit" value="香蕉"/>香蕉
        <input type="checkbox" name="fruit" value="西瓜"/>西瓜
        <input type="checkbox" name="fruit" value="李子"/>李子
    </form>
</body>
</html>