HTML5基础
HTML语法基础
HTML语言是用来描述网页的一种语言,该语言是一种标签语言(即一套标签,用来描述网页),而不是编程语言,它是制作网页的基础语言,主要用来描述超文本中内容的显示方式。
1.1 HTML文档结构
完整的HTML文件包括头部标签<head></head>
和主体标签<body></body>
两大部分,头部用来描述文档的各种属性和信息,包括文档的标题等;主体包括文本、段落、列表、表格、绘制的图形以及各种嵌入对象,这些对象称为HTML元素。<html></html>
标签用来限定文档的开始点和结束点。
基本的HTML文件结构。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
从上面的代码可以看出,在HTML文件中,DOCTYPE(Document Type),该声明位于文档中最前面的位置,也就是html标签之前,用来告诉浏览器文档使用了哪种HTML或者XHTML规范。在HTML5中,Web页面的文档类型说明(Doctype)被极大地简化了。只剩下非常简单的一行代码。
在构建HTML结构时,标签不允许交叉出现,否则会造成语法错误。如以下代码就是错误的:
<!DOCTYPE html>
<html>
<head>
<body>
</head>
</body>
</html>
1.2 HTML标签
HTML最基本的语法是<标签名></标签名>。标签通常是成对使用的,一个开始标签和一个结束标签。结束标签是在开始标签的前面加上一个斜线“/”。当浏览器读取HTML文件时,就会解析里面的各个标签,然后将每个标签相对应的功能表达出来。
类型 | 标签名 | 描述 |
---|---|---|
基础 | <!DOCTYPE> | 定义文档类型 |
<html> |
定义HTML文档 | |
<title> |
定义文档的标题 | |
<body> |
定义文档的主体 | |
<h1>to<h6> |
定义HTML标题 | |
<p> |
定义段落 | |
<br> |
定义简单的换行 | |
<hr> |
定义水平线 | |
<!--...--> |
定义注释 | |
<img> |
定义图片 | |
<a> |
定义锚 | |
<table> |
定义表格 | |
<caption> |
定义表格标题 | |
<tr> |
定义表格的行 | |
<th> |
定义表格中的表头单元格 | |
<td> |
定义表格中的单元 | |
元信息 | <head> |
定义关于文档的信息 |
<meta> |
定义关于HTML文档的元信息 | |
<base> |
定义页面中所有链接的默认地址或默认目标 | |
格式 | <b> |
定义粗体文本 |
<bdo> |
定义文字方向 | |
<mark> |
定义有记号的文本 | |
<sup> |
定义上标文本 | |
<sub> |
定义下标文本 | |
<time> |
定义日期/时间 | |
<wbr> |
定义在文本中的何处适合添加换行符 | |
表单 | <form> |
定义供用户输入的HTML表单 |
<input> |
定义输入控件 | |
<textarea> |
定义多行的文本输入控件 | |
<button> |
定义按钮 | |
<select> |
定义选择列表(下拉列表) | |
<output> |
定义输出的一些类型 | |
<option> |
定义选择列表中的选项 | |
<lable> |
定义input元素的标注 | |
<fieldset> |
定义围绕表单中元素的边框 | |
<legend> |
定义fieldset元素的标题 | |
音频视频 | <audio> |
定义声音内容 |
<source> |
定义媒介源 | |
<track> |
定义用在媒体播放器中的文本轨迹 | |
<video> |
定义视频 |
1.3 标签的属性
HTML属性能够赋子标签含义和语境,提供了有关HTML元素的更多信息。属性要在开始标签中指定,通常是以名称/值对的形式出现,比如: name=“value”, name表示属性的名称,value代表该属性的值,value 常用双引号“""”括起来,也可以使用单引号“’’”括起来。多个属性用空格隔开,指定多个属性的时候不需要区分顺序。如:
<img src="picture/scenery.jpg" alt="风景"
width= "30%" height="40%">
此行代码表示插入了一幅图片, 该图片来自同目录中 picture 文件夹内的scenery.jpg,图片显示在页面上的尺寸是浏览器宽度的30%,高度的40%。