码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift

  • 自学前端——HTML篇

    HTML标签

    ’HTML‘全程是‘hypertext Markup langage(超文本标记语言) HTML通过一系列的’标签（也称为元素）‘来定义文本、图像、链接。HTML标签是由尖括号包围的关键字。

    标签通常成对存在，包括开始标签和结束标签（也称为双标签），内容位于两个标签之间，例如：

    1. <p>这是一个段落。</p>
    2. <h1>这是一个标题。</h1>
    3. <a href="#">这是一个超链接。</a>

     除了双标签，也存在单标签，例如：

    1. <input type="text"
    2. <br>
    3. <hr>

    区别：单标签用于没有内容的元素，双标签用于有内容的元素。

    HTML文件结构

    2. html>//告诉浏览器这是一个HTML文件
    3. <html>//HTML标签对，也是根元素，HTML的起始点也是文档的最外层容器，包含整个文档的结构
    4. 	<head>文档的头部，包含了文档的原信息
    5. 		
    6. 		<title>文档标题title>文档标题
    7. 		<meta charset="UTF-8">文档编码格式
    8. 		
    9. 		<link rel="stylesheet" type="text/css" href="styles.css">外部样式表css文件
    10. 		<script src="script.js">script>外部样式表js文件
    11. 	head>
    12. 	<body>实际显示浏览器页面的内容比如文本，图像，链接等
    13. 		
    14. 	body>
    15. html>//HTML标签对，也是根元素

    各个标签的含义

    1. </head>
    2.  
    3. <body>
    4.     <h1>一级标题标签</h1>
    5.     <h2>二级标题标签</h2>
    6.     <h3>三级标题标签</h3>
    7.     <h4>三级标题标签</h4>
    8.     <h5>四级标题标签</h5>
    9.     <p>这是一个段落标签</p>
    10.     <p>
    11.         更改文本样式：<b>字体加粗</b>、<i>斜体</i>、<u>下划线</u>、<s>删除线</s>
    12.     </p>
    13.  
    14.     <ul>/无序列表
    15.         <li>无序列表元素一</li>
    16.         <li>无序列表元素二</li>
    17.         <li>无序列表元素三</li>
    18.     </ul>
    19.  
    20.     <ol>//有序列表
    21.         <li>有序列表元素一</li>
    22.         <li>有序列表元素二</li>
    23.         <li>有序列表元素三</li>
    24.     </ol>
    25.     <h1>table row</h1>
    26.     <h2>table date</h2>
    27.     <h3>table header</h3>
    28.    <table border="1"> //制作表格 
    29.  
    30.         <tr>
    31.             <th>列标题1</th>
    32.             <th>列标题2</th>
    33.             <th>列标题3</th>
    34.  
    35.         </tr>
    36.         <tr>
    37.             <td>元素1</td>
    38.             <td>元素2</td>
    39.             <td>元素3</td>
    40.         </tr>
    41.         <tr>
    42.             <td>元素11</td>
    43.             <td>元素12</td>
    44.             <td>元素13</td>
    45.         </tr>
    46.         <tr>
    47.             <td>元素21</td>
    48.             <td>元素22</td>
    49.             <td>元素23</td>
    50.         </tr>
    51.     </table>
    52.     
    53. </body>
    54.  
    55. </html>

    HTML属性

    属性在HTML中起到非常重要的作用，它们用于定义元素的行为外观，以及与其他元素的关系

    基本语法：

    <开始标签 属性名=“属性值”>

    每个HTML元素可以具有不同的属性

    1. <p id="describe" class="section">这是一个段落标签</p>
    2. <a href="https://www.baidu.com">这是一个超链接</a>

    属性名称不区分大小写，属性值对大小写敏感

    1. <img src="example.jpg" alt="">
    2. <img SRC="example.jpg" alt="">
    3. <img src="EXAMPLE.JPG" alt="">
    4. <!--前两者相同，第三个与前两个不一样-->
    属性描述
    class为HTML元素定义一个或多个类名（类名从样式文件引入）
    id定义元素唯一id
    style规定元素的内行样式

    例如：

    1. <h1 id="title"></h1>
    2. <div class="nav-bar"></div>
    3. <h2 class="nav-bar"></h2>

    标签常用于创建链接到其他的网页或者位置

    href属性定义了这个链接到的目标，可以是其他网页的URL文件的路径、电子邮箱地址、手机号等。

    target属性定义链接的打开方式，

    _self是一个默认值表示链接在当前窗口或者标签页中打开

    _blank表示链接将会在新的窗口或者标签页打开

    _parent表示链接在副窗口或者副框架中打开

    _top表示链接在顶层窗口或者顶层框架中打开

    例如：

    1.     <a href="https://docs.geeksman.com">这是一个超链接</a> 
    2.     <br> //换行标签  
    3.     <a href="https://docs.geeksman.com"target="_blank">这是二个超链接</a>
    4.     <br>
    5.     <a href="https://docs.geeksman.com"target="_self">这是三个超链接</a>
    6.     <br>
    7.     <a href="https://docs.geeksman.com"target="_parent">这是四个超链接</a>
    8.     <br>
    9.     <a href="https://docs.geeksman.com"target="_top">这是五个超链接</a>
    10.     <hr>//水平分割线

    img图片标签

    src属性定义了要显示图像文件的路径或者URL，可以是文件的相对路径、绝对路径，也可以是一个URL。

    alt属性用于定义图像的这个替代文本，图片如果无法加载，浏览器就会显示出来alt属性中指定的文本。

    设置图像的宽高

    width属性设置宽度：height属性设置高度。

    1.    	<img src="logo.jpg" alt=""width="500"height="400">
    2.     <hr>
    3.     <img src="log.jpg" alt="该图片无法显示">
    4.     <hr>
    5.     <img src="" alt="">

    HTML区块 - 块元素与行内元素（HTML 重要概念，学习CSS的前置内容）

    快元素（block）

    块级元素通常用于组织和布局页面的主要结构和内容，例如段落、标题、列表、表格等。它们用于创建页面的主要部分，将内容分隔成逻辑块。

    快级元素通常会从新行开始，并占据整行的宽度，因此它们会在页面上呈现为一块独立的内容块。

    可以包含其他块级元素和行内元素。

    常见的块级元素包括

    ，

    ，

    到

    ，
      ，
        ，
      1. ，，等。

        行内元素（inline）

        行内元素通常用于添加文本样式或为文本中的一部分应用样式。它们可以在文本中插入小的元素，例如超链接、强调文本等。

        行内元素通常在同一行内呈现，不会独占一行。

        它们只占据其内容所需的宽度，而不是整行的宽度。

        行内元素不会包含块级元素，但可以包含其他行内元素。

        常见的行内元素包括，，，，，br，等。

        div标签是一个块级标签通常用于创建一个可以包含其他HTML元素的容器块，没有任何语意，仅用于组织内容，创建页面的布局结构。

        比如用div标签创建网页不同的部分，例如：页眉、导航栏、侧边栏、中间的内容区域、页角。

        1. <div class="nav">//导航栏
        2.         <a href="#">链接1</a>
        3.         <a href="#">链接2</a>
        4.         <a href="#">链接3</a>
        5.         <a href="#">链接4</a>
        6.         <a href="#">链接5</a>
        7.     </div>
        8.  
        9.     <div class="content">//主题内容区域
        10.        <h1>文章标题</h1>
        11.        <p>文章内容</p> 
        12.        <p>文章内容</p> 
        13.        <p>文章内容</p> 
        14.        <p>文章内容</p> 
        15.        <p>文章内容</p> 
        16.     </div>

        span标签相对于没有特殊元素的a标签和img标签，主要作用就是把一小部分文本给包装起来以便于它们使用样式、CSS，或者使用 JS 行为，span为行内元素，只会独占一行，只会占据它内容所需的一个宽度。

        例如

        1.  <span>这是第 1 个 span 标签</span>
        2.     <span>这是第 2 个 span 标签</span>
        3.     <span>这是第 3 个 span 标签</span>
        4.     <span>这是第 4 个 span 标签</span>
        5.     <span>这是第 5 个 span 标签</span>
        6.     <hr>
        7.     <span>链接点击这里 <a href="#">链接</a>   </span

        总结：div标签通常用于创建块级容器以便于组织页面的结构和布局，而span标签，用于内联样式化文本给文本的一部分应用样式或者是标记使用这两个标签通常是与CSS和 JS 一起使用的，这样能实现更加复杂的页面布局和样式化。

        HTML表单

        form是表单的容器

        action表示我们提交标签的时候，向何处发送我们的数据，action的属性值也就是URL,需要服务器也就是后端提供给我们的API

        ‘#’表示不跳转，锚点占位的作用

        input是一个单标签

        type属性规定了input元素的类型

        placeholder属性的作用是在这个属性值里面填写你想要让它在文本框中显示的内容。给用户填写字段的标识

        value属性的作用就是规定我们这个input元素的值

        label标签专门为input元素做标记的标签，作用与span标签差不多，仅限于和input对应使用

        radio单选，checkbox多选 id唯一 ，class不唯一

        for属性是可以将label标签给绑定到input元素，一般input中的for属性与input中id所对应的，id对于每个元素每个标签都是唯一的

        submit 显示提交，提交表单的数据。

        1. <form>
        2.         <label for="username">用户名：</label>
        3.         <input type="text" id="username" placeholder="请输入用户名"><br><br>
        4.         <label for="pwd">密码：</label>
        5.         <input type="password" id="pwd" placeholder="请输入内容"><br><br>
        6.         <label >性别：</label>
        7.         <input type="radio" name="gender"> 男
        8.         <input type="radio" name="gender"> 女
        9.         <input type="radio" name="gender"> 其他
        10.  
        11.         <label>爱好 :</label>
        12.         <input type="checkbox" name="hobby"> 唱歌
        13.         <input type="checkbox" name="hobby"> 跳舞
        14.         <input type="checkbox" name="hobby"> rap
        15.         <input type="checkbox" name="hobby"> 篮球
        16.         <br><br>        
        17.         <input type="submit" value="上传">
        18.  
        19.     </form>

        注：刚开始接触前端，希望有大佬提出建议，本人虚心学习。

      2. 相关阅读:
        真菌基因组研究高分策略（一）：比较基因组揭示真菌菌丝和多细胞的起源
        Xylan-Alkyne木聚糖-炔基|炔基-PEG-木聚糖
        react老项目 升级react-router
        基于SpringBoot+Druid实现多数据源：原生注解式
        MyBatis查询数据库
        Java面试题十二天
        在ESP32-Arduino开发中添加其它Arduino库
        循环树和checkbox 相关选中处理
        和我一起学习自动化运维
        SSM+医保业财一体化管理系统 毕业设计-附源码151023
      3. 原文地址：https://blog.csdn.net/weixin_72534943/article/details/139725829
        • 最新文章
        • 攻防演习之三天拿下官网站群
          数据安全治理学习——前期安全规划和安全管理体系建设
          企业安全 | 企业内一次钓鱼演练准备过程
          内网渗透测试 | Kerberos协议及其部分攻击手法
          0day的产生 | 不懂代码的"代码审计"
          安装scrcpy-client模块av模块异常，环境问题解决方案
          leetcode hot100【LeetCode 279. 完全平方数】java实现
          OpenWrt下安装Mosquitto
          AnatoMask论文汇总
          【AI日记】24.11.01 LangChain、openai api和github copilot
        • 热门文章
        • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！
          奉劝各位学弟学妹们，该打造你的技术影响力了！
          五年了，我在 CSDN 的两个一百万。
          Java俄罗斯方块，老程序员花了一个周末，连接中学年代！
          面试官都震惊，你这网络基础可以啊！
          你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法
          心情不好的时候，用 Python 画棵樱花树送给自己吧
          通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！
          13 万字 C 语言从入门到精通保姆级教程2021 年版
          10行代码集2000张美女图，Python爬虫120例，再上征途
        Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
        正则表达式工具 cron表达式工具 密码生成工具

        京公网安备 11010502049817号