Bootstrap

第二章:HTML的常用标签

目录

一、标签

二、常用标签

1.排版标签

2.文本标签

3.图片标签img

4.列表

5.表格

6.表单

7.框架标签iframe

三、总结


一、标签

HTML是一种标记性语言,主要通过各种标签来呈现页面,不同标签有不同的语义和效果。注意:效果并不重要,标签最重要的是语义,所有的效果都可以通过css进行修改,主要是为了方便爬虫、盲人阅读器等等的读取。

二、常用标签

1.排版标签

排版标签主要是h1~h6标签,p标签,div标签。h1到h6分别代表一级标题,二级标题······六级标题。p标签表示段落。

div标签没有语义,在代码中通常用来包裹,打包代码块。 

2.文本标签

em标签语义:要着重阅读的地方;

strong标签语义:十分重要的内容(语气比em强);

span标签语义:没有没有语义,用来包裹代码片段。

另外还有很多不常用的文本标签,比如cite,del,sub等等很多,感兴趣的可以在W3C官网上查看。

3.图片标签img

该标签同过src属性来访问图片,src内部可以直接引入(相对路径:'./'表示当前文件下,‘../’表示往上跳一级),可以是在线地址(绝对路径),alt值代表图片的名字,便于搜索时可以搜到该图片。

另外可以通过width和height属性调整图片的宽和高。

4.超链接 a标签

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <a href="#Wechat">看微信头像</a>
  <!-- 超链接跳转页面 -->
  <a href="https://search.jd.com/Search?keyword=%E6%89%8B%E6%9C%BA&enc=utf-8&wq=%E6%89%8B%E6%9C%BA&pvid=8858151673f941e9b1a4d2c7214b2b52"
    target="_blank"> 京东手机</a>
  <!-- 超链接跳转文件 -->
  <a href="./facivon.jpg" target="_blank">看图标</a>
  <!-- 超链接跳转锚点 -->
  <div>
    <img src="./facivon.jpg" alt="">
    <img src="./facivon.jpg" alt="">
    <img src="./facivon.jpg" alt="">
    <img src="./facivon.jpg" alt="">
    <img src="./facivon.jpg" alt="">
    <img src="./facivon.jpg" alt="">
    <!-- <a name="Wechat"></a> -->
    <p id="Wechat">这是一个微信头像</p>
    <img width="200" src="../facivon.ico" alt="">
  </div>
  <!-- <a href="../facivon.ico" target="_blank">微信头像</a> -->

  <p>本节完了</p>
  <a href="#">回到顶部</a>

  <!-- 超链接唤起指定应用 -->
  <div>
    <!-- 电话 -->
    <a href="tel:10086">电话联系</a>
    <!-- 邮件 -->
    <a href="mailto:[email protected]">邮件联系</a>
    <!-- 短信 -->
    <a href="sms:10086">短信联系</a>
  </div>
</body>

</html>

超链接用来实现页面的跳转,通过href属性控制跳转的页面,里面可以是一个在线地址,也可以是一个锚点,通过锚点跳转页面的位置。

另外href里面还可以是电话,邮件,短信等等,用来唤起指定应用。

4.列表

列表分为有序列表ul,无序列表ol和自定义列表dl。

(1)有序列表

有序列表用ul表示,其中的每一步用li表示。

(2)无序列表

无序列表用ol表示,其中的每一条用li表示

(3)自定义列表

自定义列表用dl表示,每一条用dt表示,dd用来解释dt。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
    <!-- 有序列表 -->
    <div>
        <h2>把大象放进冰箱分几步?</h2>
        <ol>
            <li>打开冰箱门</li>
            <li>把大象放进去</li>
            <li>关上冰箱门</li>
        </ol>
    </div>
    <!-- 无序列表 -->
    <div>
        <h2>我想去的几个城市</h2>
        <ul>
            <li>北京</li>
            <li>上海</li>
            <li>拉萨</li>
        </ul>
    </div>
     <!-- 自定义列表 -->
    <div>
        <h2>如何学习</h2>
        <dl>
            <dt>预习</dt>
            <dd>提前准备</dd>
            <dt>做笔记</dt>
            <dd>后期复习的帮手</dd>
            <dt>多实操</dt>
            <dd>自己写下的代码才是自己的</dd>
        </dl>
    </div>
</body>
</html>

注意:列表带有默认的样式,但是这并不重要,因为后期都是可以用css除去的。

5.表格

相关标签:table:表格;caption:表格标题;thead:表格头部;tbody:表格主体;tfoot:表格脚注。表格头部的列用th表示,表格主体和脚注的列用td表示,行都是用tr表示。行合并用rowspan="n"属性,列合并用colspan="n"。下面是示例代码:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>

<body>
    <div>
        <table border="1" width="500" height="300" cellspacing="0">
            <!-- 表格标题 -->
            <caption>学生信息</caption>
            <!-- 表格头部 -->
            <thead height="50" align="center" valign="middle">
                <tr height="100" align="center" valign="middle">
                    <th width="50" height="100" align="right" valign="bottom">姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>民族</th>
                    <th>政治面貌</th>
                </tr>
            </thead>
            <!-- 表格主体 -->
            <tbody height="520" align="center" valign="middle">
                <tr>
                    <td>张三</td>
                    <td>男</td>
                    <td>18</td>
                    <td>汉族</td>
                    <td>团员</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>女</td>
                    <td>20</td>
                    <td>满族</td>
                    <td>群众</td>
                </tr>
                <tr>
                    <td>王五</td>
                    <td>男</td>
                    <td>19</td>
                    <td>回族</td>
                    <td>党员</td>
                </tr>
                <tr>
                    <td>赵六</td>
                    <td>女</td>
                    <td>21</td>
                    <td>壮族</td>
                    <td>团员</td>
                </tr>
            </tbody>
            <!-- 表格脚注 -->
            <tfoot height="50" align="center" valign="middle">
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>共计:4人</td>
                </tr>
            </tfoot>
        </table>
    </div>
    <div>
        <table border="1" width="500" height="300" cellspacing="0">
            <caption>课程表</caption>
            <thead>
                <tr>
                    <th>项目</th>
                    <th colspan="5">上课</th>
                    <th colspan="2">活动与休息</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>星期</td>
                    <td>星期一</td>
                    <td>星期二</td>
                    <td>星期三</td>
                    <td>星期四</td>
                    <td>星期五</td>
                    <td>星期六</td>
                    <td>星期日</td>
                </tr>
                <tr>
                    <td rowspan="5">上午</td>
                    <td>2-2</td>
                    <td>2-3</td>
                    <td>2-4</td>
                    <td>2-5</td>
                    <td>2-6</td>
                    <td>2-7</td>
                    <td rowspan="5">休息</td>
                </tr>
                <tr>]
                    <td>3-2</td>
                    <td>3-3</td>
                    <td>3-4</td>
                    <td>3-5</td>
                    <td>3-6</td>
                    <td>3-7</td>
                </tr>
                <tr>
                    <td>4-2</td>
                    <td>4-3</td>
                    <td>4-4</td>
                    <td>4-5</td>
                    <td>4-6</td>
                    <td>4-7</td>
                </tr>
                <tr>]
                    <td>5-2</td>
                    <td>5-3</td>
                    <td>5-4</td>
                    <td>5-5</td>
                    <td>5-6</td>
                    <td>5-7</td>
                </tr>
                <tr>]
                    <td>6-2</td>
                    <td>6-3</td>
                    <td>6-4</td>
                    <td>6-5</td>
                    <td>6-6</td>
                    <td>6-7</td>
                </tr>
                <tr>]
                    <td rowspan="2">下午</td>
                    <td>7-2</td>
                    <td>7-3</td>
                    <td>7-4</td>
                    <td>7-5</td>
                    <td>7-6</td>
                    <td>7-7</td>
                    <td rowspan="2">休息</td>
                </tr>
                <tr>]
                    <td>8-2</td>
                    <td>8-3</td>
                    <td>8-4</td>
                    <td>8-5</td>
                    <td>8-6</td>
                    <td>8-7</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

6.表单

表单标签是form,表单包括的标签有很多,比如文本框,密码框,单选框,复选框,隐藏域,文本域,下拉框,按钮等等。

值得注意的是:隐藏域主要用来保护网页,防攻击。按钮又分为普通按钮(检测账户是否被注册),确认按钮,重置按钮,通过属性type来控制。

注意表单的value值,只是提交的内容,后期用来确认账户。

表单禁用控价:disabled,该属性可以禁用表单。

具体使用代码如下:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>

<body>
    <div>
        <form action="https://www.baidu.com/s">
            <input type="text" name="wd">
            <button>搜索</button>
            <hr>
        </form>
        <form action="https://search.jd.com/search" target="_blank">
            <input type="text" name="keyword">
            <button>搜索</button>
        </form>
    </div>
    <form action="https://search.jd.com/search" target="_blank">
        <!-- 文本输入框 -->
        账户:<input type="text" ,name="account" value="张三" maxlength="10"><br>
        <!-- 密码输入框 -->
        密码:<input type="password" ,name="pwd" value="123" maxlength="10"><br>
        <!-- 单选框 -->
        性别:
        <input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female">女<br>
        <!-- 多选框 -->
        爱好:
        <input type="checkbox" name="hobby" value="smoke">抽烟
        <input type="checkbox" name="hobby" value="drink">喝酒
        <input type="checkbox" name="hobby" value="perm">烫头<br>
        <!-- 隐藏域 -->
        <input type="hidden" name="abc" value="123"><br>
        <!-- 文本域 -->
        其他:
        <textarea name="other" cols="30" rows="3"></textarea><br>
        <!-- 下拉框 -->
        籍贯:
        <select name="place">
            <option value="黔">贵州</option>
            <option value="云">云南</option>
            <option value="川">四川</option>
            <option value="粤">广东</option>
        </select><br>
        <!-- 确认(button和submit两种)与重置 -->
        <input type="submit" value="确认">
        <!-- <button>确认</button> -->
        <!-- <button type="reset">重置</button> -->
        <input type="reset">
        <!-- 普通按钮 -->
        <button type="button">检测账户是否被注册</button>
    </form>
    <form action="http://search.jd.com/search">
        <!-- 表单禁用控件 -->
        账户:<input disabled type="text" name="account" value="zahngsan" maxlength="10">
    </form>
</body>

</html>

7.框架标签iframe

之前的a标签跳转是跳转到新的页面,而使用框架标签可以让跳转的网页在当前页面显示。

具体代码如下:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>框架标签</title>
</head>

<body>
    <!-- <iframe src="http://www.baidu.com" width="900" height="300" frameboeder="1"></iframe> -->

    <a href="http://www.baidu.com" target="tt">点我看百度</a>
    <a href="http://www.taobao.com" target="tt">点我看淘宝</a><br>
    <iframe name="tt" frameborder="0" width="900" height="300"></iframe>
</body>

</html>

值得注意的是,有的网页是不能这样跳转的,比如百度不能,淘宝可以。

三、总结

本节介绍了HTML4的一些常用标签,更多标签可以在W3C上查看,这部分是HTML的十分基础的东西,下一节将介绍HTML的全局属性,字符实体以及meta元信息。

;