• 3、HTML——注释、转义字符、超链接标签、锚链接、功能性超链接、列表标签、有序列表、无序列表、定义列表

    目录

    一、注释标签

    二、转义字符 

    1、空格： 

    2、大于号/小于号：>/<

    3、引号："

    4、版权：©

    5、商标：&trade

    6、常见转义字符 

    三、超链接标签：a 

     四、锚链接

    1、跳转同网页位置

     2、跳转不同网页位置

    五、功能性超链接

    六、列表标签

    1、无序列表：ul--li

    2、有序标签：ol--li

     3、定义列表：dl--dt--dd

    一、注释标签

    注释标记：

    快捷键CTRL+/

    二、转义字符 

    1、空格： 

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>第三个网页title>
    6. 	head>
    7. 	<body>
    8. 		<center>
    9. 			<h1>转义字符：空格h1>
    10. 			第一次遇见阴天遮住你侧脸有什么故事好想了解。<br />
    11. 			第一次遇见阴天遮住你侧脸 有什么故事好想了解。
    12. 		center>
    13. 	body>
    14. html>

    2、大于号/小于号：>/<

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>第三个网页title>
    6. 	head>
    7. 	<body>
    8. 		<center>
    9. 			<h1>转义字符：大于号与小于号h1>
    10. 			5>3;<br />
    11. 			3<5;
    12. 		center>
    13. 	body>
    14. html>

    3、引号："

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>第三个网页title>
    6. 	head>
    7. 	<body>
    8. 		<center>
    9. 			<h1>转义字符：引号h1>
    10. 			"在拥挤的人潮，我妥协了多少"
    11. 			<q>我想给你快乐q>
    12. 			
    13. 		center>
    14. 	body>
    15. html>

    4、版权：©

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>第三个网页title>
    6. 	head>
    7. 	<body>
    8. 		<center>
    9. 			<h1>转义字符：版权h1>
    10. 			©恰似情书
    11. 			
    12. 		center>
    13. 	body>
    14. html>

    5、商标：&trade

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>第三个网页title>
    6. 	head>
    7. 	<body>
    8. 		<center>
    9. 			<h1>转义字符：版权h1>
    10. 			娃哈哈™
    11. 			
    12. 		center>
    13. 	body>
    14. html>

    6、常见转义字符 

     

    三、超链接标签：a 

    a标签：超链接标签，实现网页的跳转；

    href属性：设置网页跳转位置，可以是一个网站的地址，也可以是项目中其他的页面；

    target属性：设置新打开网页的打开位置，常用值有 ：self   在当前窗口打开(默认值);  _blank在新的窗口中打开。 

    元素最重要的属性是 href 属性，它指定链接的目标。

    在所有浏览器中，链接的默认外观如下：

    • 未被访问的链接带有下划线而且是蓝色的

    • 已被访问的链接带有下划线而且是紫色的

    • 活动链接带有下划线而且是红色的

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>第三个网页title>
    6. 	head>
    7. 	<body>
    8. 		<center>
    9. 			<h1>超链接标签：ah1>
    10. 			<a href="http://www.baidu.com" target="_blank">百度一下a>
    11. 			<a href="img/05.png" target="_blank">点击跳转到图片a>
    12. 			
    13. 		center>
    14. 	body>
    15. html>

     四、锚链接

    点击超链接跳转到指定位置。

    通过a标签的id或name属性进行跳转，跳转按钮的href值为id或name前面加个#

    相当于给个标记，id和name属性都可以 

    1、跳转同网页位置

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>第三个网页title>
    6. 	head>
    7. 	<body>
    8. 		<center>
    9. 			<h1>超链接标签：ah1>
    10. 			<h4>一直很安静 - 阿桑 (Judy Huang)h4>
    11. 			<a href="#456">跳至歌词尾a><br />
    12. 			<a id="123">词：方文山a><br />
    13. 曲：蔡如岳<br />
    14. 空荡的街景<br />
    15. 想找个人放感情<br />
    16. 作这种决定<br />
    17. 是寂寞与我为邻<br />
    18. 我们的爱情<br />
    19. 像你路过的风景<br />
    20. 一直在进行<br />
    21. 脚步却从来不会为我而停<br />
    22. 给你的爱一直很安静<br />
    23. 来交换你偶尔给的关心<br />
    24. 明明是三个人的电影<br />
    25. 我却始终不能有姓名<br />
    26. 你说爱像云<br />
    27. 要自在飘浮才美丽<br />
    28. 我终于相信<br />
    29. 分手的理由有时候很动听<br />
    30. 给你的爱一直很安静<br />
    31. 来交换你偶尔给的关心<br />
    32. 明明是三个人的电影<br />
    33. 我却始终不能有姓名<br />
    34. 给你的爱一直很安静<br />
    35. 我从一开始就下定决心<br />
    36. 以为自己要的是曾经<br />
    37. 却发现爱一定要有回应<br />
    38. 给你的爱一直很安静<br />
    39. 来交换你偶尔给的关心<br />
    40. 明明是三个人的电影<br />
    41. 我却始终不能有姓名<br />
    42. 给你的爱一直很安静<br />
    43. 除了泪在我的脸上任性<br />
    44. 原来缘分是用来说明<br />
    45. 			<a  name="456">你突然不爱我这件事情a><br />
    46.             <a href="#123">跳至歌词开头a>
    47.  
    48.  
    49. 		center>
    50. 	body>
    51. html>

     2、跳转不同网页位置

    href的值为：跳转网页的地址加上需要跳转位置的id或name属性

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>第二个网页title>
    6. 	head>
    7. 	<body>
    8. 		<a href="bk03.html#456">打开歌词并跳至歌词尾部a>
    9. 	body>
    10. html>

    五、功能性超链接

    href的值设置为mailto:邮箱地址

    --->跳转至邮箱

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>第一个网页title>
    6. 	head>
    7. 	<body>
    8. 		<a href="mailto:2726704018@qq.com">我的邮箱a>
    9. 	body>
    10. html>

    六、列表标签

    1、无序列表：ul--li

      标签定义无序列表。

      将

        标签与
      • 标签一起使用，创建无序列表。

          标签由
        • 标签组成。

          当列表项没有数字顺序时，请使用

            标记。

            您可以嵌套

              ，
                和列表。

                可通过

                  的type属性设置选项前的符号

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>第一个网页title>
    6. 	head>
    7. 	<body>
    8. 		<ul>
    9. 			<li>选项一li>
    10. 			<li>选项二li>
    11. 			<li>选项三li>
    12. 		ul>
    13. 		
    14. 		<hr color="#000000" width="100%" size="5"/>
    15. 		
    16. 		<ul type="desc">
    17. 			<li>选项一li>
    18. 			<li>选项二li>
    19. 			<li>选项三li>
    20. 		ul>
    21. 		
    22. 		<hr color="#000000" width="100%" size="5"/>
    23. 		
    24. 		<ul type="circle">
    25. 			<li>选项一li>
    26. 			<li>选项二li>
    27. 			<li>选项三li>
    28. 		ul>
    29. 		
    30. 		<hr color="#000000" width="100%" size="5"/>
    31. 		
    32. 		<ul type="square">
    33. 			<li>选项一li>
    34. 			<li>选项二li>
    35. 			<li>选项三li>
    36. 		ul>
    37. 	body>
    38. html>

    2、有序标签：ol--li

      标签定义了一个有序列表. 列表排序以数字来显示。

        标签由
      1. 标签组成。

        当列表项具有有意义的数字顺序时，请使用

          标记。

          您可以嵌套

            ，
              和列表。

              type属性：设置列表项前面的符号，常用属性值有1(数字，默认值);大写英文字母A和小写英文字母a；大写的罗马数字I和小写的罗马数字i

              start属性：设置列表项符号的起始值，设置属性只能是数字

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>第一个网页title>
    6. 	head>
    7. 	<body>
    8. 		<ol>
    9. 			<li>选项一li>
    10. 			<li>选项二li>
    11. 			<li>选项三li>
    12. 		ol>
    13. 		
    14. 		<hr color="#000000" width="100%" size="5"/>
    15. 		
    16. 		<ol type="1" start="10">
    17. 			<li>选项一li>
    18. 			<li>选项二li>
    19. 			<li>选项三li>
    20. 		ol>
    21. 		
    22. 		<hr color="#000000" width="100%" size="5"/>
    23. 		
    24. 		<ol type="a">
    25. 			<li>选项一li>
    26. 			<li>选项二li>
    27. 			<li>选项三li>
    28. 		ol>
    29. 		
    30. 		<hr color="#000000" width="100%" size="5"/>
    31. 		
    32. 		<ol type="A">
    33. 			<li>选项一li>
    34. 			<li>选项二li>
    35. 			<li>选项三li>
    36. 		ol>
    37. 		
    38. 		<hr color="#000000" width="100%" size="5"/>
    39. 		
    40. 		<ol type="i">
    41. 			<li>选项一li>
    42. 			<li>选项二li>
    43. 			<li>选项三li>
    44. 		ol>
    45. 		
    46. 		<hr color="#000000" width="100%" size="5"/>
    47. 		
    48. 		<ol type="I">
    49. 			<li>选项一li>
    50. 			<li>选项二li>
    51. 			<li>选项三li>
    52. 		ol>
    53. 	body>
    54. html>

     3、定义列表：dl--dt--dd

    标记通常用于显示术语表或术语的定义。

    标签定义一个描述列表。

    标记可以包含零个或多个组，每个组由一个或多个术语（在
    标记中找到）组成，后跟一个或多个描述（在
    标记中找到）。

    标签与 
    （定义项目/名字）和 
    （描述每一个项目/名字）一起使用。

    对于每个组，必须至少有一个

    标签，然后是至少一个
    标签。这意味着可以列出：

    • 一个术语后跟一个描述

    • 单个术语后跟多个描述

    • 多个术语后跟一个描述

    • 多个术语，后跟多个描述

    dt标签：定义列表项

    dd标签：定义列表项内容标签 

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>第三个网页title>
    6. 	head>
    7. 	<body>
    8. 		<dl>
    9. 			<dt>ikun爱好一：dt>
    10. 			<dd>只因你太美dd>
    11. 			<dd>唱dd>
    12. 			
    13. 			<dt>ikun爱好二：dt>
    14. 			<dd>跳dd>
    15. 			
    16. 			<dt>ikun爱好三：dt>
    17. 			<dd>rapdd>
    18. 			
    19. 			<dt>ikun爱好四：dt>
    20. 			<dd>篮球dd>
    21. 			
    22. 		dl>
    23. 	body>
    24. html>

  • 相关阅读:
    芋道系统，springboot+vue3+mysql实现地址的存储与显示
    初识Python
    QT-飞机水平仪图标
    IDEA在多线程环境下断点调试-验证synchronized监视锁的运行状态
    租赁系统开发|沈阳租赁系统|免押房屋租赁功能展示
    ChatGPT多模态升级，支持图片和语音，体验如何？
    玩转Configmap配置应用的各种姿势
    ARM Cortex-M 的 SP
    【汇编语言-王爽】第八章：数据处理的两个基本问题
    零基础学Java（1）初识Java程序
  • 原文地址：https://blog.csdn.net/CSDN_Loveletter/article/details/127866255