Html5知识点总结01

码上来源码

已于 2022-03-21 16:34:32 修改

阅读量1.7k

点赞数 10

分类专栏：前端文章标签： html5

于 2022-03-21 15:10:15 首次发布

本文链接：https://blog.csdn.net/weixin_46798583/article/details/123632078

版权

前端专栏收录该内容

8 篇文章 2 订阅

订阅专栏

web的三大基石

url
统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
HTTP
超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法
HTML
超文本标记语言格式化展示网络信息的语言，用于网页的制作，主要是提升用户和数据之间进行交互的体验

html的基本结构

定义：
DOCTYPE HTML 告诉浏览器写的是html文件
html标签：页面中最大的标签，我们通常称之为根标签
head标签:文档中的头部，我们通常在其中设置标签title。
title标签:让页面拥有一个属于自己网页的标题。
body标签：文档的主体，元素包含了文档的所有内容，页面内容中基本都是放在body里面。

常见的语义化标签

元素	说明
article	定义独立的来自外部的文档，如新闻投稿、博客文章、论坛帖子等
aside	一般用于网页中的侧边栏或者文章内部的标注框
header	页面的头部区域，通常包括网站logo、链接导航、搜索框、banner
nav	页面的导航链接区域
main	定义文档主要内容
section	定义文档的区域
footer	文档的页脚
mark	标记、突出显示文本
ul	无序列表
form	创建HTML表单
button	定义按钮
i	用于表示区分普通文本的其他文本，浏览器通常会将其内容显示为斜体

一、head头(head中的标签是给浏览器看的)

head标签中一般可以包含以下标签：<title>、<style>、<script>、<link>、<meta>、<base>

1、`<title> </title>`

用于定义文档的标题
该标题会出现在浏览器窗口的标题栏或状态栏上
把该页面加入收藏夹或书签列表时，该标题为页面链接的默认名称

2、`<link/>`

用于定义文档与外部资源的关系，最常用于链接样式表，也常用于给标题添加小图标
<link/>是空元素，仅包含属性，只能存在于head部分

属性	属性值	描述
href	URL	设置目标链接的文件路径
rel	stylesheet、icon、sidebar、prev等	规定当前文档与链接文档之间的关系
type	MIME_type	目标连接文档的MIME类型

3、`<style></style>`

用于给文档引入CSS样式信息，将样式表包含在style开始与结束标签之间

4、`<script></script>`

用于给页面添加脚本
可以直接在script开始和结束标签之间包含JavaScript脚本)

<script>
//javaScript代码
</script>

也可以通过script的src属性链接外部脚本文件

`<script src="./xx.js"></script>`

5、`<meta/>`

提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词
name和content属性通常一起使用，以键值对的方式给文档提供元数据，其中name的属性值作为元数据的名称，content作为元数据的值
keywords和description这两个名称使用频率最高，是搜索引擎优化的主要方式之一

名称	值	描述
keywords	关键字	描述网页关键字，使用逗号分隔
description	描述内容	网站主要内容的简短描述
author	作者	描述网站作者

viewport
width viewport视口宽度，设置为device-width表示为设备的宽度
height viewport视口高度
maximum-scale 最大缩放比例
initial-scale 初始缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放
/定义viewport的初始大小，仅用于移动设备/
charset属性用于指定文档的字符编码。常用值为UTF-8、ISO-8859-1等
http-equiv属性可用于模拟一个HTTP响应头，与content属性搭配使用，常用属性值如下：
content-type：规定文档的字符编码，等同于charset属性设置字符编码
default-style：设置默认CSS样式表组的名称
refresh：设置文档自动刷新的时间间隔，content只包含一个正整数，则为重新载入页面的时间间隔（秒），content包含一个正整数和【url=XXX】格式的字符串时，该正整数则是重定向到指定链接的时间间隔（秒）

6、`<base />`

用于为页面中的所有相对链接设置默认URL或默认target属性

<base href="http://baidu.com" target="_blank"/>

二、 body中的标签

1.标题标签

eg:

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.段落标签

<p>...</p>

3.换行标签

<br/>

4.水平线标签

<hr/>

5.字体样式标签

加粗：<strong>…</strong>
斜体：<em>…</em>

6.排版标签

<b></b>、<strong></strong>起到的是选中文本加粗的效果
<i></i>、<em></em> 选中文本斜体的效果
<u></u> 选中文本加下划线的效果
<del></del> 选中文本加删除线的效果
<sub></sub>选中文本下标的效果
<sub></sub>选中文本上标的效果
<small></small>选中文本变小效果

7.注释和特殊符号

显示	实体名称	实体编号	说明
空格	` `	` `	半角不换行的空格，相当于按下键盘space键产生的空格，受字体影响，不同字体表现一致
空格	`&ensp;`	` `	半角空格，占1/2个中文字符宽度，基本不受字体影响，不同字体空格宽度表示一致
空格	`&emsp;`	` `	全角空格，占1个中文字符宽度，基本不受字体影响，不同字体空格宽度表示一致
<	`<`	`<`	小于号
>	`>`	`>`	大于号
&	`&`	`&`	&符号
"	`"`	`"`	双引号
’	`------`	`'`	单引号
©	`©`	`©`	版权符号
™	`™`	`™ 或 `	商标符号
®	`®`	`®`	注册商标符号
$	`------`	`$`	美元符号
¥	`¥`	`¥`	人民币符号
×	`×`	`×`	乘号
÷	`÷`	`÷`	除号

8.图像标签

写法:
<img src="图片路径/图片名称" alt="图像的替代文字 " title="鼠标悬停提示文字 " width="x" height="y" (图像高度默认是像素px 也可是%)/>
属性：
1、路径src（一定存在）
相对路径：针对我html文件当前位置，（比如 src="/i/image.gif"）
a、如果资源和html处于同一目录，那么直接写资源名称即可；
b、如果资源文件在html的上级目录，则需要在找资源前加上…/
绝对路径：指向其他站点（比如 src=“http://www.example.com/”）
表示从根据经进行查找，
a、对于linux服务器来说，根路径为 /
b、对于windows服务器来说，对应的就是盘符路径。
2、title:鼠标悬停在图片上时，图片显示的文字。
3、alt属性：图片未显示出来的时候直接显示的文字。
alt属性和title属性区别：
alt属性实质就是通过文字来代替图片的内容;而title属性的实质是对图片进行描述或者说注释。
4、height 和 width 属性设置图像的尺寸
值：
1. pixels 以像素为单位的高度或宽度值。（默认）
图片不会跟着浏览器的窗口变化而变化
2. percent 以包含元素的百分比计的高度或宽度值。
图片会跟着浏览器的窗口变化而变化
5、align 属性定义了图像相对于周围元素的水平和垂直对齐方式。
值：
left 把图像对齐到左边
right 把图像对齐到右边
middle 把图像与中央对齐
top 把图像与顶部对齐
bottom 把图像与底部对齐（默认）

9.超链接（a标签）

超链接可以是一个字、一个词、一个图，你可以点击这些内容跳转到新的文档或者当前文档中的某个部
分。
写法：
<a href="">...</a>
属性：target="_blank"在新的标签页打开href中的地址;

<a> 标签定义超链接，用于从一张页面链接到另一张页面。
	<a> 元素最重要的属性是 href 属性，它指示链接的目标。
	在所有浏览器中，链接的默认外观是：
	1. 未被访问的链接带有下划线而且是蓝色的
	2. 已被访问的链接带有下划线而且是紫色的
	3. 活动链接带有下划线而且是红色的

锚链接
1.从A页面的甲位置跳转到本页中的乙位置
2.从A页面的甲位置跳转到B页面中的乙位置
创建步骤

创建跳转标记
<a name="marker">乙位置</a>
创建跳转链接
<a href="#marker">甲位置</a>

功能性链接

<a href="mailto:1263521400@qq.com">联系我们</a>

在这里插入图片描述

10.行内元素和块元素

块元素
无论内容多少，该元素独占一行（p、h1-h6…）
行内元素
内容撑开宽度，左右都是行内元素的可以排在一行(a、strong、em…)
示例：

   <p>我是p元素</p>
    <h1>我是标题h1</h1>
    <a href="#">我是超链接a元素</a>
    <strong>我是strong元素</strong>

码上来源码

关注

10
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
1
评论
Html5知识点总结01

html5-01知识点总结
复制链接

扫一扫

专栏目录