HTML基本结构

常见html5标签 html5常用标签及属性_常见html5标签

常见html5标签 html5常用标签及属性_Html5_02

HTML常用标签

标题标签:<h1></h1>…….<h6><h6>

<标签名 属性名=“属性值” 属性名=“属性值”>内容</标签名>

align :对齐方式属性

段落标签<p>段落内容</p>

斜体标签<em>斜体内容<./em>

加粗标签<strong>加粗内容</strong>

字体属性:<font color = “red” size=”7”(1到7,7最大)  face=”微软雅黑”>我是字体标签</font>

横线标签(单):<hr/>:单标签.换行:<br/>

图片标签(单): <img src=”img/jzx.png” alt=”我是一个图片” width=“200px” height=”200px”/>

alt :替代文本,但图片丢失时显示。width:宽度。 Height;高度

源代码:

常见html5标签 html5常用标签及属性_常见html5标签_03

常见html5标签 html5常用标签及属性_常见html5标签_04

超链接:<a href=”跳转地址(例如:index.html) target=”_blank”>超链接</a>

href:设置页面跳转路径  target:设置窗口打开方式

下划线标签<u>需要加下划线的内容</u>

 

 

锚(mao)点的使用:

一、同一个页面:

1、创建目的地。2、跳转链接

<a name=”top ”>顶部</a>

<a href=”#top”>回到顶部<a>

Name就是给锚点命名。英文

 二、非同一页面:

 1)目的地:<a name="锚点名称"></a>

2)跳转链接:<a href="锚点所在的页面路径#锚点名称"></a>

 

 

 

表格和表单

Caption设置表格名称<caotion></caption>

常见html5标签 html5常用标签及属性_常见html5标签_05

表格常用属性<table></table>

<table border="边框的宽度" width="宽度" cellspacing="合并边框" height="高度" bgcolor="设置背景颜色" bordercolor="设置边框颜色" align="设置表格的对齐方式">

width:指定表格的宽度,单位为像素或百分数

•height:指定表格的高度,单位为像素或百分数

•border:指定表格边框的宽度,单位为像素

•cellpadding:指定单元格四壁与其内容的距离,单位为像素或百分数•cellspacing:指定相邻单元格之间的距离,单位为像素或百分数

•bordercolor:指定表格的边框色

•bgcolor:指定表格的背景色:

颜色的设置方式:

       1.用颜色的英文单词,red

       2.用十六进制表示(0-f)rgb:#0-f

tr常用属性<tr> </tr>

•align:指定单元格中文本的对齐方式,常用center、left、right

•valign:指定单元格内容的垂直对齐方式,常用top、middle、bottom

•bordercolor:指定行的边框色

•bgcolor:指定行的背景色

td常用属性<td></td>

width:指定单元格的宽度,单位为像素或百分数

•height:指定单元格的高度,单位为像素或百分数

•align:指定单元格中文本的对齐方式,常用center、left、right

•colspan:指定单元格应跨越的列数

•rowspan:指定单元格应跨越的行数

•valign:指定单元格内容垂直的对齐方式,常用top、middle、bottom•bgcolor:指定单元格的背景色

合并标签:

行合并(rowspn):

常见html5标签 html5常用标签及属性_Html5_06

列合并(colspan):

常见html5标签 html5常用标签及属性_属性值_07

th :设置表格中的表头,相当于strong

常见html5标签 html5常用标签及属性_表单_08

表单:<form></form>:搜集用户输入

action:设置输入目的地。Methon:数据提交方式

常见html5标签 html5常用标签及属性_属性值_09

表单元素:

&nbsp;:空格

输入控件:input(type = test\password\radio(单选)\checkbox(复选框)、file(文件))

单标签

单选按钮:radio  Name属性:将该值设为相同值,实现单按钮的分组,达到单按钮的互斥。

复选框:checkbox

常见html5标签 html5常用标签及属性_表单_10

常见html5标签 html5常用标签及属性_常见html5标签_11

下拉列表标签:

常见html5标签 html5常用标签及属性_锚点_12

常见html5标签 html5常用标签及属性_表单_13

 

 

 

文本域:textarea  cols:列数  rows:行数’

常见html5标签 html5常用标签及属性_锚点_14

 

常见html5标签 html5常用标签及属性_属性值_15

按钮:

input:button(普通按钮)、submit(提交按钮)、reset(重置按钮)、image(图片按钮)单标签

button:button(普通按钮)、submit(提交按钮)、reset(重置按钮)双标签


常见html5标签 html5常用标签及属性_Html5_16

常见html5标签 html5常用标签及属性_Html5_17

 

常见html5标签 html5常用标签及属性_锚点_18

1、get和post提交方式的区别

    get:将提交的数据拼接在url地址栏后面,不安全,请求速度快

    post:将输入封装在请求头中,安全,请求速度慢

3.表单元素的常用属性

    Name: 如果要正确地被提交,每个输入字段必须设置一个 name 属性

    placeholder="当输入未输入时显示该提示文本"

    autofocus="autofocus":设置自动聚焦

    readonly="readonly":设置只读

    required="required":设置必填项

    disabled="disabled":禁用(用在按钮上)

常见html5标签 html5常用标签及属性_表单_19

设置单选框和复选框的默认勾选:checked="checked"

       设置下拉列表的默认勾选时:selected="selected"

       lable:用来控制input元素的标记标签

       lable中的for属性值与它配合的input元素的id属性值一样

常见html5标签 html5常用标签及属性_表单_20

Name属性用来传输数据时的标识。Id属性是该表单内部的标识。

常见html5标签 html5常用标签及属性_常见html5标签_21