【视频+图文讲解】HTML基础2-html骨架与基本语法
图文教程
基本骨架
举个例子，下图所展示的为html的源代码
-!DOCTYPE：表示文档类型（后边写的html表示文档类型是html）；其中“！”表示声明
只要是加这个声明标签的，浏览器就会把下边的源代码当作html解析
<html>：整个网页都需要被<html></html>包裹
-lang：表示网站的主体语言，如下图所示
-<head></head>：表示网页配置，比如配置字符类型为utf8类型（字符类型的区别如下图所示，需要补充的是若网页是面向国际化的用utf-8，如果是面对国内的用gbk字符集）
-meta：表示基本配置，写在<head>标签内
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这段代码是用于设置网页的视口（viewport）属性，主要是为了让网页在移动设备上能够自适应屏幕大小并正常显示。（对应了网页的基本配置）效果对比如下
不加这段代码
加了这段代码（明显针对手机开启了自适应的模式）
-<title>标签：用来管理浏览器选项卡的名称
-<body>标签：设置我们在浏览器能看到区域的网页内容，比如我们之前举例的“pikachu”按钮
补充
keywords关键字：<meta>标签中的keywords关键字的用途：搜索引擎抓取页面的原理（通过下面的关键词搜索进行抓取网站）
description关键字：同样的也是meta标签中的，用来描述网站的信息
基本语法
标签格式规则
- 标签名必须书写在一对尖括号<>内部
- 标签分为单标签和双标签，双标签必须成对存在，有开始标签和结束标签
- 结束标签必须有关闭符号/
- 根据标签内部存放的内容不同，将不同的标签划分为两个级别
其中双标签必须成对存在，有开始标签和结束标签
| 单标签 | 双标签 |
| img | h1-h6 |
| br | div |
| hr | span |
| p | |
| a | |
| ul+li |
<br>：换行
<hr>：表示水平分割线，用于分割内容
<div>：定义页面中的块级元素，用于分组或布局
<ul>：创建无序列表 <li>：列表项，用于放置具体内容
无序列表如下图所示
<p>：换行
<span>：改变字体颜色、字体大小、字体样式，添加特定的标记，使用JavaScript来操作<span>元素，实现一些动态效果或交互功能
根据标签的种类区分两个等级：容器级，文本级
容器级：元素内部除了可以存放文本外，还可以嵌套各种类型的标签
文本级：元素内部只能存放文本或文本标签
| 容器级标签 | 文本级标签 |
| div,ol,ul,li,dl,dt,dd,h1-h6 | span,img,b,u,i |
标签属性
概念：赋予标签一些特殊性质，给标签加上某些性质就相当于给标签赋予了职能（前提是标签必须具备这些职能）————比如：<a></a>标签具备链接性质，后边的属性value可以填上一些网址链接，这样用户可以通过页面点击链接，当然就算不填网址，这个标签依然具备链接属性，只不过并不会跳转网页
书写位置：在开始标签或单标签的标签名后面，添加一个空格，空格后边书写属性（href=x）
--href是键（key），x是属性值（value）
href：指定超链接目标的URL，是<a></a>标签专属属性
实例：
<a href="www.baidu.com" title="我是title"></a>
像上句这样连续写两个属性，要用空格隔开
注意：文字的位置是根据标签种类决定
- 标签与其他标签之间对空白、换行、缩进等不敏感，有没有空白不影响浏览器加载效果
- 在上传代码过程中，为了提高传输速度，可以将代码进行压缩，删除多余的空白，目的就是为了压缩文件的大小
- 标签之间还有嵌套关系
空白折叠现象：不会因为一直空格而显示很多空白（除非用标签 进行空格留白）
视频教程
哔哩哔哩（B站）搜索框中输入“uid=3546393096489381”即可
用户：star010_