欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

HTML基础标签(上)

程序员文章站 2022-06-22 17:03:01
HTML语法规范基本语法HTML标签是由尖括号包围的关键词,例如HTML标签通常是成对出现的,例如称为双标签,分别叫开始标签跟结束标签。当然也有特殊的单个标签，例如,称为单标签。标签关系关系可以分为两类：包含关系跟并列关系包含关系并列关系基本结构标签名定义说明...

HTML语法规范

基本语法

HTML标签是由尖括号包围的关键词,例如<html>
HTML标签通常是成对出现的,例如<html></html>称为双标签,分别叫开始标签跟结束标签。
当然也有特殊的单个标签，例如<br />,称为单标签。
标签关系
关系可以分为两类：包含关系跟并列关系
包含关系

<head>
	<title></title>
<head>

并列关系

<head></head>
<body></body>

基本结构

标签名 定义 说明
html HTML标签 页面中最大的标签,称为标签
head 文档的头部 在head中必须要设置的标签是title
title 文档的标题 让页面有一个属于自己的网页标题
body 文档的主体 包含文档的所有内容，页面内容基本都放到body里面 
<html>
	<head>
		<title>页面标题</title>
	</head>
	<body>
		HelloWord!
	</body>
</html>

<!DOCTYPE html> 文档声明标签，告诉浏览器这个页面采用html5版本显示页面
<html lang="en">告诉浏览器这是一个英文网站，本页面采用英文来显示
<meta charset="UTF-8" />必须写，采取UTF-8来保存文字，不写就会乱码

HTML常用标签

标题标签h1-h6

<h1>我是一级标题</h1>

HTML基础标签(上)
段落标签

<p>我是一个段落，我可以把文字分成若干个段落</p>

换行标签

<br />

案例：
HTML基础标签(上)
文本格式化标签

语义 标签 说明
加粗 stong或者b 推荐使用stong，语义更强烈
倾斜 em或者i 推荐使用em，语义更强烈
删除线 del或者s 推荐使用del，语义更强烈
下划线 ins或者u 推荐使用ins，语义更强烈

盒子标签
div跟span是没有语义的，它们就是一个盒子，用来装内容的
div是division的缩写,表示分割
span意为跨度,跨距
div用来布局：一行只能放一个盒子。大盒子
span用来布局：一行上可以多个span。小盒子

<div>这是头部</div>
<span>今日矫价格</span>

图像标签
在HTML标签中，img标签用于定义HTML页面中的图像。是一个单标签，单词image的缩写

<img src="图像URL" />

src是img标签的必须属性，用于指定图像文件的路径和文件名
属性：就是属于这个标签的特性
其他属性：

属性 属性值 说明
src 图片路径 必须属性
alt 文本 替换文本，图像不能显示的文字
title 文本 提示文本，鼠标放到图片上显示的文字
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 像素 设置图像的边距粗细

属性采取健值对的格式，即key="value"的格式，属性=“属性值”

路径

相对路径
以引用文件所在位置为参考基础，而建立的目录路径

相对路径分类 符号 说明
同一级路径 图像文件位于HTML文件同一级 如src=“baidu.gif”
下一级路径 / 图像文件位于HTML文件下一级 如src=“images/baidu.gif”
上一级路径 …/ 图像文件位于HTML文件上一级 如src="…/baidu.gif"

绝对路径
目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径

例如:"D:\web\img\logo.gif",或完整的网络地址"http://www.bcc.cn/img/logo.gif"

超链接标签
语法格式

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性 作用
href 指定链接目标的url地址,(必须属性)
target 指定链接页面的打开方式，其中_self为默认值,_blank为在新窗口打开方式

连接分类
外部链接

例如：<a href="http://www.baidu.com">百度</a>

内部链接

网站内部页面之间的相互链接，例如<a href="index.html">首页</a>

空链接

如果没有确定链接目标时,<a href="#">首页</a>

下载链接

如果href地址里面是一个文件或者压缩包，会下载这个文件

网页元素链接

在网页中各种网页元素如文本,图像，表格，音频，视频等都可以添加超链接

锚点链接：点击链接可以快速定位到页面的某个位置

在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第二集</a>
找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two">第二集介绍</h3>

注释

HTML的注释以"<!--"开头，以"-->"结束:<!--这个文字在网页运行的时候看不见的-->

特殊字符

特殊字符 描述 字符的代码
空格符 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
￥ 人民币 &yen;
© 版权 &copy;
® 注册商标 &reg;
° 摄氏度 &deg;
± 正负号 &plusmn;
× 乘号 &times;
÷ 除号 &divide;
² 平方2(上标2) &sup2;
³ 平方3 (上标3) &sup3;

本文地址：https://blog.csdn.net/JAVAWEB_/article/details/107505261

相关标签： 前端

上一篇： CSS3 | 样式和优先级

下一篇： 荐 LabelImg_learn

推荐阅读