网页结构
<!--根标签-->
<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;
设置父类的属性 垂直居中 只能垂直充满居中 不能设置高度居中