HTML

HTML基本结构

<html>
<head>
<title>标题</title>
</head>
<body>
网页主题内容
</body>
</html>

<html></html>(后简称为html标签)标签内部为html文件,head标签内为头部信息,body标签内部为网页内容

标签语法:

<标签名></标签名>
<!--例如-->
<html>...</html>

规范:

1、<和>括起来

2、成对出现,开始标签和结束标签,结束标签比开始标签多了个/

网页编码设置:

3、单标签:没用结束签</hr>

DOCTYPE文档类型声明

- < ! DOCTYPE>声明必须放在HTML文档第一行

<!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

特殊符号

属性显示结果描述
&lt; < 小于或显示标记
&gt; > 大于或显示标记
&reg; ® 已注册
&copy; © 版权
&trade; 商标
&nbsp; 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>

跨行属性rowspan

<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 在发送表单数据之前如何对齐进行编码
posted on 2020-01-15 15:55  布拉莫维奇  阅读(192)  评论(0编辑  收藏  举报