目录
1.HTML的基础认识
1.1 什么是HTML
1.2 vscode快速生成基本骨架
1.3 HTML基本骨架的含义
2.HTML的基础语法
2.1 HTML的注释
2.2标签的分类
(1) HTML标签分为三类：块状元素、行内元素和行内块元素。
(2) 元素模式的转换
2.3 标题标签
2.4 段落标签
2.5图像标签
2.6超链接标签
2.7锚点链接
1.HTML的基础认识
1.1 什么是HTML
HTML是一种超文本语言，HTML之所以称为超文本标记语言，不仅是因为他通过标记描述网页内容，同时也由于文本中包含了所谓的“超级链接”，通过超链接可以实现网页的跳转。从而构成了丰富多彩的Web页面。
- html标签：网页整体
- title 标签：网页的标题
- head 标签：网页的头部
- body标签：网页的身体
1.2 vscode快速生成基本骨架
shift+！+tab可以快速生成HTML的基本骨架。
1.3 HTML基本骨架的含义
<!DOCTYPE html>
<!-- 声明文档类型 -->
<!-- ctrl+/添加或删除注释 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 网页内部编码格式 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 针对不同的ie浏览器版本 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 宽度等于设备宽度，针对移动端设备 -->
<meta name="keywords" content="">
<meta name="description" content="">
<!-- SEO 优化时加搜索关键字和搜索描述-->
<title>第一个网页</title>
<!-- html:5也可以快速生成骨架 -->
</head>
<body>
</body>
</html>2.HTML的基础语法
2.1 HTML的注释
格式：
<!-- -->vscode中ctrl+/可以快速生成注释。
2.2标签的分类
(1) HTML标签分为三类：块状元素、行内元素和行内块元素。
- 块状元素：一个元素占一行，设置宽度和高度生效，一组标签排不满一行另一组标签不会自动往后排，div标签，h1-h6标题标签，from表单，header头部内容，footer页脚，table表格，ol有序列表，ul无序列表，dl自定义列表，li列表元素标签，iframe内联框架，nav导航，section文档标签是常用块状元素
- 行内元素：设置宽高不生效，由自身内容决定宽度，一行可以放多个元素，一组标签排不满另一种自动补上。a链接标签，b/strong加粗标签，small小字体标签，i斜体标签，label，span，sub，sup，textarea，big，em都是常用的行内元素。
- 行内块元素：设置宽度和高度生效，一组排不满一行，另一组会自动往后排，
- 行内块元素默认自带一个很小的间隙，后续可以通过设置浮动将这个间隙取消掉。
- 在编写代码时如果把两个相邻的行内块元素或者行内元素按回车键分开，那么页面中会显示两个元素中间有非常小的一个间隔，如果将两个行内块元素或行内元素的代码写在一行则不会产生这种现象，
- img图片标签，input输入框标签是常用的行内块元素。
-
行内元素居中到父元素中：text-align:center， 块状元素左右对齐可以用margin:auto;
-
标签嵌套时尽量用块状标签套行内标签。
(2) 元素模式的转换
- 行内转块级：display:block;
- 块级转行内：display:inline;
- 转换为行内块：display:inline-block;
2.3 标题标签
格式：
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>标题标签是双标签，h1到h6字号逐渐变小，优先级逐渐降低，默认字体加粗， 自带外边距， 是块状元素（设置宽高生效，一组标签排不满一行另一组标签不会自动往后排）。
通常在一个页面中我们只使用一次h1标签，可以多次使用h2标签。
2.4 段落标签
格式:
<p>我是一个段落</p>段落标签是双标签，网页内 默认字号16 网页识别最小字号12，是块状元素。
2.5图像标签
格式：
<img src="" alt="" title="">图片标签是单标签 行内块元素,设置宽高生效，一组排不满一行，另一组会自动往后排。
- src="" 双引号内写入的是图片的相对位置 ../表示返回上一级 ； /表示进入下一级。
- alt="" 当图片不能正常显示时对图片的文字描述。
- title="" 无论图片是否正常显示，当鼠标移动到图片上时对图片的描述。
- 当只设置宽或高时图片会自动进行等比例缩放，当同时设置宽高时图片可能会变形。
2.6超链接标签
格式：
<a href=""></a>超链接是双标签 行内元素
- href后跟链接地址（相对地址，或者是http://开头的网址）
- 当href="#"时点击超链接页面刷新，重新加载页面。
- 当href="javascript:void(0)"时点击超链接页面不刷新，是一种较为规范的写法。
- target="_self"和系统的默认设置都是原窗口打开页面
- target="_blank" 是在新窗口打开页面
- 设置宽高不生效，需要转换为块级元素或者行内块元素（display:inline;或display:inline-block;）
- 在顶部加<base target="_blank">可以让页面中所有超链接<a>都在新页面中打开。
2.7锚点链接
锚点链接用于长页面中，可以直接从页面的头部位置跳转到下方的具体内容。锚点链接有两种实现方式：
方式一：
-
设置一个锚点链接<a href="#one"></a>；（注意：href属性的属性值最前面要加#）
-
设置锚点的位置 <h3 id="one"></h3>；在要跳转到的位置的标签中添加一个id属性，属性值与①中href的属性值一样，不加#
<a href="#one">方法一</a>
<h3 id="one">设置锚点方法一</h3>
方式二：
-
设置一个锚点链接<a href="#two"></a>；（注意：href属性的属性值最前面要加#）文章来源：https://www.toymoban.com/news/detail-773454.html
-
在页面中需要的位置设置锚点<a name="two"></a>；（注意：a标签中要写一个name属性，属性值要与[1]中的href的属性值一样，不加#）文章来源地址https://www.toymoban.com/news/detail-773454.html
<a href="#two">方法二</a>
<a name="two">设置锚点方法二</a>到了这里，关于web学习笔记（一）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
