<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html</title>
</head>
<body>
<!--
这是注释
-->
<br />
<a name="top"></a>
<p align="center">这是段落</p>
<h3>这是段落</h3>
<b>定义粗体文本</b>
<i>定义斜体文本</i>
<del>定义删除文本</del>
<sup>定义上标字</sup>
<sub>定义下标字</sub>
<br />
<a href="http://www.baidu.com" target="_blank" >定义超链接,这是外链接</a>
<br />
<a href="img/QQ截图20170824152024.jpg" target="_parent">这是内链接</a>
<br />
<a href="sms:18621190432">它还可以链接邮箱、拨打电话、发送短信</a>
<br />
<!-- 它还可以作为锚点,例如网页中的top按钮 -->
<a href="#top">top(#位置名)</a>
<br />
<!--
下面是img,img的常用属性: src,width,height,alt
地址最好写为相对路径, ../表示回到上一层目录 ./表示当前目录
-->
<img src="img/铅笔.jpg" width="100" height="100" alt="这是替代文字" />
<br />
<!--
列表分为无序列表和有序列表,它的常用属性为type
有序列表格式: <ul><li></li></ul>
type为disc:实心原点,circle:空心圆,square:长方形
有序列表格式: <ol><li></li></ol>
type为1,a,A,i,I用来设置项目前面的标记
此外还有start属性,设置排序的起点数值
-->
<ul type="square">
<li>苹果</li>
<li>香蕉</li>
<li>鸭梨</li>
</ul>
<ol type="I" start="10">
<li>苹果</li>
<li>香蕉</li>
<li>鸭梨</li>
</ol>
<br />
<!--
定义列表
-->
<dl>
<dt>一</dt>
<dd>二</dd>
<dt>一</dt>
<dd>二</dd>
<dd>二</dd>
</dl>
<br />
<!--
HTML实体字符,一个字符实体包含三个部分:
& 实体名 ;
实体名大小写敏感!
-->
空格 空格
<!--
表格
与表格相关的标签
<caption> 定义表格标题
<col> 定义列
<colgroup> 定义表格列的分组
<table> 定义表格
<tbody> 定义表格主体
<td> 定义一个单元格
<tfoot> 定义表格的表注(底部)
<th> 定义表格表头
<thead> 定义表格的表头
<tr> 定义行
属性说明:
属性 值 说明
width px、 % 指定表格的宽度
height px、% 表格的高度
border px 指定表格边框的宽度
cellpadding px 指定边框与内容之间的空白
cellspacing px、 % 指定单元格之间的空白
align left、right 、center 指定表格的对齐方式
valign top、middle 、bottom 垂直排列方式
colspan 列数 合并列单元格
rowspan 行数 合并行单元格
bgcolor 颜色值 表格背景色
background 图片 表格背景图
bordercolor 颜色值 表格边框颜色
-->
<table border="1">
<th>表头</th>
<th>表头</th>
<tr>
<td>row 1,cell 1</td>
<td>row 1,cell 2</td>
</tr>
<tr>
<td>row 2,cell 1</td>
<td>row 2,cell 2</td>
</tr>
</table>
<br />
<!--
内嵌框架
语法: <iframe src="URL" name="框架名"></iframe>
常用属性: width,height,scrolling(是否显示滚动条),frameborder(是否显示边框)
-->
<iframe src="http://www.baidu.com" name="baidu" height="300" width="300" frameborder="0" scrolling="auto"></iframe>
<br />
<!--
form表单,表单主要负责获取用户填写的数据,并通过浏览器向服务器传送数据。
表单常用属性:
属性 说明
name 表单的名称
action 表单提交地址
method 表单数据提交的方式 (get:在url地址上面传送参数到服务器,post:在后台传送参数到服务器)
enctype MIME类型
target 打开方式(_blank:在一个新的窗口打开 _self:在相同的框架中调入文档 _top:把文档调入原来的最顶部的浏览器窗口中)
-->
<form>
用户名:<input type="text" name="userName" />
密码:<input type="password" name="psw" />
</form>
<br />
<!--
form---文本域
文本域通过<input type="text"> 标签来设定,
当用户要在表单中键入字母、数字等内容时,就会用到文本域。
文本域的缺省宽度是20个字符
属性 说明
type input元素类型
name input 元素的名称
value input 元素的值
size input 元素的宽度
readonly 是否只读
maxlength 输入字符的最大长度
disabled 是否禁用
form---密码字段
密码字段通过标签<input type="password"> 来定义
密码字段字符不会明文显示,而是以星号或圆点替代。
属性 说明
type input元素类型
name input 元素的名称
size input 元素的宽度
maxlength 定义最多输入的字符数
-->
<br />
<!--
form---单选按钮
name属性:定义单选框的名称,要保证数据的准确获取,
单选框都是以组为单位使用的,在同一组的单选按项要用同一个名称。
checked可以将其定义为缺省值
form---复选按钮
和单选按钮差不多,只是可以选择多个
-->
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
<br />
<input type="checkbox" name="like" value="吃饭" />吃饭
<input type="checkbox" name="like" value="睡觉" />睡觉
<br />
<!--
form---提交按钮
-->
<input type="submit" />
<br />
<!--
form---隐藏域
隐藏域用于在程序发送没有必要让用户看到特定值的时候使用。
-->
<input type="hidden" name="隐藏" value="10" />
<br />
<!--
上传文件
注意:
利用这项功能时,在 form 标签中要指定method属性。
要把method 指定为post, enctype属性指定为 multipart/form-data。
multiple 控制是否上传多文件
-->
<input type="file" name="f" multiple="multiple" />
<br />
<!--
textarea:多行文本域
属性 说明
name 元素的名称
rows 指定文本框的高度
cols 指定文本框的宽度
-->
<textarea name="多行文本" rows="5" cols="20" ></textarea>
<br />
<!--
form---简单下拉框
属性 说明
name 下拉列表框的名称
size 下拉列表框的显示行数
multiple 是否多选
disabled 是否禁用
selected 设置默认选中的选项
value 选项值
lable 标签的作用是将输入项或选项及其标签文字关联起来。
optgroup(表单元素:下拉框分组)
-->
<select name="sel">
<option value="">默认选项</option>
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
</select>
<br />
<!--
音频
不同浏览器会对音频的兼容性不同,所以最好是在属性type中指明其类型
属性说明:
autoplay 如果出现该属性,则视频在就绪后马上播放。
controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果 使用 "autoplay",则忽略该属性。
src url 要播放的视频的 URL。
width 设置视频播放器的宽度。
height 设置视频播放器的高度。
-->
<audio src="音乐.mp3" controls="controls"></audio>
<!--
视频
基本格式:<video src="4.ogv" controls ></viedo>
其属性与音频类同。
-->
<video src="shipin.wmv" controls="controls"></video>
</body>
</html>