HTML标签

作者: Yonginggg | 来源:发表于2019-08-03 10:37 被阅读0次

标签语义化

标签语义化就是表示标签的含义

方便阅读,维护
浏览器,爬虫能够更好的解析
搜索引擎的优化

原则

先确定语义的HTML,再选择合适的CSS

排版标签

标题标签 head(熟记)

HTML提供了6个等级的标签 h1到h6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>hello world</h1>
    <h2>hello world</h2>
    <h3>hello world</h3>
    <h4>hello world</h4>
    <h5>hello world</h5>
    <h6>hello world</h6>
    <h7>hello world</h7>
</body>
</html>

image

可以看到h7是不行的

段落标签 paragraph(熟记)

<p>文本内容</p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>hello world</h1>
    <h2>hello world</h2>
    <h3>hello world</h3>
    <h4>hello world</h4>
    <h5>hello world</h5>
    <h6>hello world</h6>
    <h7>hello world</h7>
    <p>学习前要求：熟练应用HTML和CSS。</p>
    <p>学习后将掌握：前端开发最核心的技能JavaScript，以及jQuery和Ajax。</p>
</body>
</html>

image

水平线标签 horizontal(认识)

<hr /> 单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>hello world</h1>
    <h2>hello world</h2>
    <h3>hello world</h3>
    <h4>hello world</h4>
    <h5>hello world</h5>
    <h6>hello world</h6>
    <h7>hello world</h7>
    <hr />
    <p>学习前要求：熟练应用HTML和CSS。</p>
    <p>学习后将掌握：前端开发最核心的技能JavaScript，以及jQuery和Ajax。</p>
</body>
</html>

image

换行标签 break(熟记)

强制换行显示

<br />

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>换行标签</title>
</head>
<body>
    <h1>-----------中国四大美女-----------</h1>
    1.貂蝉 <br>
    2.王昭君 <br>
    3.西施 <br>
    4.杨玉环 <br>
</body>
</html>

image

div span标签 (division span)(重点)

division 分割

span 跨度

<div>这是头部</div>     <span>今日价格</span>

文本格式化标签(熟记)

image

b i s u 只有使用没有强调的意思

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文本格式化标签</title>
</head>
<body>
    <h3>---------文本格式化标签---------</h3>
    <strong>久旱逢甘雨</strong>,<br>
    <em>他乡遇故知</em>,<br>
    <del>洞房花烛夜</del>,<br>
    <ins>金榜题名时</ins>,<br>

    <hr>
    优惠大促加 原价 <del>1888</del>
    现价 <ins>188</ins>
</body>
</html>

image

标签属性

属性即特性

<标签名 属性1="属性值1" 属性2="属性值2" ...> 内容 <标签名/>

标签可以由多个属性
属性不分前后顺序, 标签名与属性,属性与属性之间用空格隔开
属性有默认值
key="value"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>标签属性</title>
</head>
<body>
    要求 长度500, 颜色红色<br>
    <hr color="red" width="500">
    
</body>
</html>

image

图片标签img (image)单标签(重点,难点)

<img src="图像URL" />

image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片标签</title>
</head>
<body>
    1.基本图片插入方式<br>
    <img src="http://ww1.sinaimg.cn/large/006Qyn2Qly1g5ipy8jby0j310t03tq2u.jpg"/><br>
    2.带有alt的图像<br>
    <img src="wo.jpg" alt="标签属性"><br>
    3.带有title的图像<br>
    <img src="http://ww1.sinaimg.cn/large/006Qyn2Qly1g5ipy8jby0j310t03tq2u.jpg" title="标签属性"/><br>
    4.带有宽度(width)的图片<br>
    <img src="http://ww1.sinaimg.cn/large/006Qyn2Qly1g5ipy8jby0j310t03tq2u.jpg" width="1000"/><br>
    5.带有边框(border)的图片<br>
    <img src="http://ww1.sinaimg.cn/large/006Qyn2Qly1g5ipy8jby0j310t03tq2u.jpg" border="10"/><br>
</body>
</html>

image

连接标签 anchor

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

tatget有两种方式,self为默认值,blank为在新窗口中打开

注意

外部链接需要https://
内部链接直接链接文件名字
href="#"为空链接
网页中各种网页元素都可以添加超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h3>百度链接</h3>
    <a href="https://www.baidu.com" target="blank">baidu</a><br>
    <a href="图片标签.html">图片标签</a><br>
</body>
</html>

image

锚点定位

通过创建锚点链接,用户可以快速的定位到目标内容

步骤

使用 "a href="#id名"链接文本/a"创建链接文本
使用相应的id名标注跳转目标的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>锚点定位</title>
</head>
<body>
    <h3>目录</h3>
    <hr>
    <a href="#live">1   早年生平</a>    <br>
    2   影视事业<br>
    3   歌唱事业<br>
    4   个人生活<br>
    5   主要事件<br>
    6   公益活动<br>
    7   代言广告<br>
    8   影视作品<br>
    9   音乐作品<br>
    10  荣誉与形象<br>
    11  参考文献<br>
    12  外部链接<br>
    <hr>
    <h3 id="live">早年生平</h3>
    刘德华祖籍广东新会县荷塘镇[21]，1961年9月27日出生于香港新界大埔泰亨村[22]，祖父在当时算是大地主（乡村、农地）[23]。有三位姐姐、一位妹妹和一位弟弟（刘德盛）[24][25][26]，在家中排行第四[27]。其父刘礼年轻时为启德机场的消防员[22]。
    <hr>
    <h3>影视事业</h3>
    1981年刘德华入读第10期无线电视艺员训练班[36]，著名的同期同学有吴家丽、梁家辉、戚美珍、张之亮、徐锦江等，毕业后任无线电视台演员[35]。在香港电台电视部制作的电视单元剧《香港香港8：江湖再见》里首次演出[37]。其后在李添胜监制的时装警匪电视剧《猎鹰》里首度担演男主角饰演一名投身警界的青年警察而开始走红[36]。
</body>
</html>

image

base标签

可以设置整体链接的打开方式

<base target="blank">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <base target="blank">
    <title>Document</title>
</head>
<body>
    <a href="https://www.baidu.com">百度</a> <br>
    <a href="https://www.weibo.com">新浪</a> <br>
</body>
</html>

image

设置后,百度和新浪的打开方式都是新打开一个界面

特殊字符(理解)

image

空格

<body>
    --------&nbsp;&nbsp;特殊字符&nbsp;&nbsp;--------
</body>

image

段落

<body>
    --------&nbsp;&nbsp;特殊字符&nbsp;&nbsp;--------
    我们的段落格式是: <p>段落</p>
</body>

image

<body>
    <h3>--------&nbsp;&nbsp;特殊字符&nbsp;&nbsp;--------</h3>
    我们的段落格式是: <p>段落</p>
</body>

image

大于号小于号

<body>
    <h3>--------&nbsp;&nbsp;特殊字符&nbsp;&nbsp;--------</h3>
    我们的段落格式是: &lt;p&gt;段落</p>
</body>

image

注释标签

<!--需要注释的内容-->

<body>
    <!--注释掉的内容-->
    不用注释的内容
</body>

image

路径(重点,难点)

相对路径

image

绝对路径

image

列表标签

整齐,整洁,有序

无序列表 ul (重点)

无序列表的各个列表项没有顺序级别之分,是并列的

<ul>
    <li>列表1</li> 
    <li>列表2</li>
</ul>

<body>
    <h3>your favorite fruits</h3>
    <ul>
        <li>apple</li> 
        <li>banana</li> <br>
    </ul>
</body>

image

<body>
    <h3>your favorite fruits</h3>
    <ul>
        <li>apple</li> 
        <li>banana</li>
        <li>
            <h4>vegetable</h4>
            <p>hello world</p>
        </li>
    </ul>
</body>

image

有序列表 ol (理解)

    <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ol>

<body>
    <h3>2016巴西奥运会金牌数量排行榜</h3>
    <ol>
        <li>美国</li>
        <li>英国</li>
        <li>中国</li>
    </ol>
</body>

image

四大名著的样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>四大名著</title>
</head>
<body>
    <h1>中国四大名著</h1>
    <ul>
        <li>
            <h3>
                <img src="https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=26f84946cf177f3e1434fb0f40ce3bb9/43a7d933c895d1435a7b3fd375f082025aaf0735.jpg" alt="">
                《水浒传》
            </h3>
            <p>
                水浒传》的故事源起于北宋宣和年间，出现了话本《大宋宣和遗事》描述了宋江、吴加亮（吴用）、晁盖等36人起义造反的故事，成为《水浒传》的蓝本。
            </p>
        </li>

        <li>
            <h3>
                <img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=c19069c5fadcd100c99cff23428a47be/83025aafa40f4bfb01ba5d9c014f78f0f6361894.jpg" alt="">
                《三国演义》
            </h3>
            <p>
                三国演义》是综合民间传说和戏曲、话本，结合陈寿的《三国志》、范晔《后汉书》、元代《三国志平话》、和裴松之注的史料，以及作者个人对社会人生的体悟写成。现所见刊本以明嘉靖本最早，分24卷，240则。清初毛宗岗父子又做了一些修改，并成为现在最常见的120回本。
            </p>
        </li>

        <li>
            <h3>
                <img src="https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=cba73536c1fdfc03e178e4bae43e87a9/aec379310a55b319e89f41bd41a98226cefc1797.jpg" alt="">
                《西游记》
            </h3>
            <p>
                西游记以民间传说的唐僧取经的故事和有关话本及杂剧（元末明初杨讷作）基础上创作而成。
                《西游记》前七回叙述孙悟空出世，有大闹天宫等故事。此后写孙悟空随唐僧西天取经，沿途除妖降魔、战胜困难的故事。书中唐僧、孙悟空、猪八戒、沙僧等形象刻画生动，规模宏大，结构完整，并且《西游记》富有浓厚的佛教色彩，其隐含意义非常深远，众说纷纭，见仁见智。可以从佛、道、俗等多个角度欣赏，是中国古典小说中伟大的浪漫主义文学作品。
            </p>
        </li>

        <li>
            <h3>
                <img src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=59e407e738292df593c3ab178c305ce2/d000baa1cd11728b8a1a4eeacafcc3cec2fd2cc7.jpg" alt="">
                《红楼梦》
            </h3>
            <p>
                《红楼梦》是一部章回体长篇小说。早期仅有前八十回抄本流传，八十回后部分未完成且原稿佚失。原名《脂砚斋重评石头记》。程伟元邀请高鹗协同整理出版百二十回全本，定名《红楼梦》。亦有版本作《金玉缘》。
            </p>
        </li>
    </ul>
</body>
</html>

image

自定义列表

自定义列表常用于对术语或名词进行解释,定义列表的列表项前无任何特殊符号

<body>
    <dl>
        <dt>北京</dt>
        <dd>中国首都</dd>
        <dd>文化之都</dd>
        
        <dt>上海</dt>
        <dd>金融中心</dd>
    </dl>
</body>

image

HTML标签

标签语义化

排版标签

标题标签 head(熟记)

段落标签 paragraph(熟记)

水平线标签 horizontal(认识)

换行标签 break(熟记)

div span标签 (division span)(重点)

文本格式化标签(熟记)

标签属性

图片标签img (image)单标签(重点,难点)

连接标签 anchor

锚点定位

base标签

特殊字符(理解)

注释标签

路径(重点,难点)

相对路径

绝对路径

列表标签

无序列表 ul (重点)

有序列表 ol (理解)

四大名著的样例

自定义列表

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端学习