HTML 标签

2018-11-24 本文已影响13人 roy_pub

该篇主要介绍HTML标签，接上篇 HTML 初识

div span 标签

div span 没有语义，是布局网页的2个盒子。div 是 division 缩写，分区，分割的意思，常用来组合网页。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div && span</title>
</head>
<body>
    <div>This is div</div>
    <div>This is div</div>
    <div>This is div</div>
    <span>This is span</span>
    <span>This is span</span>
    <span>This is span</span>
</body>
</html>

This is div
This is div
This is div
This is span This is span This is span

文本格式化标签

在网页中，有时需要为文字设置粗体，斜体，下划线等效果，需要用到 HTML 中的文本格式化标签，使文字以特殊方式显示。

标签	效果
<b></b>,<strong></strong>	粗体显示(XHTML推荐使用strong)
<i><i>,<em></em>	斜体显示(XHTML推荐使用em)
<s></s>,<del></del>	加删除线(XHTML推荐使用del)
<u></u>,<ins></ins>	加下划线(XHTML不赞成使用u)

b,i,s,u没有强调的意思，strong,em,del,ins有强调的意思

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div && span</title>
</head>
<body>
    <b>你好，世界</b>
    <strong>你好，世界</strong>
    <i>你好，世界</i>
    <em>你好，世界</em>
    <s>你好，世界</s>
    <del>你好，世界</del>
    <u>你好，世界</u>
    <ins>你好，世界</ins>
</body>
</html>

图像标签

属性	属性值	描述
src	文本	图像的路径
alt	文本	图像不能显示时的代替文本
title	文本	鼠标悬停时显示的文本
width	像素(XHTML不支持%页面百分比)	图像宽度
height	像素(XHTML不支持%页面百分比)	图像高度
border	数字	图像边框

    <img src="../Html_Css/1.png"  alt="This is a car" title="Volvo" width="50" height="70" border="5"/>

链接标签

    <a href="http://www.baidu.com">baidu</a>
    <a href="http://taobao.com" target="_blank">taobao</a>
    <a href="index.html">homepage</a>
    <a href="#">Empty
    <a href="http://zcool.com.cn"><img src="1.png" /></a>

href:链接目标的地址（Hypertext Reference）
target:链接页面打开方式，self 为默认，blank 为新窗口打开
内部链接，直接写页面名称
没有确定链接目标，href 定义为"#"，表示一个空链接
不仅文本可以创建超链接，图像，表格，视频，音频都可添加超链接

锚点定位标签

通过创建锚点链接，能够快速定位到目标内容

<a href="#id name">链接文本</a>
使用响应的id名称跳转到目标位置

    <h2>目录</h2>
    <a href="#spjl">生平经历</a> <br />
    <a href="#wzjc">为政举措</a> <br />
    <a href="#lspj">历史评价</a> <br />
    <a href="#jzcy">家族成员</a> <br />

    <h3 id="spjl">生平经历</h3>
    <p>
        秦始皇于秦昭王四十八年正月（公元前259年1月27日）出生， [10-12]  出生地在当时的邯郸廓城（大北城）温明殿遗址和丛台以南，在今城内中街以东，丛台西南的朱家巷一带。是秦庄襄王的中子，商朝重臣恶来的第35世孙，嬴姓赵氏，名政。
    </p>

Base 标签

base 可以设置整体链接的打开状态，如下所有的链接都在新窗口打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base target="_blank">
</head>
<body>
    <a href="http://taobao.com">taobao</a>
    <a href="http://baidu.com">baidu</a>
</body>
</html>

特殊字符标签

注释标签

    <!-- 注释有利于团队协作 -->

路径

相对路径

图像和HTML文件处于同一个文件夹：只需输入图像名称即可，如 <img src="car.jpg" />
图像文件位于HTML文件下一级的文件夹：输入文件夹和文件名，如 <img src="img/car.jpg" />
图像文件位于HTML文件上一级，需要加入"../"，如果是两级，需要使用"../../"，如 <img src="../logo.gif" />

绝对路径

网络图片路径
本地图片路径

列表标签

无序列表

   <ul>
        <li>BMW</li>
        <li>Volvo</li>
        <li>Geely</li>
    </ul>

有序列表

  <ol>
        <li>BMW</li>
        <li>Volvo</li>
        <li>Geely</li>
   </ol>

自定义列表


    <dl>
        <dt>BMW</dt>
        <dd>This is BMW</dd>
        <dd>Germany Car</dd>

        <dt>Geely</dt>
        <dd>This is Geely</dd>
        <dd>China Car</dd>
    </dl>