文章目录
初识html5及html5常用标签
什么是html
网页html是用来显示数据的,既然是用来显示数据的,就需要设置相应的显示效果
什么是标签
一个标签就是一个容器,就是一个对象,标签包裹的就是数据,属性改变的就是样式,方法就是标签的行为
HTML注释
<–!--> | |
---|---|
// | 单行注释可以在 script标签和style标签中使用 |
/* */ | 多行注释可以在 script标签和style标签中使用 |
html整体上可分为两部分
里面包含了:
{
<!-- 用于定义HTML页面的元数据 -->
<meta charset="UTF-8">
<!-- 定义文档标题 -->
<title></title>
<script type="text/javascript">
/*包含script脚本*/
</script>
<noscript>
<!-- 向禁用了js脚本或者不支持js脚本的浏览器显示提示信息 -->
</noscript>
<style type="text/css">
/* 该元素用于定义内部CSS样式 */
</style>
<!-- 用于链接图表,css样式文件等外部资源-->
<link rel="stylesheet" href="" />
<!-- 用于指定该页面中所有链接的基准路径-->
<base href="" />
}
base元素
base元素
1.该元素必须是空元素
2.该元素除了可以指定id属性外,还可以指定href和target
href: 指定所有链接的基准路径
target: 指定超链接默认在哪个窗口打开链接
可以取值
_blank:新的空白窗口打开
_parent:父容器窗口打开
_self: 当前窗口打开
框架标签的name值: 指定某个框架标签打开
meta元素
meta用于定义页面元信息 这些信息是以键值对的形式体现
转义字符
在编写代码时如果特殊字符不进行转义是不会显示信息的,具体的转义字符不用记忆,可通过http://tool.oschina.net/commons?type=2 特殊字符网站 进行查询
常用标签
hr | 水平线标签 |
---|---|
h1 - h6 | 标题标签,块级元素 |
p | 段落标签,块级元素 |
strong | 加粗,满足语义化原则 有利于seo优化 |
em | 倾斜,满足语义化原则 有利于seo优化 |
del | 删除线 |
b | 单纯字体加粗 seo不认识 |
i | 单纯字体倾斜 seo不认识 |
u | 单纯字体加下划线 seo不认识 |
s | 删除线 |
sup | 上标 |
sub | 下标 |
容器标签
(毫无语义,仅作为容器使用,里面常用于放置子标签)
span | 行内元素: 内容撑开宽度,两边如果都是行内元素的可以排列在一行 strong em |
---|---|
div | 块级元素: 独占一行 p h1-h6 |
图片标签
图片四要素:
src | 图片路径 href |
---|---|
alt | 1.有利于seo优化 2.如果图片不存在会显示对应的提示信息 3.某些浏览器将鼠标放置在图片上方,也会显示,但是部分浏览器不支持,可以使用title属性 |
height | 图片的高 |
width | 图片的宽 |
链接标签
- 跳转到本地html文件
- 跳转的网络文件
- 跳转到同一个html文件的锚点位置
a.建立锚点
b.指向锚点
这里的设置锚点是指设置id,然后使用来实现跳转
-
跳转到指定文件的锚点位置
-
href="#" 不跳转但是会回到顶部
href="###" 不跳转也不回到顶部
当前页面不跳转返回值为空
当前页面不跳转,无返回值
当前页面不跳转,触发函数- 跳转邮箱 outlook 6
表格标签
table表示表格的范围
使用table标签的技巧
1.数一数标签有多少行,有多少行就写多少个tr
2.数一数标签由多少列,有多少列就写多少个td
3.在数的过程中注意跨行跨列,数过的单元格不要再数
常用的属性:
border:边框
cellspacing:单元格之间边框的距离
cellpadding:单元格里面的内容距离四个边框的距离
table表格里面的内容:
caption:表格的标题,属于表格的一部分
thead,tfoot,tbody:将表格分块整理,好进行整块移动,整体修改样式,比如
让tbody部分所有的内容居中
注意:
如果遇到了一个格子跨行或者跨列(不可能同时跨行跨列),则要利用rowspan=“2”
或者colspan="3"来表示格子跨了2行或者3列
如果格子中没有需要填写的内容,也要用转义字符来表示空格,即 
如果对格子的宽度有要求的话,则要利用width="14%"来表示该格占了一行的百分之多少
视频标签
用于网页播放视频
src | 视频的路径 |
---|---|
loop | 循环播放 |
autoplay | 自动播放 |
controls | 显示控制视频播放的相关控件,可以拖放进度,暂停播放,放大等等 |
source | 是video的子标签 |
src属性只能够指定一种格式的视频文件
就可以使用source标签,它可以支持多个视频格式的文件,但是我们必须提供多个播放格式的视频。
浏览器会自动在所有的source标签中查找能够识别的视频格式
<video controls="controls">
<source src="../../video/07.员工管理系统完善.mp4" type="video/mp4"></source>
<source src="../../video/07.员工管理系统完善.ogv" type="video/ogv"></source>
<source src="../../video/07.员工管理系统完善.webm" type="video/webm"></source>
当前浏览器不支持 video直接播放,点击这里下载视频:
</video>
音频标签
<audio src="../青藏高原.mp3" controls></audio>
iframe,frameset标签
主要作用是对浏览器进行分块