特殊标记符号
特殊符号 | 描述 | 字符代码 |
---|---|---|
空格符 | |
|
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
¥ | 人民币 | ¥ |
© | 版权 | © |
® | 注册商标 | ® |
° | 摄氏度 | ° |
± | 正负号 | ± |
× | 乘号 | × |
÷ | 除号 | ÷ |
² | 平方2(上标2) | ² |
³ | 立方3(上标3) | ³ |
常用标签
hr 横杠标记
横杠
了
br 换行标记
换行
了
del
<del>这是 del 标签,中划线</del>
这是 del 标签,中划线
em
<em>这是 em 标签,斜体</em>
这是 em 标签,斜体
ins
<ins>这是 ins 标签,下划线</ins>
这是 ins 标签,下划线
strong
<strong>这是 strong 标签,粗体</strong>
这是 strong 标签,粗体
img
<img src="图片地址" alt="图片描述" title="图片移动上去显示的文字">
a
超链接标签属性:
href:链接地址,也可以定义为“#定义过的 id”来达到锚点的功能
target:默认“_self” 本页面打开,“_blank” 新页面打开
<a href="http://www.baidu.com/" target="_self">这是个超链接 a 标签</a>
ul
无须列表 ul 有属性 type,用于控制显示状态,起取值有3个:
默认实心圆:disc
方块:square
空心圆:circle
<!-- 列表,无须列表 ul -->
<ul type="circle">
<li>无须列表1</li>
<li>无须列表2</li>
<li>无须列表3</li>
</ul>
- 无须列表1
- 无须列表2
- 无须列表3
ol 有序列表
属性:
- type:项目符号类型
- 1:数字表示
- a:小写字母表示
- A:大写字母表示
- i:小写罗马数字表示:i,ii,iii…
- I:大写罗马数字表示:I,II,III…
- start:起始编号 例如 2
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
- 有序列表1
- 有序列表2
- 有序列表3
dl 自定义列表
定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号
<dl>
<dt>自定义列表1</dt>
<dd>自定义列表1的解释1</dd>
<dd>自定义列表1的解释2</dd>
<dt>自定义列表2</dt>
<dd>自定义列表2的解释1</dd>
<dd>自定义列表2的解释2</dd>
</dl>
- 自定义列表1
- 自定义列表1的解释1
- 自定义列表1的解释2
- 自定义列表2
- 自定义列表2的解释1
- 自定义列表2的解释2
meta 标签
属性有两种:
- name 主要用于描述网页,对应与 content(网页内容)
- <meta name="Generator" contect="">
用以说明生成工具(如Microsoft FrontPage 4.0)等;
- <meta name="KEYWords" contect="">
向搜索引擎说明你的网页的关键词
- <meta name="DEscription" contect="">
告诉搜索引擎你的站点的主要内容
- <meta name="Author" contect="你的姓名">
告诉搜索引擎你的站点的制作的作者
- <meta name="Robots" contect= "all|none|index|noindex|follow|nofollow">
- 设定为all:文件将被检索,且页面上的链接可以被查询;
- 设定为none:文件将不被检索,且页面上的链接不可以被查询;
- 设定为index:文件将被检索
- 设定为follow:页面上的链接可以被查询;
- 设定为noindex:文件将不被检索,但页面上的链接可以被查询;
- 设定为nofollow:文件将不被检索,页面上的链接可以被查询。
- http-equiv
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
<meta http-equiv="Content-Type" contect="text/html"; charset=gb_2312">
- gb2312 简单中文
- GBK包含全部中文字符 繁体
- BIG5 繁体中文
- UTF-8则包含全世界所有国家需要用到的字符
table 表格标签
属性名 | 释义 | 常用属性值 |
---|---|---|
border | 边框宽度 | px、默认0无边框 |
cellspacing | 设置单元格之间的距离 | px、默认2px |
cellpadding | 文字与单元格之间的距离 | px、默认1px |
width | 表格宽度 | px |
height | 表格高度 | px |
aligh | 表格对齐方式 | left、right、center |
bgcolor | 设置背景颜色 | white、red、green |
<table border="0px" >
<!-- 行标签 tr -->
<tr>
<!-- 每一行的每一个表格 td -->
<td>这是 td 标签1</td>
<td>这是 td 标签2</td>
</tr>
<tr>
<td>这是 td 标签1</td>
<td>这是 td 标签2</td>
</tr>
</table>
这是 td 标签1 | 这是 td 标签2 |
这是 td 标签1 | 这是 td 标签2 |
caption 标签
caption 标签,标题标签,必须紧随 table 标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上
th 标签
表头一般位于表格的第一行或第一列,其文本加粗居中,如下图所示,即为设置了表头的表格。设置表头非常简单,只需用表头标记替代相应的单元格标记即可。
<table>
<tr>
<th>th1</th>
<th>th2</th>
<th>th3</th>
</tr>
<tr>
<th>th4</th>
<td>td1</td>
<td>td2</td>
</tr>
</table>
th1 | th2 | th3 |
---|---|---|
th4 | td1 | td2 |
表格的结构
在使用表格进行布局时,可以将表格划分为头部、主体和页脚,一般,将表头放到头部标签,数据体放到主体中,底部的其他信息放到页脚部分,起使用只是将数据为包括一层特定下面的标签;具体 如下所示:
- <thead></thead>
:用于定义表格的头部,必须位于<table></table>
标记中,一般包含网页的logo和导航等头部信息。
- <tfoot></ tfoot >
:用于定义表格的页脚,位于<table></table>
标记中<thead></thead>
标记之后,一般包含网页底部的企业信息等。
- <tbody></tbody>
:用于定义表格的主体,位于<table></table>
标记中<tfoot></tfoot>
标记之后,一般包含网页中除头部和底部之外的其他内容。
<table>
<thead>
<!-- 比如下面将第一行包括到 thead 标签中 -->
<tr>
<th>th1</th>
<th>th2</th>
<th>th3</th>
</tr>
</thead>
<tr>
<th>th4</th>
<td>td1</td>
<td>td2</td>
</tr>
</table>
th1 | th2 | th3 |
---|---|---|
th4 | td1 | td2 |
form 表单标签
表单的作用:主要负责数据采集功能。
- 表单控件:包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
- 提示信息:一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。
- 表单域:他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器
语法:
<form name="form_name" action="url" method="get|post">…</form>
名字 | 定义 |
---|---|
name | 表单名称 |
method | 数据传输方式 |
action | 地址,处理表单的程序地址 |
fieldset | 表单分组 |
legend | 分组名称 |
input 控件
属性 | 属性值 | 描述 |
---|---|---|
type | text | 单行文本输入框 |
password | 密码文本输入框 | |
radio | 单选框 | |
button | 普通按钮 | |
submit | 提交按钮 | |
reset | 重置按钮 | |
image | 图像样式的提交按钮 | |
hidden | 隐藏域 | |
file | 文件域 | |
name | 用户自定义 | 控件名称 |
value | 用户自定义 | input 控件中的默认值 |
size | 正整数 | input 控件在页面中显示的大小 |
readonly | readonly | 内容只读 |
disable | disable | 第一次加载页面时禁用该控件(显示为灰色) |
textarea
如果需要输入大量的信息,就需要用到<textarea></textarea>
标记。通过textarea控件可以轻松地创建多行文本输入框,其基本语法格式如下:
<textarea cols="每行中的字符数" rows="显示的行数" style=“scrollbar:overflow”>
文本内容
</textarea>
select
下拉菜单
`html
<!-- 页面可见的大小、是否支持多选 -->
<select size="4" multiple="multiple">
<optgroup label="1">
<option>1-1</option>
<option>1-2</option>
<option>1-3</option>
</optgroup>
<optgroup label="2">
<option>2-1</option>
<option>2-2</option>
<option>2-3</option>
</optgroup>
<option>1</option>
<option>2</option>
<!-- 是否选中 -->
<option selected="selected">3</option>
<option>4</option>
</select>