了解HTML的使用-CSDN博客

本文链接：https://blog.csdn.net/m0_48109829/article/details/129182695

HTML的注释

标题标签

HTML、CSS、JS 脚本的使用以资源为单位从后端中获取，之后的所有工作在浏览器内部完成。

HTML代码由“标签”构成。

通常，标签是 <开始标签> 内容 <闭合标签> 组成。

也有部分标签是单一标签。

HTML的注释

标题标签

快捷键：h1{一级标题} + Tab

段落标签

HTML中的段落、空格最终显示都是一个空格

块级标签自带换行，如：<p>标签、<h1>-<h6>标签等

内联标签不自带换行，如：<img src="..."> <a href = "...">...</a>

更多详见MDN Web Docs

资源路径表示

完整路径：http://127.0.0.1:8080/img/...

绝对路径：从树的根结点出发，到达目标结点经过的路径。一定以“/”开头

完整形式 http://127.0.0.1:8080/img/...
省略协议 //127.0.0.1:8080/img/...
省略协议+主机 /img/...

相对路径：从某个节点出发，到达目标结点经过的路径。一定不以“/”开头。

省略协议+主机 ../../../img/...
.. 回到父节点
. 在当前结点不动

可以引入外部资源，只能写1.完整路径 2.省略协议

表格相关

表头 thead

表正文（必有）tbody

表尾 tfoot

无论是thead、tbody、tfoot，都是先有表行（tr）组成，每一行由多列组成，其中thead中的列用“th”表示，tbody和tfoot中的列由“td”表示。

rowspan 行跨 colspan 列跨

<body>
  <table>
    <thead>
     <tr>
      <th rowspan="2">姓名</th>
      <th rowspan="2">年龄</th>
      <th colspan="3">成绩</th>
     </tr>
     <tr>
      <th>语文</th>
      <th>数学</th>
      <th>英语</th>
     </tr>
    </thead>
    <tbody>
     <tr>
       <td>张三</td>
       <td>28</td>
       <td>3</td>
       <td>5</td>
       <td>7</td>
     </tr>
     <tr>
       <td>李四</td>
       <td>25</td>
       <td>7</td>
       <td>3</td>
       <td>6</td>
     </tr>
    </tbody>
    <tfoot>
     <td colspan="2">总计</td>
     <td>10</td>
     <td>8</td>
     <td>13</td>
    </tfoot>
  </table>
</body>

<table>
    <thead>
      <tr>
       <th rowspan="2">日期</th>
       <th colspan="2">费用类名1</th>
       <th colspan="2">费用类名2</th>
       <th colspan="2">费用类名3</th>
       <th rowspan="2">合计</th>
       <th rowspan="2">备注</th>
      </tr>
      <tr>
       <th>用途</th>
       <th>金额</th>
       <th>用途</th>
       <th>金额</th>
       <th>用途</th>
       <th>金额</th>
      </tr>
    </thead>
    <tbody>
     <tr>
         <td>2022.01.01</td>
         <td>无</td>
         <td>0</td>
         <td>无</td>
         <td>0</td>
         <td>无</td>
         <td>0</td>
         <td>0</td>
         <td>无</td>
     </tr>
    </tbody>
    <tfoot>
      <tr>
          <td></td>
          <td>小计</td>
          <td>0.00</td>
          <td>小计</td>
          <td>0.00</td>
          <td>小计</td>
          <td>0.00</td>
          <td>小计</td>
          <td>0.00</td>
          <td></td>
      </tr>
    </tfoot>

列表相关

有序列表（ordered list）<ol>

无序列表 (unordered list) <ul>

<ol>和<ul>标签的孩子标签必须是<li>，<li>标签中可以是任意元素。

<h1>流水账</h1>
  <h2>午饭</h2>
    <ul>
      <li>鱼香肉丝</li>
      <li>米饭</li>
      <li>
          <p>番茄炒蛋</p>
          <img width="300px" src="../../lunch.webp">
      </li>
    </ul>

描述列表<dl><dt><dd>

  <dl>
      <dt>鱼香肉丝</dt>
      <dd>一种十分下饭的菜肴</dd>
      <dt>米饭</dt>
      <dd>提供能量的主食</dd>
  </dl>

表单相关

表单是让用户输入信息的重要途径，分成两个部分:

表单域: 包含表单元素的区域. 重点是 form 标签。

<form action="test.html">
... [form 的内容]
</form>

描述了要把数据按照什么方式, 提交到哪个页面中。

表单控件: 输入框, 提交按钮等. 重点是 input 标签。

type(必须有), 取值种类很多, button, checkbox, text, file, image, password, radio 等。
name: 给 input 起了个名字. 尤其是对于单选按钮, 具有相同的 name 才能多选一。
value: input 中的默认值。
checked: 默认被选中。 (用于单选按钮和多选按钮)
maxlength: 设定最大长度。

label 标签：搭配 input 使用，点击 label 也能选中对应的单选/复选框。
for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应。 (此时点击才是有用的)

<form>
    <label for="male">男</label> <input id="male" type="radio" name="sex">
    <label for="female">女</label> <input id="female" type="radio" name="sex">
</form>

select 标签：下拉菜单，option 中定义 selected="selected" 表示默认选中。
可以给的第一个选项, 作为默认选项。

<select>
<option>北京</option>
<option selected="selected">上海</option>
</select>

textarea 标签：文本域中的内容, 就是默认内容, 空格也会有影响。
rows 和 cols 也都不会直接使用, 都是用 css 来改的。

无语义标签

div & span就是两个盒子，用于网页布局。

div 标签, division 的缩写, 分割，div 是独占一行的, 是一个大盒子。
span 标签, 跨度，span 不独占一行, 是一个小盒子。

HTML特殊字符

空格: &nbsp
小于号: &lt
大于号: &gt
按位与: &amp

工具 & 其他

设置-更多工具-开发者工具 或 F12