前言:
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。我们可以使用HTML来建立自己的WEB站点,HTML运行在浏览器上,由浏览器来解析。超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。本篇博客主要介绍一下HTML的基本语法。正文:
网页文档的结构和格式定义是由HTML元素来完成的,HTML元素是由单个或者一对标签定义的包含范围。HTML元素的四种形式
*空元素<br>
*带有属性的空元素
<hr color="blue">
*带有内容的元素
<title>Http://http://www.runoob.com</title>
*带有内容的属性和元素
<font color="red">http://http://www.runoob.com</font>
现在来简单的写一个HTML页面
<html> <!--开始HTML文档-->
<head> <!--开始文档头部-->
<title> <!--开始文档标题-->
这是第一页。
</title> <!--结束文档标题-->
</head> <!--结束文档头部-->
<body> <!--开始文档体-->
Hello World!
</body> <!--结束文档体-->
</html> <!--结束HTML文档-->
保存为xx.html格式,在浏览其中运行,显示界面如下图所示:
与段落控制先关的标签
<p aling="#">
作用:创建一个段。属性align表示段的对齐方式,#可以是left、center、right、justify(两端对齐,有的浏览器不支持)。
<br>
作用:换行
<hr color="clr">
作用:插入一条水平线。属性color用来指定线的颜色,例如:red、blue、green等等,或者以16位进制数表示的颜色值,例如:#ff0000表示红色,#00ff00表示绿色、#0000ff表示蓝色。
特殊字符
如何输入特殊字符 ?
在HTML文档中,像不间断空格、回车等符号,HTML保留的字符(例如:' < ',表示一个标记的开始),一些在键盘中不存在的特殊字符,例如 :版权符号(0),都需要通过引用的方式才能输入在HTML中有两种引用类型:字符引用和实体引用字符引用和实体引用都是以一(&)开始并以一个分号(;)结束。如果用的是字符引用,需要在和号(&)之后加上一个井号(#),之后是所需字符的十进制代码或十六进制代码(ISO 10646字符集中字符的编码)。如果用的是实体引用,在和号(&)之后写上字符的助记符。
下面这张图是常用的字符实体
注意:在HTML中标签和属性的名字不区分大小写,但是实体引用是区分大小写的。
HTML注释
<!--这里是注释的用法-->
注释以“<!--”开头,以“-->”结尾
列表
标签 | 描述 |
---|---|
<ol> | 定义有序列表,使用starts属性可设置起始的序号 |
<ul> | 定义无序列表 |
<li> | 定义列表项,使用value属性可以改变列表的编号顺序 |
<dl> | 定义列表 |
<dt> | 自定义列表项目 |
<dd> | 定义自定列表项的描述 |
表格
标签 | 描述 |
---|---|
<table> | 定义表格 |
<th> | 定义表格的表头 |
<tr> | 定义表格的行 |
<td> | 定义表格单元 |
<caption> | 定义表格标题 |
<colgroup> | 定义表格列的组 |
<col> | 定义用于表格列的属性 |
<thead> | 定义表格的页眉 |
<tbody> | 定义表格的主体 |
<tfoot> | 定义表格的页脚 |
例如:
<table border=n align="alignament" bgcolor="clr">...</table>
属性border用于定义表格边框的宽度。
属性align用于设定表格的对齐方式,alignament可以是left、center或right。
属性bgcolor用于指定表格的背景颜色,它的取值和上面的color取值一样。
表单
标签 | 描述 |
---|---|
<form> | 定义供用户输入的表单 |
<input> | 定义输入域 |
<textarea> | 定义文本域 (一个多行的输入控件) |
<label> | 定义了 <input> 元素的标签,一般为输入标题 |
<fieldset> | 定义了一组相关的表单元素,并使用外框包含起来 |
<legend> | 定义了 <fieldset> 元素的标题 |
<select> | 定义了下拉选项列表 |
<optgroup> | 定义选项组 |
<option> | 定义下拉列表中的选项 |
<button> | 定义一个点击按钮 |
表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:
<form method="get or post" action= "URL">
.
input 元素
.
</form>
属性method用于指定向服务器发送表单数据时所使用的HTTP方法,可以是get或者post这两种方法中的一种,get是默认的方法,当采用get方法提交表单时,提交的数据会被附加到URL的末端,作为URL的一部分传送到服务器端;而post方法是将表单中的信息作为一个数据块发送到服务器端。
<input>元素
用于接受用户输入的信息,它是一个带有属性的空元素,用来创建表单的控件,其语法是:
<input type="type" name size="size" value="value">
属性type用来指定要创建的控件的类型。
属性neme用来指定控件的名称。
属性size用来指定表单中控件的初始宽度。
属性value指定控件的初始值。
type属性如下所示:
列表框
列表框允许用户从一个下拉列表框中选择一项或多项,其功能和单选按钮或复选按钮的功能相同,但显示方式不同。
列表框由<select>元素创建,列表框中的各个选项用<option>元素提供。
超链接
链接的 HTML 代码很简单。它类似这样:
<a href="url">链接文本</a>
语法定义为:
<img src="url" alt="some_text">
alt 属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的。在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。
HTML 图像- 设置图像的高度与宽度
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
总结:
以上就是对HTML基本语法的简单介绍,感谢您的阅读~~