初识html5及html5常用标签

初识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	图片的宽

链接标签

1. 跳转到本地html文件
2. 跳转的网络文件
3. 跳转到同一个html文件的锚点位置

​ a.建立锚点
​ b.指向锚点

​ 这里的设置锚点是指设置id，然后使用来实现跳转

4. 跳转到指定文件的锚点位置

5. href="#" 不跳转但是会回到顶部

   href="###" 不跳转也不回到顶部
   ​ 当前页面不跳转返回值为空
   ​ 当前页面不跳转，无返回值
   ​ 当前页面不跳转，触发函数

   6. 跳转邮箱 outlook 6

   ​

表格标签

​ table表示表格的范围
​ 使用table标签的技巧
​ 1.数一数标签有多少行，有多少行就写多少个tr
​ 2.数一数标签由多少列，有多少列就写多少个td
​ 3.在数的过程中注意跨行跨列，数过的单元格不要再数
​ 常用的属性:
​ border:边框
​ cellspacing:单元格之间边框的距离
​ cellpadding:单元格里面的内容距离四个边框的距离
​ table表格里面的内容：
​ caption:表格的标题，属于表格的一部分
​ thead,tfoot,tbody:将表格分块整理，好进行整块移动，整体修改样式，比如
​ 让tbody部分所有的内容居中
​ 注意：
​ 如果遇到了一个格子跨行或者跨列（不可能同时跨行跨列），则要利用rowspan=“2”
​ 或者colspan="3"来表示格子跨了2行或者3列
​ 如果格子中没有需要填写的内容，也要用转义字符来表示空格，即&nbsp
​ 如果对格子的宽度有要求的话，则要利用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标签

​ 主要作用是对浏览器进行分块