HTML整理02

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>

猜你喜欢

转载自www.cnblogs.com/zhony/p/10028272.html
今日推荐