html普通按钮标签,html普通按钮代码

HTML常用标签和属性

en英文

zh-CN中文

ja-jp日文

！-- -- 注释

p/p分段

br强制换行

ins/ins下划线

hr/水平线

strong/strong强调突出内容

em/em强调倾斜内容

del/del删除线

sub/sub下际

sup/sup上际

lt；大于号

gt；小于号

emsp；空格

trade；TM

reg；?

copy；?

amp；

yen；￥

deg；摄氏度

color=""水平线颜色

width=""水平线宽度

align=""水平线方向，left左，right右

noshade="noshade"水平线默认阴影消除

img? src＝" " alt＝" "

相对路径? ./ ../

绝对路径? 去网络里找图片链接

./是找同级或下级图片

../是找上级图片

src＝""引入图片链接

alt＝""当图片出现问题，可以提示一段文字

title＝""鼠标悬停信息

width＝"? px"设定图片宽度

height＝"? px"设定图片高度

a href=""/a

href=""链接的地址

tltle=""悬停提示信息

target=""填入网址

target=""里包含_blank和_self

_blank在浏览器新窗口打开页面

_self在浏览器原窗口打开页面

img src=" alt"可以在图片里加链接

1.#号和id属性

在要跳转的文本位置前填上块元素，给块元素命名

div id＝""/div

a href="#? ? "/a

2.#号和name属性

在要跳转的文本位置前在写一个

a name="? "/a

a herf="#? "/a

ul和li必须是组合出现的，他们之间是不能有其他标签的

ul

? li/li

/ul

ul/ul列表最外层容器

li/li列表项

type=""是改变前面标记样式（一般都是用css去控制 ）

ul type=""li /li /ul

disc是实心圆? ? ? ? circle是空心圆

square是实心方块? ? none是空白可以随意发挥

ol和li必须是组合出现的，他们之间是不能有其他标签的

ol

li/li

/ol

ol/ol列表最外层容器

li/li列表项

type=""是改变前面标记样式（一般都是用css去控制

ol type="" start="" li /li /ol

1是数字? ? ? ? ? a是小写字母? ? ? ? A大写字母? ? i罗马数字小写? I罗马数字大写

start=""从哪个数字开始（取值只能是数字）

dl?

dt/dt?

dd/dd?

/dl

dl/dl列表最外层容器

dt/dt定义专业术语或名词

dd/dd对名词进行解释和描述

table/table表格最外层容器

tr/tr定义表格行

th/th定义表头

td/td定义表格单元

caption/caption定义表格标题

border=""表格边框

cellpadding=""单元格内的空间

cellspacing=""单元格之间的空间

rowspan=""合并行

colspan=""合并列

align=""单元格文字左右对齐方式

align：left、center、right

valign=""单元格文字上下对齐方式

valign：top、middle、bottom

form action=""

? ? input type＝"text"

/form

form/form表单最外层容器

action＝""提交到一个地址

input标签用于搜集用户信息，根据不同的type属性值，展示不同的控件

? input type=""

? text普通文本密码框

? password密码输入框

? placeholdr提示文本

? button自定义按钮

? disabled禁用

? readonly只读

? submit提交按钮

? hidden是给后端带信息普通用户看不见 一般伴随（value）

? input type="image"src="/? ? "图片代替提交按钮

? reset重置按钮

2.checkbox复选框

? 加上checked会出现一个默认选择

? disabled禁止使用

3.radio单选框

? name="(写一个自定义的值)"通过name可以让两个或多个单选框变为一组（自定义的值要相同）

? 加上checked会出现一个默认选择

4.file上传文件

? multiple按住鼠标左键鼠标滑过可以多选

5.textarea多行文本框

? textarea? cols="30" rows="10"/textarea

? cols=""表示列

? rows=""表示行

? 可以通过调节行列改变大小

? resize重新设置大小（css）

? : vertical;垂直

? :horizontal;水平

? :both;默认

? :none;无法控制

6.? selectoption/option/select

? select下拉菜单

? size=""填入数字可以让下拉菜单显示多项

? multiple按住鼠标左键鼠标滑过可以多选

? option菜单里的选项传给后端要设置value值

? selected下拉菜单默认显示当前被选中的那一项

7. label for=""/label是一个辅助属性

? id和for要相同

? 拿3.做例子

? 正常点这个文字是选不中的

? input type="radio" name="gender"男

? input type="radio" name="gender"女

? 但是用上label后就可以了

? input type="radio" name="gender" id="man"label for="man"男/label

? input type="radio" name="gender" id="girl"label for="girl"女/label

fieldsetlegend/legend/fieldset

legend/legend缺口

1.div/div(块)用来划分区域

2.span/span（内联）对文字单独修饰

? style=""设计

? color颜色

? span style＝"color:? ? "/span

div和span都是没有任何默认样式的，需要配合css

audio src="? " /audio

controls控制栏

loop循环

autoplay自动播放

muted静音

video src="? "video

controls控制栏

loop循环

autoplay自动播放

muted静音

poster属性海报

section元素 表示页面中的一个内容区块（页面身体）

article元素 表示一块与上下文无关的独立的内容

aside元素 在article之外的，与article内容相关的辅助信息（侧边栏）

header元素 表示页面中一个内容区块或整个页面的标题（页面头部）

footer元素 表示页面中一个内容区快或整个页面的脚注（页面底部）

nav元素 表示页面中导游链接部分（页面导航栏）

figure元素 表示一段独立的流内容，使用figcaption元素为其添加标题（第一个获最后一个子元素的位置）

main元素 表示页面中的主要内容（ie不兼容）

form/form表单最外层容器

form action=""/form

action提交到一个地址

input/input标签用于搜集用户信息，根据不同的type属性值，展示不同的控件

input type=""

加上name是给后端的

type="color"生成一个颜色选择的表单

type="email"生成一个邮箱输入框

type="tel"换起拨号盘表单

type="search"产生一个搜索意义的表单

type="range"产生一个滑动条表单，支持min，max，value，step

（min最小值）

（max最大值）

（value设置默认）

（step移动数值）

type="number"产生一个数值表单，支持min，max，value，step

type="email"限制用户必须输入email类型

type="url"限制用户必须输入url类型

type="date"限制用户必须输入日期

type="month"限制用户必须输入月类型

type="week"限制用户必须输入周类型

type="time"限制用户必须输入时间类型

type="datetime-local"选取本地时间

input type="text" list="mylist"（list和id相连）

datalist id="mylist"(id自定义)

option value="手机"/option（这个是列表可以想写多少写多少）

/datalist

va lue自定义名称

autofocus自动获取焦点

required验证输入不能为空

multiple可以输入一个或多个值，每个值用逗号隔开

input type="email" multiple/还可用于file

pattern

将属性值设为某个正则表达式，在提交时会检查其内容是否合给定格式

input pattern="[0-9][A-Z][3]" title="输入内容：一个数与三个大写字母" placeholder="输入内容：一个数与三个大写字母"

html5常用标记总结

一、文本标签

1.1 标题标记：hn align=”对齐方式”标题文本/hn

注意：

1.标题准备了h1----h6的标题，按照字号依次递减(块级元素)

2.align表示对齐方式，其值为left,center,right

1.2 字体标记：font face=”字体名称” size=”字号” color=”字体颜色” 文字/font

注意：中文网页以黑体，宋体，3号字的效果显示

1.3 段落标记：p align=”对齐方式” 段落内容/p

注意：p可以作为单标记或双标记：

单标记：段落与上文产生一个空行的间距。

双标记：段落与上下文之间产生一个空行的间距

1.4 换行标记：

注意：br /表示换行，多次换行多次使用br /

1.5 预格式化标记：pre...../pre

注意：预格式化标记可将空格、制表符、回车符等忽略

1.6 转义字符：转义字符让特殊字符显示出来。

语法：实体名称;

二、列表标记

2.1 无序列表

ul type=”列表项的标签符”

li项目一/li

li项目二/li

li项目三/li

......

/ul

注意： type表示了项目符号：

disc(默认) 实心圆

circle：空心圆

square：实心方块

2.2 有序列表：

ol type=”列表项的标记符” start=”起始值”

li项目一/li

li项目二/li

li项目三/li

......

/ol

注意：1. 1:1,2,3,.......

a:a,b,c,d,e.......

A:A,B,C,D,E.......

i:i,ii,iii,iv......

I:I,II,III,IV......

2.start表示起始值,从第几个数开始计算

2.3 嵌套排列

ol type="1"

lih/li

lit/li

ul type="disc"

lim/li

lil/li

/ul

li5/li

/ol

2.4 分割线标记：hr align=”对齐方式” size=”水平线高度” width=”水平线宽度”

color=”水平线颜色”

三、超链接标记

3.1 文本链接：a href=”目标URL” target=”目标窗口”指针文本/a

注意： 1.href表示文本链接的目标资源的URL

绝对地址和相对地址

绝对地址：在任何情况下都可以找到的地址（例如：网址）

相对地址：必须知道当前所在，才能找到（../表示上一级目录，/表示下级目录）例子：../img/baidu.jpg 表示在当前位置的上一层目录下的img文件夹中的baidu.jpg 文件。

3.2 图片标记：img src=”图片文件路径” alt=”提示文本” height=”图片高度” width=”图片宽度”/

3.3 多媒体标记

3.3.1 滚动字幕标记：marquee可以实现文字或图片的跑马灯效果

marquee..../marquee

marquee的属性：

behavior 指定了跑马灯的效果：scroll(滚动)、slide(滑动)、alternate(交替)

bgcolor:跑马灯的背景颜色

direction:跑马灯的移动方向，left（左）、right(右)、up(上)、down(下)

scrolldelay:每次移动的延迟时间，单位毫秒

loop:跑马灯运行次数，-1表示无限循环

height、width

hspace:左右空白宽度

vspace:上下空白宽度

3.3.2 嵌入音乐文件

audio src=”文件地址” 提示文字/audio

3.3.3 嵌入视频文件

video src=”视频文件地址” controls=”controls”提示文字/video

四、表格

4.1 表格基本语法：

table

tr

......

td单元格内容/td

......

/tr

/table

注意：

table:声明一个表格对象

tr:声明一行

td:声明一个单元格

4.2 表格的基本属性

1.align 对齐方式：left、center、right

2.border:表格边框

3.bordercolor:边框颜色

4.bgcolor:表格背景颜色

5.background:背景图片

6.height、width

4.3 单元格合并

1.rowspan:所跨的行数

2.colspan:所跨的列数

五、表单

5.1 表单标签：form action=”URL” method=”get|post” target=”...”/form

注意：form：该标记中包含的数据将被提交到服务器或者电子邮件中

action:指定服务器端处理提交表单信息的程序是什么。URL地址或电子邮件地址

method:get/post:数据传输到服务器的传递方法

target:服务器返回文档结果的显示位置：_blank:在新的浏览器窗口中打开

_self:在当前浏览器中显示

5.2 表单标记

5.2.1 input标签：input type=”类型” name=”服务器 获取用户输入信息的名字” value=”初始值”

注意：1.type类型（输入类型）:

1. text:单行文本框

2. password:密码输入框

3. radio:单选按钮 checked表示默认

4. checkbox:复选框 checked表示默认

5. submit:提交按钮

6. reset:重置按钮

7. button:普通按钮

2.maxlength：输入的最大长度

5.2.2 select标签

select name=”” size=”” multiple

option value=”选项1” 选项1

.......

option value=”选项n” 选项n

/select

注意：name:服务器 获取用户输入信息的名字

value ：初始值

option：下拉框的内容

multiple:多选，若没有multiple则是单选

selected:表示默认选项

size:表示长度

5.2.3 textarea 标签：textarea name=”...” cols=”...” rows=”...” wrap=”off/virtual/physical”

/textarea

注意: name：多行文本框的名称

cols：一行可容纳的字符数

rows：表示可显示额的行数

wrap:virtual和phycal控制自动换行

html怎么用div做按钮？如下面这张图...

需要准备的材料分别有：电脑、chrome浏览器、html编辑器。

1、首先，打开html编辑器，新建一个html文件，例如：index.html，填充问题基础代码。

2、其次，在index.html中的按钮标签中，输入样式代码：

style="width: 80px; height: 40px;background-color: #e6b900; border: 0px;border-radius: 3px;"

3、浏览器运行index.html页面，此时成功将提交按钮修改为黄色div样式。

HTML常用标签

Html常用标签总结，具体可分为常用基础标签、常用表单基础标签、常用表格基础标签、常用列表标签、常用框架标签、常用链接标签和常用图像标签七大类。

01

常用基本标签

html/html 定义html文档

head/head定义文章标题和其他在网页内不显示的信息

title/title　定义文档标题

body/body定义文档的主体内容

h1h1定义最大标题，由1依次往后排开，1最大

!--…--注释

02

常用表单基础标签

form/form定义表单

input定义输入控件

textarea/textarea定义多行文本输入

button定义按钮

select定义选择的下拉列表

optgroup定义选择列表中的选项组合

option定义选择列表的选项

label定义input的标注

fieldset定义围绕表单的边框

legend定义fieldset的标题

03

常用表格基础标签

table定义表格

caption定义表格标题

th定义表格中的表单元格

tr定义表格中的行

td定义表格中的单元

thead定义表格中的表头内容

tbody定义表格中的主体内容

tfoot定义表格中的脚注

cold定义表格中一个或者多列的属性值

colgroup定义表格中供格式化的列组

04

常用列表标签

ul/ul定义无序列表

ol/ol定义有序列表

li/li定义列表的项目

dl定义列表

dt定义列表中的项目

dd定义列表中项目的描述

menu定义命令列表

menuitem定义用户可以从弹出菜单调用的命令

05

常用框架标签

frame定义框架集的窗口或者框架

frameset定义框架集

noframes定义针对不支持框架的用户代替内容。

iframe定义内联框架

06

常用链接标签

a定义锚

linke定义文档与外部资源的关系

07

常用图像标签

img/img定义图像

map/map定义图像映射

area/area定义图像地图内的区域