前端— html

最新推荐文章于 2024-08-30 14:27:39 发布

m0_45127388

最新推荐文章于 2024-08-30 14:27:39 发布

阅读量216

点赞数

分类专栏：基础

本文链接：https://blog.csdn.net/m0_45127388/article/details/118161998

版权

基础专栏收录该内容

33 篇文章 0 订阅

订阅专栏

介绍：htmi超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。用于搭建我们前端页面结构，本节只介绍常用的盒子（html元素），不介绍各种属性及样式，大家用时可查，且现在开发一般不用原生标签直接开发，都会引入各框架适用的组件库来开发，直接使用组件暴露的属性即可
详见网址：https://www.runoob.com/html/html-headings.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

一、常用html分类解析
1、块级元素
（1）标题 h1-h6
（2）hr 创建水平线（可用于分割内容）
（3）段落 p (若不想创建一个新的段落，只想换行则使用br，它不会前后添加空白行，是属于行内元素)
（4）表格 table
（5）列表 ol li(有序列表) ul li（无序列表）（具体项目中效果用列表提供的样式进行设置即可）
（6）区块元素 div (一般用于组合其他 HTML 元素的容器，浏览器会在其前后显示折行。就是另起一行，但不会自动加间距)
（7）表单 form (原生标签中通过设置input（行内元素）的type属性展示不同的交互框，一般组件库中都会有对应的封装)

特点：
（1）浏览器会自动在块级元素的前后添加空行（即块级元素独占一行，不会与其他元素共用剩余空间），里面内容自动填满父的宽高
（2）块级元素可以设置 width, height属性，【注意：块级元素即使设置了宽度，仍然是独占一行的】，浏览器自动会前后换行的
（3）块级元素可以设置margin 和 padding.

2、行内元素
（1）换行 br
（2）加粗 strong b
（3）斜体 em i
（4）超链接 a （重要属性 href 及target）（也可用于做书签，即点某内容跳转到指定内容。结合id）
（5）图像标签 img （好多人会说行内元素为啥可以设置宽高，其实宽高属性是标签内置的属性，也跟替换元素相关，浏览器根据元素的标签和属性，来决定元素的具体显示内容，img就是替换元素，根据设置的src决定渲染什么）重要属性（src alt height width）
（一般再开发的过程中注意图片的懒加载，避免图片过多时并发执行加载资源，js加载缓慢，性能差，懒加载的原理就是判断是否到了可视区域再进行src赋值）
补充：在项目中图片的地址可使用相对路径也可使用绝对路径，同时也可将图片转为base64，直接设样式直接设样式background-image:url(‘转成的链接’) http://tool.chinaz.com/tools/imgtobase/ 或 https://c.runoob.com/front-end/59（即将图片复制为转换工具中）
（6）文本容器 span (一般用于文本承载的容器，这样可以设置文本的样式)
（7）输入框 input (可替换的行内元素，height/width/padding/margin均可用，效果等于块元素)

特点：
（1）行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化
（2）行内元素设置width, height无效（由元素里的内容撑开宽高）
（3）行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。

3、行内块元素：块级元素和行内快元素都可以转换成行内块元素，三者间也可以相互转换（其实img input的直观表现效果行内块）

特点：
（1）行内块级元素:和其他元素同一行（行内元素特点）
（2）可以设置元素的宽高等（块级元素特点）

⚠️ （1）浏览器渲染页面时会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

二、html5增加的标签的解析（最新html标准，计目的是为了在移动设备上支持多媒体）（ie8及之前的大多不支持）
HTML5 的改进
新元素(添加了一些新元素，很多语义标签还可以自己定义标签)
新属性
完全支持 CSS3
Video 和 Audio
2D/3D 制图
本地存储
本地 SQL 数据
Web 应用
HTML5 应用
本地数据存储
访问本地文件
本地 SQL 数据
缓存引用
Javascript 工作者
XHTMLHttpRequest 2
添加的元素
（1）canvas. 绘图

（2）audio 音频
（3）embed 嵌入的内容（可嵌入html页面、图片、音频等）
（4）track 为音频获视频等规定外部展示文本
（5）video 视频

（6）article 定义独立于文档的内容部分
（7）aside
（8）内联svg(可伸缩矢量图形 )
（9）math 用于书写数学符号和公式的置标语言
（10）drag drop拖拽（具体使用时设置拖拽的属性及拖拽事件）
（11）定理定位 Geolocation（通过Geolocation API 获得用户的地理位置）
（12）input （扩展了很多输入类型 type=“color” date datetime datetime-local email month number等）（对表单属性也有扩展）
（13）语义元素