Html主要内容总结

网页组成: 文本、图片、音频、视频、超链接等相关元素组成

web标准：结构(html)、表现(css)、行为（javaScript）

基本骨架：<html><head><title></title></head><body></body></html>

文本格式化标签(双标签）：加粗（strong）、倾斜（em）、（ins）、（del）

插入图片： <img src="图片的路径" alt="替换文本" title="鼠标悬停时的提示文本">

路径：绝对路径:

<img src="D:\web83\day01\02-案例\baby.jpg" alt="">


<img src="http://www.itheima.com/images/logo.png" alt="">）

相对路径:

同级目录
   方法一: 目标文件名称
   方法二:./目标文件名称
下级目录
   方法一: 目标文件夹/目标文件名称
   方法二:./目标文件夹/目标文件名称
上级目录
   上一级
   ../目标文件名称
   上两级
   ../../目标文件名称

音频插入：<audio src="./05-素材/music.mp3" controls autoplay loop></audio>

src 音频的播放路径(必写属性)
controls 显示播放控件
autoplay 音频加载完毕会自动播放(部分浏览器不支持)
loop 循环播放

视频标签：<video src="./05-素材/video.mp4" controls width="400" autoplay muted loop></video>

src 视频的路径(必写属性)
controls 显示视频的播放控件
width:设置宽度
autoplay:视频加载完毕自动播放需要配合muted属性实现静音播放
loop:循环播放

插入超级链接标签：<a href="链接地址">链接文本</a>

<a href="#">空链接</a>
target:设置连接的跳转方式
   取值
   _self:默认值当前窗口跳转
   _blank:保留当前窗口,从新打开新的窗口

列表标签：无序列表（默认小圆点）有序列表（默认前面有数字）自定义列表（dt比dd靠左）

无序列表：ul包含多个li 【消除默认样式：list-style：none】

有序列表: ol包含多个li 【消除默认样式：list-style：none】

自定义列表：dl包含dt（靠左）和dd 【消除默认样式：通配符中的margin：0和padding：0即可消除】

表格：<table>
<tr>
<td></td>
<td></td>
...
</tr>
...
</table>
table 表格整体
tr 表格的每一行
td 单元格

表头单元格：<th>表头单元格</th> 默认加粗居中效果【写在第一行】
<caption>学生信息管理表</caption> 表格的大标题【表示表格的大标题放在table标签里面】

表格合并：跨行合并（rowspan）或者跨列合并（colspan)【上下合并→只保留最上的，删除其他左右合并→只保留最左的，删除其他】

表单：input系列：【placeholder和value区别主要是placeholder在鼠标放置后文字后自动消失】

文本框<input type="text" placeholder="占位符" >

密码框<input type="password" placeholder="占位符">

单选框
需要设置相同的name属性实现多选一的效果
checked 默认选中
<input type="radio">

复选框
checked 默认选中
<input type="checkbox">

文件上传 
<input type="file" multiple>

提交按钮
<input type="submit" value="提交按钮">
重置按钮
<input type="reset" value="重置按钮">
普通按钮(后期配合js一起使用-)
<input type="button" value="普通按钮">
搜索
<input type="search">

button按钮

<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
后期配合js一起使用-
<button type="button">普通按钮</button>

select下拉菜单

<select>
<option value="">--请选择所在城市--</option>
<option value="" selected>武汉</option>

</select>

文本域

留言板:<textarea placeholder="请您留言"></textarea>

label标签

作用:提升用户体验

使用方法①：

1.使用label标签把内容（如：文本）包裹起来

2.在表单标签上添加id属性

3.在label标签的for属性中设置对应的id属性值

使用方法②：

1.直接使用label标签把内容（如：文本）和表单标签一起包裹起来

2.需要把label标签的for属性删除即可