• HTML入门篇---01常用标签

    目录

    1.文本标签

    一般标签和自闭合标签

    块元素和行内元素

    2.媒体标签

    3.链接标签

    1.文本标签

    • 标题标签

    h1~h6逐渐变小

    • 段落标签

    段落标签会自动换行，并且段落与段落之间有一定的间距。

    • 换行标签

    自闭合标签，br是break（换行）的缩写。

    • 文本标签

    平时用更有语义性的标签(加粗的）

    粗体标签：strong   b 

    斜体标签：i、em   cite（emphasize）

    上标标签：sup（superscripted）

    下标标签：sub（subscripted）

    中划线标签：del   s

    下划线标签：ins   u

    大字号标签：big

    小字号标签：small

    • 水平线标签
    • div标签

    划分区域

    • 特殊符号

    a250e2f8c52245f3ba9cbbbd62adb9ac.png

    一般标签和自闭合标签

    一般标签：由于有开始符号和结束符号，因此可以在内部插入其他标签或文字。

    自闭合标签：由于只有开始符号而没有结束符号，因此不可以在内部插入标签或文字。所谓的“自闭合”，指的是本来要用一个配对的结束符号来关闭，然而它却“自己”关闭了。

    需要注意的是，在HTML5标准中，自闭合标签中的“/”，加与不加都是可行的。

    块元素和行内元素

    标签，也叫“元素”，例如p标签又叫p元素。叫法不同，意思相同。

    块元素（block）

    块元素在浏览器显示状态下将占据整一行，并且排斥其他元素与其位于同一行。此外，一般情况下，块元素内部可以容纳其他块元素和行内元素。如p、div、hr等。两大特点：

    • （1）块元素独占一行，排斥其他元素（包括块元素和行内元素）与其位于同一行。
    • （2）块元素内部可以容纳其他块元素和行内元素。

    行内元素（inline）

    • （1）行内元素可以与其他行内元素位于同一行。
    • （2）行内元素内部可以容纳其他行内元素，但不可以容纳块元素。

    代码演示：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     
    11.     <h1>标题1h1>
    12.     <h2>标题2h2>
    13.     <h3>标题3h3>
    14.     <h4>标题4h4>
    15.     <h5>标题5h5>
    16.     <h6>标题6h6>
    17.  
    18.     
    19.     <hr>
    20.     这是内容巴拉巴拉<br>
    21.     换行了
    22.     <p>这是一段p>
    23.     <p>这是另一段p>
    24.  
    25.     
    26.     <b>加粗b>
    27.     <strong>加粗strong>
    28.     <u>下划线u>
    29.     <ins>下划线ins>
    30.     <i>倾斜i>
    31.     <em>倾斜em>
    32.     <s>删除线s>
    33.     <del>删除线del>
    34.     <sub>下标sub>
    35.     
    36.     <div>
    37.         <sup>上标sup>
    38.         <big>大字号big>
    39.         <small>小字号small>
    40.     div>
    41.  
    42.     
    43.     <p>欧元符号：€p>
    44.     <p>英镑符号：£p>
    45. body>
    46. html>

    效果：

    a943852d47884ec184055ce988138fb0.png

    2.媒体标签

    • 图片标签
    <img src="" alt="" title="" />

    alt属性：显示失败的替换文字          title属性：鼠标悬停时显示

    width和height还能设置宽高，如果只填一个，其他一个等比例缩放

    • 路径

    1.绝对路径：图片在电脑中的完整路径

    2.相对路径：图片相对当前页面的位置

    • 图片格式

    1.jpg可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片、高清图片等。此外，jpg体积较大，并且不支持透明。

    2.png是一种无损格式，可以无损压缩以保证页面打开速度。此外，png体积较小，并且支持透明，不过不适合存储颜色丰富的图片。

    3.gif图片效果最差，不过它适合制作动画。

    • 音频标签
    <audio src="love.mp3" controls autoplay loop>audio>

    controls显示播放控件   autoplay自动播放(一般浏览器不支持）   loop循环播放

    • 视频标签
    <video src="video.mp4" controls autoplay width="200">video>

    代码演示：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     
    11.     <img src="cat.gif" title="我是title，鼠标悬停时显示" width="200" height="166">
    12.     <img src="cat1.gif" alt="显示失败，我是替换文字">
    13.  
    14.     
    15.     
    16.  
    17.     
    18.     <img src="cat.gif">
    19.     <img src="./cat.gif">
    20.     
    21.     <img src="../cat1.gif">  
    22.     
    23.     <img src="next/love.jpg">  
    24.     
    25.     <img src="../early/lovely.gif">
    26.     <br>
    27.  
    28.     
    29.     <audio src="love.mp3" controls autoplay loop>audio>
    30.     
    31.     <video src="video.mp4" controls autoplay width="200">video>
    32.  
    33. body>
    34. html>

    效果：

    b4a5cee9f84041eaaca161ba6fc8e589.png

    3.链接标签

    使用a标签来实现超链接：

    <a href="链接地址">文本或图片a>

    target属性：

    <a href="链接地址" target="打开方式">a>

    3121993ae41f45c3931099cd954c7094.png

     内部链接：自身网站的页面

     锚点链接：内部链接的一种，点击某一个超链接，然后它就会跳到当前页面的某一部分。

    代码演示：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     
    11.     <a href="https://www.baidu.com/" >跳转到百度a>
    12.     
    13.     <a href="https://www.baidu.com/" ><img src="baidu.png">a>
    14.  
    15.     
    16.     <a href="https://www.baidu.com/" target="_blank">跳转到百度a>
    17.  
    18.     <a href="./02媒体标签.html">内部链接a>
    19.  
    20.     
    21.     <div>
    22.         <a href="#article">文章a>
    23.         <a href="#music">音乐a>
    24.         <a href="#movie">电影a>
    25.     div>
    26.     <div id="article">
    27.         <h3>文章h3>
    28.         <ul>
    29.             <li>111li>
    30.             <li>111li>
    31.             <li>111li>
    32.         ul>
    33.     div>
    34.     <br>
    35.     <br>
    36.     <br>
    37.     <div id="music">
    38.         <h3>音乐h3>
    39.         <ul>
    40.             <li>222li>
    41.             <li>222li>
    42.             <li>222li>
    43.         ul>
    44.     div>
    45.     <br>
    46.     <br>
    47.     <br>
    48.     <div id="movie">
    49.         <h3>电影h3>
    50.         <ul>
    51.             <li>333li>
    52.             <li>333li>
    53.             <li>333li>
    54.         ul>
    55.     div>
    56. body>
    57. html>

    效果：

    60ce2faed1364c59a724baa251e9811c.png

    day1~

  • 相关阅读:
    坦克世界WOT知识图谱之知识图谱篇
    harbor安装
    面试汇总-MySQL-杂项
    MySQL主从复制（基于GTID--事务ID方式）
    停更的公众号
    wordpress建网站主题案例推荐
    golang大小端字节序
    JavaScript 63 JavaScript 对象 63.4 JavaScript 显示对象
    如何在在线Excel文档中对数据进行统计
    第1章 初识视图文件（*.vue）
  • 原文地址：https://blog.csdn.net/btufdycxyffd/article/details/126859559