前端基础 | HTML基础：HTML结构，HTML常见标签

文章目录

HTML
- 1、HTML结构
- - 1.1HTML标签
  - - 1.1.1标签
    - 1.1.2标签含义
  - 1.2HTML文件基本结构
  - 1.3标签层次结构
  - [1.4 快速生成代码框架](#1.4 快速生成代码框架)
- 2、HTML常见标签
- - 2.1注释标签
  - 2.2标题标签：h1--h6
  - 2.3段落标签：p
  - [2.4 换行标签：br](#2.4 换行标签：br)
  - 2.5格式化标签
  - [2.6 图片标签：img](#2.6 图片标签：img)
  - 2.7超链接标签：a
  - - [2.7.1 链接的几种形式](#2.7.1 链接的几种形式)

HTML

1、HTML结构

1.1HTML标签

1.1.1标签

HTML代码是由"标签"构成的，<>中的就是标签。

形如等是双标签，双标签有开始有结束

例如：

html 复制代码

<body>hello</body>

标签名body放在<>中
大部分标签成对出现，为开始标签，为结束标签
少数标签只有开始标签，称为"单标签"
开始标签和结束标签之间，写的是标签的内容hello
开始标签可能会带有"属性" id属性相当于给这个标签设置了一个唯一的标识符（身份证号码），例如：
html 复制代码
```
<body id = "myID">helloc</body>
```

1.1.2标签含义

html：html文件的根标签
head：编写页面相关的属性
title：页面标题
body：页面内容展示信息

每一个标签相当于一个节点，所有标签构成一个DOM树，所有的标签都是html子标签，head和body是兄弟标签，head和title是父子标签。

1.2HTML文件基本结构

html 复制代码

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
       hello world
    </body>
</html>

html 标签是整个 html 文件的根标签(最顶层标签)
head 标签中写页面的属性
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题.

1.3标签层次结构

父子关系
兄弟关系
html 复制代码
```
<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
       hello world
    </body>
</html>
```
- head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
- title 是 head 的子标签
- head 是 title 的父标签. head 和 body 之间是兄弟关系

1.4 快速生成代码框架

在IDRA中创建文件xxx.html，直接输入！，按Tab键或者回车键，此时能够自动生成代码的主体框架。

一些细节：

<!DOCTYPE html>称为DTD（文档类型定义），描述当前的文件是一个HTML5的文件

<html lang="en">其中lang属性表示当前页面是一个"英语页面"，有些浏览器会提示是否进行自动翻译

<meta charset="UTF-8">描述页面的字符编码方式，没有这一行可能会导致中文乱码

<meta name="viewport" content = "width=device-width, initial-scale=1.0">

name = "viewprot"其中viewport指的是设备的屏幕上能用来显示我们的网页的那一块区域

content = "width = device-width, initial-scale=1.0"在设置可视区和设备宽度等宽，并设置初始缩放为不缩放（对于移动端开发较为常见）

2、HTML常见标签

2.1注释标签

注释不会显示在界面上面，目的是提高代码的可读性
html 复制代码

CTRL + / 快捷键可以快速进行注释和取消注释

2.2标题标签：h1--h6

有六个标签，h1--h6，数字越大，字体越小

html 复制代码

<h1>这是标题</h1>
<h2>这是标题</h2>
.....
<h6>这是标题</h6>

可以看到不同标题的效果如下

2.3段落标签：p

将一段较长的文本粘贴导html中，会发现并没有分成段落

p标签表示一个段落
html 复制代码
```
<p>这是一个段落</p>
```

例子：

html 复制代码

<p>这是第一个段落</p>
<p>这是另一个段落</p>

可以看到下面的段落效果：

2.4 换行标签：br

br是break的缩写，表示换行

br是一个单标签（不需要结束标签）
br标签不想p标签那样带有一个很大的空袭
<br/>是规范写法，不建议写成

举例：

html 复制代码

    这是第一行<br/>这是第二行

可见下面的效果示意图，会发现两行中的间隙会比换段落的间距要窄一点：

2.5格式化标签

加粗: strong 标签和 b 标签
倾斜: em 标签和 i 标签
删除线: del 标签和 s 标签
下划线: ins 标签和 u 标签

举例：

html 复制代码

<strong>keep coding</strong>  keep coding  <b>keep coding</b>

效果如图：

html 复制代码

<u>keep coding</u>  或  <isn>keep coding</isn>

效果如图：

html 复制代码

<i>keep coding</i>  或  <em>keep coding</em>

效果如图：

html 复制代码

<s>keep coding</s>  或  <del>keep coding</del>

效果如下：

2.6 图片标签：img

img标签必须带有src属性，表示图片的路径，可以是绝对路径，也可以是相对路径

html 复制代码

<img src="rose.jpg">

img标签的其他属性：

alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字
title: 提示文本. 鼠标放到图片上, 就会有提示
width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡
border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定

关于目录结构：

对于一个复杂的网站, 页面资源很多, 这种情况可以使用目录把这些文件整理好.

相对路径: 以 html 所在位置为基准, 找到图片的位置.
- 同级路径: 直接写文件名即可 (或者 ./)
- 下一级路径: image/1.jpg
- 上一级路径: .../image/1.jpg
绝对路径: 一个完整的磁盘路径, 或者网络路径. 例如
- 磁盘路径 D:\rose.jpg
- 网络路径 https://images0.cnblogs.com/blog/130623/201407/300958470402077.png

2.7超链接标签：a

href: 必须具备, 表示点击后会跳转到哪个页面.

target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开

2.7.1 链接的几种形式

外部链接：href引用其他网站的地址
html 复制代码
```
<a href="http://www.baidu.com">百度</a>
```
内部链接：网站内部页面之间的连接，写相对路径即可
在一个目录中，先创建一个 1.html，再建一个 2.html
html 复制代码
```

我是 1.html
<a href="2.html">点我跳转到 2.html</a>

我是 2.html
<a href="1.html">点我跳转到 1.html</a>
```
空链接: 使用 # 在 href 中占位
html 复制代码
```
<a href="#">空链接</a>
```
下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)
html 复制代码
```
<a href="test.zip">下载文件</a>
```
网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中
html 复制代码
```
<a href="http://www.sogou.com">
    <img src="rose.jpg" alt="">
</a>
```

锚点链接: 可以快速定位到页面中的某个位置

html 复制代码

<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
   第一集剧情 <br>
   第一集剧情 <br>
   ...
</p>
<p id="two">
   第二集剧情 <br>
   第二集剧情 <br>
 ...
</p>
<p id="three">
   第三集剧情 <br>
   第三集剧情 <br>
 ...
</p>