HTML 定义和基本结构
定义
定义:HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。
HTML 的基本结构如下
<!DOCTYPE html >
<html lang ="en" >
<head >
<meta charset ="UTF-8" >
<title > 网页标题</title >
</head >
<body >
网页显示内容
</body >
</html >
HTML 编写规范
1、标签小写
2、属性用双引号括起来
3、所有的标签闭合
<div > </div > <br />
4、图片加alt属性;alt=“”加上属性,可以读图片信息
常用 HTML 标签
双标签(闭合标签)
定义: 双标签是指由开始标签和结束标签组成的一对标签,这种标签允许嵌套和承载内容,比如: div标签
单标签 (空标签)
定义: 单标签是一个标签组成,没有标签内容, 比如: img标签
常用标签列举:
<h1 > </h1 > 、<h2 > </h2 > 、<h3 > </h3 > 、
<h4 > </h4 > 、<h5 > </h5 > 、<h6 > </h6 >
<p > </p >
<br />
<img src ="images/pic.jpg" alt ="产品图片" />
<font > </font >
<strong > </strong > or<b > </b >
<i > </i >
<u > </u >
<del > </del >
<ins > </ins >
<sub > </sub >
<sup > </sup >
<blockquote > </blockquote >
<pre > </pre >
<code > </code >
<font > </font >
<a href ="" > :
注:
./:当前路径
../:上一级路径
<ol >
<li > </li >
</ol >
<ul >
<li > </li >
</ul >
<dl >
<dt > </dt >
<dd > </dd >
<dd > </dd >
</dl >
<table > </table >
对应的属性值:
1、border: 定义表格的边框
2、cellpadding: 定义单元格内内容与边框的距离
3、cellspacing: 定义单元格与单元格之间的距离
4、align: 设置单元格中内容的水平对齐方式,设置值有:left | center | right
5、valign: 设置单元格中内容的垂直对齐方式 top | middle | bottom
6、colspan: 设置单元格水平合并
7、rowspan: 设置单元格垂直合并
<tr > </tr >
<th > </th >
<td > </td >
<iframe > </iframe >
HTML 存在的语义化的标签
定义
定义:语义化的标签,就是在布局的时候多使用语义化的标签,搜索引擎在爬网的时候能认识这些标签,理解文档的结构,方便网站的收录。比如:h1标签是表示标题,p标签是表示段落,ul、li标签是表示列表,a标签表示链接,dl、dt、dd表示定义列表等,语义化的标签不多。
div 标签 块元素,表示一块内容,没有具体的语义
<div > </div >
em 标签 行内元素,表示语气中的强调词
<em > </em >
i 标签 行内元素,原本没有语义,w3c强加了语义,表示专业词汇
<i > </i >
b 标签 行内元素,原本没有语义,w3c强加了语义,表示文档中的关键字或者产品名
<b > </b >
strong 标签 行内元素,表示非常重要的内容
<strong > </strong >
常用的占位符
显示“空格”
 
显示“小于号”
<
显示“大于号”
>
显示“&符号”
&
显示“双引号”
"
显示“版权”
©
显示“注册商标”
®:注册商标
显示“乘号”
×:乘号
显示“除号”
÷:除号
常用表单
定义一个表单区域。
<from action ="" method ="" >
</from >
定义表单控件的文字标注
<label > </label >
input类型为text:定义了一个单行文本输入框
<input type = "text" />
<input type = "password" />
<input type = "radio" />
<input type = "checkbox" />
textarea:定义多行文本输入
<input type = "textarea" />
select:定义下拉列表选择
<select >
<option > 1</option >
<option > 2</option >
<option > 3</option >
</select >
<input type = "submit" />
<input type = "reset" />
HTML5 新结构标签(扩展)
HTML5 新增的主要语义化标签如下
HTML5 新增表单控件:网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索
HTML5 音频和视频
音频:audio 标签
格式:ogg、wav、mp3
对应属性:
1、autoplay 如果出现该属性,则音频在就绪后马上播放。
2、controls 如果出现该属性,则向用户显示控件,比如播放按钮。
3、loop 如果出现该属性,则每当音频结束时重新开始播放。
4、preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。
如果使用 "autoplay",则忽略该属性。
5、muted 规定视频输出应该被静音。
案例:
<audio autoplay = "autoplay" controls = "controls" >
<source src ="source/audio02.ogg" type ="audio/ogg" >
您的浏览器不支持 audio 标签。
</audio >
视频:video 标签
格式:ogg、mp4、webM
对应属性:
1、width 设置视频播放器的宽度。
2、height 设置视频播放器的高度。
3、poster 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
可选第三方播放器:
1、cyberplayer
2、tencentPlayer
3、youkuplayer
案例:
<video controls ="controls" controls ="controls" >
<source src ="movie.ogg" type ="video/ogg" />
<source src ="movie.mp4" type ="video/mp4" />
您的浏览器不支持 video 标签。
</video >
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库