HTML 常用标签(中)

135 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第八天,点击查看活动详情

6.连接标签

< a href="URL" target="目标窗口弹出方式"> 文本格式 <\a>

属性作用
href指定链接目标的URL
target_ self为默认值 ,_blank 为新窗口中打开方式

锚点链接:点击链接,可以快速定位到页面中的某个位置

  • 在链接文本的href属性中,设置属性值为 #名字 的形式,如< a href="#tow">第二集< /a>
  • 找到目标位置标签,里面添加一个id=刚才的名字 ,如< h3 id="two">第二集介绍< h3>

7. 特殊字符

特殊字符描述
控空格符&nbsp;
<&lt;
&gt;
&&amp;
人民币&yen;
®注册商标&copy;
©版权&reg;

8.表格标签

8.1 表格

表格:不是用来布局页面的,而是用来展示数据的 ;

基本语法:

<table>
    <tr>
        <td>单元格内的文字</td>
        …………
    </tr>
    …………
</table>
  • 1.< table>< table/>定义表格
  • 2.< tr>< tr/> 定义行,必须嵌套在< table>< table/>标签中
  • 3.< td>< /td>用于定义表格中的单元格,必须嵌套在< tr>< tr/>标签中

一般表头单元格位于表格的第一行或的一列,表头单元格里面的文本内容加粗居中显示。

< th> 标签表示HTML表格的表头部分

<table>
    <tr>
        <th>姓名</th>
        …………
    </tr>
</table>

8.2 表格属性

属性名属性值描述
alignleft、center、right表格相对周围元素的对齐方式
border1或""表格单元是否拥有边框,默认为"",表示没有边框
cellpadding像素值表格边沿与其内容之间的空白,默认像素为1
cellspacing像素值单元格之间的空白,默认像素为2
width像素值或百分比表格的宽度

8.3 表格结构标签

使用场景:因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成 表格头部和表格主体两大部分

在表格标签中,分别用:< thead> 表格的头部区域、< tbody> 表格的主体区域

8.4 合并单元格

  • 跨行合并:rowspan="合并单元格的个数"
  • 跨列合并:colspan="合并单元格的个数"

目标单元格:

  • 跨行:最上侧单元格
  • 跨列:最左侧单元格

9. 列表标签

列表是用来布局的

9.1 无序列表

< ul> 标签表示HTML 页面中项目的无序列表,一般会以项目符号呈现表项,而列表项用< li> 标签来定义

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    …………
</ul>
  • 无序列表的各个列表之间没有顺序级别之分,是并列的
  • < ul>< /ul> 中只能嵌套< li>< /li>,直接在< ul>< /ul> 标签中输入其他标签或者文字的做法是不被允许的
  • < li>< /li>之间相当于一个容器,可以容所有元素

9.2 有序列表

< ol> < /ol>标签表示

  • 会自动在每列前面生成序号

9.3 自定义列表

< dl>标签用于定义描述列表,该标签会与< dt>和< dd>一起使用

基本语法:

<dl>
    <dt>名词1</dt>
    <dd>解释1</dd>
    <dd>解释2</dd>
    …………
</dl>