HTML简介、页面结构,常用标签(全)

HTML简介

  • HTML 超文本标记语言(Hepertext Markup Language)
  • 它是一种用于描述网页的语言
  • 它负责定义网页的整体结构
  • HTML使用标签的形式来表示页面中的不同组成部分

标签格式

HTML 有两种标签格式

  1. 双标签:由开始标签和结束组成。
    语法:<开始标签名> … </结束标签名>
    例如:

    <html></html> <!-- html文档标签 -->
    
  2. 单标签:也叫做自结束标签。
    语法:<标签名/> 或 <标签名>
    例如

    <br/>  <!-- 换行 -->
    <hr>   <!-- 水平线 -->
    

页面结构

一个标准的HTML页面结构

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8"/>
		<title>这是网页标题</title>
	</head>
	<body>
		网页的可见区内容
	</body>
</html>
  • <!DOCTYPE html> 此标签声明浏览器使用哪种HTML规范对页面进行解析;这里使用HTML5规范。
  • html:定义了HTML文档,此标签为所有标签的根标签。
  • lang:为html中的属性用于指定网页的语言,一般是给浏览器看的,根据设置的语言浏览器会提示是否需要翻译;en为英文,zh为中文等…
  • head:此标签用于对网页进行一些配置,用户不可见。
  • meta:必须位于head标签内;用于设置网页中的元数据(本身具有的特性),浏览器如何解析网页,或者网页的大致内容。
  • title:此标签设置网页的标题。
  • body:在此标签内设置的一些标签和内容都是用户可以看到效果的。

标签级别

块级元素(block element)
  • 在网页中独占一行。
  • 能设置元素宽度和高度
行级元素(inline element)
  • 能和其他元素占一行
  • 不能设置宽高
行级块元素(inline element)
  • 能和其他元素占一行
  • 能设置宽度和高度

常用标签

标签名描述级别
h1~h6标题标签;h1到h6对于搜索引擎的重要性性越来越低 ;块级元素
div页面的一块区域块级元素
p一块段落块级元素
ol,liol有序列表,li 列表中每一个项,默认含有数字序号;块级元素
ul,li无序列表,li 列表中每一个项,默认含有符号;块级元素
dl,dt,dd定义列表,主要对一些内容下定义块级元素
a超链接 ,可以从一个页面跳转到另一个页面行级元素
span文本标签行级元素
i文本标签。文字斜体显示行级元素
em文字标签,读音上强调,文字以斜体显示行级元素
b文本标签,文字加粗显示行级标签
strong文本标签,语义强调,文字加速显示行级标签
q短引用,文字被引号"包裹行级标签
img图片标签,引入外部的一个图片行内块元素
input表单标签,如:文本框、单选、复选框,按钮等行内块元素
textarea多行文本框行内块元素

H5语义化标签

便于搜索引擎来识别网页中的内容

标签名描述级别
header表示网页的头部结构,多用于放一些网页的log ,搜索框导航栏等…块级元素
nav导航区域块级元素
section表示一块独立的区块块级元素
hgroup标题组,可以在里面放大标题和小标题块级元素
article独立的文章块级元素
aside表示网页的侧边栏区域块级元素
footer网页的底部,用于放一些版权信息,友情链接(SEO有帮助),联系方式块级元素
blockquote长引用块级元素

资源标签

图片标签

img - 图片标签 src引入一个外部图片 alt 图片的描述。 图片无法加载时显示,搜索引擎会根据alt属性内容来判断图片内容。

通过width和height属性可以设置图片的宽度和高度,宽度和高度只能设置一个图片会等比例缩放。

图片格式:

  • jepg(jpg)
    • 支持的颜色比较丰富,不支持透明效果
    • 适合用来显示照片
  • gif
    • 支持颜色比较少,支持简单透明,支持动态图片
  • png
    • 支持颜色丰富,支持复杂透明
  • webp
    • google专为网页设计的一种图片格式
    • 支持颜色丰富,复杂透明,支持动图,占用内存少
    • 兼容性比较差。
  • base64
    • 它是一种编码格式,用来将图片转换一坨字符串
    • 因为Base64是文本字符串,直接放在网页中,不会产生图片的网络请求。
内联框架

iframe 内联框架,用来引入外部的网页,不会被搜索引擎抓取
标签属性:

  • src :内部相对网页路径,或网络路径
  • width : 宽度
  • height : 高度
音频标签

audio 音频标签 ,引入一个外部的音频,根据浏览器不同一般情况都是使用mp3或ogg
标签属性:

  • src: 内部相对音频路径,或网络路径
  • controls:控制按钮
  • autoplay: 自动播放,主流浏览器默认情况下,都不会自动播放
  • loop: 循环播放
  • source: 作为audio的子标签,src属性引入音频资源
视频标签

video 视频标签 ,引入外部的视频,根据浏览器不同一般情况都是使用mp4,webm
标签属性:

  • src: 内部相对视频路径,或网络路径
  • controls:控制按钮
  • autoplay: 自动播放,主流浏览器默认情况下,都不会自动播放
  • loop: 循环播放
  • source: 作为audio的子标签,src属性引入视频资源
超链接

a标签 超链接 ,可以从一个页面跳转到另一个页面
标签属性:

  • href: 指定跳转的目标路径,可以是外部跳转也可以是内部相对页面跳转,还可以通过锚点的方式对当前页面位置区域的跳转。
  • id:每个元素都可以设置唯一个ID,相当于人的身份证一样;可以通过id进行位置区域跳转
  • target:页面的打开方式,常用两种:
    • _self:默认值,当前页面窗口打开
    • _blank:新窗口打开

HTML实体

因为HTML的一些比较特殊的性质,多个空格和换行在网页中会解析为一个空格,还有如果在网页上显示一个标签语法的话,也不会被浏览器以纯文本的方式显示,为了解决此问题专门定义了一些字符符号表示这些字符。
常用的HTML实体:

实体代码描述
&nbsp;空格
&gt;>
&lt;<
&copy;©(版权符号)

还可以引入Unicode编码字符使用方式:&#Unicode编码(以十进制)。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值