码农知识堂 - 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. 相关阅读:
        springboot项目打jar包的方法
        ES复杂操作搜索
        数据结构day34
        7-tcp 三次握手和四次挥手、osi七层协议，哪七层，每层有哪些？tcp和udp的区别？udp用在哪里了？
        使用C# 11的静态接口方法改进 面向约定 的设计
        基于C语言仿真实现的粒子火焰系统
        安徽工业大学计算机考研资料汇总
        Netty 学习（十）：ChannelPipeline源码说明
        来看看Python __all__变量的用法
        OBS架构分析
      3. 原文地址：https://blog.csdn.net/weixin_72534943/article/details/139725829
        • 最新文章
        • 沪漂五周年了：我越来越迷茫了
          Agentic Skill Routing 实战：别再把所有 Skill 塞进 AI Agent 上下文
          MySQL-Seconds_behind_master的精度误差
          [MAF预定义ChatClient中间件-03]CachingChatClient——利用缓存省钱省时间
          AI的至暗历史：从万众期待到被政府撤资，AI的两次死亡徘徊
          Agent OS ：五种驯服不确定性的范式
          PortSwigger SQL注入LAB11
          数据库即时编译JIT
          [Begin]AI Learn Data Day 0
          深度学习进阶（二十七）现代 LLM 的核心架构设计其二：SwiGLU
        • 热门文章
        • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！
          奉劝各位学弟学妹们，该打造你的技术影响力了！
          五年了，我在 CSDN 的两个一百万。
          Java俄罗斯方块，老程序员花了一个周末，连接中学年代！
          面试官都震惊，你这网络基础可以啊！
          你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法
          心情不好的时候，用 Python 画棵樱花树送给自己吧
          通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！
          13 万字 C 语言从入门到精通保姆级教程2021 年版
          10行代码集2000张美女图，Python爬虫120例，再上征途
        小工具 小游戏
        Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1

        京公网安备 11010502049817号