HTML5的基础标记，超详细！！

数次拒绝刘亦菲

已于 2022-09-01 10:34:31 修改

阅读量993

点赞数 1

分类专栏： HTML5 文章标签： html5 html css

于 2022-03-09 16:49:53 首次发布

本文链接：https://blog.csdn.net/m0_62951223/article/details/123381609

版权

HTML5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML5定义的网页内容

HTML5结构

<!DOCTYPE html>			//文档类型说明——用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范

<html>				//根标记——用于告知浏览器其自身是一个HTML文档

    <head>			//头部标记——主要用于封装其他位于文档头部的标记，如style、title、meta、link

        <meta charset="utf-8"> <!--声称中文编码-->
		//<meta />标记本身不包含任何内容通过“名称/值”的形式成对的使用其属性可定义页面的相关参数
       	//例如为搜索引擎提供网页的关键字、作者姓名、内容描述，以及定义网页的刷新时间等
        <style type="text/css">
		//<style>标记用于为HTML文档定义样式信息
         <!--定义CSS样式-->  

        </style>

        <title>网站名称</title>

    </head>

    <body>			//主体标记——用于定义HTML文档所要显示的内容，一个HTML文档只能有一个body标记

        网页内容

    </body>

</html>

双标记：
<标记名>内容</标记名>

<标记名>    称为开始标记
</标记名>	 称为结束标记

单标记：
<标记名/>	  指用一个标记符号就能完整地描述某个功能的标记

HTML5的语法

H5语法的宽松性体现在

标签不区分大小写
允许属性值不使用引号

有引号：
<input checked="a" type="checkbox"/>
<input readonly="readonly" type="text" />

无引号：
<input checked=a type=checkbox/>
<input readonly=readonly type=text />

允许部分属性值的属性省略

未省略：
<input checked="checked" type="checkbox"/>
<input readonly="readonly" type="text" />

省略：
<input checked type="checkbox"/>
<input readonly type="text" />

设置页面标题

<title>页面标题名称</title>

用于给网页起名字

定义页面元信息

定义样式信息

style 标记用于为HTML5文档定义样式信息

语法格式：<style 属性="属性值">样式内容<style>

在HTML5中使用该标记，常常定义其属性为type，属性值为text/css，表示使用内嵌式的CSS样式

类比C

HTML	C	作用
< br >	\n	换行
< p>内容< /p>	printf(“内容\n”)	输出内容+换行
< !–内容 -->	/* 内容*/	注释
&nbsp	space	空格

水平线

< hr 属性="属性值"/>

常用属性：

属性名	含义	属性值
align	水平线的对齐方式	left、right、center默认center居中
size	水平线的粗细	像素，默认2px
color	水平线的颜色	单词，十六进制，rgb
width	水平线的宽度	像素值或浏览器窗口的百分比

换行

<br/> 实现强制换行

标题字号

< h1>文本< /h1>

详解：使文本加粗变黑增大，从1–6 字体从大到小

一个页面中只能使用一个h1标记，常常用于网站的Logo部分

粗体

< b> 或者< strong>

b定义粗体文本，strong定义强调文本

<标签名 size=“数字”></标签名>

下划线

< ins> 或者< u>

HTML5不赞成使用u

斜体

< i> 或者< em>

i定义斜体字，em定义强调文本

删除

< s> 或者< del>

HTML5不赞成使用s

图像引用

< img src=“图片URL” >

图像的替换文本属性alt

若某些原因导致图片没法显示，则可以用alt属性告诉用户该图像的信息

图像的宽高

width/height

通常我们会设置一个，另一个按原图比例显示，若设置两个则可能导致图像变形或失真

路径

相对路径：通常以HTML网页文件为起点，通过层级关系描述目标图像的位置
绝对路径：1.如果图片来源于互联网：鼠标右键点击图片，选择"复制图像链接"

2.在硬盘上的真正路径，在硬盘中找到，然后拷贝路径或说带有盘符的路径

路径分类	符号	说明
同一文件夹		图像文件位于HTML文件同一级，如：< img src=“图名”>
下一文件夹	/	图像文件位于HTML文件下一级，如：< img src=“/图名”>
上一文件夹	…/	图像文件位于HTML文件上一级，如：< img src=“…/图名”>

网页中不推荐使用绝对路径，因为网页制作完成之后我们需要将所有的文件上传到服务器

源码标记

< meta 文本>

文本内容不会显示在用户界面(可用于标记，例如维护时间)

自动跳转

< meta http-equiv="refresh"content=“数字”;url=“网址”/>

表示在"数字"时间后跳转到"网址"

超链接

< a href="网址"target=“跳转方式”>超链接名称< /a>

target=“跳转方式” 内容如下

‘_blank’	‘_parent’	‘_self’	‘_top’
在新窗口打开	在上一级窗口打开	在当前窗口打开	在整个窗口打开

图片超链接

< a href=“网址”> (未填写超链接名)

< img src=“图片路径”>< /a>

当然，如果"网址"是一个文件或者压缩包都是可以的(会下载这个文件或压缩包)

如果没有确定链接目标时，可以不填入网址，而当做空链接

锚点链接

点击锚点链接，快速定位到目标内容

<a href="#id名">链接文本</a>

href="#id名"用于指定链接目标的id名称

特殊符号

字符代码	描述	字符
&copy	版权标志	©
&trade	商标标志	™
&lt	小于号	<
&gt	大于号	>
&mdash	下划线	_
&yen	元	¥
&reg	注册标志	®

&nbsp	空格符
&deg	摄氏度	℃
&amp	和号	&
&times/&divide	乘除号	x/÷

颜色

背景颜色

<body bgcolor="颜色">

与CSS样式中的 background-color="颜色" 作用一样

文本

<font color="属性值">文本</font>

对齐方式

<标签名 align=“ 属性值 ”>文本</标签名>

属性值：left(靠左对齐)，right(靠右对齐)，center(居中)

引用外部文件

在<head> 标签中使用<link> 标签可以引用外部文件

语法格式：<link 属性="属性值"/>

属性名	常用属性值	描述
href	URL	指定引用外部文档的地址
rel	stylesheet	指定当前文档与引用外部文档的关系，stylesheet表示定义一个外部样式表
type	text/css或text/JavaScript	引用外部文档的类型分别为CSS样式表或JavaScript脚本

数次拒绝刘亦菲

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5的基础标记，超详细！！

HTML5定义的网页内容HTML5结构<!DOCTYPE html><html> <head> <meta charset="utf-8">  <style type="text/css">  </style> <title>网站名称&
复制链接

扫一扫