HTML 学习笔记——常见标签用法

茶叶淡
363 阅读9分钟

HTML 的标签有很多，但它最大的特点就是所有标签都是语义化的，也就是说我们可以通过标签对应词汇的含义大致理解它所标记的是何种形式的内容，所以在编写 HTML 的时候，要使用尽可能准确的标签，避免使用无含义或错误含义的标签。

本文主要介绍一下常用标签，以及用法稍微复杂一些的标签。

一、常用标签简介

1、<div> 和 <span>

这两个标签是 HTML 中唯一的两个没有任何特殊含义的标签，仅仅是对内容的一个划分，它们没有默认的样式，被这两个标签标记的部分也不具有任何特殊的形式，因此这两个标签是通用型标签。

区别是 <div> 默认是一个块级元素，常用于对页面的结构进行划分，<span> 默认是内联元素，用来标记行内的一小部分内容。

我们在编写 HTML 时，除非某部分的内容确实没有相对应的标签去标记，否则尽可能不要使用 <div> 和 <span>。

由于没有任何含义，在用 <div> 的时候一般要给一个属性 class，以便于对这部分内容进行样式的修改。

例：

<div class="class-name">
   <span>xxx</span>
</div>

2、<p>

表示一个段落，一般为文章的内容

例：

<p>这是一篇文章</p>

3、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>

这些标签表示标题，共有六个级别，<h1>为最高级

例：

<h1>一级标题</h1>
<h2>二级标题</h2>

4、<strong>

表示强调的内容

例：

<span>这句话<strong>非常</strong>重要</span>

5、<img>

表示在该位置嵌入一个图片

例：

<img src="#" alt="这是一个图片">

属性 src 是图片的 url ，alt 是图片异常时用来替换显示的文本，通常写对图片的描述。

6、<ul>、<ol>、<li>

<ul>（unordered list），无序列表

<ol>（ordered list），有序列表

这两个标签都要嵌套<li>（list item）来使用，表示列表中的一项

例：

<ul>
  <li>项目</li>
  <li>项目2</li>
</ul>

7、<dl>、<dt>、<dd>

<dl> （description list）， 这是一个描述列表，可以用于构造一个个人信息表，用法和上面类似，用<dl>嵌套<dt>（description term）和<dd>（description definition）

例：

<dl>
  <dt>姓名</dt>
  <dd>张三</dd>
  <dt>性别</dt>
  <dd>男</dd>
</dl>

8、<nav>

即 navigation，表示一个导航栏

9、<main>

表示页面的主要部分

10、<section>

表示一个非主要部分

11、<footer>

表示一个结尾或页脚

12、<br>

表示换行

【注】： 在 HTML 中输入回车并不能换行，无论多少个回车，最终都会展示为一个空格，要换行就要插入<br>标签。

13、<hr>

表示一个水平分割线

二、复杂标签用法详解

常用的标签中有几个用法较为复杂，如<iframe>、<a>、<form>、<input>、<table>等，下面逐一进行介绍。

1、<iframe>

<iframe>标签用于在页面中再嵌套一个页面，比如在线编辑器 JS Bin 就是用它来展示输出结果的，并且它还是一个可替换标签，也即它有默认的窗口大小。

<iframe>常配合<a>使用，给<iframe>一个 name 属性，然后可以用<a>标签的 target 属性来指向这个<iframe>，在点击<a>的链接后，会在<iframe>中打开页面。

例：

<iframe src="#" frameborder="0" name="xxx"></iframe>
<a href="http://qq.com" target="xxx">QQ</a>

2、<a>

<a>（anchor），用于发起一个 GET 请求，跳转页面。

常用属性：

  • target
值 释义
_self 在当前窗口打开，此为默认值
_blank 在一个新的窗口或标签页打开页面
_parent 在父级窗口中打开，<iframe>的父级窗口为原窗口
_top 在顶层窗口打开，即无论嵌套几层，都在最外层即原窗口打开
其他的窗口 name 的值 在指定的窗口打开
  • download

此为布尔属性，点击后将下载URL，将其保存为本地文件

【注】：下载 URL 一般有两种方法

  1. 在 HTTP 的响应头中作出说明；
  2. 在<a>标签中加入 download 属性，强制下载
  • href

指定链接目标的 URL，其值可以有以下几种写法：

  1. 相对路径，如 xxx.html、xxxxxx 等
  2. http、https 协议的 URL，如http://qq.com（注：写 qq.com 是错误的，它仅仅表示一个相对路径）
  3. 无协议形式，如//qq.com，这将会使用当前文件的协议
  4. #xxx，加上锚点，不发请求，只做页内跳转
  5. ?name=xxx，加入查询参数，会发起 GET 请求
  6. 伪协议，如 javascript:alert(1);， 点击后执行 JS 代码，若写为javascript:; , 则点击后页面不做任何动作，常用来满足类似的奇葩需求
  7. 空值，点击后刷新当前页面

3、<form>

<form>主要用于发起 POST 请求，向服务器提交表单数据。

要提交数据，必须在<form>中嵌套一个提交按钮，这通常有两种选择：

  1. <input type="submit">；
  2. 若<form>下只有一个按钮<button>，则<button>（不添加 type 属性）也可以用于提交数据

<form>通常都要嵌套<input>、<select>、<textarea>等标签使用，后文会介绍。

常用属性：

  • action：指定数据提交到的 URL，要用 HTTP 协议，file 协议不支持 POST

  • method：指定请求的类型，仅可选 POST 或 GET，默认为 GET。若用 GET，表单数据会附加在 URL 中，并以 '?' 作为分隔符，即作为查询参数（一般来说，用<a> GET，用<form> POST）

  • target：与<a>类似，不再赘述

4、<input>

<input>通常嵌套在<form>中使用，为表单创建交互式控件，用于让用户输入、提交数据等。

常用属性：

  • value: 控件的初始值，此属性是可选的，除非 type 属性是 radio 或 checkbox

  • name：指定<input>控件的名称，会与表单数据一起提交，输入数据的<input>必须要指定 name，否则数据无法提交

  • type

值 释义
text 输入框，此为默认值
password 密文输入框
button 无默认动作的按钮，不能用它提交数据
submit 用于提交表单数据的按钮
checkbox 复选框，使用 value 属性定义此控件被提交时的值
radio 单选框，如果多个单选框的 name 相同，则只能选中其中一个，使用 value 属性定义此控件被提交时的值

小技巧：可以将选框与文字关联起来，这样用户点击文字时也可以选中选框，方法有以下两种

<label><input type="radio">选我</label>
<input type="radio" id="xxx"><label for="xxx">选我</label>

5、<select>和<option>

<select>可以创建一个下拉选择菜单，嵌套<option>来创建菜单的选项。

  • <select>的属性：

    1. name: 必填项，否则无法提交
    2. multiple：布尔属性，表示可以多选（按住Ctrl键）

  • <option>的属性：

    1. value：提交的值
    2. selected：布尔属性，默认选中
    3. disabled：布尔属性，不可选

6、<textarea>

<textarea>标签创建一个多行纯文本编辑控件，它默认输入区的大小可以让用户拖动，可用 CSS 使其大小固定（代码：resize: none;）

属性：

  • name：必填项，否则无法提交
  • cols：列数
  • rows：行数

7、小结：一个<form>的综合示例

<form action="users" method="POST">
    <label>用户名<input type="text" name="username"></label>
    <label>密码<input type="password" name="password"></label>
    喜欢的水果
    <label><input type="checkbox" name="fruit" value="apple">苹果</label>
    <label><input type="checkbox" name="fruit" value="orange">橘子</label>
    爱我吗
    <label><input type="radio" name="loveme" value="yes">Yes</label>
    <label><input type="radio" name="loveme" value="no">No</label>
    <select name="group" multiple>
        <option value="">-</option>
        <option value="1">第一组</option>
        <option value="2">第二组</option>
        <option value="3" disabled>第三组</option>
        <option value="4" selected>第四组</option>
    </select>
    <hr>
    <textarea style="resize: none;" name="xxx" cols="30" rows="10"></textarea>
    <input type="submit" value="提交">
</form>

效果：

8、<table>

<table>标签用于创建一个数据表格。

  • <table>的子标签：

    • <colgroup>：用来控制每一列，嵌套<col>表示某一列
    • <thead>（table head）：表格头部
    • <tbody>（table body）：表格数据部分，子元素同上
    • <tfoot>（table foot）：表格总结部分，子元素同上

  • <thead>、<tbody>、<tfoot>的子标签：

    • <tr>（table row）：表示一行
    • <th>（table header）：数据头
    • <td>（table data）：数据

一个<table>例子：

<table border=1>
    <colgroup>
      <col width=100>
      <col width=200>
      <col width=100>
      <col width=70>
    </colgroup>
    <thead>
      <tr>
        <th>项目</th><th>姓名</th><th>班级</th><th>分数</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th></th><td>小明</td><td>1</td><td>90</td>
      </tr>
      <tr>
        <th></th><td>小华</td><td>2</td><td>80</td>
      </tr>
      <tr>
        <th>平均分</th><td></td><td></td><td>85</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>总分</th><td></td><td></td><td>170</td>
      </tr>
    </tfoot>
  </table>

效果：

（完）

avatar
文章
阅读
粉丝