初学html 的重要知识点

HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。

1.简单的网页结构

2.文档的声明

3.tittle标签

4.meta标签

5.完整网页结构

6.html的规范总结

7.实体

8.常用的标签

9.img标签

1.简单的网页结构

<html>

</html>

<!-- ctrl+/  注释符号 通过注释给大家写一些笔记 -->
<!-- html标签，根标签/根元素 所有的网页内容都要写在html里面
开始标签和结束标签中间，一个页面只能一个html标签
-->
<!-- 最最简单的网页结构 -->
<html><!-- head标签  保存一些元信息  它里面的内容，用户是看不到的主要是帮助浏览器编译代码--><head></head><!-- body标签  书写网页的主体内容，所有的给用户看的，都写在body里面 --><body>我的第一个页面</body>
</html>

2.文档的声明

<!doctype html>

<!-- 文档声明  写在html最上面，告诉浏览器我是按照html的规范来编写代码的浏览器你也要按照规范给我编译，以免代码编译陷入怪异模式，出现乱码
-->
<!doctype html>
<html><head></head><body>实验的境况</body>
</html>

3.tittle标签

<title>

小米商城 - Xiaomi 12、Redmi K50、MIX FOLD，小米电视官方网站

</title>

<!DOCTYPE html>
<!-- 目前学习的代码是html的标签，我们学习html标签，要时刻关注语义，而不是样式 -->
<html><head><!-- <title>你看我在哪里？？？</title> --><!-- title标签是网页的标题，显示在标题栏中，我们不关注它显示在哪里，关注的是他的语义最重要的意义是可以帮助推广部门做推广，给浏览器搜索到  --><title>小米商城 - Xiaomi 12、Redmi K50、MIX FOLD，小米电视官方网站</title></head><body>随便打一下</body>
</html>

4.meta标签

<!-- meta标签是一个自结束标签，也可以存一些元信息，帮助浏览器编译代码

自结束标签有两种写法 <meta> 、 <meta />

在开始标签里，我们可以加属性和属性值

charset 字符集属性设置密码本

utf-8 万国码属性值某一个密码本

GB 中国的

GBK 中国扩展版

charset的设置就是为了防止出现乱码

-->

<!--

编码：文字、图片、音视频==》二进制

解码：二进制===》文字、图片、音视频

乱码：编码和解码用的不是一个密码本

-->

<!DOCTYPE html>
<html><head><!-- meta标签 是一个自结束标签  ，也可以存一些元信息，帮助浏览器编译代码自结束标签有两种写法  <meta>  、 <meta />在开始标签里，我们可以加属性和属性值charset 字符集属性   设置密码本utf-8   万国码属性值   某一个密码本GB       中国的GBK      中国扩展版charset的设置就是为了防止出现乱码--><!-- 编码： 文字、图片、音视频==》二进制解码： 二进制===》文字、图片、音视频乱码：编码和解码用的不是一个密码本--><meta charset="utf-8"/><!-- keywords/ description 都可以帮助浏览器检索内容--><meta name="keywords" content="手机大全,手机报价及图片,平板电脑报价,手机配件大全" /><meta name="description" content="手机中国CNMO手机大全提供所有手机最新最准确的报价，为您购买手机产品平板电脑及手机配件提供最有价值的参考信息，更多手机报价、平板电脑、手机配件、手机图片精彩信息尽在手机中国" />    <title>网页的标题</title></head><body>学读骂为可，不我价。</body>
</html>

5.完整网页结构

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

</html>

<!-- shift+! 网页结构快捷键 -->
<!-- 格式化代码 shift+alt+f -->
<!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></body>
</html>

6.html的规范总结

1、html标签有成双成对的，也有自结束标签

2、html中是不区分大小写，但一般用小写居多

3、标签可以嵌套，但不可以交叉嵌套

4、养成良好的注释的习惯，简洁、明了，注释也不可以嵌套

5、html，css，js都是一种宽泛的语言，它的容错率比较高

它会给你自动纠错，但我们要尽量避免，防止网站的性能有所影响，而且它改的不一定是你想要的。

<!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><!-- 1、html标签有成双成对的，也有自结束标签2、html中是不区分大小写，但一般用小写居多3、标签可以嵌套，但不可以交叉嵌套4、养成良好的注释的习惯，简洁、明了，注释也不可以嵌套5、html，css，js都是一种宽泛的语言，它的容错率比较高它会给你自动纠错，但我们要尽量避免，防止网站的性能有所影响，而且它改的不一定是你想要的-->极太通家不求舟一得。</body>
</html>

7.实体

实体，什么是实体，在编写网页的时候，有一些字符我们是没有办法打出来的，例如空格、大于号、小于号等，这些字符已经提前被编译器或者浏览器征用，我们不能正常使用，我们要用一些额外的字符来代替，这些额外的字符就叫实体。

实体的语法 &实体的名字;

常用的实体

空格  

大于号 >

小于号 <

版权符号 ©️ ©

更多实体：https://www.w3school.com.cn/html/html_entities.asp

<!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><!-- 实体什么是实体在编写网页的时候，有一些字符我们是没有办法打出来的，例如空格、大于号、小于号等这些字符已经提前被编译器或者浏览器征用，我们不能正常使用，我们要用一些额外的字符来代替这些额外的字符就叫实体实体的语法&实体的名字;常用的实体空格    &nbsp;大于号  &gt;小于号  &lt;版权符号 ©️  &copy;更多实体：https://www.w3school.com.cn/html/html_entities.asp-->今天见到同学们 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;很开心 2&lt;5&gt;4 &copy;</body>
</html>

8.常用的标签

注释标签

打起来还是挺怪的，先<然后！然后两个-就自动出来了

Ctrl加/切换注释

标题标签

h1 - h6

数字越小，里面内容越粗越大，和加标题一样

输入标签名，就可以快速生成一对标签。

段落标签

换行标签 br

br 是一个单标签 ( 不需要结束标签 )

br 标签不像 p 标签那样带有一个很大的空隙 .

<!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><!-- html   主要就学一些标签，30-40个就够用css    样式--><!-- 标签  html 要关注语义，不关心样式 -->感觉快下雨了!感觉快下雨了!感觉快下雨了!<!-- 1、标题标签 h1,h2,h3,h4,h5,h6 h1  一级标题h2  二级标题默认样式：h1-h6,字体的大小逐步减小、字体会加粗，会变黑从语义上看：h1-h6,语义是逐步降低的，也是可以帮助浏览器检索内容，提高网络排名注意：常用的标题标签：h1-h3,h1的语义是最重，所以一个页面一般只有一个标题标签会独占一行，是块元素--><h1>感觉快下雨了</h1><h2>感觉快下雨了</h2><h3>感觉快下雨了</h3><!-- 2、段落标签  p默认样式：段落与段落之间有较大的空隙段落标签也会独占一行，是块元素-->榜大无病，洪洪作何。承学忧满韩到壬太官韩在冒者洞又家方害同。廿不问尝已人，如绝一秦么使回接此老说，卞三是因恩登白安，得才老人陀居，为后情九木着的在或徒战在量斯兼血救色性，决先们招我呼心徒先国褒赏，上韩得作谓回但成国劝过内后考罪在，宋和法重，上韩耳用，小帅谋以。<p>让徒生常负法制，仁姑的何非间掸书哉，为。</p><p>斯才曾纯洪，书要胜妙锐若，自无因彷要对秦为己若中系，满平冇。</p><!-- 3、标题分组  让标题之间有关系，没有默认样式 --><hgroup><h1>古诗一首</h1><h3>杜甫</h3></hgroup><!-- 4、strong 强调标签 默认样式：字体加粗加黑了--><p>同学们，看着<strong>真帅</strong></p><!-- 5、em  强调标签默认样式：字体斜体了--><p>同学们，你们可<em>真帅</em></p><!-- 面试题：在html中，有两个强调标签，它们有什么区别？默认样式上有区别语义上也有区别：strong强调的是内容，em强调的是语音语调一般情况，在实际的使用当中，em，strong不做区别--><p>同学们，你们可<em>真</em><strong>帅</strong></p><!-- 6、br 强制换行, 是一个自结束标签--><hr>登一那助资投知活则对皇郭活使因徒一，<br>虑招九弟老言褒，<br />人接自。<!-- 7、hr  分割线 是一个自结束标签--><hr><!-- 8、del 删除线 -->原价：<del>1999999元</del><br>现价：1.999元<!-- 9、center 有居中效果 --><center><h1>死骂极乐。</h1></center><!-- 10、div 是一个没有任何语义的标签, 是块元素 -->何君作司他，不彷商。<div>公天一量内挟洪人好。</div><!-- 11、span 是一个没有任何语义的标签, 一般就用来包裹文字  --><!-- 12、引用标签 默认样式：加双引号-->子曰：<q>学而时习之</q></body>
</html>

9.img标签

图片标签 img

 <img src="dog.jpg" alt="">

通过src描述图片具体所在的位置，这里的src可以是一个绝对路径，也可以是一个相对路径，还可以是一个网络路径。

<!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><!--  开始标签里 可以添加多个属性，用空格隔开即可img标签  引入外部的图片也是一个自结束标签 4个属性src   引入图片的路径  暂时将html文件和图片放在同一个文件夹下alt   是对图片的描述，正常情况下，alt的内容是不显示，当图片的路径出现问题了，图片引入不成功，alt就会显示它可以帮助浏览器检索图片，养成写alt的习惯width  设置图片的宽度height  设置图片的高度一般情况下，不会同时设置width和height，只要单独设置width或者height，另外一个就会自适应调整--><img src="./hg.gif" alt="胡歌" height="300px"></body>
</html>