HTML基本结构
<html>
<head>
<title>标题</title>
</head>
<body>
网页主题内容
</body>
</html>
<html></html>(后简称为html标签)标签内部为html文件,head标签内为头部信息,body标签内部为网页内容
标签语法:
<标签名></标签名>
<!--例如-->
<html>...</html>
规范:
1、<和>括起来
2、成对出现,开始标签和结束标签,结束标签比开始标签多了个/
网页编码设置:
3、单标签:没用结束签</hr>
DOCTYPE文档类型声明
- < ! DOCTYPE>声明必须放在HTML文档第一行
当网页出现乱码的时候,在<head></head>标签之间添加
<meta http-equiv="content-Type"content="text/html;charst=utf-8">
注:utf-8、GB2312、gbk等编码
文字和段落标签:
标题标签 :<h1></h1>~<h6></h6>
段落标签:<p></p>
align对齐属性:
值 | 描述 |
---|---|
left | 左对齐内容 |
right | 右对齐内容 |
center | 居中对齐内容 |
justify | 对于行进行伸展,这样每行都可以有相等的长度 |
文字斜体:<i></i>、 <em></em>
加粗:<b></b>、<strong></strong>
下标:sub
上标:sup
特殊符号
属性 | 显示结果 | 描述 |
---|---|---|
< | < | 小于或显示标记 |
> | > | 大于或显示标记 |
® | ® | 已注册 |
© | © | 版权 |
™ | ™ | 商标 |
| Sapce | 不断行的空白 |
列表标签
无序列表
<ul>
<li>列表项</li>
<li>列表项</li>
...
</ul>
type属性值:
值 | 描述 |
---|---|
disc | 圆点 |
square | 正方形 |
circle | 空心圆 |
有序列表
<ol>
<li>列表项<li>
<li>列表项<li>
......
<ol>
值 | 描述 |
---|---|
1 | 数字1,2... |
a | 小写字母a,b... |
A | 大写字母A,B... |
i | 小写罗马数字 |
I | 大写罗马数字 |
定义列表
<dl>
<dt>定义列表项</dt>
<dd>列表描述项</dd>
<dt>定义列表项</dt>
<dd>列表描述项</dd>
...
</dl>
注意:组合使用
图像标签
语法:
<img src= "" alt= "" .../>
img属性:
属性 | 值 | 描述 |
---|---|---|
Src(必写) | URL | 显示图像的URL |
alt | 文字 | 图像替代文本 |
height | 数值和百分比 | 图像的宽 |
width | 数值和百分比 | 图像的高 |
超链接标签:
< a href= "" >内容</a>
属性:
属性 | 描述 |
---|---|
href | 链接地址 |
target | 链接目标窗口 |
title | 链接提示文字 |
name | 链接命名 |
定义锚(同一页面):
<a href= "#锚名1" >目录1 </a>
<a href= "#锚名2" >目录2 </a>
<a href= "..." name= "锚名1" >内容</a>
xxxxxxxxx
xxxxxxxxxxxx
<a href= "..." name= "锚名2" >内容</a>
xxxxxxxxx
xxxxxxxxxxxx
定义锚(不同页面):
<!--网页1:-->
< a href= "..." name= "锚名" >内容</a>
<!--网页2:-->
< a href= "网页名称#锚名" >...</a>
电子邮箱链接:
< a href= "mailto:邮件地址" >... </a>
HTML表格
<table> 表格
<tr>行
<td>单元格
基础语法与结构
<table>
<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>
跨列属性colspan
<table>
<tr>
<td colspan= "2" >...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>
<table>
<tr>
<td rowspan= "2" >...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
表格布局:
尽量少的使用表格嵌套
尽量少的使用表格跨行跨列
说明:使用表格进行网页结构布局一般不设置border
表单
语法:
<form>
表单元素
</form>
Form标签
标签 | 描述 |
---|---|
<input> | 表单输入标签 |
<select> | 菜单和列表标签 |
<option> | 菜单和列表项目标签 |
<textarea> | 文字域标签 |
<optgroup> | 菜单和列表项目分组标签 |
<input>标签
语法:
<input type="类型属性" name= "名称" .../>
<input>标签
TYPE属性值 | 描述 |
---|---|
text | 文字域 |
password | 密码域 |
file | 文件域 |
checkbox | 复选域 |
radio | 单选域 |
Button | 按钮 |
Submit | 提交按钮 |
Reset | 重置按钮 |
Hidden | 隐藏域 |
image | 图像域 |
单行文本域
语法:
<form>
<input type="text" name= "..." .../>
</form>
单行文本域
属性 | 描述 |
---|---|
Name | 文字域的名称 |
Maxlength | 指用户输入的最大字符长度 |
Size | 指定文本框的宽度,以字符个数为单位;文本框的缺省宽度为20个字符 |
value | 指定文本框的默认值 |
placehold | 规定用户填写输入字符的提示 |
密码框
语法:
<form>
<inpute type="password" name= "" .../>
</form>
注意:密码域也是文本域的形式,输入道文本域的文字“...”显示
单选框
语法:
<form>
<input type="radio" name="..." value= "..." value= "..." checked />
</form>
注意:同一组的name值要相同
复选框
语法:
<form>
<input type= "checkbox" name= "..." checked />
</form>
图像域(图像提交按钮)
语法:
<input type= "image" name= "..." src= "imageurl" />
下拉菜单和标签
语法:
<select>
<option value = "..." >选项</option>
<option value="..." >选项</option>
...
</select>
<select>标签属性
属性 | 描述 |
---|---|
name | 设置下拉菜单和列表的名称 |
multiple | 设置可选择多个选项 |
size | 设置列表中可见选项的数目 |
<option>标签属性
属性 | 描述 |
---|---|
selected | 设置选项初始选中状态 |
value | 定义送往服务器的选项值 |
分组下拉菜单和列表标签
语法:
<select name= "" >
<optgroup label= "组1" >
<option vlue ="..." >选项</option>
<option vlue ="..." >选项</option>
...
<optgroup label= "组2" >
<option vlue ="..." >选项</option>
<option vlue ="..." >选项</option>
...
</optgroup>
...
</select>
多行文本域<textarea>
语法:
<textarea name= ".." cols= ".." ...>
内容......
</textarea>
<form>标签
语法:
<form action= "" method= "" name= ""...>
表单元素
</form>
<form>标签
属性 | 值 | 描述 |
---|---|---|
action | URL | 提交表单时向何处发送表单数据 |
method | get、post | 设置表单以何种方式发送到指定页面 |
name | form_name | 表单的名称 |
target | blank、self parent、top | 在何处打开action URL |
enctype | application/x-www-form-urlencoded multipart/form-data text/plain | 在发送表单数据之前如何对齐进行编码 |