常用html元素总结包括基本结构、文档类型、头部、主体等等

2020-03-24 16:43:23

字体：大中小

来源：转载

供稿：网友

1.基本结构：

复制代码代码如下:
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"
html
head
meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
title /title
/head
body
/body
/html

2.文档类型：

(1)HTML 4.01

!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd

(2)HTML5

!DOCTYPE html

(3)XHTML 1.0

复制代码代码如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

3.头部：
（1）字符集

复制代码代码如下:
meta http-equiv="Content-Type" content="text/html; charset=UTF-8"

（2）引入JS

复制代码代码如下:
script language="javascript" /script
script language="javascript" src="" /script
script language="javascript" var u="__URL__";var a="__APP__"; /script
script language="javascript" src="__PUBLIC__/js/jquery-1.8.1.min.js" /script

（3）引入CSS

复制代码代码如下:
style type="text/css" /style
link rel="stylesheet" href="" type="text/css"

（4）设置默认跳转

复制代码代码如下:
base href="" /
base target="_blank" /

（5）设置搜索引擎相关信息

复制代码代码如下:
meta name="description" content=",," /
meta name="keywords" content=",," /

4.主体：

（1）基本内容

复制代码代码如下:
body onload=""
div id="" class="" /div
div

（2）表单
GET方式提交： form id= action= method= post /form
POST方式提交： form id= action= method= get /form

携带文件提交： form id= action= method= post enctype= multipart/form-data /form

首页常用：

复制代码代码如下:
input id="username" name="username" class="" type="text" placeholder="用户名" /input
input id="password" name="password" class="" type="password" placeholder="密码" /input
input id="login_button" type="button" value="登录" register_button" type="button" value="注册"

文本域： input id= name= >
密码域： input id= name= >普通按钮： input id= name= >单选按钮： input id= name= >多选按钮： input id= name= >
为了显示上传文件名：

input id= name= '').value=this.value /input
文件上传： input id= name= >隐藏域： input id= name= >提交按钮： input id= name= >图片提交按钮： input id= name= >重置按钮： input id= name= >
多行文本域： textarea cols= rows= id= name= /textarea

下拉菜单：

复制代码代码如下:
select name="" size="" multiple
option value="" selected /option
option value="" /option
/select

（3）超链接
点击跳转到JS: a '' /a
空超链接（点击跳到页首）： a href= # /a
空超链接（点击不动）： a href= javascript:void(0); /a

图片超链接： a href= img width= height= src= /a

（4）图片
普通图片： img src=

设置宽高的图片（按照比例缩小，文件大小不变）： img width= height= src=

（5）表格

复制代码代码如下:
table border="1" cellpadding="10" cellspacing="0"
tr
th width="100px" A /th
th width="200px" B /th
/tr
tr
td A /td
td B /td
/tr
/table

（6）列表

无序列表：

复制代码代码如下:
ul type="disc"
li 第一点 /li
li 第二点 /li
/ul
ul type="square"
li 第一点 /li
li 第二点 /li
/ul
ul type="circle"
li 第一点 /li
li 第二点 /li
/ul

有序列表：

复制代码代码如下:
ol type="1"
li 第一点 /li
li 第二点 /li
/ol
ol type="a"
li 第一点 /li
li 第二点 /li
/ol
ol type="A"
li 第一点 /li
li 第二点 /li
/ol
ol type="i"
li 第一点 /li
li 第二点 /li
/ol
ol type="I"
li 第一点 /li
li 第二点 /li
/ol

（7）多媒体

滚动字幕： marquee /marquee

背景音乐： bgsound /bgsound

音频、视频、flash、mpeg等： embed /embed

（8）行控制

标题： hn /hn

段落： p /p

换行： br

水平线： hr

5.框架

复制代码代码如下:
frameset rows="50% 50%"
farme src=""
farme src=""
/frameset
html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：HTML你一定要知道的优化技巧

下一篇：利用HTML5 Canvas API绘制矩形的超级攻略