HTML基础标签(上)

HTML语法规范

基本语法

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

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

并列关系

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

基本结构

标签名定义说明
htmlHTML标签页面中最大的标签,称为标签
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>


段落标签

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

换行标签

<br />

案例:
在这里插入图片描述
文本格式化标签

语义标签说明
加粗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;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值