HTML+CSS笔记 (2.HTML基础学习)

HTML基础学习

1.HTML介绍：

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。

“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。

HTML 使用“标记”（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。
HTML 元素通过“标签”（tag）将文本从文档中引出，标签由在“<”和“>”中包裹的元素名组成，HTML 标签里的元素名不区分大小写。也就是说，它们可以用大写，小写或混合形式书写。

HTML文件的后缀为.html

2.编写第一个网页程序

标签：

<标签> 开始标签…..中间就是内容….. </标签>结束标签

标题标签：
1
2
3
<h1>  </h1>
<h2>  </h2>
<h3>  </h3>

共有六级标题

段落标签
1
2
<p> 这是一个段落 </p>
<p>这是另一个段落</p>
根标签,子标签（层级关系）
1
2
3
4
5
6
7
8
<html>
      <head>
                <title>   <title>
      </head>
      <body>
      </body>
</html>

根标签：

1
<html>    </html>

子标签（头部）
用户不可见，是给浏览器看的

1
<head>   </head>

子标签（身体）
用户可见部分

1
<body>    </body>

第一个网页示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
      <head>
                <title> 第一个网页</title>
      </head>
      <body>
	<h1> 将进酒 </h1>
	<h2>  李白</h2>
	<h3>  </h3>
	<p>君不见黄河之水天上来，奔流到海不复回 </p>
	<p>君不见高堂明镜悲白发，朝如青丝暮成雪。</p>
	<p>人生得意须尽欢，莫使金樽空对月。</p>
	<p>天生我材必有用，千金散尽还复来。</p>
      </body>
</html>

3.细化一个网页

HTML注释

1
<!-- 这是一个注释 -->

注释不可嵌套

标签的属性

HTML 标签可以设置属性
属性可以在标签中添加附加信息
属性一般描述于开始标签，不用于结束标签
属性总是以名称/值对的形式出现，比如：name=”value”。

1
<h1>这是我的<font color="red">第二个</font>网页！</h1>

font 规定文本的字体、字体尺寸、字体颜色。

1
<font>   </font>

这里的color=”red”就是属性，让中间字体变为红色。
属性和标签名或其他属性应该用空格隔开。
属性值应该始终被包括在引号内。
双引号是最常用的，不过使用单引号也没有问题。

1
<font color="red">第二个</font>

color就是属性名 red就是属性值 ，属性不能随便写，是有相应规定的。

添加了属性的网页代码：
1
2
3
4
5
6
7
8
<html>
    <head>
            <title>第二个网页</title>
    </head>
    <body>
        <h1>这是我的<font color="red">第二个</font>网页！</h1>
    </body>
</html>

4.网页的基本结构

文档声明

HTML5的版本声明

文档声明用来告诉浏览器当前网页的版本，写在第一行

1
2
<!doctype html>
<!doctype HTML>

示例：

1
2
3
4
5
6
7
8
9
<!doctype html>
<htm>
    <head>
            <title></title>
    </head>
    <body>
        <h1>              </h1>
    </body>
</htm>
文档字符编码声明

字符编码有很多方式，网页一般使用UTF-8字符集编码。
声明，置于head内部

1
2
3
 <head>
            <meta charset="utf-8">
</head>

完整基本结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<!--网页版本声明-->
<html>
<!--HTML的根标签-->
    <head>
        <!--子元素，头部（帮助浏览器解析网页）-->
        <meta charset="utf-8">
         <!--meat用来设置网页元数据--> 
        <title>标题</title>
         <!--网页的标题，搜索引擎搜索的就是这个-->
    </head>
    <body>
        <!--body是HTML的子元素，所有可见内容都应该写在body里-->
        <h1></h1>
        <!--网页的一级标题-->
    </body>
</html>
计算机及嵌入式软件 > 计算机前端 > HTML+CSS
#HTML+CSS
HTML+CSS笔记 (2.HTML基础学习)
https://www.duruofu.xyz/posts/165/
作者
DuRuofu
发布于
2023年6月6日
更新于
2025年1月10日
许可协议