HTML核心基础笔记
HTML
先导知识
软件架构
C/S服务器端/服务器- 一般我们所使用的软件都是C/S架构
- QQ、360、office
- C：
客户端，用户通过客户端来使用软件 - S：
服务器，服务器负责处理软件的业务逻辑 - 特点：
- 软件使用前必须安装
- 软件更新时，服务器和客户端同时更新
- C/S架构的软件不能跨平台使用
- C/S架构的软件客户端和服务器通信采用的是
自有协议，相对安全
B/S浏览器/服务器本质上也是C/S，只不过B/S架构的软件，使用浏览器作为软件的客户端。- B/S架构软件通过浏览器访问网页的形式来使用软件
- 例如：京东、淘宝、知乎、新浪微博
- 特点
- 软件不需要安装，使用浏览器访问指定网址即可
- 软件更新，客户端不需要更新
- 软件可以跨平台
- 客户端和服务器之间通信采用通用的
HTTP协议，相对不安全 - 特别提醒
https网络安全协议
结构
- HTML用于描述页面的结构
表现
- CSS用于控制页面中元素的样式
行为
- JavaScript用于响应用户操作
HTML
Hypertext Markup Language
超文本标记语言
HTML使用标签的形式来标识网页中的不同组成部分
所谓超文本指的是超链接
纯文本 在纯文本编辑器中编写的内容，网页就是使用纯文本编写
纯文本中只能保持文本内容
为了让浏览器知道我们使用的是HTML版本，我们需要在网页的最上边添加一个doctype声明，来告诉浏览器网页的版本
HTML的语法规范
- HTML中不区分大小写，但是我们一般都使用小写
- HTML中的注释不能嵌套
- HTML标签必须结构完整，要么成对出现，要么自结束标签
- 但发现标签不成对出现也无大碍
<p>测试</p>
<p>缺少结束标签测试
原因：
浏览器会尽最大努力正确解析页面，你所有不符合语法规范的内容，浏览器都会自动修正。但有些情况会修正错误
- HTML标签可以嵌套，但不能交叉嵌套
- HTML标签中的属性必须有值，且值必须加引号（双引号和单引号都可以）
必知必会
文档声明
<!DOCTYPE html>
声明当前的网页是按照HTML5标准编写
如果不写文档声明，则会导致有些浏览器进入怪异模式，进入怪异模式后，浏览器解析页面会导致页面无法正常显示
怪异模式
为了兼容一些旧的页面，浏览器中设置了两种解析模式：
- 标准模式（Standards Mode）
- 怪异模式（Quirks Mode）
怪异模式解析网页时会产生一些不可预期的行为，避免的最好方式是在页面中编写正确的doctype
根标签
<html> </html>
一个页面中只能有且只有一个根标签，网页中的所有内容都写在html标签
子标签
在根标签<html> </html>内的所有标签都是子标签
<head> </head> 帮助浏览器解析网页
<title> </title>标题标签，默认会显示在浏览器的标题栏中
搜索引擎在检索页面时，会首先检索title标签中的内容
它是网页中对于搜索引擎来说最重要的内容，会影响到网页在搜索引擎中的排名
<body> </body>主体标签 网页中可视内容都在这里面
<!-- -->注释标签
我们可以通过编写注释来对代码进行描述，从而帮助其他开发人员工作
标签的属性
属性可以通过属性来设置标签如何处理标签中的内容
在开始标签中添加属性
属性需要写在开始标签中，实际上是一个名值对结构
属性总是以名称/值对的形式出现，比如：name="value"
属性名="属性值"
适用于大多数 HTML 元素的属性
| 属性 | 描述 |
|---|---|
| class | 为html元素定义一个或多个类名（classname）(类名从样式文件引入) |
| id | 定义元素的唯一id |
| style | 规定元素的行内样式（inline style） |
| title | 描述了元素的额外信息 (作为工具条使用) |
顺便一提，Markdown表格语法
-
-:表示内容和标题栏居右对齐
-
:-表示内容和标题栏居左对齐
-
:-:表示内容和标题栏居中对齐
一个标签中可以同时设置多个属性，属性之间需要使用空格隔开
<h1>
<center><font size="" color="red">What？你在说什么？</font></center>
</h1>
### 元素 我们将一个完整的标签称为元素 元素即标签，标签即元素
乱码问题
乱码原因：
- 计算机中保存的任何内容，最终都需要转换为0 1二进制编码来保存，包括网页只的内容
- 在读取内容时，需要将二进制编码再转换为内容
编码
依据一定的规则，将字符转换为二进制编码的过程
解码
依据一定的规则，将二进制编码转换为字符的过程
字符集
编码和解码采用的规则，成为字符集
常见字符集：
- ASCII
- ISO-8859-1
- GBK
- GB2312
- 中文系统默认编码
- UTF-8
- 万国码，支持所有文字
- ANSI
- 自动以系统默认的编码来保存文件
乱码根本原因： 编码和解码采用的字符集不同
在中文系统的浏览器中，默认使用的是GB2312进行解码
<meta charset="utf-8" />
用来告诉浏览器，网页所采用的编码字符集
charset字符集
meta标签用来设置网页的一些元数据，比如字符集、关键字、简介
meta是一个自结束标签
### 六级标签 使用HTML标签时，关心的是标签的语义，我们使用的标签都是语义化标签
6级标题中，h1最重要，表示一个网页中的主要内容，h2-h6重要性依次降低
对于搜索引擎，h1的重要性仅次与title，搜索引擎检索完title会立即查看h1中的内容
h1标签会影响到页面在搜索引擎中的排名，页面只能写一个h1
一般页面中标题比起爱你只使用h1,h2,h3，之后的基本不使用
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
### 段落标签 段落标签用于表示内容中的一个自然段
p标签中的文字默认会独占一行，并且段与段之间会有一个间距
<p> </p>
### 换行标签 在HTML中，字符之间写再多空格，浏览器也会变成一个空格解析，换行也会变成一个空格解析
因此使用br标签来表示一个换行
<br />是一个自结束标签
<p>
锄禾日当午，<br>
汗滴禾下土。<br>
谁知盘中餐，<br>
粒粒皆辛苦。
</p>
<hr /> 可以在页面中生成一条水平线
在HTML中，一些如< >中特殊字符不能直接使用,需要使用特殊字符。
特殊字符称为实体（转义字符）
浏览器解析到实体时，会自动将实体转换为其对应的字符
实体的语法：
&实体的名字;
- >
< - <
> - 空格
- 版权符号
©
a<b>c
a<b>c
©空格测试 空格测试
©空格测试 空格测试
标签中不能以数字开头 如<1>
img标签 自结束标签
属性：
- src 设置一个外部图片的路径
- 相对路径
- 相对于当前资源所在的目录的位置
- 绝对地址
- 相对路径
- alt 可用用来设置图片不能显示时，对图片的描述
- 搜索引擎通过alt属性来识别不同的图片，如果不写alt属性，则搜索引擎不会对img中的图片进行收录
- title 是鼠标移到图片上的出现的文字
- width 用来修改图片的宽度，一般使用px作为单位
- height 用来修改图片的高度，一般使用px作为单位
- 宽度和高度两个属性如果只设置一个，另一个也会同时等比例调整大小
- 一般开发中除了自适应的页面，不建议设置width和height
<img src="图片的路径" alt="蔡徐坤 鸡你太美" >
绝对地址
在任何情况下，都可以找到的地址
相对地址
必须知道当前所在，才能找到
../表示返回上一级目录，返回几级目录就写几个
图片格式
- JPEG(JPG)
- JPEG图片支持的颜色比较多，图片可以压缩，但不支持透明
- 一般使用JPEG来保存照片等颜色丰富的图片
- GIF
- 支持的颜色少，只支持简单的透明，支持动态图
- 图片颜色单一或者是动态图时可以使用gif
- PNG
- 支持的颜色多，并且支持复杂的透明
- 可以用来显示颜色复杂的透明图片
图片使用原则：
- 效果不一致，使用效果好的
- 效果一致，使用小的（文件大小）
meta标签
使用meta标签还可用来设置网页的关键字keywords
<meta name="keywords" content="HTML5,JavaScript,.../>
关键字更容易被搜索引擎检索到
搜索引擎在检索页面时，会同时检索页面中的关键字和描述，但这两个值不会影响页面在搜索引擎中的排名
meta标签还可用来指定网页的描述description
<meta name="description" content="发布的是前端相关的内容"/>
使用mata可以用来做请求的重新定向
<meta http-equiv="refresh" content="5;url=https://www.bilibili.com/"/>
5秒以后跳转页面
语法格式
<meta http-equiv="refresh" content="时间(多少时间后跳转 单位S);url=目标路径/"/>
内联框架
内联框架可以引入一个外部的页面
使用iframe来创建一个内联框架
<iframe src="001博客/index.html" width="1920 px" height="1080px">
</iframe>
在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎检索
超链接
使用超链接可以让我们从一个页面跳转到另一个页面
使用a标签来创建一个超链接
属性：
<a> 元素最重要的属性是 href 属性，它指示链接的目标。
href:指向连接跳转的目标地址，可以写一个相对路径也可以写一个完整的地址
百度一下<a href="https://www.baidu.com/">百度一下</a>
target规定在何处打开链接文档。
添加target属性
- _blank 在新的窗口中打开连接
- _parent
- _self 在当前窗口中打开（默认值）
- _top
- framename
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
将跳转页面指定在内联框架中打开
设置一个内联框架的name属性值，链接将会在指定的内联框架中打开
<iframe src="001博客/index.html" width="500px" height="500px" name="baidu">
</iframe>
<a href="https://www.baidu.com/" target="baidu">百度一下</a>
创建超链接时，如果地址不确定可以直接写一个**#**作为占位符
<a href="#">这是我的第一篇博客</a>
#号的作用
<center>
<a href="#">回到顶部</a>
</center>
如果将链接地址设置为#，则点击超链接以后，会自动跳转到当前页面的顶部
id属性
每一个元素都可以设置，该属性可以作为标签的唯一标识
注意： id属性在同一个页面中只能有一个，不能重复
跳转到id所在位置，想去哪儿就在href中写 #id属性值
<center>
<a href="#bottom">下到底部</a>
</center>
<center>
<a href="#" id="bottom">回到顶部</a>
</center>
<center>
<a href="mailto:751594278@qq.com">联系我们</a>
</center>
当点击这个超链接时，会默认打开计算机中的默认电子邮箱客户端
href="mailto:邮件地址">
扫一扫
1870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
