-
web时代
-
网页的组成:
- HTML:网页的内容和结构
- CSS:网页的样式(美化网页最重要的一块)
- JavaScript:网页的交互效果。比如:对用户鼠标事件做出响应
-
HTML的基本样式:
<!--根标签-->
<html>
<!--头部-->
<head>
<!--标题标签-->
<title>明哥的HTML标题</title>
<!--设置编码-->
<meta charset="UTF-8">
</head>
<!--主要内容-->
<body>
<div>MG的空间</div>
</body>
</html>
-
常见标签
<h>标题标签</h> 1~6
<hr> 线条
<!--input标签-->
<input placeholder="我是占位文字"> 输入框
<input value="我是默认文字">
<input type="date"> 选择日期
<input type="file">选择文件
<input type="color">选择颜色
<input type="radio">单选
<input type="checkbox">复选框
---------------------------------------------------------------------------------
<!--段落标签--> 新闻详情页
<p>我是段落</p>
---------------------------------------------------------------------------------
<!--头像标签--> 图片
<!--
绝对路径和相对路径:
相对路径:资源在当前的项目中 ./ ../ ././
绝对路径:资源从服务器那边获取 网络:http:// https:// ftp:// file:///
-->
<img src="图片路径" alt="给用户一个提示">
---------------------------------------------------------------------------------
<!--换行标签--> 换行
<br>
---------------------------------------------------------------------------------
<!--容器标签--> 容器
<div></div>
<span></span>
---------------------------------------------------------------------------------
<!--表格标签--> 表格
<table>
<tr>
<td>
---------------------------------------------------------------------------------
<!--列表标签--> 列表
** ul、** uo、** li **
<!--列表标签-->
<ul>
<li>有序列表</li>
<li>有序列表</li>
</ul>
<!--列表标签-->
<ol type='排序的类型'>
<li>有序列表</li>
<li>有序列表</li>
</ol>
---------------------------------------------------------------------------------
<!--超链接标签--> #跳转到当前界面
<a href="#">我是超链接</a>
<a href="http://baidu.com" target="" >百度一下,你就知道</a>
<!--
target:
_top:回到顶部
_self:当前界面跳转
_blank:空白界面
parent:父窗口面跳转
-->
---------------------------------------------------------------------------------
HTML5新增标签
- HTML5新增了27个标签,废弃了16个标签元素,主要包括**结构性标签、级块性标签。行内语义标签、交互标签**
-
结构性标签
- 负责Web上下文结构的定义,确保HTML文档,包括:
-
article:文章主题内容(一盘博客、一篇论坛帖子、一段用户评论、插件)
-
header:标记头部区域内容
-
footer:标记尾部区域内容
-
section:区域章节描述
-
nav:菜单导航,链接导航
-
- 负责Web上下文结构的定义,确保HTML文档,包括:
-
行内语义性标签
- 完成Web页面具体内容的引用和表达,丰富展示内容,包括:
-
meter:特定范围内的数值,如工资,数量,百分比
-
time:时间值
-
progress:进度条,可用max,min,step进行控制,完成对进度的表示和监听
-
video:视频元素,用于视频播放,支持缓冲预载和多种视频媒体格式
-
audio:音频元素,用于音频播放,支持缓冲预载和多种音频媒体格式
-
- 完成Web页面具体内容的引用和表达,丰富展示内容,包括:
音视频的使用.png
网友评论