以下是我对Web前端-Html部分的笔记，因为博主也是初学Web前端，有很多东西都还停留在表层的理解，如果我的博客有任何错误，请及时评论或者私信我，我会及时更改。也欢迎同样初学Web-前端的你愿意关注我的博客，我会把我每周的学习内容进行整理和上传，方便大家沟通和交流学习经验。
由于是笔记，所以我只写需要记的部分，那些关于Web基础概念和Html的发展史这种了解的东西我就不陈述了。
一、什么是 HTML?
-
HTML 是用来描述网页的一种语言。
-
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
-
HTML 不是一种编程语言，而是一种标记语言 (markup language)
-
标记语言是一套标记标签 (markup tag)
-
HTML 使用标记标签来描述网页
二、什么是 HTML标签?
-
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
-
HTML 标签是由尖括号包围的关键词
-
标签对中的第一个标签是开始标签，第二个标签是结束标签
-
开始和结束标签也被称为开放标签和闭合标签
-
标签名必须为半角文字，大小写皆可。以前流行用大写，最近开始流行用小写，因为XHTML（可扩展超文本标记语言）里面规定标签名必须小写。标签名的前面不能有空格
三、HTML元素标签分类
- 单标签
只有开始标签没有结束标签, 也就是由一个<>组成 - 双标签
有开始标签和结束标签, 也就是由一个<>和一个</>组成的
四、HTML元素类型
4.1、区块元素(display:block)
1、说明
-
每个块级元素都从新的一行开始，并且其后的元素也要另起一行。（一个块级元素独占一行）。
-
元素的高度、宽度、行高以及顶和底边距都可设置。
-
元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设置了宽度
-
一般是其他元素的容器元素,可以包含文本,内联元素和其他块元素
2、常用的块状元素
| 标签 | 说明 |
|---|---|
| div | 文档节 |
| ul | 无序列表 |
| ol | 有序列表 |
| dl | 定义列表 |
| p | 段落 |
| h1...h6 | 标题 |
| table | 表格 |
| address | 地址 |
| form | 表单 |
4.2、内联元素(display:inline)
1、说明
-
和其他元素都在同一行；
-
元素的高、宽、行高以及边距均不可设置
-
元素的高、宽均取决于它包含的文字或图片的大小
-
内联元素只能容纳文本或者其他内联元素
2、常用的行内元素
| 标签名 | 说明 |
|---|---|
| a | 锚点 |
| span | 常用内联容器，定义文本内区块 |
| label | 表格标签 |
| br | 换行 |
| i | 斜体 |
| em | 强调 |
| strong | 粗体强调 |
| textarea | 多行文本输入框 |
4.3、内联块(display:inline-block)
1、说明
-
和其他元素在同一行；
-
元素的高度、宽度、行高及边距可以设置
2、常用的行内块状元素
| 标签名 | 说明 |
|---|---|
| img | 图片 |
| input | 输入 |
五 、基础结构
5.1、网页整体结构
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>5.2、html标签(双标签)
1、作用
用于告诉浏览器这是一个网页, 也就是说告诉浏览器我是一个HTML文档
2、注意
其它所有的标签都必须写在html标签里面, 也就是写在html开始标签和结束标签中间
5.3、head标签(双标签)
1、作用
双标签,用于给网站添加一些配置信息
2、例如
-
指定网站的标题 / 指定网站的小图片
-
添加网站的SEO相关的信息(指定网站的关键字/指定网站的描述信息)
-
外挂一些外部的css/js文件
-
添加一些浏览器适配相关的内容
3、注意
一般情况下，写在head标签内部的内容都不会显示给用户看
5.4、body标签(双标签)
1、作用
双标签,专门用于定义HTML文档中需要显示给用户查看的内容(文字/图片/音频/视频)
2、注意
-
一个html开始标签和一个html结束标签只能有一对body标签
-
默认样式:margin:8px;