网页开发基础–HTML基础

一、html语法格式

1.标签格式

HTML 中的所有标签都要放在< >中，格式为<标签名称>。

结束标签的名称前需要添加一个右斜杠/。

1
<title>第一个网页</title>

注意：在元素内容前后添加的空格或换行会被浏览器忽略！

2.为网页添加注释：

结构为：<!--注释内容-->（注意是双横线）。

例如：

1
2
3
4
<!--head元素包含了一个title元素-->
<head>
    <title>第一个网页</title>
</head>

3.单标签元素：

这类标签不需要内容产生效果，通常表示对网页的某种行为，它们不用标记任何内容，开始即是结束。

比如，<hr>标签的作用是在网页中添加一条分割线，它仅包含开始标签，是一个单标签元素。

4.属性：

属性可以为网页元素提供更多信息， 它总是以属性名/值对的形式出现。例如下面展示了网页中常用的两个属性

1
2
3
4
5
6
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>第一个网页</title>
</head>
</html>

5.构成网页的元素

5.1DOCTYPE

<!DOCTYPE html>是一个特殊的标签，总是放在HTML文档的第一行。它的作用是让浏览器明白其处理的是HTML文档。

5.2 <html>

html 是根元素，它告诉浏览器网页从<html>开始，从<\html>结束。

网页的所有内容都放在html元素中。

5.3网页头

网页头（又称为网页头部信息）向浏览器提供文档的一些信息。这些信息包括网页的名称、编码方式、样式、JS代码等。

文档的所有信息均包含在head元素内部，即它从<head>开始，从</head>结束。

head 中的内容不会在网页中显示。

5.4设置网页编码

<meta>设定网页的元信息，是一个单标签元素。meta 中的charset属性用来设置网页的编码，它的值通常为”UTF-8”。

5.5<title>

<title>元素用来设置文档的标题或者名称，仅在 head 中使用。

浏览器通常会将该元素的内容显示在标签页中。

5.6网页体

网页体，也就是网页的主体，包含了网页中要显示的所有内容。比如段落、图像、超链接等，我们浏览网页时看到的所有信息都包含在网页体中。<body> 标记网页的主体，它告诉浏览器该向用户展示哪些内容。

5.7网页内容

比如，若想要在网页中展示一段文字，可以在body中加入<p>标签，它标记了网页中的一个段落。

5.8代码补全

实际编写代码时，编辑器会自动补全上述网页结构标签。

具体方法：在编辑器中输入英文感叹号，并按下tab键位。

在vscode中开启代码补全：

打开设置（快捷键Ctrl+,),搜索框输入emmet.triggerExpansionOnTab查找该项，启用后即可

本节总结：

二、网页中的文本内容

1.标题

标题是标明文章、作品等内容的简短语句。

h1 元素表示网页中的标题。它由<h1>开始，</h1>结束。

标题的文字紧跟在<h1>标签之后，并且在网页中默认以粗体的样式显示。

其他等级标题：HTML 总共提供了 6 个标题元素，即h1 ～h6，它们分别对应不同等级的标题，其中h1是最高等级。默认情况下随着等级的降低，字体样式也会逐渐减小；

2.段落元素

对于一篇文章来说，只有标题没有正文是不行的。将文字分段显示，能够在网页中更有条理的展现内容。

特点：1.段落与段落之间有默认的间隙；2.一个段落中的文字会根据浏览器窗口的大小自动换行。

语法：<p>我是段落内容<\p>

在段落中换行：为元素添加内容时，若出现换行或多个空格，浏览器会将其转换为一个空格。若想要强制在某个位置换行，可以使用<br>标签。

3.元素定位

在实际开发时，一个网页通常会包含多个相同元素，比如多个标题与段落。对于相同标签的元素，可以用class属性和id属性区分

3.1class属性

class 属性用来对相同的元素进行分类。它的属性值就是每个分类的名称（类名）。名称可以设定为任意内容且该名称可以重复使用。

class 可以设置在任何元素中，是一个通用属性。

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用属性class</title>
    <style>
        .a {
            color:blue;
        }
        .b {
            color:red;
        }
    </style>
</head>
<body>
    <p class="a">A：宫廷玉液酒</p>
    <p class="b">B：一百八一杯~</p>
    <p class="a">A：这酒怎么样？</p>
    <p class="b">B：听我给你吹！</p>
    <p class="a">A：啊吹！啊吹！</p>
    <p class="b">B：瞧我这张嘴呀！一杯你开胃。</p>
    <p>点击此处解锁</p>



</body>
</html>
3.2 id属性

除了使用class分类以外，还可以使用id属性为某个元素分配一个唯一的标识符。id也是一个通用属性，它的使用方法和class类似。但与class的区别在于，id属性的值是唯一的，类似于我们的身份证号码。例如：

以下代码为”id=unlock”的p元素设定颜色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用属性class</title>
    <style>
        #unlock{
            color:green;
        }
    </style>
</head>
<body>
    <p class="a">A：宫廷玉液酒</p>
    <p class="b">B：一百八一杯~</p>
    <p class="a">A：这酒怎么样？</p>
    <p class="b">B：听我给你吹！</p>
    <p id='unlock'>点击此处解锁</p>
</body>
</html>

4.文本格式化

有时希望为网页中的文本设置一些简单的样式，比如加粗、斜体或者下划线等。

标签 语义
<b> 加粗
<i> 倾斜
<s> 删除线
<u> 下划线

例如：

1
2
3
4
5
6
<!--独立使用-->
<i>斜体</i>
<s>删除线</s>
<u>下划线</u>
<!--在p元素中使用-->
<p>把段落中的文本<b>加粗</b></p>

5.块级元素和行内元素

块级元素在浏览器显示时，通常会以新的一行开始。块级元素中可以包含其他的行内或块级元素。例如 <h1>-<h6>、<p>标签都是块级元素。

行内元素在浏览器显示时，通常不会以新的一行开始，而是与其他元素在同一行显示。

行内元素中可以包含其他行内元素，但不能包含块级元素。

本节总结：

三、超链接与图片

1.<img>标签

img 元素可以为网页插入一张图片，它是一个由单标签组成的行内元素。也就是说，它只包含开始标签，且多个元素可以在同一行显示。

src 属性用于记录图片所在的文件位置，浏览器可以通过该地址找到要使用的图片。

alt 属性用来记录一段文字。当浏览器未能找到图片时，alt中的内容会代替图片显示在网页中。alt全称：alternate - 代替的

例如：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片结构</title>
</head>
<body>
    <p>您上传的头像：</p>
    <img src="错误的地址" alt="头像">
</body>
</html>

2.设置图片宽高

网页中的图片默认以原始大小显示。当图片过大时，屏幕无法完整显示图片内容。可以通过width属性和height属性，设置图片的宽度和高度。

属性的值为数字+像素单位(px)，如100px。

例如：

1
2
3
<img src="images/head.png" alt="头像" width="100px" height="50px">
<p>图片尺寸：宽50px 高50px</p>
<img src="images/head.png" alt="头像" width="50px" height="50px">

也可以只设置图片的宽度（或高度），浏览器会按照比例自动调整图片的高度（或宽度）。例如下边的代码仅设置了宽度，浏览器会按照比例自动调整图片的高度。

1
2
3
<img src="images/head.png" width="100px">
<img src="images/head.png" width="50px">
<img src="images/head.png" width="10px">

3.超链接

超链接（或简称链接），是指从一个网页指向另一个目标的连接关系。超链接就像网页中的传送门，只需轻轻一点，就能带你进入另一个网站。

一个完整的网站应该由多个不同的html文档相互链接而成。

3.1超链接语法

1
<a href="./aboutme.html">点击此处了解我</a>

<a>标签表示一个超链接，它是一个双标签，内容以</a>结束。

与<img>相同，它是一个行内元素。

全称：anchor - 锚

3.2 href属性

href属性用来设定链接的目标地址。与src属性不同的是，src 只可以设置图片文件的地址；而href属性中的地址可以包含：

* 另一个网页；
* 网页中的某个元素；
* 一张图片；
* 一个JS程序；

全称：Hypertext Reference - 引用超文本

3.3 无效的地址

当 href属性中的地址无效时，浏览器通常会显示404页面，表示文件不存在。

3.4 描述内容

一段被超链接标记的文字。用户通过点击这段文字进入超链接。

该文字在不同的状态下有不同的表现方式：

  • 未点击链接时，使用带有下划线的蓝色字体。
  • 点击链接后，使用带有下划线的紫色字体。

3.5 跳转规则

当超链接被点击时，浏览器默认直接从当前页面进入目标页面。

利用target属性可以修改这项规则。该属性常用的值有两种：

  • _blank，浏览器会在新的页面中打开文档；

  • _self，浏览器会在当前页面打开文档（默认）。

    例如：

    1
    2
    <a href="http://nanyuzuo.xin/hexo" target="_blank">新页面打开北落师门博客</a>
    <a href="http://nanyuzuo.xin/hexo" target="_self">本页面打开北落师门博客</a>

3.6 页面内跳转

使用超链接不仅能够指向一个html文档，还可以链接一个含有id属性的元素。

只要将id值作为href的地址即可，格式为href="#元素的id"

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
    <!-- 为h1设定一个id属性，值为top-->
    <h1 id="top">第一本书</h1>
    <p>Python</p>
    <h1>第二本书</h1>
    <p>MySQL</p>
    <h1>第三本书</h1>
    <p>JavaScript</p>
    <h1>第四本书</h1>
    <p>C语言</p>
    <h1>第五本书</h1>
    <p>CSS</p>
    <h1>第六本书</h1>
    <p>HTML</p>
    <!--设置href中的地址为#top-->
    <a href="#top">回到头部</a>
</body>

3.7 结合图片的超链接

将img元素作为内容，放在a元素中。即可为图片添加一个超链接。例如：

1
2
3
<a href="./aboutme.html">
    <img src="images/head.png" alt="头像">
</a>

本节总结：