HTML的基础用法

344次阅读
没有评论

共计 2271 个字符,预计需要花费 6 分钟才能阅读完成。

HTML(HyperText Markup Language,超文本标记语言)是用于创建网页的标准标记语言。如果您想查看HTML的发展历史,您可以点击下方详细信息来查看HTML的发展历史文章。

HTML的发展历史文章
https://xiaofublog.cn/?p=441

1. HTML 文档基本结构

一个完整的 HTML 文档由一系列特定标签构成,具有固定的基本结构:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个HTML页面</title>
</head>
<body>
    这是网页的主体内容,可以在这里添加各种文本、图片等元素。
</body>
</html>
  • <!DOCTYPE html>:声明文档类型,告诉浏览器该文档是 HTML5 文档 。在 HTML5 之前,不同版本的 DOCTYPE 声明更为复杂,而 HTML5 的声明方式更加简洁统一。
  • <html>:整个 HTML 文档的根元素,其他所有 HTML 元素都包含在这个标签内。lang="en"指定了网页内容的语言为英语,若网页是中文内容,可设置为lang="zh-CN"
  • <head>:包含了关于网页的元信息,这些信息不会直接显示在网页的可视区域。其中,<meta charset="UTF-8">用于指定网页的字符编码,UTF-8 是一种通用的字符编码,能支持世界上几乎所有的字符;<title>标签用于设置网页在浏览器标题栏中显示的标题。
  • <body>:网页的主体部分,包含了所有将在浏览器窗口中显示给用户的内容,如文本、图片、链接、表格等。

2. 文本相关标签

标题标签:HTML 提供了 6 个等级的标题标签,从<h1>(最大、最重要的标题)到<h6>(最小、最次要的标题),例如:

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

段落标签<p>标签用于定义一个段落,例如:

<p>这是一个段落,在网页中,段落会自动换行并与其他段落保持一定的间距。</p>

换行标签<br>是一个单标签(自闭合标签),用于在文本中强制换行,例如:

这是一行文本<br>这是换行后的另一行文本

强调和加粗标签<em>标签用于表示强调,通常显示为斜体;<strong>标签用于表示重要内容,通常显示为加粗。例如:

<p>这是一段<em>强调</em>的文字,这是一段<strong>重要</strong>的文字。</p>

3. 链接标签

<a>标签用于创建超链接,可以链接到其他网页、文件、邮箱地址等。基本语法如下:

<!-- 链接到外部网页 -->
<a href="https://www.example.com">访问示例网站</a>
<!-- 链接到本地的另一个HTML文件,假设当前目录下有about.html -->
<a href="about.html">关于我们</a>
<!-- 链接到邮箱地址,点击后会打开默认的邮件客户端 -->
<a href="mailto:example@example.com">联系我们</a>

其中,href属性指定了链接的目标地址,显示在<a>标签内的文本就是链接的显示内容。

4. 图片标签

<img>是单标签,用于在网页中插入图片。主要属性有src(指定图片的路径)和alt(当图片无法显示时显示的替代文本),例如:

<!-- 假设当前目录下有image.jpg图片 -->
<img src="image.jpg" alt="示例图片">

如果图片在子目录中,路径要写正确,如src="images/FLR2687.jpg"(假设图片在名为 images 的子目录下) 。

5. 列表标签

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

有序列表:使用<ol>标签定义,列表项同样用<li>标签,例如:

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

6. 表格标签

<table>标签用于创建表格,<tr>标签定义表格中的行,<td>标签定义表格中的单元格,<th>标签用于定义表头单元格(通常会加粗显示)。示例如下:

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>北京</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td>上海</td>
    </tr>
</table>

border="1"是为了在浏览器中显示表格边框,在实际开发中,更推荐使用 CSS 来控制表格样式。

7. 表单标签

表单用于收集用户输入的数据,常见的表单元素有<input><textarea><select>等,包裹在<form>标签内。例如:

<form>
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username"><br>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password"><br>
    <input type="submit" value="提交">
</form>

<input>标签的type属性有多种取值,如text(文本框)、password(密码框,输入内容会以星号或圆点显示)、submit(提交按钮)等。<label>标签用于关联表单元素,提高可访问性。

正文完
 0
文明评论哦~
评论(没有评论)

付小付的博客

付小付的博客
付小付的博客
Fu XiaoFuBlog
用户数
18
文章数
21
评论数
9
阅读量
8498
文章搜索
一言一句话
-「