html结构说明

最新推荐文章于 2022-04-20 16:45:58 发布

md名字又重复

最新推荐文章于 2022-04-20 16:45:58 发布

阅读量227

点赞数

分类专栏： HTML+CSS 文章标签： html css

本文链接：https://blog.csdn.net/qq_43580997/article/details/107579117

版权

HTML+CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML结构说明 {ignore}

文章目录

HTML结构说明 {ignore}

什么是元素（标签、标记）

<h1>笔记</h1>

组成：起始标记 + 结束标记 + 元素内容（在页面上要显示的东西） + 元素属性（属性名 + 属性值）
属性的分类【一般都是局部属性】
- 局部属性：某个元素特有的属性
- 全局属性：所有的元素都可以使用
元素的嵌套：元素之间可以发生嵌套

不能相互嵌套

   <div>
       <h1>
           不能这样嵌套
   </div>
   </h1>

标准的HTML文档结构

快捷键： !

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

文档声明：告诉浏览器当前的文档使用的HTML标准是HTML5 ,如果不写文档声明的话，会导致浏览器进入怪异渲染模式（浏览器自己选择HTML版本进行渲染）
```
<!DOCTYPE html> 
```
根元素：一个页面只能出现一个，并且该元素是其他元素的父元素或者祖先元素
在html5版本中没有强制要求书写该元素
```
<html lang="en">
    .....
</html>
```
lang（language）属性：全局属性，表示该元素内部使用的文字是使用哪一种自然语言书写而成。这样可以触发浏览器的阅读或者翻译功能
- en：英文
- cmn-hans：中文
*cmn：中国大陆官方用语
*han：汉语
*s:简体

下面元素必须要作为HTML的子元素出现

文档头部（head标签）

头部元素：文档头内部的内容不会显示在页面上。
```
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
```
- meta标签：文档的元数据（附加信息）–>告诉浏览器页面的其他信息，不是用于显示的。
  - charset：指定网页内容编码
  - 适应手机端：设置网页的视图（视口）宽度设置为设备的宽度
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
  - 解决IE的问题,如果是IE浏览器的话，会建议使用Edge的内核
```
<meta http-equiv="X-UA-Compatible" content="ie=edge">
```
  - title标签：网站的标题
```
<title>Document</title>
```

文档体（body标签）

页面上所有要参与显示的元素都应该放置到文档体中。

<body>
    <h1>我是文档体M</h1>
</body>

特殊标签

有些元素没有结束标记，这样的元素叫做空元素---->没有元素内容
ej：

<meta charset = "UTF-8">
<img src="">

空元素的两种写法：

<meta charset = "UTF-8">
<meta charset = "UTF-8"/>

HTML实体

也称实体字符，HTML Entity。
通常用于在页面中显示一些具有特殊含义的符号。
- 小于符号：<
- 大于符号：>
书写方式
1. &单词;
2. &#数字;

书写的后面要加英文分号“;”

特殊符号名称	特殊符号	书写
小于符号	<	&lt
大于符号	>	&gt
空格		&nbsp
版权符号	©	$copy
与符号	&	&amp

lt: Less-than
gt: greater-than
nbsp: non-breaking space
copy: copyright
amp: ampersand

更多详细书写： https://uutool.cn/info-html-entity/

路径的讲解

绝对路径和相对路径

绝对路径
- 当跳转目标和当前页面的协议相同时，可以省略协议。
相对路径
- 以./开头， ./ 表示当前资源所在的目录
- 可以书写 …/ 表示返回上一级目录
```
<a href="./../test.html">返回上一级目录中的test页面</a>
```
- 相对路径中，./可以省略

名称	书写格式	使用
绝对路径	1. 协议名://主机名:端口名/路径 2. scheme://host:port/path	站外资源
相对路径	以./开头	站内资源

【协议名】http、https、file
【主机名】域名、IP地址
【端口号】如果协议是http协议，默认端口号80；如果协议是https协议，默认端口号为443
上述端口可忽略
【路径】代表资源的位置
ost:port/path |站外资源
相对路径 | 以./开头 |站内资源

【协议名】http、https、file
【主机名】域名、IP地址
【端口号】如果协议是http协议，默认端口号80；如果协议是https协议，默认端口号为443
上述端口可忽略
【路径】代表资源的位置

md名字又重复

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html结构说明

HTML结构说明 {ignore}文章目录HTML结构说明 {ignore}什么是元素（标签、标记）标准的HTML文档结构文档头部（head标签）文档体（body标签）特殊标签HTML实体路径的讲解绝对路径和相对路径什么是元素（标签、标记）<h1>笔记</h1>组成：起始标记 + 结束标记 + 元素内容（在页面上要显示的东西） + 元素属性（属性名 + 属性值）属性的分类【一般都是局部属性】局部属性：某个元素特有的属性全局属性：所有的元素都可以使用元素的嵌套：
复制链接

扫一扫