• HTML---基础入门知识详解

    1：标签的概念

    在别人写的网页中我们会看到许多文字，图片排版整齐，让人看的赏心悦目，这就是用到了标签，或者说标签就是帮我们实现某种作用的工具，比如制作段落，换行，导入图片，视频，链接等等，我们可以就把标签粗略的理解成是以一种帮我们实现某种功能的工具。

    2：基本标签的使用

    （1）段落标签和换行标签

    段落标签有六种，从大到小是：

    1. <h1>h1>
    2. <h2>h2>
    3. <h3>h3>
    4. <h4>h4>
    5. <h5>h5>
    6. <h6>h6>
    7.  
    8. 这里的从大到小的意思指的是标题的重要性，<h1>h1>表示的是最重要的段落标签
    9.  
    10. 换行标签是<br>，在HTML中换行回车换行并不能在网页中换行，而是需要<br>，即使在
    11. 代码中换行，它也只可能将其当做是空格

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.     <h1>
    13.         第一
    14.     h1>
    15.     <h2>
    16.         第二
    17.     h2>
    18.     <h3>
    19.         第三
    20.     h3>
    21.     <h4>
    22.         第四
    23.     h4>
    24.     <h5>
    25.         第五
    26.     h5>
    27.     <h6>
    28.         第六，也是最小
    29.     h6>
    30.     hjnksnd ksd sdn
    31.     <br> sd
    32. body>
    33.  
    34. html>

    （2）文本格式化标签

    文本格式化我们暂且知道四种就行了。

    1. <strong>strong> 字体加粗
    2. <em>em>         字体倾斜
    3. <del>del>       字体加删除线
    4. <ins>ins>       字体加下划线
    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.     <strong>jkjkstrong><br>
    13.     <em>sdddddem><br>
    14.     <del>LLLLLLLLdel>
    15.     <br><ins>opopopopoooins>
    16. body>
    17.  
    18. html>

    （3）div和span标签

    div和span就是相当于是一个容器箱子，div可以理解成是个大箱子，span理解成是个小箱子。div装的东西在一行中只能是div中的东西。而span在一行中还可以放其它的东西，不过防置的东西回合span箱子中的东西加个空格。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.     <div>ksldlsddiv>
    13.     sdsdf opop
    14.     <br>
    15.     <br>
    16.     <br>
    17.  
    18.  
    19.  
    20.     <span>klkspan> sdsdfsd X-UA-Compatible xcs
    21.     <br>
    22.     <span>sdspan>
    23.     <span>ioispan>
    24.     <span>ppppppspan>
    25.  
    26.  
    27.  
    28.  
    29. body>
    30.  
    31. html>

    （4）图像标签

    图像标签可以将图片插入到我们所要设计的网页中，插入的时候只要将对应的图片路径写到图像标签中即可。

    <img src="图片的路径"(后面可以写一些其他的属性)>

    同时图像标签还有其他的属性

    1. alt    替换文本，图像不能显示时，便显示该文字
    2. title  提示文本，鼠标放到图像上，显示文字
    3. width  设置图像的宽度
    4. height 设置图像的高度
    5. border 设置图像的边框粗细
    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.     <div>ksldlsddiv>
    13.     <img src="D:\html\html_first\image_1\img.jpg" alt="显示不出来">
    14.     <br>
    15.     <img src="D:\html\html_first\image_1\img.jpg" alt="无法显示" title="牛逼" width="100">
    16.  
    17.  
    18.  
    19. body>
    20.  
    21. html>

    （5）链接标签

    对于链接标签，它的作用就是点击了之后可以实现相对应作用，如跳转页面等等，所以链接标签也是可以分类的。

    1：外部链接

    外部链接就是可以跳转到其他页面，网址之类的。

    1. <a href="填写网址" target="新窗口的弹出方式">链接名称或者是图片a>
    2.  
    3. 新窗口的弹出方式有两种
    4. （1）_blank 重新创建新的窗口
    5. （2）_self  默认，将本页面换成目标链接地址
    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.     <a href="https://qq.com" target="_blank">点击我a>
    13.  
    14.  
    15. body>
    16.  
    17. html>

    2：内部链接：

    内部链接就是跳转到自己写的网页中。如果所写的页面不在当前文件夹中，只需要加上路径即可。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.     <a href="first/fir_1.html" target="_blank">点击我a>
    13.  
    14.  
    15. body>
    16.  
    17. html>

    3：空链接

    空链接就是没有确认链接目标所写的待确认项。

    1. <a href="#">a>
    2. 加个#号就行

    4：下载链接

    如果链接里面是个压缩包或者文件，点击便可下载。

    直接加上该下载文件的路径即可。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.     <a href="D:\html\html_first\image_1\img.zip" target="_blank">点击我a>
    13.  
    14. body>
    15.  
    16. html>

    5：网页元素链接

    给文本，图像，表格等添加超链接，点击即可跳转到该链接位置。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.     <a href="https://baidu.com" target="_blank"><img src="D:\html\html_first\image_1\img.jpg">a>
    13.  
    14. body>
    15.  
    16. html>

    （6）锚点标签

    锚点链接就是在本页面一段文本中添加链接，点击该链接之后可以跳转到指定的位置。

    1. <a href="#自己取得名字">点击a>
    2.  
    3. <h1 id="自己取得名字">跳转的位置h1>

     

  • 相关阅读:
    Spring Controller内存马
    MySQL的安装&SQL语句操作
    叠氮聚乙二醇生物素 N3-PEG-Biotin Azide-PEG-Biotin的结构式
    14.IP协议-bite
    软考135-上午题-【软件工程】-软件配置管理
    PIE-Engine APP：广东省生态遥感指数研究
    Dubbo面试题（二十八道）
    长尾关键词-长尾关键词挖掘工具-长尾关键词优化排名软件
    【图像分类损失】SimLoss：一个适合于年龄估计的分类损失
    Java进阶篇
  • 原文地址：https://blog.csdn.net/gaoqiandr/article/details/127869825