一、基本格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>中文测试。。。。</title>
</head>
<body>
这里是测试 body 测试内容。。。
</body>
</html>
二、标签
- 在
body
内的主要标签有:<h1>
到<h6>
:双标签,标题,加粗且换行,数字越大标题越小。- 示例:
<h1>这是一级标题</h1><h6>这是六级标题</h6>
。
- 示例:
<p>
:双标签,段落,有换行功效。- 示例:
<p>这是一个段落。</p>
。
- 示例:
<hr>
:单标签,左到右分割符。- 示例:
<hr>
。
- 示例:
- 注释使用
<!-- -->
。- 示例:
<!-- 这是一段注释 -->
。
- 示例:
三、元素的属性
- 大部分元素属性语法为
<标签 属性1=参数1 属性2=参数2>
。align
属性可设置为left
、right
、center
,用于对齐元素。- 示例:
<p align="center">这是居中的段落。</p>
。
- 示例:
bgcolor
是body
的属性,可设置网页的背景色,如<body bgcolor="0xff1234">
。
四、文本元素属性
<b>
:内容加粗。- 示例:
<b>这是加粗的文字。</b>
。
- 示例:
<br>
:换行,如果在<p>
标签中间有间隔。- 示例:
<p>第一行<br>第二行</p>
。
- 示例:
<i>
:字体倾斜。- 示例:
<i>这是倾斜的文字。</i>
。
- 示例:
<del>
:删除文字。- 示例:
<del>这是被删除的文字。</del>
。
- 示例:
<strong>
:强调一段文字,效果类似<b>
标签。- 示例:
<strong>这是强调的文字。</strong>
。
- 示例:
<u>
:下划线。- 示例:
<u>这是有下划线的文字。</u>
。
- 示例:
<small>
:超小字体。- 示例:
<small>这是超小字体的文字。</small>
。
- 示例:
<sub>
:下标,如h<sub>2</sub>0
。- 示例:
<p>h<sub>2</sub>O</p>
。
- 示例:
<sup>
:上标,如100m<sup>2</sup>
。- 示例:
<p>100m<sup>2</sup></p>
。
- 示例:
<ruby>
:用于标注拼音,可能部分浏览器不支持,如<ruby>二姐 <rt>(er) (jie)<rt></ruby>
。- 示例:
<ruby>二姐 <rt>(er) (jie)<rt></ruby>
。
- 示例:
<mark>
:加黄色背景。- 示例:
<mark>这是被标记的文字。</mark>
。
- 示例:
五、超链接
有五种形式:
- 链接外部网站:
<a href="http://www.baidu.com">baidu</a>
。 - 链接本地文件:
<a href="1.html">1111</a>
。 - 图片链接:
<a href="1.html"><img src="abc.jpg"></a>
。 - 电子邮件链接打开电子邮件:
<a href="mailto:123@13.com">contract me</a>
。 - 下载文件链接:
<a href="abc.jpg">下载</a>
。
默认情况下打开新网页时老网页会关闭,可使用target
属性控制打开方式:
_self
:在当前位置打开,默认值。- 示例:
<a href="http://www.example.com" target="_self">在当前窗口打开示例网站</a>
。
- 示例:
_blank
:在新窗口中打开,如<a href="http://www.baidu.com" target="_blank">baidu</a>
。
六、img
标签
单标签,属性有:
src
:图像来源。- 示例:
<img src="image.jpg" alt="示例图片">
。
- 示例:
alt
:如果不能正确打开,显示的文字。- 示例:
<img src="image.jpg" alt="这是一张美丽的图片">
。
- 示例:
width
和height
:可以设置为具体像素值或百分比,百分比是相对于网页而言的,但高度百分比可能无效,如<img src="abc.jpg" alt="美女" width="100" height="200">
或<img src="abc.jpg" alt="美女" width="50%" height="200%">
。
七、列表
- 无序列表:前面无数字,使用
<ul>
标签,如<ul><li>列表 1</li><li>列表 2</li><li>列表 3</li><li>列表 4</li></ul>
,有type
属性可设置文字最前面的符号,包括disc
(黑色实心圆)、circle
(白色空心圆)、square
(黑色方块)。- 示例:
<ul type="disc"><li>项目 1</li><li>项目 2</li></ul>
。 - 示例:
<ul type="circle"><li>项目 1</li><li>项目 2</li></ul>
。 - 示例:
<ul type="square"><li>项目 1</li><li>项目 2</li></ul>
。
- 示例:
- 有序列表:前面有数字,使用
<ol>
标签,如<ol><li>列表 1</li><li>列表 2</li><li>列表 3</li><li>列表 4</li></ol>
,有type
属性可设置排序使用的数字,还可以使用start
属性设置开始值,后面的数字依次递增。列表中可以放文字、图片或链接。- 示例:
<ol type="1"><li>第一项</li><li>第二项</li></ol>
。 - 示例:
<ol type="a"><li>第一项</li><li>第二项</li></ol>
。 - 示例:
<ol start="5"><li>从 5 开始的项</li><li>下一项</li></ol>
。
- 示例:
八、表格
- 表格构成:
<table>
:外框。<tr>
:行。<td>
:列。- 例如:
<table><tr><td>1-1</td><td>1-2</td><td>1-3</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td></tr><tr><td>3-1</td><td>3-2</td><td>3-3</td></tr></table>
,表示 3 行 3 列。
- 表格属性:
border
:边框粗细。- 示例:
<table border="1"><tr><td>有边框的表格单元格</td></tr></table>
。
- 示例:
<th>
是<tr>
的属性,代表列标题,自动居中且加粗。- 示例:
<table><tr><th>列标题</th></tr><tr><td>表格内容</td></tr></table>
。
- 示例:
colspan
:横向合并单元格,需要整数参数。例如:<tr><th colspan="3">name</th></tr>
。- 示例:
<table><tr><th colspan="2">合并两列的标题</th></tr><tr><td>内容 1</td><td>内容 2</td></tr></table>
。
- 示例:
rowspan
:列项合并,整数参数。- 示例:
<table><tr><td rowspan="2">合并两行的内容</td><td>其他内容</td></tr><tr><td>更多内容</td></tr></table>
。
- 示例:
九、HTML 实体
用于输出一些特殊的字符,因为有些特殊字符不能直接在网页中显示。
- 示例:
<p><这是小于号实体></p>
。
十、表单
用于传递参数和数据,使用<form>
标签。重要的子元素有input
和button
。属性有:
action
:指定表单发送的地址。- 示例:
<form action="submit.php">...</form>
。
- 示例:
method
:发送的方式,有get
(数据会附加到 url 的后面传递给服务器,默认)和post
(将数据包大包发给服务器,等候服务器来读取)。- 示例:
<form method="post">...</form>
。
- 示例:
input
元素:- 是表单中的内容项,比如输入内容的文本框,可以指定表单属性,也可以放在表单的外面。
- 属性包括:
type
:指定输入框的类型,如text
(单行文本)、password
(密码)、submit
(提交按钮)、reset
(重置按键)、button
(普通按键,需要和特定事件关联)、image
(图片式按键)、hidden
(隐藏字段,内容不显示在页面上,用于提交其他变量)、email
(邮箱类型,新特性,可能支持有差异)。- 示例:
<input type="text" name="username" placeholder="输入用户名">
。 - 示例:
<input type="password" name="password">
。 - 示例:
<input type="submit" value="提交">
。 - 示例:
<input type="reset" value="重置">
。 - 示例:
<input type="button" onclick="alert('这是一个普通按钮')">
。 - 示例:
<input type="image" src="submit.png">
。 - 示例:
<input type="hidden" name="hidden_value" value="秘密数据">
。 - 示例:
<input type="email" name="email" placeholder="输入邮箱地址">
。
- 示例:
name
:名称,输入内容识别名称,传递参数时候的参数名称。value
:默认值,输入框默认填入的内容。- 示例:
<input type="text" name="description" value="默认描述">
。
- 示例:
maxlength
:指定最大长度。- 示例:
<input type="text" name="short_text" maxlength="10">
。
- 示例:
placeholder
:设置提示信息。- 示例:
<input type="text" placeholder="请输入内容">
。
- 示例:
required
:表示内容必须填写,不然不能提交。- 示例:
<input type="text" name="required_field" required>
。
- 示例: