高质量HTML核心基础笔记(个人整理)

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中,一些如< >中特殊字符不能直接使用,需要使用特殊字符。
特殊字符称为实体(转义字符)

浏览器解析到实体时,会自动将实体转换为其对应的字符

实体的语法:
&实体的名字;

  • > &lt;
  • < &gt;
  • 空格 &nbsp;
  • 版权符号 &copy;

a<b>c

a&lt;b&gt;c

©空格测试    空格测试

&copy;空格测试&nbsp;&nbsp;&nbsp; &nbsp;空格测试

标签中不能以数字开头 如<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:邮件地址">

写在最后

HTML参考手册

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值