HTML学习笔记之标签基础

时间：2023-03-09 17:09:21
HTML学习笔记之标签基础

HTML 标签的学习虽不难，但是却需要多实践，自己亲手敲敲代码，看看出来的效果是什么样子的

这篇文章将会介绍一些常用的 HTML 标签

1、标题与段落

标签 <h1> ~ <h6> 分别用于定义一至六级标题，标签 <p> 用于定义段落

它们都是 块级元素，因此浏览器会自动地在标题和段落的前后添加空行

<!DOCTYPE html>

<html>

    <body>

        <h1>一级标题</h1>

        <p>在一级标题下显示的段落</p>

        <h2>二级标题</h2>

        <p>在二级标题下显示的段落</p>

        <h3>三级标题</h3>

        <p>在三级标题下显示的段落</p>

        <h4>四级标题</h4>

        <p>在四级标题下显示的段落</p>

        <h5>五级标题</h5>

        <p>在五级标题下显示的段落</p>

        <h6>六级标题</h6>

        <p>在六级标题下显示的段落</p>

    </body>

</html>

2、格式化文本

对于文本内容的展示，HTML 也有定义多种标签以达到不同的展示效果，具体请看下面的例子

<!DOCTYPE html>

<html>

    <body>

        <b>粗体</b>

		<br />

        <i>斜体</i>

        <br />

        <ins>下划线</ins>

        <br />

        <del>删除线</del>

        <br />

        <big>增大字号</big>

        <br />

        <small>减小字号</small>

        <br />

        这是<sup>上标</sup>

        <br />

        这是<sub>下标</sub>

        <br />

    </body>

</html>

3、链接

<a> 标签用于定义链接，链接的内容可以是文本，也可以是图像，其常用的属性如下：

  • href：定义链接地址，其值可以是任何有效文档的相对或绝对 URL

  • name：定义锚的名称，用于创建文档内的书签，跳转到文档内指定位置

  • target：规定在哪打开目标文档，使用 href 属性之后才能使用，可选值如下：

    • _self：默认值，在相同窗口或相同框架中载入目标文档
    • _parent：在父窗口或父框架中载入目标文档
    • _blank：在新窗口中载入目标文档
    • _top：在包含该链接的整个窗口中载入目标文档
<!DOCTYPE html>

<html>

    <body>

        <a href="https://www.google.com/" target="blank">谷歌</a>

        <br />

        <a href="https://www.yahoo.com/" target="blank">雅虎</a>

        <br />

        <a href="https://www.baidu.com/" target="blank">百度</a>

        <br />

    </body>

</html>

4、图像

<img> 标签用于定义图像，更准确的说法应该是链接图像，实际上其定义的是被引用图像的占位空间

常用的属性如下：

  • src：指定图像文件的存放位置，其值可以是任何有效的相对或绝对 URL

  • alt：当图片无法显示时，将显示 <alt> 中定义的替代文本，使用 alt 属性是一个良好的习惯

  • height：设置图像的高度

  • width：设置图像的宽度

<!DOCTYPE html>

<html>

    <body>

        <h3>第一张图片</h3>

        <img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" alt="无法显示图片" />

        <h3>第二张图片</h3>

        <img src="https://www.example.com/" alt="无法显示图片" />

    </body>

</html>

5、表格

<table> 标签定义表格，<th> 标签定义表头，<tr> 标签定义行，<td> 定义表格单元，表格单元可以包含各种元素

常用的属性如下：

  • border：定义表格边框宽度，单位为 pixels，如果没有显式定义，则默认不显示边框

  • cellpadding：规定单元格边沿与其内容之间的空白，单位为 pixels

  • cellspacing：规定单元格之间的空白，单位为 pixels

<!DOCTYPE html>

<html>

    <body>

        <table border="1">

            <tr>

                <td>row 1, cell 1</td>

                <td>row 1, cell 2</td>

            </tr>

            <tr>

                <td>row 2, cell 1</td>

                <td>row 2, cell 2</td>

            </tr>

        </table>

    </body>

</html>

假如需要处理 跨行或跨列的单元格 该怎么办呢？

我们可以使用 colspan 属性定义跨越的列数，使用 rowspan 属性定义跨越的行数

<!DOCTYPE html>

<html>

    <body>

        <table border="1" cellpadding="20">

            <tr>

                <td colspan=2>这是跨列单元格</td>

            </tr>

            <tr>

                <td rowspan=2>这是跨行单元格</td>

                <td>Hello</td>

            </tr>

            <tr>

                <td>World</td>

            </tr>

        </table>

    </body>

</html>

6、列表

在 HTML 中列表可以分为三种，分别是无序列表、有序列表和自定义列表

无序列表 使用 <ul> 标签标记，其中每一个列表项用 <li> 标签标记

在 <ul> 标签中有一个 type 属性，用于指定项目符符号，其可选值如下：

  • disc：默认值，黑色实心圆
  • circle：空心圆
  • square：黑色实心方块
<!DOCTYPE html>

<html>

    <body>

            <h3>Fruit</h3>

            <ul type="circle">

                <li>Apple</li>

                <li>Banana</li>

                <li>Cherry</li>

            </ul>

    </body>

</html>

有序列表 使用 <ol> 标签标记，其中每一个列表项用 <li> 标签标记

在 <ol> 标签中有一个 type 属性，用于指定项目符符号，其可选值如下：

  • 1：默认值，按数字排序（1、2、3、4 ...）
  • a：按小写字母排序（a、b、c、d ...）
  • A：按大写字母排序（A、B、C、D ...）
  • i：按小写罗马数字排序（i、ii、iii、iv ...）
  • I：按大写罗马数字排序（I、II、III、IV ...）
<!DOCTYPE html>

<html>

    <body>

            <h3>Drink</h3>

            <ol type="a">

                <li>Coffee</li>

                <li>Milk</li>

                <li>Tea</li>

            </ol>

    </body>

</html>

自定义列表 是项目及其注释的组合

以 <dl> 标签开始，每个自定义列表项以 <dt> 开始， 每个自定义列表项的定义以 <dd> 开始

7、表单

可以使用 <form> 标签定义表单，用于接受不同类型的用户输入，常用的属性如下：

  • name：表单名称
  • action：规定在提交表单时执行的动作
  • method：规定在提交表单时使用的方法，默认为 GET
  • target：规定在提交表单时的地址目标，默认为 _self

在 <form> 标签下，存在几个表单元素，其中最重要的莫过于 <input> 标签，其常用的属性如下：

  • name：<input> 元素的名称
  • type：定义不同的输入类型，常用的值如下：
    • text：单行文本输入字段
    • password：密码输入字段
    • radio：单选按钮
    • checkbox：复选按钮
    • submit：提交按钮
    • button：按钮
  • value：输入字段的值 / 默认值
  • placeholder：输入字段的提示信息
  • checked：输入字段默认选定，一般用于单选或复选按钮
  • disabled：输入字段无法使用
  • readonly：输入字段无法修改
  • required：输入字段必需填写
  • pattern：规定输入字段满足的正则表达式
<!DOCTYPE html>

<html>

<head>

    <script type="text/javascript">

        function sayHello(){

            alert('hello')

        }

    </script>

</head>

<body>

    <form>

        First name:<br/>

        <input name="firstname" type="text" required /><br/>

        Last name:<br/>

        <input name="lastname" type="text" required /><br/>

        <br/><input type="submit" value="Submit" onclick="sayHello()"/>

    </form>

</body>

</html>

8、音频

为了确保音频文件在所有浏览器中和所有硬件上都能够播放，我们可以使用以下这些标签：

  • <object>

<object> 定义内嵌对象，是 HTML 4.01 多媒体标签

<object height="300" width="500" data="song.mp3"></object>
  • <embed>

<embed> 定义嵌入内容，是 HTML 5 多媒体标签

<embed height="300" width="500" src="song.mp3" />
  • <audio>

<audio> 定义声音，是 HTML 5 多媒体标签，其属性及值列举如下：

属性 值 描述
autoplay autoplay 就绪后马上播放
controls controls 显示播放控件
loop loop 循环播放
muted muted 静音播放
preload preload 就绪后等待播放，若设置 autoplay，则忽略 preload
src url 指定播放音频的资源地址 
<audio controls="controls">

    <!-- mp3 格式在 Internet Explorer、Chrome、Safari 中有效 -->

    <source src="song.mp3" type="audio/mp3" />

    <!-- ogg 格式在 Firefox、Opera 中有效 -->

    <source src="song.ogg" type="audio/ogg" />

    <!-- 如果失败，显示错误信息 -->

	Your browser does not support the audio tag.

</audio>
  • 最佳解决方案

先尝试使用 <audio> 以 mp3 或 ogg 格式播放音频，如果失败，再尝试使用 <embed> 播放

<audio controls="controls">

    <source src="song.mp3" type="audio/mp3" />

    <source src="song.ogg" type="audio/ogg" />

    <embed height="300" width="500" src="song.mp3" />

</audio>

9、视频

为了确保视频文件在所有浏览器中和所有硬件上都能够播放，我们可以使用以下这些标签：

  • <object>

<object> 定义内嵌对象，是 HTML 4.01 多媒体标签

<object data="movie.swf" width="320" height="240"/>
  • <embed>

<embed> 定义嵌入内容，是 HTML 5 多媒体标签

<embed src="movie.swf" width="320" height="240"/>
  • <video>

<audio> 定义视频，是 HTML 5 多媒体标签，其属性及值列举如下：

属性 值 描述
autoplay autoplay 就绪后马上播放
controls controls 显示播放控件
loop loop 循环播放
muted muted 静音播放
preload preload 就绪后等待播放，若设置 autoplay，则忽略 preload
src url 指定播放视频的资源地址
poster url 指定点击播放按钮前或进行视频下载时显示的图像
width pixels 设置视频播放器的宽度
height pixels 设置视频播放器的高度 
<video width="320" height="240" controls="controls">

    <source src="movie.mp4" type="video/mp4" />

    <source src="movie.ogg" type="video/ogg" />

    <source src="movie.webm" type="video/webm" />

    Your browser does not support the video tag.

</video>
  • 最佳解决方案

先尝试使用 <video> 以 mp4、ogg 或 webm 格式播放视频，如果失败，再尝试使用 <object> 和 <embed> 播放

<video width="320" height="240" controls="controls">

    <source src="movie.mp4" type="video/mp4" />

    <source src="movie.ogg" type="video/ogg" />

    <source src="movie.webm" type="video/webm" />

    <object data="movie.mp4" width="320" height="240">

    	<embed src="movie.swf" width="320" height="240" />

    </object>

</video>

10、头部

<head> 元素是所有头部元素的容器，它们不会在浏览器中显示，只是包含页面的一些元数据

以下的标签都可以添加到 <head> 中，并且不同的标签具有不同的作用

  • <title>

<title> 标签用于定义文档标题

<head>

    <title>Title of the document</title>

</head>

使用 <title> 定义的文档标题，将会显示在浏览器选项卡中，并且当我们添加书签时，将会作为建议的书签名

HTML学习笔记之标签基础

  • <meta>

<meta> 标签提供关于 HTML 文档的元数据，元数据不会显示在页面上，但是对于机器来说却是可读的

可以使用 <meta> 标签指定字符编码（虽然一些浏览器会自动修正编码错误，但最好是在代码中手动设置）

<head>

    <meta charset="utf-8">

</head>

也可以使用 <meta> 标签为文档添加作者和描述

一些 <meta> 标签包含 name 和 content 属性，name 属性指定标签的类型，content 属性指定实际的内容

<head>

    <meta name="author" content="whfang">

	<meta name="description" content="This is the description">

</head>

另外，某些公司还会自己编写元数据协议，以提供更丰富的内容

  • <link>

<link> 标签定义文档与外部资源之间的关系，常常用于连接样式表

<head>

	<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

也可用于链接图片，为网站添加一个图标

<head>

	<link rel="shortcut icon" type="image/x-icon" href="myicon.ico">

</head>

HTML学习笔记之标签基础

  • <style>

<style> 标签定义文档样式

<head>

    <style type="text/css">

        <!-- 这里定义样式 -->

    </style>

</head>
  • <script>

<script> 标签定义脚本资源

<head>

    <script type="text/javascript" src="myscript.js"></script>

</head>
  • <base>

<base> 标签用于定义页面上所有链接的默认属性

<head>

    <base href="......" />

    <base target="_blank" />

</head>

【 阅读更多 HTML 系列文章，请看 HTML学习笔记 】

相关文章