初始：
<!--
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言：HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签(markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML标签及文本内容
HTML 文档也叫做web页面
-->
<!-- html注释 -->
<!-- 文档声明===》 告诉浏览器改文件是什么类型--html文件
-》 解析文件的时候，要使用解析html文件规则
注意：有效代码的第一行
-->
htmld 的基本结构：
<!DOCTYPE html>
<!--根标签 html -->
<html>
<!-- 头部标签 :储存元数据，里面内容基本是给浏览器解析的 -->
<head>
<!-- 设置字符集 uft-8(万国码) ===》 解决乱码问题 -->
<meat charset="uft-8">
<!-- 标题标签：设置网页标题，在网页标题栏显示 -->
<title>html网页结构</title>
<!-- 设置网页的图标
rel:设置link引入的数据类型， href: 设置图片的地址-->
<link rel="icon" href="1.png">
<!-- 设置几秒过后，页面跳转
hppt-equiv="refresh"：设置操作
content设置内容
注意：时间后面没有单位，默认以s,时间与地址用逗号隔开 -->
<meat hppt-equiy="refresh" content="2,hpptps://www.baidu.com">
<!-- name: 设置meat数据类型， content: 设置数据内容 -->
<!-- keyword: 设置网页关键字，给搜索引擎收录 -->
<meat name="keyword" content="基本结构,html">
<!-- description: 设置网页介绍 -->
<meat name="description" content="html的基本结构，html是给页面添加内容的" >
</head>
<!-- 主体标签：页面文本内容，主要给用户看的 -->
<body>
<!-- jw5==随机生成5个中文字符 -->
金榜题名。
</body>
</html>
文件特点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html文件的特点1</title>
<!-- <title>html文件的特点2</title> -->
</head>
<body>
<p></p>
<P></P>
<!--
1.元素写法：<标签名> 比如：<meta>
书写元素时，先写标签名，然后回车
2.不区分大小写，但是基本都是使用小写
3.一个html文件中有且只有一对html、body、head、title
-->
</body>
<!-- <body>
我是第二个body里面的文字
</body> -->
</html>
快捷方式：
<!-- 声明文档 -->
<!DOCTYPE html>
<!-- 根标签 -->
<html lang="en">
<!-- 头部，存储元数据，帮助浏览器解析 -->
<head>
<!-- 设置字符集=》解决乱码问题 -->
<meta charset="UTF-8">
<!-- 设置在使用IE浏览器解析文件时，使用最高级别的IE来渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 设置视口，应用在移动端开发 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题：设置网页的标题 -->
<title>快捷方式</title>
<!-- 设置网页图标 -->
<link rel="icon" href="1.png">
</head>
<!-- 主体：页面内容 -->
<body>
<!-- 快捷方式
1.快捷生成网页基本结构：shift+!+enter/tab，输入法要在英文状态
2.快捷生成注释：Ctrl+/ 单次生成，偶次取消
3.快捷格式化文档：shift+alt+f
4.快捷选中每行相同位置：shift+alt+鼠标左键
5.快捷选中不同位置的内容：alt+鼠标左键
6.快捷复制上一行：shift+alt+上下方向键]
7.快速生成文字：jw+num(前提下载了chinese lorem插件，生成中文)
lorem+num(不需要下载插件，随机生成num个英文单词)
-->
<!--
vscode：
1.安装插件：
chinese：软件汉化
chinese lorem：简体乱数假文，jw+num=》随机生成num个中文字符
open in browser：使用浏览器打开文件，鼠标右击
open in default browser:使用默认浏览器打开
open in other browser:使用其他浏览器打开
2.设置自动保存
左下管理-》设置-》auto save，改成afterdelay
3.设置编辑字体大小
Ctrl+-/+(-减小，+增大)
浏览器：
打开开发者工具：F12 (有些电脑要同时按住fn)/鼠标右击，选择检查
-->
<!-- lorem+num -->
可洁可净
Lorem, ipsum dolor.
</body>
</html>
快捷方式+vicode使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常用标签</title>
</head>
<body>
<!-- 设置内容水平居中 -->
<center>
<!-- 标题 h1~h6；数字越大，优先级越低，h1最多只能出现一次，常用标题h1~h3
特点：
默认样式：数字越大，字体越小，加粗
每个标签独占一行
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
·······
<h6>六级标题</h6>
<!-- 段落 p
特点：
默认样式：垂直方向有距离
每个段落独占一行
-->
<!-- span 包裹文字，不独占一行 -->
<!-- br:强制转行，br后面的元素另起一行 -->
<p>者谢冈了孔徨关下 <br>上畴尤起但你后应价狱不。</p>
<p>的</p>
<p>Lorem ipsum dolor <span>sit</span> amet consectetur adipisicing elit. Ea, quam?</p>
<!--
强调：不独占一行
内容：em
语气：strong
-->
<em>em的语义强调内容</em>
<strong>strong的语义是强调语气</strong>
<!--
i/b都不独占一行
设置斜体文字：i
设置加粗字体：b
-->
<i>i是设置斜体文字</i>
<b>b是设置加粗字体</b>
<!-- 删除：del，
默认样式：有删除线，不独占一行
-->
<del>del的语义是指删除</del>
<!-- pre：模版标签，在编译器怎么写的，页面就会什么显示 -->
<pre>
尚登活
Lorem ipsum dolor sit.
</pre>
</center>
</body>
</html>
常用标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- center: 设置内容水平居中 -->
<center>
<!-- 标题标签 h1~h6 数字越大，优先级越低，h1最多只能出现一次，常用标题h1~h3
特点：
默认样式：数字越大，字体越小，加粗
每个标签独占一行 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
......
<h6>六级标题</h6>
<!-- 段落 p
特点：
默认样式：垂直方向有距离
每个段落独占一行 -->
<!-- span 包裹文字，不独占一行 -->
<!-- br:强制转行,br后面的元素另起一行 -->
<P>我有褒色的<br>宫种仃小。 </P>
<P>Lorem ipsum dolor <span>sit</span> amet consectetur, adipisicing elit. Quaerat, suscipit!</P>
<!--
强调：
内容:em
-->
<em>em的语义强调内容</em>
<strong>strongd的语义是强调语气</strong>
<!--
设置斜体文字：i
设置加粗字体：b
-->
<i>i是设置斜体文字</i>
<b>b是设置加粗字体</b>
<!-- 删除：del，
默认样式：有删除线，不独占一行
-->
<del>del的语义是指删除</del>
<!-- pre: 模板标签，再编译器怎么写，页面就会怎么显示 -->
<hr>
<pre>
尚登活
Lorem ipsum dolor sit.
</pre>
</center>
</body>
</html>
标签的分类：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
分类---标签个数
双标签：有开始标签+结束标签，<标签名></标签名> 比如：<p>内容</p>
单标签：有一个标签组成元素 <标签名/>或<标签名> 比如：<br>、<input/>
-->
<!-- 开始标签书写错误 -->
< p>身皇归，可德导他连。</p>
<!-- 结束标签书写错误 -->
<p>身皇归，可德导他连。< /p>
<!-- 正确书写 -->
<p>身皇归，可德导他连。</p>
<br>
<!--
书写的注意点:
1. 结束标签与开始标签要一致
2. 标签可以嵌套，但是不能交叉嵌套
3. p标签不能嵌套h1~h6和p
-->
<span>找杀到
<p>Lorem, ipsum dolor.</p>
</span>
<hr>
<span>
<p>
<!-- 错误书写-->
<i>昭然为，</strong>你预选，没。
<!-- 正确写法 -->
<i><strong>Lorem,ipsum.</strong></i>
<hr>
<i><strong>Lorem,ipsum.</strong></i>
<p>
</span>
<hr>
<p>
<h1>我是p标签里面的h1</h1>
</p>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
