HTML基础教程：从零开始学习Web页面构建

最新推荐文章于 2024-05-30 10:28:13 发布

奇遇少年

最新推荐文章于 2024-05-30 10:28:13 发布

阅读量1.5k

点赞数 25

文章标签：前端 html 学习

本文链接：https://blog.csdn.net/m0_53127626/article/details/135762939

版权

什么是网页?
什么是HTML?
网页的形成?

什么是网页

网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。
网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，
常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件

什么是 HTML

HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。
HTML 不是一种编程语言，而是一种标记语言 (markup language)。
标记语言是一套标记标签 (markup tag)。
所谓超文本，有 2 层含义：
它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。
它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

网页的形成

网页是由网页元素组成的，这些元素是利用 html 标签描述出来，然后通过浏览器解析来显示给用户的。
前端人员开发代码 ----> 浏览器显示代码（解析、渲染） -----> 生成最后的 Web 页面

常用浏览器

浏览器是网页显示、运行的平台。常用的浏览器有 IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。平时称为五大浏览器。

浏览器内核

浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

浏览器	内核
IE	Trident (IE、猎豹安全、360极速浏览器、百度浏览器)
Firefox	Gecho(火狐浏览器内核)
Safari	Webkit(苹果浏览器内核)
chrome/Opera	Blink(chrome/opera浏览器内核。Blink其实是WebKit的分支。)

目前国内一般浏览器都会采用 Webkit/Blink 内核，如 360、UC、QQ、搜狗等。

Web 标准（重点）

Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。
接下来围绕web标准,我们学习以下两点:

为什么需要web标准
浏览器不同，它们显示页面或者排版就有些许差异。
1. 让 Web 的发展前景更广阔。
2. 内容能被更广泛的设备访问。
3. 更容易被搜寻引擎搜索。
4. 降低网站流量费用。
5. 使网站更易于维护。
6. 提高页面浏览速度。
Web标准的构成
主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

标准	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为	行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript

标签关系

双标签关系可以分为两类：包含关系和并列关系。
包含关系

<head> 
 <title> </title> 
</head>

并列关系

<head> </head>
<body> </body>

HTML文档结构

一个基本的HTML文档结构包括以下部分：

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <!-- 网页内容 -->
</body>
</html>

<!DOCTYPE html>: 声明文档类型，告诉浏览器这是一个HTML5文档。
<html>: HTML文档的根元素。
<head>: 包含了文档的元（meta）数据，如标题、字符集声明、链接到样式表和脚本等。
<title>: 指定了网页的标题，它会显示在浏览器的标题栏或页面的标签上。
<body>: 包含了网页的可见内容，如文本、图片、链接、列表、表格等。

lang 语言种类

用来定义当前文档显示的语言。

en定义语言为英语
zh-CN定义语言为中文

简单来说,定义为en 就是英文网页, 定义为 zh-CN 就是中文网页
其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文
这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的

字符集

字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。
在< head>标签内，可以通过< meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。

<meta charset=" UTF-8" />

charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符.

注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的 “UTF-8”，不要写成"utf8" 或 “UTF8”。

常用HTML标签

标题

HTML提供了六级标题，从<h1>到<h6>，<h1>是最高级别的标题，<h6>是最低级别的标题。

<h1>这是一个H1标题</h1>
<h2>这是一个H2标题</h2>
<h3>这是一个H3标题</h3>
<!-- 以此类推，直到H6 -->

换行

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签 < br />。

<br />

粗体

使用 <strong> 或 <b> 标签。

<strong>加粗</strong> 
<!-- 或 -->
<b>加粗</b>

斜体

使用 <em> 或 <i> 标签

<em>斜体</em> 
<!-- 或 -->
<i>斜体</i>

下划线

使用 <ins> 或 <u> 标签

<ins>下划线</ins> 
<!-- 或 -->
<u>下划线</u>

删除线

使用 <del> 或 <s> 标签

<del>删除线</del> 
<!-- 或 -->
<s>删除线</s>

< div> 和< span>标签

<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。div 是 division 的缩写，表示分割、分区。span 意为跨度、跨距。

<div>用来装内容 </div> 
<span> 用来装内容 </span>

段落

<p>标签用于创建一个段落。

<p>这是一个段落。</p>

链接

<a>标签用于创建一个链接。

<a href="https://blog.csdn.net/m0_53127626?type=blog">这是一个链接到奇遇少年的链接</a>

图像

<img>标签用于在网页中嵌入图像。

<img src="image.jpg" alt="描述图像的文本">

列表

有两种类型的列表：无序列表（使用<ul>）和有序列表（使用<ol>），列表项使用<li>标记。

<!-- 无序列表 -->
<ul>
    <li>列表项一</li>
    <li>列表项二</li>
</ul>

<!-- 有序列表 -->
<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

自定义列表（重点）

在 HTML 标签中，<dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt>定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。

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

表单标签

表单域是一个包含表单元素的区域。在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。<form> 会把它范围内的表单元素信息提交给服务器.
<input> 表单元素
在英文单词中，input 是输入的意思，而在表单元素中<input>标签用于收集用户信息。
在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

input输入表单元素
select下拉表单元素
textarea 文本域元素

<form action="url地址" method="提交方式" name="表单域名称">
 <input type="属性值" />
</form>

表格

<table>标签用于创建表格，<tr>用于定义行，<th>用于定义表头单元格，<td>用于定义标准单元格。

<thead></thead>：用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。一般是位于第一行。
<tbody></tbody>：用于定义表格的主体，主要用于放数据本体。
以上标签都是放在 <table></table> 标签中。
合并单元格方式：
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan="合并单元格的个数

属性名	描述
cellpadding	规定单元边沿与其内容之间的空白，默认1像素。
cellspacing	规定单元格之间的空白，默认2像素。

<table>
    <tr>
        <th>表头一</th>
        <th>表头二</th>
    </tr>
    <tr>
        <td>数据一</td>
        <td>数据二</td>
    </tr>
</table>

< label> 标签

<label> 标签为 input 元素定义标注（标签）。
<label> 标签用于绑定一个表单元素, 当点击标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验
核心：标签的 for 属性应当与相关元素的 id 属性相同。

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

< select> 标签

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表

<select>
 <option>选项1</option>
 <option>选项2</option>
 <option>选项3</option>
 ...
</select>

< textarea> 标签

当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签。
在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。
cols=“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小。

<textarea rows="3" cols="20">
 文本内容
</textarea>

注释

如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。HTML中的注释以“< !–”开头，以“ -->”结束。

 <!-- 注释语句 --> 快捷键: ctrl + /

创建你的第一个网页

现在，让我们创建一个简单的网页，它包含标题、段落、表单、链接和图像。

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落，介绍了我的网页内容。</p>
    <a href="https://blog.csdn.net/m0_53127626?type=blog">点击这里访问奇遇少年</a>
    <p>下面是一张美丽的风景图片：</p>
    <img src="scenery.jpg" alt="美丽的风景">
    <!-- 表单 -->
    <form>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

将上述代码保存为.html文件（例如index.html），然后用浏览器打开它，你就会看到你的第一个网页。

后续陆续更新

总结

HTML是构建网页的基础。通过学习HTML的基本结构和标签使用，你可以开始创建自己的网页了。随着你对HTML的进一步学习，你将能够创建更复杂和功能丰富的网站。记得实践是学习HTML的关键，不断尝试和编写代码将帮助你更好地掌握这门语言。

奇遇少年

关注

25
点赞
踩
32

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML基础教程：从零开始学习Web页面构建

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
复制链接

扫一扫