HTML概念
HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
HTML是最基础的网页开发语言,Hyper Text Markup Language 超文本标记语言。
- 超文本:超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本
- 标记语言:由标签构成的语言,使用标签的方法将需要的内容包括起来。<标签名称> 如 html,xml
注意:标记语言不是编程语言
HTML作用
HTML用于编写网页。平时上网通过浏览器我们看到的大部分页面都是由html编写的。在浏览器访问网页时,可以通过“右键/查看网页源代码”看到具体的html代码。
网页内容包含:HTML代码、CSS代码、JavaScript代码等内容。
- HTML代码:用于搭建基础网页,展示页面的内容、需要显示的数据。
- CSS代码:用于美化页面,布局页面,使显示的数据更加好看。
- JavaScript代码:控制页面的元素,让页面有一些动态的效果。
网页根据内容是否可以改变分为:静态页面、动态页面。
-
静态页面:使用静态网页开发技术发布的资源
特点:
编写之后在浏览器不再改变的网页。HTML就是用于编写静态网页的。
所有用户访问,得到的结果是一样的。
如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎,可以展示静态资源。 -
动态页面:使用动态网页及时发布的资源
特点:
会根据不同的情况展示不同的内容。例如:登录成功后右上角显示用户名。
所有用户访问,得到的结果可能不一样。
如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器。
注意:HTML是部署在服务器上,运行在浏览器上。
Web三要素
- 浏览器:向服务器发起请求,下载服务器中的网页(HTML),然后执行HTML显示出内容。
- 服务器:接收浏览器的请求,发送相应的页面到浏览器。
- HTTP协议:浏览器与服务器的通讯协议。
HTML特点
- HTML文件不需要编译,直接使用浏览器阅读即可
- HTML文件的扩展名是: *.html 或 *.htm
- HTML结构都是由标签组成
标签名预先定义好的,我们只需要了解其功能即可。
标签名不区分大小写,建议使用小写。
围堵标签:通常情况下标签由开始标签和结束标签组成。例如:<a></a>
自闭和标签:如果没有结束标签,建议以/结尾。例如: <img/>
标签可以嵌套,例如: <a><b></b></a>
在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可)引起来。 - HTML结构包括两部分:头head和体body
HTML标签
基础模板
<!DOCTYPE html>
<html>
<head>
<title>这是标题</title>
<meta charset="UTF-8">
</head>
<body>
这⾥是正文
</body>
</html>
- <html>: 整个页面的根标签,理论上一个页面只需要一个,由头和体组成。
- <head> : 头标签,用于引入脚本、导入样式、提供元信息等。一般情况下头标签的内容在浏览器端都不显示。
- <title> ⼦标签,用于定义文档的标题。
- <meta> ⼦标签,提供关于HTML文档的元数据。用于规定页面的描述、关键词、文档作者、最后修改时间以及其他元数据。
常用属性:content、http-equiv、charset。 - <body> 体标签,是整个网页的主体,我们编写的html代码基本都在此标签体内。
注释:<!-- 注释内容 -->
注释特点:
- 浏览器查看时,不显示。右键查看源码可以看到。
- 注释标签不能嵌套。
- 注释特殊用法,为不同的浏览器提供不同的解决方案。
常用标签
<h1></h1> :标题标签
<hr /> :展示一条水平线
<font></font> :字体标签
<b></b> :字体加粗
<i></i> :字体斜体
<p></p> :段落标签
<br /> :换行标签
图片标签
图⽚标签:<img>
<img>在html页面中引用一张图⽚。
- src属性:指定需要显示图⽚的URL(路径)
- width属性:设置图像的宽度
- height属性:设置图像的⾼度
- alt属性:图⽚⽆法显示时的替代文本
- title属性:⿏标移上图⽚时显示的标题
音视频标签
视频标签:<video>
音频标签:<audio>
<video>在html页面中加入一个视频;<audio>在html页面中添加一段音乐。
- controls属性:添加视频控制插件
- loop属性:循环播放
- autoplay属性:自动播放
列表标签
列表标签:<ul><ol>
- <ol>定义有序列表
type:列表类型,取值:A、a、I、i、1等 - <ul>定义⽆需列表
type:符号的类型,取值:disc实心圆、square方块、circle空心圆
超链接标签
<a>标签是超链接,是在html页面提供一种可以访问其他位置的实现方式。
- href:用于确定需要显示页面的路径(URL)
- target:确定以何种方式打开href所设置的页面。常用取值:_blank、_self 等
_blank 在新窗口中打开href确定的页面
_self 默认。使用href确定的页面替换当前页面
锚点是文档中某行的一个记号
- 用于链接到文档中的某个位置
- 定义锚点:
<a name="anchorname1">锚点一</a>
- 链接到锚点:在锚点名前加上#
<a href="#anchorname1">回到锚点一</a>
表格标签
表格标签:<table><tr><td>
HTML表格由<table>标签以及一个或多个<tr>、<th>或<td>标签组成。
- <table>是父标签,相当于整个表格的容器。
border:表格边框的宽度、样式
width:表格的宽度
cellpadding:单元边沿与其内容之间的空白
cellspacing:单元格之间的空白
bgcolor:表格的背景颜色 - <tr>标签用于定义行
align:对齐方式 - <td>标签用于定义表格的单元格(一个列)
colspan:单元格可横跨的列数
rowspan:单元格可横跨的行数
align:单元格内容的水平对齐方式,取值:left左、right右、center居中
nowrap:单元格中的内容是否折行 - <th>标签用于定义表头。单元格内的内容默认居中、加粗
- <caption>:表格标题
- <thead>:表示表格的头部分
- <tbody>:表示表格的体部分
- <tfoot>:表示表格的脚部分