HTML标签

最新推荐文章于 2023-07-14 18:04:08 发布

小小少年eason

最新推荐文章于 2023-07-14 18:04:08 发布

阅读量534

点赞数 1

分类专栏：前端网页文章标签： html html标签

本文链接：https://blog.csdn.net/weixin_39872341/article/details/98207593

版权

前端网页专栏收录该内容

65 篇文章 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>

可以看到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>

水平线标签 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>

换行标签 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>

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

division 分割

span 跨度

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

文本格式化标签(熟记)

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>

标签属性

属性即特性

<标签名 属性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>

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

<img src="图像URL" />

<!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>

连接标签 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>

锚点定位

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

步骤

使用 “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>

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>

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

特殊字符(理解)

空格

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

段落

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

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

大于号小于号

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

注释标签

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

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

路径(重点,难点)

相对路径

绝对路径

列表标签

整齐,整洁,有序

无序列表 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>

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

有序列表 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>

四大名著的样例

<!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>

自定义列表

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

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

小小少年eason

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML标签

标签语义化标签语义化就是表示标签的含义方便阅读,维护浏览器,爬虫能够更好的解析搜索引擎的优化原则先确定语义的HTML,再选择合适的CSS排版标签标题标签 head(熟记)HTML提供了6个等级的标签 h1到h6<!DOCTYPE html><html lang="en"><head> <meta charset="U...
复制链接

扫一扫

专栏目录