HTML学习笔记（一）

HTML学习笔记（一）

1.什么是HTML？

HTML是HyperText Markup Language(超文本标记语言)

（1）HTML的历史版本发展：

​ ①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。

​ ②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。

​ ③HTML 3.2：1997年1月14日，W3C推荐标准。

​ ④HTML 4.0：1997年12月18日，W3C推荐标准。

​ ⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。

​ ⑥HTML 5：2014年10，HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。

（2）HTML特点：

​ 超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：

​ 1.简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。

​ 2.可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。

​ 3.平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。

​ 4.通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

2.什么是CSS？

是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户。

3.它们之间的关系：

（1）HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

（2）CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

结构：HTML用于描述页面的结构

表现：CSS用于控制页面中元素的样式

行为：JavaScript用于响应用户操作

4.HTML文件创建

（1）打开vscode，在工作区新建.html文件，输入“!”或“html:5”回车生成基本HTML结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5vM9PEQS-1627904494832)(D:\Briup实训三\csdn博客\image\h1.png)]

（2）元素：

[1]单标签元素：<meta /> 、<img />、<br/>

[2]双标签元素：

<div></div>
<p></p>

可以镜面嵌套：<div><span></span></div>

交叉嵌套非法：<div><span></div></span>

（3）核心属性：绝大多数标签都具有的属性。title、id、class、style。

title：描述信息

id：唯一标识

class：标识一类元素

style：样式

HTML标签都拥有自己的属性，属性应该出现在元素的开始标签内部，属性名和属性值通过"="分割，属性与属性之间通过空格分割，属性名不区分大小写，属性值区分大小写并且属性值可以使用双引号引起来。

（4）实体显示：

实体以&符开始，以;结尾

（5）块级元素：搭建网页结构

特点：

• 独占一行空间
• 默认宽度为100%高度
• 由子元素或内容决定
• 可以通过css指定其宽度

ps：不要将块级元素嵌套在行内元素中

（6）行内元素：在结构中填充网页内容

特点：

• 与其他行内元素共享一行空间
• 宽高由自身决定
• 由于不用来搭建网页结构，所以也无需通过css指定其宽度
• 行内元素中不可以嵌套块元素

（7）标签使用：

- h标签

h标签 标题标签
在HTML中，一共有六级标题标签
h1~h6
在显示效果上，h1最大，h6最小，但是文字的大小我们并不关心
6级标题中，h1的最总要，表示一个网页中的主要内容，h2~h6重要性依次降低，对于搜索引擎来说，
h1的重要性仅仅次于title，搜索引擎检索完title会立即查看h1中的内容
h1标签非常重要，它会影响到页面在搜索引擎中的排名，一个页面最好只写一个h1标签
一般的页面中，我们只使用h1 h2 h3，其他的基本不用

- p标签

段落标签，段落标签用于表示内容中的一个自然段
使用p标签来表示一个段落
p标签中的文字，会独占一行，并且段与段之间会有一个间距

- br标签

br标签 表示换行标签 br标签是一个自结束标签 br标签的语义是不另起一个段落换行, 而在企业开发中一般情况下需要换行都是因为需要另起一个段落, 所以在企业开发中很少使用br标签

-hr标签

hr标签 可以在页面中生成一个分割线

- img标签

img标签 告诉浏览器要显示一张图片

注意：

​ 1.px 单位名称为像素，相对长度单位，像素px是相对于显示器屏幕分辨率而言的。像素的使用性特别广。

​ 2.如果不设置img标签的宽度和高度，那么图片就会按照默认的样式显示，如果设置了宽高，img就会按照设置的宽高来显示。

​ 3.有时设置img的宽高会使图片失真，这时只需要设置宽度或者高度中的一个，另外一个会等比例调整。

​ 4.一般除了自适应的页面，不建议设置width和height。

​ 5.和h标签以及p标签不同的是，img标签不会独占一行

- a标签

a标签的作用 用于控制页面与页面之间跳转的

a标签中还有一个叫做target的属性，这个属性专门用于控制如何跳转
self:用于当前的选项卡中进行跳转，也就是不新建页面跳转，默认就是_self
_blank:用于在新的选项卡中进行跳转，也就是新建页面跳转
a标签也有一个title属性，效果和img标签的title类似

​ 注意点:
​ 1.a标签不仅可以让文字点击，也可以让图片被点击
​ 2.一个a标签必须有一个href属性，否则a标签不知道要跳转到什么地方
​ 3.如果通过a标签href属性指定一个URL地址，那么必须在地址前面加上http://或者https://
​ 除了URL地址，还可以指定一个本地地址

- mailto链接

mailto链接是一种html链接，能够设置你电脑中邮件的默认发送信息。但是需要你电脑中安装默认的E-mail软件，类似Microsoft Outlook等等。加入您已经安装了Microsoft Outlook，那么直接点击mailto链接就可以获得默认设置的邮件信息。

- base标签

base标签就是专门用来统一指定当前页面中所有的a标签需要如何打开
注意点
1.base标签必须要写在head标签之间
2.如果既在base中指定了target又在a标签中指定了target，那么浏览器会按照a标签中指定的来执行

-假链接

什么是假链接？
就是点击之后不需要跳转的链接我们称之为假链接

​ 在企业开发初期，其他的界面都没有完成，所以不知道跳转到什么地方，这个时候先用假链接来代替，项目完成后再换成真链接

假链接的格式

​ 1.# 直接回到页面的顶部
​ 2.javascript: 不会自动回到页面的顶部

- 锚点

1.要想通过a标签跳转到指定的位置, 那么必须告诉a标签一个独一无二的身份证号码, 这样a标签才能在当前界面中找到需要跳转到的目标位置

2.如何和HTML中的标签绑定一个独一无二的身份证号码呢?
在HTML中, 每一个标签都有一个名称叫做id的属性, 这个属性就是用来给标签指定一个独一无二的身份证号码的

3.所以要想实现通过a标签跳转到指定的位置分为两步
3.1给目标位置的标签添加一个id属性, 然后指定一个独一无二的值
3.2告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少
格式:

注意点:
1.通过我们的a标签跳转到指定的位置, 是没有过度动画的, 是直接一下子就跳转到了指定位置
2.a标签除了可以跳转到当前界面的指定位置以外, 还可以在跳转到其它界面的时候直接跳转到其它界面的指定位置