meta
写到head标签内
1.设置字符集
2.设置页面关键字keywords
3.设置网页描述信息显示到搜做结果中
4.对网页重定向
块元素
独占一行的元素
hgroup
头标签组
em
表示语音语调的重读
不会独占一行
p
表示一个段落
会独占一行
strong
表示强调重要
不会独占一行
blockquote
表示引用别人的话
q
表示一个短引用
br
表示换行
规范
一般块元素中放行内元素
不在行内元素中放块元素
p元素中不能放任何块元素
修正
浏览器在解析网页时会对不符合规范的内容进行修正(按f12查看内存中的网页内存中的内容)
尽量不要麻烦浏览器
header
网页头
main
网页主体
footer
网页底部
nav
表示网页的导航
aside
表示侧边栏
article
独立的文章
section
表示一个独立的区块
上面的标签都不能表示时使用section
div
没有任何语义
用来表示一个区块
目前来讲div还是我们主要的布局元素
span
没有任何语义
行内元素
列表
在html中也可以创建列表
1.有序列表 ol表示有序列表->li表示列表项
2.无序列表 ul表示无序列表->li表示列表项
3.定义列表 dl表示定义列表(definition lists)->dt表示定义组(definition term) dd表示定义描述(definition description)
列表间可以互相嵌套
超链接
- 跳转到其他页面
- 跳转到本页面的特定位置
<!-- href可以是外部或内部页面地址-->
<a href="https://www.baidu.com">www.baidu.com</a>
www.baidu.com
超链接是一个行内元素
但是a标签中可以嵌套任何元素(除了a标签)
相对路径
./:当前文件夹
…/:当前文件夹的父文件夹(上一级目录)
当不写./或者…/时,默认表示./
超链接的其他方法
target
默认值:_self
_self:在当前页面打开超链接
_blank(空白的):在新的页面打开超链接
id
唯一不重复的标识(区分大小写,字母开头)
href
xxx.html:根据相对路径访问xxx.html
https://www.xxx.com/:访问外部网址
#:回到顶部
#id:去页面的任意位置(依靠id)
占位时
#:回到顶部
javascript:; :什么也不发生
替换元素
img
src:图片资源路径
alt:当图片无法显示的时候显示的文字(描述图片的文字) 如果不写alt则不会被搜索引擎收录
width:宽
height:高 宽度高度只改变一个时 图片会等比例缩放
图片的格式
jpg:照片
gif:动图
png:复杂透明效果的图片
webp:所有性能都好 但是不支持老版本的ie
base64:图片->字符->图片 适合网页和图片需要同时加载时候
内联框架
iframe
用于在当前页面中引入一个其他页面
src"引入网页路径
frameborder:是否存在边界
内联框架引用的网页 不会被搜索引擎和爬虫发现
音频视频
audio:向页面中引入一个外部的音频文件
音视频文件引入时 默认不允许用户操作
controls:加入属性 controls(特殊属性只有key没有value) 便允许用户控制播放
autoplay(特殊属性只有key没有value) :自动播放
如果设置了autoplay 则音乐在打开页面时会自动播放 但是目前来看大部分浏览器都不会自动对音乐进行播放
即基本上没啥用
loop(特殊属性只有key没有value):循环播放
audio升级写法
<!-- 因为ie8及之前版本不支持播放音视频 且不会出现提示信息 故更改写法以便产生提示信息 -->
<!-- 升级写法 支持的浏览器则显示播放器 不支持的浏览器则显示提示信息 -->
<audio controls>
对不起 您的浏览器不支持音频播放
<source src="../source/audio.mp3">
</audio>
显示提示信息
可以写多个source 不会同时使用 当前面的都不能用时使用这一个
embed
在老版本浏览器中引入音频视频(基本上所有浏览器都支持)
默认且仅能打开浏览器时自动播放
src 资源属性
type文件具体格式
width 宽
height高
audio再次升级
<!-- 因为ie8及之前版本不支持播放音视频 且不会出现提示信息 故更改写法以便产生提示信息 -->
<!-- 升级写法 支持的浏览器则显示播放器 不支持的浏览器则显示提示信息 -->
<audio controls>
<source src="../source/audio.mp3">
<embed src="../source/audio.mp3" type="audio/mp3" width="300" height="60">
</audio>
video
src
controls
loop
source子标签
老版本浏览器用embed
表格基本结构
<!doctype html> <!--文档声明-->
<html>
<head>
<meta charset="utf-8">
<title>表格基本结构</title>
</head>
<body>
<!-- 表格 -->
<table border="1">
<!-- 标题 -->
<caption>学生信息</caption>
<!-- 表格头部 -->
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>20</td>
<td>满族</td>
<td>群众</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>19</td>
<td>回族</td>
<td>党员</td>
</tr>
<tr>
<td>赵六</td>
<td>女</td>
<td>21</td>
<td>壮族</td>
<td>团员</td>
</tr>
</tbody>
<!-- 表格脚注 -->
<tfoot>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计:4人</td>
</tfoot>
</table>
</body>
</html>
table上的属性
border
cellspacing
加粗样式
其他上的属性
align
left center right
valign
top middle bottom
rowspan
colspan
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
