了解HTML
- 是一种描述网页的一种语言
- 是一种超文本标记语言
- 不是编程语言,是一种标记语言
HTML5所包含的知识
HTML XHTML CSS CSS3 JavaScript jquery HTML5
HTML5的新特性
- 用于绘画的canvas标签 比较重要
- 用于媒介播放的video和audio 比较重要
- 对本地离线存储的更好的支持
- 新的特殊内容元素 比如:article,footer,header,nac,section
- 新的表单控件 比如:calendar,date,time,email,url,search
- 浏览器的支持 比较流行
HTML的基础知识
- 声明 表明html的版本 就是第一行的东西 doctype html5的声明<!DOCTYPE html>
- <html> 所有的代码包含在这里面
- <head> 头部的东西 <meta charset="UTF-8"> 这里控制的是编码的格式
UTF-8是通用的编码格式 默认的是这个 <title>这个设置的是标题 - <body> 身体里的东西 网页的内容都是在这里面
HTML的标签
- HTML 标题 h1 --> h6 6种不同的标题 主要是文字的大小的区别
- HTML的段落 通过 p 来进行定义 通过p标签定义的段落是另起一行 定义的是新的一段文字
- HTML的超链接 a 来进行定义
<a href="http://www.baidu.com">百度</a> - HTML的图片 img 来进行定义
<img src="图片的地址">
HTML的元素 指的是从开始标签到结束标签的所有的代码
- <br / 空标签 换行的意思 开始新的一行
- 空元素在开始标签中进行关闭
- 大多数的HTML元素中可拥有元素
- 大多数的HTML元素都是可以嵌套的
HTML的属性
- 标签可以拥有属性为元素提供更多的信息
- 属性以键值对的形式出现
比如href ="www.baidu.com" - 常见标签属性
h1 :align 对齐的方式 left center right 默认的是居右
<h1 align="right">标题h1</h1>
body :bgcolor 背景颜色
background是设置背景图片的 bgcolor是设置的背景的颜色
a :target 固定在何处打开连接
_self 默认的,不再开辟新的页面
_blank 开辟新的页面,旧的页面仍然存在
_parent _top 这两个属性在框架的时候用到 - 通用属性
class :规定元素的类名
id :规定元素的唯一ID
class 和 ID 主要的方便以后引用
style:规定元素的样式
title:规定元素的额外信息
HTML的格式化
- html的格式化
Paste_Image.png
欢迎来到H5的学习<br/>
<b>欢迎来到H5的学习</b><br/>
<big>欢迎来到H5的学习</big><br/>
<em>欢迎来到H5的学习</em><br/>
<i>欢迎来到H5的学习</i><br/>
<small>欢迎来到H5的学习</small><br/>
<strong>欢迎来到H5的学习</strong><br/>
欢迎来到H5的学习<sub>欢迎来到H5的学习</sub><br/>
欢迎来到H5的学习<sup>欢迎来到H5的学习</sup><br/>
<ins>欢迎来到H5的学习</ins><br/>
<del>欢迎来到H5的学习</del><br/>
HTML的样式
- 标签:
<style>:样式的定义
<link>:资源的引用 比如引用一些css的样式 - 属性:
rel="stylesheet":外部样式表
type="text/css":引入文档的类型
margin-left:边距
3.有三种插入方法:
外部样式表: <link rel="stylesheet" type="text/css" href="mystyle.css">
内联样式表: <p style = "color:red">
内部样式表:
<style type="text/css">
body {background-color:red}
p {margin-left:20px}
<style/>
HTML的链接
- 链接数据:文本链接 图片链接
- 属性:
href属性:指向另一个文档的链接
name属性:创建文档内的链接 - img标签属性:
alt:替换文本属性 当图片不显示的时候显示这个
width:宽
height:高 ``` <a href="http://www.baidu.com" target="_blank">baidu</a> <a href="http://www.baidu.com" target="_blank"> <img src="html.png" height="20px" width="20px" alt="这是一个图片"></a> <a name="nihao">跳转到这里来了</a> <a href="#nihao">进行跳转的文档内的内容</a>```
HTML的表格
表格标签
<table border="1px" cellpadding="10" cellspacing="10" bgcolor="aqua"> <caption>我是标题</caption> <tr> <th>单元</th> <th>单元</th> <th>单元</th> </tr> <tr> <td>单元格1</td> <td>单元格2</td> <td>单元格3</td> </tr> <tr> <td>单元格1</td> <td>单元格2</td> <td>单元格3</td> </tr> </table>
3.一些属性:
cellpadding指的是单元格内容与边框的距离
cellspacing指的是单元格直接的距离
align:排列单元格内容的对齐方式
HTML的列表
html中的列表
- 无序列表 使用标签 ol li
属性:disc默认前标,这个是实体的圆的效果 cirle 空心圆的效果 square 方块的实体,也可以使用自定义的方式,使用CSS进行更改
<ul type= "disc">
- 有序列表 使用标签 ol li
属性:A 字母排序,大写的A开头 a 字母排序,小写的a开头 l大写的罗马数字排序 i 小写的罗马数字排序 start 默认的是数字,在这里规定数字的开始的第一位
<ol type="A">
- 嵌套列表 使用标签 ul ol li
- 自定义列表 使用标签 dl dt dd这个是描述
HTML 块
- 块元素
块元素在显示的时候,通常会以新行开始 比如h1 p ul
- 内联元素
内联元素通常不会以新行开始 比如 b a img
- div 元素
div元素也被称为块元素,其主要是组合HTML元素的容器 主要是使用CSS进行更改属性更改
- span元素
span元素是内联元素,可以作为文本的容器
span元素与div元素的区别是span指定是文本的容器,div没有进行指定
HTML的布局
- div元素布局
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
margin: 0px;
}div不用添加也行
div#container{
width: 100%;
height: 950px;
background-color: burlywood;
}
div#heading{
width: 100px;
height: 10%;
background-color: aqua;
}
div#content_menu{
width: 20%;
height: 80%;
background-color: burlywood;
/添加从左到右的浮动 不添加menu不是左右的效果是上下的效果/
float: left;
}
div#content_body{
width:80%;
height: 80%;
background-color: black;
float: left;
}
div#footing{
width: 100%;
height: 10%;
background-color: yellow;
/上面设置了浮动,下面也要跟着下面的浮动进行改变,在这里要清除浮动/
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="heading">头部</div>
<div id="content_menu">内容菜单</div>
<div id="content_body">内容主体</div>
<div id="footing">底部</div>
</div>
</body> - table元素布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body marginheight="0px" marginwidth="0px">
<table width="100%" height="950px" style="background-color: aliceblue" >
<tr>
<td colspan="2" width="100%" height="10%" style="background-color:aqua">这是头部</td>
</tr>
<tr>
<td width="30%" height="80%" style="background-color: yellow">左菜单
<ul>
<li>ios</li>
<li>android</li>
<li>html5</li>
</ul>
</td>
<td width="70%" height="80%" style="background-color: burlywood">右菜单</td>
</tr>
<tr>
<td width="100%" height="10%" style="background-color: blue" colspan="2">底部</td>
</tr>
</table>
</body>
</html>
