前端标签基础知识

柚子会一直发光的
已于 2023-05-10 14:13:43 修改
阅读量99
点赞数
文章标签：前端 html servlet
于 2022-07-11 19:47:00 首次发布
本文链接：https://blog.csdn.net/m0_72699629/article/details/125728385
版权
1).标签

<!--注释内容      html
//单行注释         js
/* 注释内容*/       css
注释内容ctrl+/?(可空行注释，选中某行注释，多行注释
注释：是代码的解释文本，被注释的内容或代码不被执行
注释的作用：
    1.为了让他人或者自己阅读代码更方便，便于更好的理解代码
    2.将代码注释起来后，代码就不会执行，可以方便删除，或者还原代码。
    3.注释可以作为初学者的笔记使用
    
    快捷键：
    html:5                生成基本代码块
    标签名+TAB/ENTER       快速生成标签
    ctrl+s                保存
    ctrl+a                全选
    ctrl+c                复制
    ctrl+v                黏贴
    ctrl+x                剪切
    ctrl+z                撤回
    ctrl+y                反撤回（进行下一步）
    ctrl+b                打开/关闭编辑器资源管理器
    ctrl+f                查找
    ctrl+h                替换
    ctrl+“+”              增大字体
     ctrl+“-”             减小字体
     CTRL+z               换行
    alt+鼠标左键           多行输入
    alt+b                 快捷打开浏览器
              
-->
<!--DOCTYPE:版本标记，在HTML文件中，第一行都是DOCTYPE;
    DOCTYPE:申明文档类型，告诉浏览器以标准模式解析文件
     html：html就是告诉你浏览器这是一个html5文件。
-->

     <html lang="en">
<!--hand:头标签，设置网页的头部信息。在标签内部添加说明标签，不会显示在网页中-->

<!DOCTYPE html>
<!--html:根标签，是整个HTML页面的第一个标签，文档的所有内容都在这个标签中。
    标签的嵌套：形成了父子关系，外层为父元素，内层为子元素。
    标签的属性：在开始标签内添加的，一般都以  属性名=“属性值”的形式存在。属性都是标签添加的一些解释说明的。
  lang:language,语言，说明文档的语言类型-->
<html lang="en">
<head>
     <!--meta:说明标签
    charset:会在head标签第一行，防止页面中出现乱码
UTF-8;一种编码格式，解决中文乱码的问题-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--title:标题,显示在页面的标题栏上。-->
    <title>标签</title>
    <!--stysle:内部设置css样式，需要配合选择器使用-->
    <style></style>
</head>
<!--boby:设置网页的主题内容-->
<body>
   
</body>
<!--script:添加js内容（在body的下面添加或者放置在body标签内的最下方-->
<script>

</script>
<!--
    HTML文档字符编码&语言设置；
    1.编码的重要性：编码可以导致浏览器通过IE时候网页乱码，也可以导致css的兼容性Hack。
    2.编码的位置:(一般这段网页编码放在html文件的head标签内的第一行)。
    3.编码的样式:通过charset="UTF-8"中的UTF-8就可以改变网页编码。
    4.编码的种类:国内常用的流行编码格式有UTF-8，gb2312这两种，一般这两种类型就可以满足国内所有的网页编码需求。程序和数据库中也会用到这两种编码类型处理网页和储存数据类型。

-->


</html>



2).格式化标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>格式化标签</title>

    </head>
    <body>
        <!--
            b:加粗文本，没有特殊的意义。
            strong：加粗文本，具有很高强的强调意义，用于表示文本的重要性。
            i:斜体文本，没有特殊的意义。
            em：斜体文本，具有很强的强调意义，用于表示文本的重要性。
            sup:定义上标
            sub:定义下标
            S:删除线文本，没有特殊的意义。
            del:删除线文本，就有很强的删除意义，用于表示被遗弃的内容。
            U:下划线文本，没有特殊的意义
            ins：添加文本，具有很强的添加意义，用与表示新增的内容。
            small:定义小号文本。
        -->
        <b>加粗文本</b>
        <strong>加粗文本</strong>
        <br>
        <i>斜体文本</i>
        <em>斜体文本</em>
        <br>
        <p>这是<sup>上标</sup>和<sub>下标</sub></p>
        <s>删除文本</s>
        <del>删除文本</del>
        <br>
        <u>下划线文本</u>
        <ins>下划线文本</ins>
        <br>
        <small>小号文本</small>
    </body>
</html>

3).转义字符
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>转义字符</title>
</head>
<body>
    <!--
        在HTML中，如果需要显示<或>等其他特殊数字符时，不要直接使用，否则会被误认为是一个标签，需要使用转义字符进行转义。

    -->
    <!--<p>在HTML中，使用<hr>表示分割线。</p>-->
    <!--
        &lt;  表示<
        &gt;   表示>
    -->
    <p>在HTML中，使用&lt;hr&gt; 表示水平分割线。</p>
    <p>在HTML中，使用&amp;  表示和。</p>
    <p>在HTML中，使用&emsp;表示中文空格。</p>
    <p>在HTML中，使用&nbsp;表示英文空格。</p>
    <p>在HTML中，使用&copy; 表示版权。</p>
    <p>在HTML中，使用&reg; 表示注册商标。</p>
    <p>在HTML中，使用&yen; 表示人民币。</p>
    <p>在HTML中，使用&deg;表示度°。</p>
</body>
</html>

4).HTML的常用标签
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>htmnl常用标签</title>
    </head>

<body>
   <!--
    html标题:
        标题     heading
        是通过和-或标签定义的。
        <h1>为最大标题，用于显示主标题，<h6>为最小标题。
            默认样式：
                标题标签带有上下外间距，撑出元素之前的距离。

-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6> 
<!--
    html水平分割线；
         hr:创建水平线，用于分隔内容。
         默认样式：
            1px的边框线，8px的上下间距。
-->
<span> 普通文本</span>
<hr/>
<span>普通文本</span>
<!--
    html段落：
    P：段落元素，块元素。
    注意：
          在文本标签内属于特殊的文本标签，文本标签都是行内元素除了P。
          默认元素：
               文本大小为16px，根据文本大小调节上下外边距。
          注意：
               浏览器会自动添加空行再段前面段后
-->
<p>
    羽生结弦一位不待扬鞭自奋蹄的选手，红颜如玉，身姿如松，翩若惊鸿，宛若游龙。
    <br>我们很庆幸能够在羽生结弦最美好的年纪里认识他，岁月终会老去但是我们的记忆里永远会为他留一个位置。
    <br>他就像一把宝剑，即使被藏在了金丝楠木里也无法阻挡他那耀眼的光芒。
</p>
<!--
        HTML的换行标签，
            br：换行标签，空元素。
    -->
    <span>普通文本</span>
    <br>
    <br>
    <span>普通文本</span>
    <br>
    <!--
        html图片的插入标签：
        img：在网页中插入图片。
             html属性：
              src:来源，图片的路径（可以使网络或者本地图片）
              图片路径查找：
               相对路径：相对于当前文件的路径。
                  图片跟文件在同级；
                      直接写图片名；
                      ./  会关联出同级的所有文件。
                   图片跟文件是上级的兄弟：
                      ../会关联出上一级所有文件
                      绝对路径：
                         包括盘符的路径，也叫绝对路径。
                         可以直接在网络上复制图片地址
             alt:图片加载失败时替换文本。
    -->
    <img src="./img/th.jpg">
     <img src="./img/th (2).jpg">
    <img src="../2022.7.11/img/th (1).jpg">
    <img src="https://pic3.zhimg.com/v2-43cc6ad0afcbf6c2b7de3b4a6a37e357_b.jpg">
    <br>
    <img src="../2022.7.11/img/th5.jpg" alt="图片加载失败">
    <img src="../2022.7.11/img/th6.jpg"  alt="图片加载失败" title="th6">
    <br>
    <!--
        HTML超链接标签：
            a:超链接标签。
                作用：
                    实现页面的跳转，点击标签的内容，跳转到指定链接地址。
                注意：
                     当a标签没有添加href属性时是链接占位符（标签内容为普通内容）
                HTML属性：
                     herf：超文本的指向，设置跳转的网页的链接地址。
                     target：目标，设置网页的打开方式，默认值是在当前网页打开。
                           _blank:作用，在新窗口打开。
    -->                      
<a href="http://www.baidu.com" target="_blank" title="羽生结弦">百度一下，你就知道</a>
<a href="http://www.baidu.com" title="羽生结弦"><img src="./img/th.jpg"></a>
  <!-- <a>超链接</a>-->
   
  <!--
    html块：
       div:标准的块标签。
           块元素在没有设置宽高的情况下，宽度默认名为父元素的100%，宽度靠内容撑开（如果没有内容，则高度为0）。

  -->
  <div>你好</div>

        <!-- 
            HTML文本：
                span：普通文本标签，文本默认大小为16px，靠文本内容撑出大小。
         -->
        <span>普通文本</span>

</body>
</html>

5).语义化标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语义化标签</title>
</head>
<body>
     <!--
        HTML语义化标签；
            根据内容的结构（内容语义化），选择合适的标签（代码语义化）。
            便于开发者阅读和写出个更好的代码；
            让浏览器的爬虫和机器很好的解析。
            html语义化的好处；
                 1.为了在没有css的情况下，页面也能呈现出更好的你内容结构，代码结构。
                 2.代码结构清晰方便阅读，有利于团队的开发。、
                 3.方便搜索引擎识别页面，有利于搜索引擎优化（SEO)
                 4.方便其他页面的解析（比如：屏幕浏览器，盲人浏览器，移动设备等），以语义化的方式渲染页面。
     -->
     <!--页面语义化标签-->
     <nav>标记导航，仅对页面中的重要链接群使用</nav>
     <header>页眉，包括页面的logo，主导航，全站链接</header>
     <main>页面的主要内容，一个页面只能使用一次，如果一个web应用，则包括主要内容</main>
      <section>定义文档的节点（section,区段），比如：章节，页眉或文档中的其他部分</section>
      <footer>页脚，只有当父元素为body时才是整个页面的页脚</footer>
      <aside>定义所有内容的部分，如侧边栏，广告等</aside>
</body>
</html>



6).HTML的标签结构

HTML标签按照标签的构成分为单标签和双标签。

单标签：
      <xxx>在HTML5之前，单标签需要写闭合斜杠，但是html5之后就不需要这样写了
      <xxx/>

      双标签：
         <xxx>yyy</xxx>
 开始标签  标签内容  结束标签
 <标签名 标签属性>标签内容<闭合斜杠标签名>

 不能自定义标签

 <XXX p1="v1" p2="v2" p3>YYYYYY</XXX>
html标签的开始标签可以添加标签属性，就是在标签名后面添加一个空格然后开始添加属性，一个标签可以添加多个属性，多个属性之间需要使用空格隔开，属性值最好使用双引号包裹起来，属性可以没有属性值，例如p3。