dl 定义列表(了解)
1 <dl>
2 <dt>关于小米</dt>
3 <dd>了解小米</dd>
4 <dd>加入小米</dd>
5 <dd>收购小米</dd>
6 </dl>
结果:
br 换行标签
<br>
pre 原格式输出,通常用于输出代码
1 <pre>
2 悯农二首
3 —李绅
4 春种一粒粟,
5 秋收万颗子。
6 四海无闲田,
7 农夫犹饿死。
8 </pre>
h5的语法比较松散,体现在:
1. 单标签可以不用/结束
<br> 和 <br /> 一毛一样
2. 属性值外面可以是单引号或者双引号
<meta charset="utf-8"> 推荐
<meta charset='utf-8'>
<meta charset=utf-8>
3. 标签名不区分大小写
<br> <BR>
a 超链接标签
属性:
href 决定链接的跳转地址
1 <a href="https://www.baidu.com">百度</a>
target 规定在何处打开文档
1 <a href="http://www.baidu.com" target="_blank">李泽龙</a>
值:
_blank 在新标签中打开
_self 在本页面中打开(默认值)
锚点
a标签做锚点,加name属性,值自己取
1 <a id="pic">图片</a>
2 <a name="pic">图片</a>
效果一样
其他标签做锚点,加id属性,值自己取
1 <h1 id="wang">旺旺</h1>
跳转的时候,a标签的href值需要和锚点的值相对应,
例:
1 <a name="one"></a> <a href="#one">去吧,皮卡丘</a>
2 <h1 id="two"></h1> <a href="#two">去吧,皮卡丘</a>
路径
相对路径
相对于当前文件
./ 当前目录
../ 上一级目录
绝对路径
从协议开始
http
https
file
ftp
ssh
img 图片标签(单标签)
属性
src 指定图片的路径
1 <!-- 绝对地址 --> 2 1 <img src="https://www.baidu.com/img/bd_logo1.png"> 3 2 <img src="file://E:/desktop/img/5f2.jpg"> 4 <!-- 相对地址 --> 5 <img src="./1.jpg">
alt 指定图片的替代文本
1 <img src="./1.jpg" alt="亚洲4大邪术">
align 设置图片的位置
值: top/bottom/left/right
1 <img src="https://www.baidu.com/img/bd_logo1.png" align="top">
width/height 设置图片的宽高
1 <img src="../pre/1.jpg" width="100">
usemap 定义图像映射,值必须和map标签的name属性的值对应
例:
1 <map name="one"></map> <img usemap="#one">
map 标签,定义图像映射
name属性的值,一定要和img标签的usemap属性的值相对应
例:
1 <map name="one"></map> <img usemap="#one">
area 将图片划分为指定形状的区域(单标签)
属性:
shape 指定区域的形状
值:
rect 矩形,左上角和右下角的坐标
circ 圆形,圆心坐标和半径
poly 多边形,可以给任意多个点的坐标
coords 指定区域的坐标
href 指定跳转的地址
target 打开方式
1 <map name="biu"> 2 <!-- 矩形 --> 3 <area shape="rect" coords="0,0,100,70" href="http://www.lingfeng.com" /> 4 <!-- 圆形 --> 5 <area shape="circ" coords="50,105,35" href="http://www.wangru.com" target="_blank" /> 6 <!-- 多边形 --> 7 <area shape="poly" coords="0,0,50,50,80,100,20,80,0,150,100,350" href=""> 8 </map>
audio 音频标签 (h5新增的标签)
属性
src 指定音频文件的路径
controls 显示播放控件
autoplay 自动播放
loop 循环播放
muted 静音
1 <audio src="./music2.mp3" autoplay loop controls muted>您的破浏览器不支持音频标签</audio>
video 视频标签 (h5新增的标签)
属性
src 指定视频文件的路径
controls 显示播放控件
autoplay 自动播放
loop 循环播放
muted 静音
width/height 设置视频的宽高
poster 设置视频的封面
1 <video src="mv.mp4" width="500" poster="./6.jpg" controls>您的破浏览器该升级了</video>
source 标签
用于指定音视频资源,好处是可以指定多个资源,浏览器找到能播放的资源后就停止了!
1 <video width="500" controls> 2 <source src="../abc.mp4" /> 3 <!-- 黄鹤:找到‘黄鹤’之后就停止了 --> 4 <source src="./mv.mp4" /> 5 <!-- 老罗 --> 6 <source src="./video.mp4" /> 7 您的破浏览器该升级了 8 </video>
table的标签
caption 定义表格的标题
1 <caption><h2>信息表</h2></caption>
table 定义表格
属性:
border 设置表格的边框粗细
width 设置表格的宽度
height 设置表格的高度(通常不设置)
cellspacing 设置单元格之间的间距,通常设置为0
cellpadding 设置文本和边框之间的距离
align 设置表格的水平位置
值: left/center/right 左/中/右
bgcolor 设置背景颜色
background 设置背景图片
bordercolor 设置边框的颜色
1 <table border="1" align="center" width="400" cellspacing="0" cellpadding="10" bgcolor="tan" background="../html02/6.jpg" bordercolor="red"></table>
tr 定义表格的行
属性:
height 设置本行的高度
bgcolor 设置背景颜色
align 设置本行文本的位置
值: left/center/right 左/中/右
valign 设置本行文本的垂直位置
值: top/middle/bottom 上/中/下
th 定义表头单元格
会加粗并居中文本
td 定义普通单元格
属性:
height 设置单元格高度(会影响整行),有冲突时,以大的为准
width 设置单元格的宽度(会影响整列),有冲突时,以大的为准
bgcolor 设置背景颜色
align 设置本行文本的位置
值: left/center/right 左/中/右
valign 设置本行文本的垂直位置
值: top/middle/bottom 上/中/下
colspan 规定单元格横跨的列数
rowspan 规定单元格横跨的行数
1 <tr height="50"> 2 <th>学号</th> 3 <th>姓名</th> 4 <th>性别</th> 5 </tr> 6 <tr align="center" bgcolor="deeppink"> 7 <td height="50" width="400">1</td> 8 <td>宇康又睡着了</td> 9 <td width="400" rowspan="2">睡神</td> 10 </tr> 11 <tr height="100" valign="top"> 12 <td>2</td> 13 <td width="800">在下黄飞鸿</td> 14 <!-- <td width="400">告辞</td> --> 15 </tr> 16 <tr> 17 <td colspan="3">两大高手,高手过招,招招致命!</td> 18 </tr> 19 <!-- 20 tr的属性: 21 height 高度 22 bgcolor 行的背景颜色 23 align 文本的位置 24 valign 垂直位置 25 -->
thead/tfoot/tbody
1. 这3个标签,要么不加,要么3个要同时加
2. 出现的顺序是:thead/tfoot/tbody
bordercolor="red" 相当于 border:1px solid red;w3c规定css负责页面样式,HTML里面很多属性都不推荐使用了
颜色单词:
red/green/blue/yellow/black/white/orange/tan/pink/purple/gray
-->
form 表单: 用于收集用户数据
属性:
action 决定表单的提交地址,通常会写成自己的PHP文件
method 决定表单的提交方式
值:get(默认)/post
1 <form action="http://www.baidu.com/s" method="get"> 2 <input name="wd" /> 3 <button>百度一下</button> 4 </form>
input标签 定义一个输入框
属性:
name 决定输入框的名字,方便后台拿取用户输入的值
value 决定输入框的值
type 决定输入框的类型
值:
text 默认值,普通的文本输入框
password 密码输入框
radio 单选框
要想单选,name属性的值必须一致
checkbox 多选框
要想获取多个值,name属性的值需要加[]
<form action="./1.php" method="post"> 用户名:<input name="user" /><br> 密码:<input type="password" name="pwd" /><br> 性别: <input value="1" name="sex" type="radio" />男 <input value="0" name="sex" type="radio" />女 <input value="2" name="sex" type="radio" />妖 <br> 美女: <input value="1" name="mn[]" type="checkbox" />凤姐 <input value="2" name="mn[]" type="checkbox" />芙蓉姐姐 <input value="3" name="mn[]" type="checkbox" />嘟嘟姐 <input value="4" name="mn[]" type="checkbox" />号地块 <input value="5" name="mn[]" type="checkbox" />合格姐 <br> <button>提交到./1.php</button> </form>