html的全称为“Hyper Text Markup Language”html是超文本标记性语言.
html前端三大模块:1.html(结构)
2.css(样式--层叠表)
3.Javascript(行为动效)是一种脚本语言。
html的基本结构
文档类型
↓
<!DOCTYPE html> doc:文档 type:类型
<html> ← 根标签 开始标签(双标签)
<head> ← 头部标签 (双标签)
<meta charset =“UTF-8”>
↑ ↑ ↑
设置标签 编码 中文
<title>xx</title> ← 标题标签(双标签--相当于人的眼睛)
</head>
<body> ← 身体标签(双标签)
</body>
</head> ← 结束标签--闭合标签(双标签)
标签的三大分类
1.块级元素:默认占整行,可设宽高,但还是占整行。如(div)
2.行内块元素:不默认占整行,宽高可设,自身内容决定宽和高。如(img)
3.行内元素:不默认占整行,宽高不可设,自身内容决定宽和高。如(button b)
样式引入方式
1.行内样式:开始标签标签里面写,style=“”
2.内部样式:head标签引入style标签。
class和id的区别?
1.class:类型,不具有唯一性。
2.id:身份名,具体,唯一性。
网页文字要考虑随什么?
1.字体大小
2.字体颜色
3.字体加粗
4.上下左右居中
网页包括?
1.标签 2.图片 3.超链接
HTML图片引入格式
<img src =“ img/xxx.jpg”/>
↑ ↑ ↑
图片 路径 图片地址
CSS样式表引入格式
<link rel ="stylesheet" href=“CSS/style.css”/>
↑ ↑ ↑ ↑ ↑
外部引入 定义链接 样式调用 引入路径 表单地址
三大类型标签可互相转换
1.display:block 转换为块级元素
2.display:inline-block 转换为行内块元素
3.display:inline 转换为行内元素
属性
margin:外边距
padding:内边距
*{margin:0;} 去除外边距
class:命名; <div class=" "> 类名 ·代表class; ·+名字{ }
id:身份名 (身份证) id=" " 不能多个,唯一的。 #代表id #+名字{ }
auto:自动
margin auto:自动居中
float:浮动--left左 --right右
line-height:行高
width:宽
height:高