HTML学习笔记(二) 常用标签

最新推荐文章于 2024-08-10 00:19:28 发布

半虹

最新推荐文章于 2024-08-10 00:19:28 发布

阅读量469

点赞数 1

分类专栏： HTML 文章标签： HTML 标签

本文链接：https://blog.csdn.net/wsmrzx/article/details/87126038

版权

HTML 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

这篇文章将会介绍一些常用的 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：指定当图片无法显示时显示的文字
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 中列表可以分为三种，分别是无序列表、有序列表和自定义列表

（1）无序列表

无序列表使用 <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>

（2）有序列表

有序列表使用 <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>

（3）自定义列表

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

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

<!DOCTYPE html>
<html>
    <body>
        <h3>Plan</h3>
        <dl>
            <dt>DONE</dt>
            <dd>- What did you do yesterday?</dd>
            <dt>TODO</dt>
            <dd>- What will you do tomorrow?</dd>
        </dl>
    </body>
</html>

7、表单

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

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

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

name：元素名称
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> ：定义内嵌对象，是 HTML 4.01 多媒体标签

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

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

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

<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> 播放音频，如果失败，再尝试使用 <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> ：定义内嵌对象，是 HTML 4.01 多媒体标签

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

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

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

<video> ：定义视频，是 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> 播放视频，如果失败，再尝试使用 <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> ：定义文档标题

文档标题将会显示在浏览器选项卡中，并且在添加书签时，会作为建议的书签名

<head>
    <title>Title of the document</title>
</head>

<meta> ：提供关于 HTML 文档的元数据，有一些公司甚至会自己编写元数据协议

可以指定字符编码

<head>
    <meta charset="utf-8">
</head>

也能为文档添加作者和描述

<head>
    <!-- name 属性用于指定标签的类型，content 属性用于指定实际的内容 -->
    <meta name="author" content="whfang">
    <meta name="description" content="This is the description">
</head>

<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>

<style> ：定义文档样式

<head>
    <style type="text/css">
        <!-- 这里定义样式 -->
    </style>
</head>

<script> ：定义脚本资源

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

<base> ：定义页面上所有链接的默认属性

<head>
    <base href="......" />
    <base target="_blank" />
</head>

半虹

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录