HTML简单总结
将标签分为9个分类，逐一罗列
一、基础标签
<p>段落，段落中文本忽略空格和换行
<br>换行，用于<p>段落中换行
<h1>标题，从h1到h6
align="XX"，位置，左中右
<h1 align="center">This is heading 1</h1>
<h1 align="left">This is heading 1</h1>
<h1 align="right">This is heading 1</h1>
<br>水平线
<!--XXXX-->注释
<a>超链接 <a href="http://www.w3school.com.cn">
<img>图片 <img src="w3school.jpg" width="104" height="142" />
二、文本相关
1、文本格式化
<b>This text is bold</b>
<strong>This text is strong</strong>
<big>This text is big</big>
<em>This text is emphasized</em>
<i>This text is italic</i>
<small>This text is small</small>
This text contains <sub>subscript</sub>
This text contains <sup>superscript</sup>
2、<pre>保留文本中的空格和换行
3、“计算机输出”标签
<code>int a =1;</code>
<kbd>Keyboard input</kbd>
<tt>15521316902</tt>
<samp>Sample text</samp>
<var>var</var>
4、地址 <address>
5、引用<blockquote>,<q>
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
6、<del>，删除，文本带中横线
<ins>，插入，文本带下划线
三、链接相关
通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签
1、<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
2、图片作为超链接
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
3、target= _blank ,main，top，self，parent
4、name=标致一个跳转的锚点，herf中#来选择
<h2><a name="C4">Chapter 4</a></h2>
<a href="#C4">
提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。
# 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。
四、框架
1、垂直划分：cols
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
2、水平划分 rows=" 25%,50%,25%"
3、支持嵌套
4、<iframe>,嵌入一个web
五、HTML表单
1、表格<table>
border="3"，边框粗细；
border="0"，没有边框
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
2、标头：<th> table head，加粗效果
3、标题：<caption>我的标题</caption>, 放于table标签下
4、合并行 colspan="2" rowspan="2"
5、<table>支持嵌套
6、table属性 ,内边距，cellpadding="20"
bgcolor="red"
background="/i/eg_bg_07.gif"
7、文本属性 align="left"，表格内文本排列方向
8、frame 属性来控制围绕表格的边框
frame="box"，环绕
frame="above"
frame="below"
frame="vsides"，垂直两条横线
frame="hsides" 水平两条横线
六、列表实例
1、无序列表
<ul>
<li> …… </li>
</ul>
2、有序列表，默认序号从 1 开始，start指定开始序号
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
3、无序列表 ul 属性 type，表示项目前的符号
type="disc"，type="circle"， type="square"
4、有序列表 ol 属性 type，表示项目前的序数，默认数字1 、2、3或者A\B\C，或I\II\III
type="A"，type="I"，type="i"，
七、表单与输入
1、文本框 <input type="text" name="firstname" value="123">
2、密码 <input type="password" name="password">
3、复选框 <input type="checkbox" name="Bike" checked="checked" >
4、单选框 <input type="radio" checked="checked" name="Sex" value="male" />
5、下拉列表，默认选项 selected="selected"
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab" selected="selected">Saab</option>
</select>
6、文本域 <textarea cols="30" rows="5">
7、按钮 <input type="button" value="Hello world!">
8、文本周围绘制一个带标题的框
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>
9、提交：<input type="submit" value="Submit">，提交到form的action地址
<form action="/demo/demo_form.asp">
……
<input type="text" name="lastname" value="Mouse">
</form>
八，图像实例
1、<img src="/i/eg_mouse.jpg" width="128" height="128" />
2、<body background="/i/eg_background.jpg">
3、align="bottom"，默认bottom ，图片排列方式 ，align="bottom"，align="middle"，align="top"，
<img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
4、align ="left"，浮动到段落的左右
5、 大小：width="50" height="50"
6、文本替换图片显示：alt="向左转"
7、<img>嵌入<a>中作为超链接
8、<map> 图片映射，显示如何把一幅普通的图像设置为图像映射。
九、背景：W3C 在他们的推荐标准中已删除这些属性。
1、<body bgcolor="#d0d0d0">
2、<body bgcolor="#ffffff" text="yellow">
3、<body background="/i/eg_bg_06.gif">
十、其他
1、link <link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
2、title <title>标题不会显示在文档区</title>
3、meta
关键字 <meta name="keywords"
content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
<meta name="author"
content="w3school.com.cn">
4、重定向
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
网友评论