HTML初级知识点总结(2)

h标签和P标签

h标签代表着标题标签(headline)有h1到h6，字体相较于一般的文字更粗更大，随数字增加，字体大小逐渐减小(h1最大，h6最小)，通常会用到标题上。

p标签代表着段落(paragraph)，一般是文章分段来使用，文字和普通文字一样。

注意：h标签和p标签都是独占一行的

<h1>Hello html~</h1>
    <h2>Hello html~</h2>
    <h3>Hello html~</h3>
    <h4>Hello html~</h4>
    <h5>Hello html~</h5>
    <h6>Hello html~</h6>

    <!-- hr是一条横线 -->
    <hr>

    <!-- p标签 xxxx -->
    <p>
        这是第一个段落。这是第一个段落。
        这是第一个段落。这是第一个段落。
    </p>
    <p>
        这是第二个段落。这是第二个段落。
        这是第二个段落。这是第二个段落。
    </p>

注意：div和p的区别

称谓分歧

div是布局框架标签

p是段落标签，布局文章标签

默认样式不同

div上下没有间距，两个div可以直接挨着。

p的上下有margin-top和margin-bottom，作为自带的一个间距。

---

表格

table，表格标签用来画一个表格，然后在表格中显示一些数据，要搭配另外几个标签——tr，th，td来使用

tr

代表着“行”，将一个table切成多少行，有几个tr，就会切几行，放在table中使用。

td和th

这两个都代表着table的列，将tr切成一列一列的，th(英文table head)一般在第一行（第一个tr里）作为标题使用，显示的字体加粗，更醒目。td则是普通的列，文字是正常样式。

<table border="1px" width="600" height="400">
        <tr>
            <th>日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
        <tr align="center">
            <td>2021年3月10号</td>
            <td><img src="./imgs/sun.jpg" alt=""></td>
            <td>天气晴朗，适合出行</td>
        </tr>
        <tr align="center">
            <td>2021年3月11号</td>
            <td><img src="./imgs/rain.jpg" alt=""></td>
            <td>有小雨，需要带伞</td>
        </tr>
    </table>

tbody、thead、tfoot

这三个标签放在table中使用，方便对table中的数据进行分类管理。

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

注意，如果有tbody、thead、tfoot，那么tr要放在他们下面

caption标签

这个标签用来定义一个表格的标题，放在table里面，caption 标签必须紧随 table 标签之后¹。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

<table border="6">
<caption>我的标题</caption>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

一些属性

rowspan（行合并）、colspan（列合并）、border（边框样式）、cellspacing（边框间隔）

rowspan=“n”，即从这一行开始，向下合并n行（包括这一行本身），rowspan="0"或者rowspan="1"的时候，没有变化。colspan是同理，只不过换成了向右列合并。

<table border="1" cellspacing="0">
        <tr>
            <td>会员姓名</td>
            <td width="100px"></td>
            <td>出生日期</td>
            <td width="100px"></td>
        </tr>
        <tr>
            <td>身份证号</td>
            <td colspan="3">ewfsfgyhkj</td>
        </tr>
        <tr>
            <td>身份证号</td>
            <td colspan="3">ewfsfgyhkj</td>
        </tr>
        <tr>
            <td>身份证号</td>
            <td colspan="3">ewfsfgyhkj</td>
        </tr>
        <tr>
            <td>身份证号</td>
            <td colspan="3">ewfsfgyhkj</td>
        </tr>
    </table>

---

突出标记标签，以及HTML5规范

em 将标注的内容用 斜体 表示。

strong 将标注的内容 加粗 表示。

i 标签显示斜体文本效果，与em类似。

b 标签规定粗体文本，和strong差不多，不过根据HTML5规范，在没有其他合适标签更合适时，才应该把 b 标签作为最后的选项。

HTML5 规范声明：应该使用 h1 - h6 来表示标题，使用 em 标签来表示强调的文本，应该使用标签 strong 来表示重要文本，应该使用 mark 标签来表示标注的/突出显示的文本。b标签-W3C

small 标签呈现小号字体效果。 big 标签呈现大号字体。这两个标签并非独占一行，与 span 一样属于行内标签。

---

label标签

标签为 input 元素定义标注（标记）。 元素不会向用户呈现任何特殊效果。但是如果鼠标放到 的文本上，那么就相当于鼠标放到了 中for属性所指向的那个id的元素，如果点击 ，那就相当于点击了for属性中的值所指向的那个元素。

例子：如下方的代码，如果点击文本Male，那么就相当于点击了id为male的那个input元素，如果点击“触发按钮”这个label，那么就相当于点击了“你好”按钮，因为for指向的那个元素的id

<form>
<label for="male">Male</label>
<br/><br/>
<input type="radio" name="sex" id="male" />
<br /><br/>
<label for="female">Female</label>
<br/>
<input type="radio" name="sex" id="female" />
</form>
<label for="2555">触发按钮</label>
<br/><br/>
<button id="2555">你好</button>

---

link标签

这个标签一般放在中引用外部样式或者小图标中，也可以引入别的东西。主要有两个属性。

rel用来说明要引入的东西是什么，href表明路径。

//引入外部样式
<link rel="stylesheet" href="./out1.css">
//引入小图标(网页选项卡显示的那个小图标)，注意short和icon中有一个空格
<link rel="short icon" href="img/xxx.jpg">

---

1. 实际上与tr同级，位置如果与tr同级的情况下，可以随便放，不能放在tr、td、th里面，tbody、thead、tfoot不影响(亲测可行)。 ↩︎