html常规写法
来源：互联网 发布：淘宝贷款怎么回事 编辑：程序博客网 时间：2024/05/29 16:46
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本标签</title>
</head>
<body>
<!--标题标签-->
<h1 align="center">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="center">标题3</h3>
<hr color="#669999" />
<b>b标签</b><br />
<i>i标签</i><br />
<u>u标签</u><br />
<p>
第一段文字
</p>
<p>
第二段文字
</p>
<blockquote>
解释说明上述文字
</blockquote>
<hr />
y=x<sup>2</sup><br />
H<sub>2</sub>O<br />
CaCO<sub>3</sub><br />
<hr />
<pre>
自动换行。
自动换行
</pre>
<!--编译字体颜色-->
<marquee behavior="slide" bgcolor="#FF0000" direction="down">刘备</marquee>
<bgsound src="" loop="-1" />
<!--有序列表，按照ABCD顺序排列-->
<ol type="A">
<li>章子怡</li>
<li>刘亦菲</li>
<li>贾玲</li>
</ol>
<hr />
<!--给名字前面加点-->
<ul type="circle">
<li>章子怡</li>
<li>刘亦菲</li>
<li>贾玲</li>
</ul>
<hr />
<dl>
<dt>财务总监</dt>
<dd>财务专员1</dd>
<dd>财务专员2</dd>
<dd>财务专员3</dd>
<dt>技术总监</dt>
<dd>程序员1</dd>
<dd>程序员2</dd>
<dd>程序员3</dd>
</dl>
<hr />
<!--选择地域-->
<select>
<option>宁夏</option>
<option>山东</option>
<option>上海</option>
</select>
<hr />
<span>sapn标签</span>
<div>div标签</div>
</body>
</html>
超链接的写法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<!--
超链接标签：<a></a>
两个属性：href:设置这个超链接需要连接到的资源
target:设置打开资源的方式
超链接 ：默认的协议为file://
超链接的两个作用：
1：链接到想要连接的资源
2：打锚点<a name="锚点名称"></a>,想去哪里就给哪里打锚点
如何去到锚点处：<a href="#锚点名称">去到锚点处</a>
-->
<a name="top"></a>
<a href="http://www.baidu.com" target="_blank">超链接</a><br />
<a href="thunder://www.movie.com/shujiaoba.avi">摔跤吧爸爸_迅雷专用通道</a>
<a href="mailto:12345@qq.com">发送邮件</a>
<a href="#content1">第一章节</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a name="content1"></a>
文本第一章
<a href="#top">回到顶部</a>
</body>
</html>
编辑图片的写法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片标签</title>
</head>
<!--
图片标签：img
图片标签的属性：
src:连接的图片的位置
width：图片的宽度
height:图片的高度
alt:提示文本，当src属性是小的时候，alt属性才生效
title:当鼠标放到这张图片上的时候，会给与一个文字提示
-->
<body>
<img src="b.jpg" alt="隋伯源" width="100" height="100" border="0" usemap="#Map" title="隋伯源"/>
<map name="Map" id="Map">
<area shape="rect" coords="27,17,64,71" href="2.文本标签.html" target="_blank" />
<area shape="circle" coords="84,22,11" href="3.超链接标签.html" target="_blank" />
</map>
</body>
</html>
转义字符的写法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<h1>标题1</h1>
<!--
使用转义字符将上述的内容展示在页面上
< <
> >
& &
空格 西部 开源
商标 ®
版权 © 给加多宝分别加上版权和商标
-->
<h1>标题1</h1><br/>
&<br />
<hr />
西部 开源
<hr />
加多宝<sup>®</sup>
<hr />
加多宝<sup>©</sup>
</body>
</html>
编译表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<!--
table:整张表就用一个table来表示
caption:表的标题
tr:代表表中的一行
td:表中的一个单元格
th:表头，一般用于加粗显示字段名称
border:table标签的一个属性，用来调整表框的宽度
width:调整表的宽度
height:调整表格的高度
align:调整表格的位置
行合并和列合并：
行合并：rowspan
列合并：colspan
-->
<body>
<table border="2" align="center" width="400" height="300">
<caption><h1>成绩统计表<h1></caption>
<tr align="center">
<th>姓名</th>
<th>学科</th>
<th>成绩</th>
</tr>
<tr align="center">
<td rowspan="2">隋伯源</td>
<td>语文</td>
<td>90</td>
</tr>
<tr align="center">
<td>数学</td>
<td>60</td>
</tr>
<tr align="center">
<td>石明浩</td>
<td>语文</td>
<td>70</td>
</tr>
<tr align="center">
<td>韩卓成</td>
<td>语文</td>
<td>80</td>
</tr>
<tr align="center">
<td colspan="2">平均分</td>
<td>70</td>
</tr>
</table>
</body>
</html>
from表单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<!--
<form> 就是一个表单
<input type="text"> 单行输入域
<input type="password"/> 密码输入域
<input type="radio"/> 单选按钮
<input type="checkbox"/> 多选按钮
<select/> 下拉选项
<input type="hidden"/> 隐藏域，不会显示到html页面上，但可以携带数据。
<input type="file"/> 文件选择器
<textarea></textarea> 多行输入域
<input type="submit"/> 提交按钮
<input type="button"/> 普通按钮
<input type="reset"/> 重置按钮
注意：
form表单里面有两个属性需要大家注意：
action="表单需要提交到哪个路径"
method=get/post
如果是get方式提交file:///C:/Users/Administrator/Desktop/8.form表单.html?username=jack&password=jack
之前的url路径?username=jack&password=jack,如果是get方式提交的话，我们的提交参数会被绑定在url路径中
如果post方式提交：我们的所有的提交参数会被封装在请求体中
-->
<body>
<form action="5.转义字符.html" method="post">
用户名:<input type="text" value="请输入用户名" name="username"/><br />
密码:<input type="password" name="password"/><br />
性别:<input type="radio" name="gender" value="男"/>男<input type="radio" name="gender" value="女"/>女<br />
兴趣爱好:<input type="checkbox" name="hobby" value="篮球"/>篮球<input type="checkbox" name="hobby" value="足球"/>足球<input type="checkbox" name="hobby" value="乒乓球"/>乒乓球<br />
学历:
<select name="xueli">
<option value="benke">本科</option>
<option value="shuoshi">硕士</option>
<option value="boshi">博士</option>
</select><br />
<input type="hidden" /><br />
上传一张你的靓照:<input type="file" name="file"/><br />
请简单做一个自我介绍：<textarea rows="5" cols="10"></textarea><br />
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
</form>
</body>
</html>
表与from表单混合
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<table border="1" width="300" height="200" bgcolor="#FF0000" align="center">
<form action="8.form表单.html" method="get">
<tr>
<td>用户名</td>
<td><input type="text" name="username" value="请输入用户名" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password"/></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" value="男" name="gender" />男<input type="radio" name="gender" value="女" />女</td>
</tr>
<tr>
<td>爱好</td>
<td><input type="checkbox" name="hobby" value="篮球"/>篮球<input type="checkbox" name="hobby" value="足球"/>足球<input type="checkbox" name="hobby" value="乒乓"/>乒乓</td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" value="注册" /><input type="reset" value="重置" /></td>
</tr>
</form>
</table>
</body>
</html>
- html常规写法
- html常规标签总结
- HTML-常规标签
- jQuery使用方法非常 适用于常规写法
- 处理列表元素的非常规写法。
- jquery-ui常规弹窗写法：
- strlen()函数的常规写法和递归写法
- Ruby插入排序的常规写法和递归写法
- html平方的写法
- HTML 的空格写法
- PHP嵌套HTML写法
- PHP嵌套HTML写法
- html一些简单写法
- HTML标签嵌套规则以及常规应用
- 11.02-HTML的常规使用以及作业
- 总结一下AJAX的写法——常规方法
- 复习(数据结构)：动态数组：c++_常规写法
- 常规
- [jzoj1408][vijos1472] 教主的集合序列
- 一个新的算法：珠排序
- javascript节点的操作 创建、添加、移除、移动、复制
- ListView id的使用
- Git Your branch is ahead of 'origin/master' by X commits解决方法
- html常规写法
- hashmap 深入分析 转载AlphaWang 博主的 但是写的真的很好。
- Python 函数的高级用法
- Elasticsearch的distinct项查询（去重查询）
- 小测验：解密文件——题解
- 617. Merge Two Binary Trees
- SQL大全（二）
- Linux添加服务到开机自动启动
- hive sql解决关联条件中不等值连接问题及累计值的计算
