HTML基础

lerrel1

已于 2023-07-22 14:06:47 修改

阅读量70

点赞数

文章标签： html 前端

于 2023-07-12 20:58:08 首次发布

本文链接：https://blog.csdn.net/lerrel1/article/details/131689851

版权

这里写自定义目录标题

HTML基础笔记

HTML基础笔记

一.HTML前瞻

1.1四大内核及五大浏览器

Trident（也称IE内核）、webkit、Blink、Gecko。

IE浏览器内核：Trident内核，也是俗称的IE内核；
Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核现在是Blink内核；
Firefox浏览器内核：Gecko内核，俗称Firefox内核；
Safari浏览器内核：Webkit内核；
Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

1.2页面的构成

结构(Structure):html

表现(Presentation):css

行为(Behavior):javascript(脚本语言，用来给页面添加动态效果和动态交互)

1.3B/S和C/S

B/S结构（Browser/Server，浏览器/服务器模式）

优点：不用安装专门的软件，常见为各种网页，在电脑上使用浏览器就行，常见的有淘宝，京东，百度

C/S结构（Client/Server，客户端/服务器开发模式）

需要安装专用的客户端，常见为各种软件

1.4URL

它从左到右由下述部分组成：

协议：http通信协议

服务器地址（host）：指出WWW页所在的服务器域名。

端口（port）：有时（并非总是这样），对某些资源的访问来说，需给出相应的服务器提供端口号

路径（path）：指明服务器上某资源的位置（其格式与DOS系统中的格式一样，通常有目录/子目录/文件名这样结构组成）。

与端口一样，路径并非总是需要的。

常见的URL：http 超文本传输协议 https安全超文本传输协议 ftp file

###1.5 长度单位

1.5.1绝对长度单位

px in cm mm

绝对单位不会因为视口的改变而发生改变，是直接固定下来的一个长度

1.5.2相对字体的长度

em:相对于当前元素的font-size值，font-size值发生改变em最终值也会发生改变

rem: 相对于根元素的font-size值，font-size值发生改变rem最终值也会发生改变

1.5.3百分比长度单位

vw：是可视区宽度单位。1vw等于可视区宽度的百分之一。相对于视口的百分比

vh：和vw单位一样，不同的是vh是相对于可视区的高度。

vmin：值是当前vw和vh中较小的值。

vmax：值是vw和vh中的较大的值。

1.5.4 离奇的长度单位

百分比

以百分比为长度单位，是相对于父元素的长度值，如果没有父元素，则参考的是body

二html标签及属性语法

2.1标签语法规则

2.1.1 html标签是由尖括号包围的关键词

2.1.2 html标签通常是成对

2.1.3 一对标签中第一个是开始标签，第二个标签是结束标签。HTML元素以开始标签起始，以结束标签终止。

2.1.4某些HTML元素具有空内容

2.1.5大多数HTML元素可拥有属性

2.2属性语法规则

2.2.1HTML 元素可以设置属性

2.2.2属性可以在元素中添加附加信息

2.2.3属性一般描述于开始标签

2.2.4属性总是以名称/值对的形式出现，比如：name=“value”。

2.3html5的语法变化

2.3.1标签不再区分大小写

2.3.2元素可以省略结束标签

2.3.3允许省略属性值的属性(不是所有属性)

2.3.4允许属性值不使用引号

注意：编写代码时要用小写，标签与符号成对出现，这样也会使代码页面看起来整齐整洁。

不能省略结束标签，不要省略属性值的引号；但是可以省略属性值。

三.HTML标签分类

3.1head标签

head标签的子标签

1 base标签：可以指定文档中所有链接的跳转路径慎用！

如果在链接中指定了跳转的路径，就使用指定的路径，否则使用base中定义的路径

2 link标签：通过link标签可以引入外部样式表，还可以改变浏览器页签的图标

3 script标签：可以引入外部的js文件，还可以在当前页面编写js脚本

4 title标签：定义文档的标题，也是head部分唯一必需的元素

5 meta标签：

指定字符集

页面描述

关键字

meta标签中的content不会显示在页面上，但会被浏览器解析，可以提供给搜索引擎，有利于**SEO**

3.2html基础标签

3.2.1块级元素

块级元素的特点：独占一行，可以设置宽高

1.1独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布

1.2可以直接控制宽度、高度以及盒子模型的相关css属性

1.3在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度

1.4在不设置高度的情况下，块级元素的高度是它本身内容的高度

常见的块级元素

div 常用块级容器	h1~h6 标题标签	hr 水平分隔线
ol 有序列表	ul 无序列表	li 列表项
dl 自定义列表	dt 自定义列表项	dd 定义描述
table 表格	p 段落	form 交互表单

h标签：表示标题，h1~h6字号依次减小。标题标签默认有加粗效果，还有间隙。

div元素：可以起容器的作用，本身不具备任何样式效果，可以后期通过css来设置样式

div元素常用于大块元素的布局
3.2.2行内元素

行内元素的特点（有多大占多大，不可以设置宽高）

2.1和其他内联元素从左到右在一行显示标签

2.2不能直接控制宽度、高度以及盒子模型的相关css属性，但是直接设置内外边距的左右值是可以的

2.3内联元素的宽高是由本身内容的大小决定（文字、图片等）

2.4内联元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）

常见的行内元素

span 常用内联容器，定义文本内区块	a 锚点，超链接	b 加粗
strong 加粗强调	i 斜体	em 斜体强调
del 文档中已被删除的文本	br 强制换行	u 下划线
textarea 多行文本输入框	input 输入框	select 下拉列表
sub 下标 sup 上标	small 小字体文本

span标签：属于行内元素，本身不具备任何特殊样式，可以后期通过css为其设置样式

br标签：在html中如果想让文本换行，直接通过回车是无效的，需要通过br标签来进行换行

一个br标签代表一个换行，多个br标签代表多个换行，在真正的开发过程中，

如果要实现中间的间距效果不推荐直接使用br，可以后期通过css来进行处理

br标签属于单标签

a标签（超链接）

harf属性表示要跳转的链接地址，如果是一个网址，则前面必须加上协议（http:// https:// ）

如果想跳转至本项目中的其他页面，则直接根据路径即可

链接可以是一个图片，也可以是一个邮箱地址（通过mailto:邮箱地址，可以调取本地电子邮箱相关的应用）

属性	值	描述
href	URL	规定链接指向的页面的 URL。
target	-self	target属性的默认值为-self，表示在当前页面中打开新页面
target	-blank	blank表示在新窗口中打开页面，原页面依然保留（典型的应用场景：商品列表中跳转至商品详情页）

锚点定位

方法1：

1.在要跳转的目标处进行埋点（）

2.在点击的地方添加超链接

方法2：

1.在要跳转的目标处进行埋点（<标签 id=“id名称”></标签>）

2.在点击的地方添加超链接

点击链接后，URL会在后面添加#锚点名（id名）

3.2.3行内块元素

行内块元素的特点（有多大占多大，可以设置宽高）

3.1元素排列在一行

3.2宽度默认由内容决定