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

前端技术 2023/09/05 HTML
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 style=\"clear:both;\">


（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\" class=\"button\" type=\"button\" value=\"登录\" onclick=\"\"></input>
<input id=\"register_button\" class=\"button\" type=\"button\" value=\"注册\" onclick=\"location.href=\'\'\">



文本域：<input id=\"\" name=\"\" class=\"\" type=\"text\"></input>

密码域：<input id=\"\" name=\"\" class=\"\" type=\"password\"></input>
普通按钮：<input id=\"\" name=\"\" class=\"\" type=\"button\"></input>
单选按钮：<input id=\"\" name=\"\" class=\"\" type=\"radio\"></input>
多选按钮：<input id=\"\" name=\"\" class=\"\" type=\"checkbox\"></input>

为了显示上传文件名：

<input id=\"\" name=\"\" class=\"\" type=\"text\" onchange=\"document.getElementById(\'\').value=this.value\"></input>
文件上传：<input id=\"\" name=\"\" class=\"\" type=\"file\"></input>
隐藏域：<input id=\"\" name=\"\" class=\"\" type=\"hidden\"></input>
提交按钮：<input id=\"\" name=\"\" class=\"\" type=\"submit\"></input>
图片提交按钮：<input id=\"\" name=\"\" class=\"\" type=\"image\"></input>
重置按钮：<input id=\"\" name=\"\" class=\"\" type=\"reset\"></input>

多行文本域：<textarea cols=\"\" rows=\"\" id=\"\" name=\"\"></textarea>

下拉菜单：

复制代码
代码如下:

<select name=\"\" size=\"\" multiple>
<option value=\"\" selected></option>
<option value=\"\"></option>
</select>


（3）超链接
点击跳转到JS:<a class=\"\" href=\"#\" id=\"\" onclick=\"location.href=\'\'\"></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>

本文地址：https://www.stayed.cn/item/14267

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案