前端

网页编码设置

当网页显示出现乱码时 在<head></head>标签之间添加

<meta charset="utf-8">

文字和段落标签

  • 标题标签：<h1></h1>~<h6></h6>
  • 段落标签：<p></p>
  • align对齐属性：left、right、center、justify(对行进行伸展，这样每行都可以有相等的长度)
  • 换行标签：<br/>
  • 水平线：<hr/>
    • width 设置水平线宽度(像素或百分比)
    • color 设置水平线颜色
    • align 设置水平线居中对齐
    • noshade 设置水平线无阴影
  • 文字斜体：<i></i>、<em></em>
  • 加粗：<b></b>、<strong></strong>
  • 下标：<sub>
  • 上标：<sup>
  • 下划线：<ins>
  • 删除线：<del>

特殊符号

属性显示结果描述
<<小于号或显示标记
>>大于号或显示标记
®已注册
©版权
™商标
 不断行的空白

列表

无序列表

<ul>
    <li>列表项</li>
    <li>列表项</li>
</ul>

type属性

值描述
disc圆点
square正方形
circle空心圆

有序列表

<ol>
	<li>列表项</li>
	<li>列表项</li>
</ol>

type属性

值描述
1数字1，2，3…
a小写字母a,，b，c…
A 大写字母a,，b，c…
i小写罗马数字i
I大写罗马数字I

列表标签

<dl>
	<dt>定义列表项</dt>
	<dd>列表项描述</dd>
	<dd>列表项描述</dd>
	<dt>定义列表项</dt>
</dl>

图像标签

<img src="" alt="" .../>

img属性

属性值描述
srcurl显示图像的url
alt文字图像替代文本
height数值和百分比图像的高
width数值和百分比图像的宽

超链接标签

<a href="">内容</a>

属性

属性描述
href链接地址
target链接的目标窗口_self、_blank、_top、_parent
title链接提示文字
name链接命名

定义锚

<!-- 同一页面 -->
<!-- 寻找锚的链接 -->
<a href="#锚名">索引1</a>
<!-- 定义锚的位置和名字 -->
<a href="" name="锚名"></a>
<!-- 不同页面 -->
<!-- 网页1 -->
<a href="网页名称#锚名"></a>
<!-- 网页2 -->
<a name="锚名"></a>

邮件链接

<a href="mailto:邮件地址">邮箱</a>

文件下载

<a href="文件地址">文件名</a>

表格

  • <table>表格
  • <tr>行
  • <td>单元格
  • 跨列属性colspan
    • <td colspan=”2″>..</td>
  • 跨行属性rowspan
    • <td rowspan=”2″>..</td>

注意：表格布局尽量少的使用表格嵌套、尽量少的使用表格跨行跨列 说明：使用表格进行网页结构布局一般不设置border

<table>
	<tr>
            <td></td>
	</tr>
	<tr>
	    <td></td>
	</tr>
</table>
<!-- 带表头的表格 -->
<table>
	<tr>
		<!-- 表格头 内容居中 加粗显示 -->
		<th></th>
	</tr>
	<tr>
		<td></td>
	</tr>
</table>
<!-- 带标题的表格 -->
<table>
        <!-- 表格标题 居中显示 -->
        <caption>...</caption>
	<tr>
		<th></th>
	</tr>
	<tr>
		<td></td>
	</tr>
</table>
<!-- 带结构的表格 -->
<table>
        <!-- 表格标题 居中显示 -->
        <caption>...</caption>
    <thead>
	<tr>
		<th>表头</th>
	</tr>
    </thead>
    <tbody>
	<tr>
		<td>主体</td>
	</tr>
    </tbody>
    <tfoot>
        <tr>
		<td>脚注</td>
	</tr>
    </tfoot>
</table>

表格属性

表单

表单工作原理

<!-- 注：表单本身不可见 -->
<form>
    表单元素(文本框、单选框、复选框、按钮、列表...)
</form>

表单元素

标签描述
<input>输入
<select>菜单和列表
<option>菜单和列表项目
<textarea>文字域
<optgroup>菜单和列表项目分组
  • input标签
<!-- input标签 -->
<input type="" name="" id="" value="" />
type属性值描述
text文字域
password密码域
file文件域
checkbox复选域
radio单选域
Button按钮
Submit提交按钮
Reset重置按钮
Hidden隐藏域
image图像域
  • 单行文本域
<input type="text" name="" id="" value="" />
属性描述
name文字域的名称
Maxlength指定用户输入的最大字符长度
Size指定文本框宽度，以字符个数为单位，文本框的缺省宽度是20个字符
value指定文本框默认值
placeholder规定用户填入字段的提示
  • 密码框
<input type="password" name="" id="" value="" />
  • 文件域
<input type="file" name="" id="" value="" />
  • 单选框
<!-- 注：同一组的name值要相同 checked为默认选择 -->
<input type="radio" name="" id="" value="" checked  />
  • 复选框
<!-- 注：同一组的name值要相同 checked为默认选择 -->
<input type="checkbox" name="" id="" value="" checked  />
  • 按钮
<input type="button" name="" id="" value="" checked  />
<input type="submit" name="" id="" value="" checked  />
<input type="reset" name="" id="" value="" checked  />
  • 图像域（图像提交按钮）
<input type="image" name="" src="" />
  • 隐藏域
<input type="hidden" name="" id="" value="" />

下拉菜单和列表标签

<select>
    <option value="">选项</option>
    <option value="">选项</option>
</select>

select标签属性

属性描述
name设置下拉菜单和列表的名称
multiple设置可选择多个选项
size设置列表中可见选项的数目

option标签属性

属性描述
selected设置选项初始选中状态
value定义送往服务器的选项值

分组下拉菜单和列表标签

<select name="">
    <optgroup label="组1">
    <option value="">选项</option>
    <option value="">选项</option>
    </optgroup>
    <optgroup label="组2">
    <option value="">选项</option>
    <option value="">选项</option>
    </optgroup>
</select>
  • 单行文本域
<input type="text" name="" .../>
  • 多行文本域
<textarea name="" rows="" cols="" ...>
    内容...
</textarea>
属性描述
name设置文本区的名称
placeholder设置描述文本区域预期值的简短提示
rows设置文本区内的可见行数
cols设置文本区内的可见宽度

form标签

<form action="" method="" name="" ...>
    表单元素
</form>
属性值 描述
actionURL提交表单时向何处发送表单数据
methodget、post设置表单以何种方式发送到指定页面
nameform_name表单名称
target_blank、_self、_parent、_top在何处打开action URL
enctypeapplication/x-www-form-urlencoded
multipart/form-data
text/plain		在发送表单数据之前如何对其进行编码

发表回复