HTML是超文本标记语言
HTML的基本结构:
<html> <head> <title>相当于网页标题</title> </head> <body> 内容 </body> </html>
PS:打完开始标签就打上结束标签,以免忘记漏掉。
设置页面编码:
<meta charset= "utf-8" />
ps:utf-8(多国语言编码) gd2312(中文简体编码)
换行符:
<br/>
段落:
<p>这是一个段落</p>
标题:
<h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6>
ps:只有h1到h6,没有h7以上的。
文本格式化:
<b>定义粗体文本</b> <i> 定义斜体文本 </i> <del>定义删除文本</del> <sup>定义上标字</sup> <sub>定义下标字</sub>
链接:
<a href=“URL”> ~ </a>
ps: href(定义链接地址) title(链接提示信息)
target {链接打开方式(_blank 新的空白页,_self 当前页,_top 顶部)}
其他类型链接:
<a href=“mailto:邮箱地址”>邮件链接</a> <a href=“tel:电话号码”>一键拨打</a> <a href="sms:139xxxxxxx">一键发送短信</a>
锚点:
<a href="#位置名"> ~ </a> <a name="位置名"> ~ </a>
PS:相应的位置名要一致。
插入图像:
<img src="URL" width="100" height="100" alt="替代文字" />
PS:一般情况下,高度和宽度设置一个就行,另一个会自动跟随变化。
相对地址:
./ (当前目录)
../(回到上一层目录)
图像热区:
<img src="URL" usemap="# map 名称" /> <map name="map 名称"> <area shape="形状" coords="坐标值" href="URL" /> </map>
PS: shape(热区形状,有三种:rect 矩形,circle 圆形, poly 多边形)
soords (形状的坐标值,矩形用对角坐标、圆形用圆心和半径的坐标,多边形你懂的)
audio 音频:
<audio src="song.ogg" controls="controls"></audio> 如果考虑到不同浏览器对视频文件的兼容性 <audio width="320" height="240" controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> <p>Your browser does not support the audio tag.</p> </audio >
PS: autoplay autoplay如果出现该属性,则音频在就绪后马上播放。
controls controls如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
src url要播放的音频的 URL。
preload preload如果出现该属性,则音频在页面加载时进行加载,并预备播放,如果使用 "autoplay",则忽略该属性。
video 视频:
<video src=“movie.mp4” controls="controls"></video> 如果考虑到不同浏览器对视频文件的兼容性 <video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> <p>Your browser does not support the video tag.</p> </video>
PS:视频的大多属性和音频一样,视频比音频多了:
mutedmuted规定视频的音频输出应该被静音。
posterURL规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
widthpixels设置视频播放器的宽度。
heightpixels设置视频播放器的高度。
实体字符:
> > < < 空格 " 引号 © 版权符号 & &号 ®; 注册商标
PS:  这也是一个空格符,比 更好哦。
列表
列表用来在网页上组织信息,HTML能够创建三种类型的列表:无序列表、有序列表和定义列表。
无序列表:
<ul> <li>……</li> <li>……</li> <li>……</li> </ul>
PS:可以加上我们想要的属性
属性:type (在无序列表中用来设置项目前面的标记)
值:disc-默认实心圆,circle-空心圆,square-实心方块
有序列表:
有序列表使用数字或字母系统来组织列表里包含的信息。有序列表可以使用数字(默认)、大写字母、小写字母、大写罗马数字和小写罗马数字排列项目。
<ol type="a" start="3"> <li>……</li> <li>……</li> <li>……</li> </ol>
ps: type 用来设置项目前面的标记,可以是1、 a 、 A、i、I
start 用来设置排序的起点数值
定义列表:
<dl> <dt>HTML</dt> <dd>html 是超文本标记语言</dd> <dt>XHTML</dt> <dd>可扩展超文本置标语言 </dd> <dd>表现方式与超文本置标语言(HTML)类似,不过语法上更加严格 </dd> </dl>
HTML表格
表格由 <table> 标签以及一个或多个 tr、th或td 元素组成。
<
table
border="1">
<
thead
>
<
tr
>
<
th
>序号</
th
>
<
th
>姓名</
th
>
</
tr
>
</
thead
>
<
tbody
>
<
tr
>
<
th
>1.</
th
>
<
td
>nick</
td
>
</
tr
>
<
tr
>
<
th
>2.</
th
>
<
td
>jenny</
td
>
</
tr
>
</
tbody
>
</
table
>
<iframe>内嵌框架:
<iframe src="URL" name="框架名"> ~ </iframe>
PS:scrolling(是否显示滚动条:yes-显示,no-不显示,auto-自动)
form 表单
<form name="form1" action="URL" method="get"> 用户名:<input type="text" name="uname" /> 密 码:<input type="password" name="passwd" /> </form>
PS:属性 说明
name 表单的名称
action 表单提交地址
method 表单数据提交的方式 (get ,post)
enctype MIME类型
target 打开方式
<input> 表单元素:输入框
属性 说明
type input元素类型
name input 元素的名称
value input 元素的值
size input 元素的宽度
readonly是否只读
maxlength 输入字符的最大长度
disabled是否禁用
文本框
<input type="text" name="username" value="" />
密码框
<input type="password"name="passwd"/>
单选按钮
<input type="radio"name="sex"value="1"checked="checked" />男 <input type="radio"name="sex"value="0"/>女
PS:name要保证一致,checked表示默认选中。
复选框
<input type="checkbox"name="love"value="music" checked="checked"/> 听音乐 <input type="checkbox"name="love" value="movie"/> 看电影 <input type="checkbox"name="love" value="game"/> 玩游戏
确定按钮
<input type="button" name="btn" value="确定"/>
提交按钮
<input type="submit" name="comit" value="提交"/>
重置按钮
<input type="reset" name="reset" value="重写"/>
图片按钮
<input type="image"name="img_btn" src="btn.gif"/>
隐藏域(隐藏域用于在程序发送没有必要让用户看到特定值的时候使用。)
<input type="hidden" name="uid" value="10"/>
上传文件
<input type=“file” name=“photo”/>
PS:利用这项功能时,在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。
multiple 控制是否上传多文件
多方文本域:
<textarea name="content" rows="5" cols="50"> </textarea>
select 表单元素:下拉框和 optqroup表单元素:下拉框分组
<select name="city" multiple> <optgroup label="广东"> <option value="1">广州</option> <option value="2">深圳</option> </optgroup> <optgroup label="其他"> <option value="3">长沙</option> <option value="4">香港</option> </optgroup> </select>
PS: 属性 说明
name下拉列表框的名称
size下拉列表框的显示行数
multiple 是否多选
disabled 是否禁用
selected设置默认选中的选项
value 选项的值
label 指定组合选项名称
label
lable 标签的作用是将输入项或选项及其标签文字关联起来。
<input type="radio" name="sex" value="1" id="male" /> <label for="male">男</label> <input type="radio" name="sex" value="0" id="female" /> <label for="female">女</label>
原文:http://www.cnblogs.com/qq1193447294/p/5740432.html