HTML知识了解
2016-09-04 本文已影响49人
Mg明明就是你
-
web时代
web时代.png
-
网页的组成：
- 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文档，包括：
进度条.png
-
行内语义性标签
- 完成Web页面具体内容的引用和表达，丰富展示内容，包括：
-
meter：特定范围内的数值，如工资，数量，百分比
-
time：时间值
-
progress：进度条，可用max，min，step进行控制，完成对进度的表示和监听
-
video：视频元素，用于视频播放，支持缓冲预载和多种视频媒体格式
-
audio：音频元素，用于音频播放，支持缓冲预载和多种音频媒体格式
-
- 完成Web页面具体内容的引用和表达，丰富展示内容，包括：
音视频的使用.png
