HTML即超文本标记语言(Hyper Text Markup Language),是WWW的描述语言。以下是对HTML的详细介绍:
一、基本概念
定义:HTML是一种用于创建网页的标准标记语言。它不是一种编程语言,而是一种描述性文本,通过标签来定义网页的结构和内容。
目的:设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起,形成有机的整体。
二、标签与结构
标签:HTML包括一系列标签,这些标签用尖括号包围,如<html>、<head>、<body>等。
结构:一个标准的HTML文档通常包括头部(Head)和主体(Body)两大部分。头部提供关于网页的信息,如标题、字符集、样式表链接等;主体包含所要说明的具体内容,如文本、图像、链接等。
常用标签
文档结构标签:
<!DOCTYPE html>:声明文档类型,指定HTML版本。
<html>:HTML文档的根元素。
<head>:包含文档的元数据。
<title>:设置网页的标题。
文本格式化标签:
<h1>至<h6>:定义标题,<h1>为最高级别,<h6>为最低级别。
<p>:定义段落。
<br>:换行符。
<hr>:水平线。
列表标签:
<ul>:定义无序列表。
<ol>:定义有序列表。
<li>:定义列表项
超链接图片标签
<a>:定义超链接。
<img>:定义图像
表格标签:
<table>:定义表格。
<tr>:定义表格行。
<th>:定义表格头单元格。
<td>:定义表格数据单元格。
锚点
<a>标签:
href属性:对于页面内的锚点链接,其值通常为#加上目标元素的id。
id属性:用于给页面上的元素分配一个唯一的标识符。这个标识符将被用作锚点链接的目标。
其他相关属性(虽然不直接用于定义锚点,但可能有助于增强用户体验)
表格
表格的基本构成标签:
table
标签:表格标签
tr
标签:表格中的行
th
标签
:
表格的表头
td
标签:表格单元格
表格的基本结构:
<table>定义表格
<tr>定义表行
<th>定义表头</th>
</tr>
<tr>
<td>定义单元格</td>
</tr>
</table>
表格属性
width 宽度
height 高度
cellspacing 单元格边框之间的大小
align 设置文本内容对齐方式
colspan 合并横向单元格
rowspan 合并竖向单元格
表单
form
标签:表单
网页表单中有许多可以输入或选择的组件,用户可以在表单中填写 信息,最终提交表单,把客户端数据提交至服务器。
<form
action
= “网址
”
method
= “post”>
……
</form>
action
指定提交后,由服务器
上那个处理程序处理
(java程序)
method
指定向服务器提交的方法:
一般为
post
或
get
方法,
post方法比较安全
<input type=“text name=“username”
value=“张三” readonly=“readonly”placeholder=“请输入” disabled=“disabled”>
type:文本输入框
value:输入文本标签的默认值
readonly:内容只读
placeholder:提示信息
disabled:内容不可使用
其他表单
密码框基本语法
<input
type=“password ” value=“ 123456 ” /
>
单选按钮基本语法
<input
type="radio" value="
男
" checked="checked“/
>
下拉框
<select name="bmon">
<option value=“” >
选择省份
</ option >
< option value=“100”>
山西
</ option >
< option value=“101” selected = ” selected ” >
陕西
</ option >
< option value=“102”>
河南
</ option >
</select>
select下拉框
<option>选项
</ option >
selected = ” selected ”默认选中
注意:
下拉框的
name,id,
事件等需要在
select
中定义,而
value
需要在
option
中
定义
多行文本域基本语法
<textarea name= "textarea" cols= "40" rows= "6">
文本域中的内容 </ textarea >
cols:设置多行文本域的行宽
rows:设置多行文本域的高
按钮
按钮基本语法
<
input
type="reset" name="Reset" value="
重填
">
<input type=“reset” value=“
重填
”
>
重置表单内容
<input type=“submit” value=“
提交
”
>
提交表单内容到服务器
<input type=“button” value=“
按钮
”
>
普通按钮没有功能,只能被点击触发事件用