HTML和HTML5
2017-07-14 本文已影响16人
imChay
网页结构
<!--根标签-->
<html>
<!--头部-->
<head>
<!-- http-equiv：模拟http协议的文件头原信息，主要目的是服务器向客户端返回时，用什么格式显示。
Content-type：内容类型。
Content：详细内容类型介绍。Text/html：网页是text格式，html是文本中的小格式。
Charset：字符集，主要控制汉字如何显示。
Utf-8：多国语言编码，什么国家的语言都可以正常显示。 -->
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--网页标题-->
<title>我的第一个网页</title>
</head>
<!--身体-->
<body>
hello wrold!你好世界！
</body>
</html>
盒子模型
任何一个标签都是一个盒子,也就是任何一个标签都有以下四个属性：
四个属性 :margin border padding content
对于span等 行内标签 是包裹内容的 也就是padding是0px
每一个标签都是一个盒子
层级结构：外边距|边界|内边距|内容
标签格式
双边标记
<标签属性1=“值1”属性2=“值2”>内容</标签>
单边标记
<标签属性1=“值1”属性2=“值2”>
标签分类
块级标签
块级标签:盒子的宽等于整行的宽度
独占一行，可设宽高
标题:h1-h6
横线:hr
列表:ul ol li
段落:p
表格:table（tr th td）
容器:div
行内标签
行内标签:盒子的宽高 默认包裹内容
多占一行，不可设宽高
换行:br
超链接:a
图像:img
容器:span
行内-块级标签
行内-块级标签:盒子的宽高 有默认的高度
多占一行，可设宽高
按钮:button
表单:form (input)
标签属性
常见通用属性
width="200" height="200"
align="center"
border="5"
bordercolor="blue"
bgColor="#99cc33"
background="images/bg.jpg"
改变标签的类型
CSS中有个display属性，能修改标签的显示类型
none：隐藏标签
block：让标签变为块级标签
inline：让标签变为行内标签
inline-block：让标签变为行内-块级标签（内联-块级标签）
HTML5新增标签
HTML5新增了27个标签元素,废弃了16个标签元素,主要包括结构性标签、级块性标签、行内语义性标签、交互性标签
进度：progress
视频：video
音频：radio
文章：article
文章头部：header
区域章节表述 :section
文章底部：footer
导航链接：nav
标签居中问题
1、行内标签/行内-块级标签 设置父类的属性 水平居中 text-align: center;
垂直居中 line-height 等于高度
2、块级标签：设置自己的属性 水平居中 margin: 0 auto;
设置父类的属性 垂直居中 只能垂直充满居中 不能设置高度居中
