一、知识概述
1.web前端:学习如何开发页面的
HTML:如何搭建页面结构和页面内容
CSS:如何美化页面
JavaScript:如何给页面添加动态效果
二、HTML概述
1.什么是HTML
HTML(Hyper Text Markup Language):超文本标记语言
1.超文本:超文本是用链接的方法,将各种不同空间的文字信息组织在一起的网状文本
2.标记语言:由标签构成的语言 <标签名称>
标记语言不是编程语言
2.快速入门
语法:1.html文档后缀名:.html 或者 .htm
2.标签分类:双标签:<标签名称></标签名称> 如<html></html>
单标签:<标签名称/> 如<br />
3.html标签不区分大小写,建议小写
3.标签学习
3.1文件标签
文件标签:构成html的最基本的标签
- html:根标签
- head:头标签
- title:标题标签
- body:体标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
hello
</body>
</html>
3.2属性
属性:是由键值对构成,属性值要用引号(单双)引起来
color:颜色 有三种表现形式
1.英文单词:red green blue
2.十六进制:#值1值2值3 0-9A-F
- 红色:#ff0000 绿色:#00ff00 蓝色:0000ff
- 黑色:#000000 白色:#ffffff
3.rgb(值1,值2,值3) 0~255 支持css
- 红色:rgb(255,0,0) 绿色:rgb(0,255,0) 蓝色:rgb(0,0,255)
- 黑色:rgb(0,0,0) 白色:rgb(255,255,255)
注释:<!-- 注释内容 -->
3.3文本标签
文本标签:和文本有关的标签
- br:换行
- h1 ~ h6:标题标签 h1~h6字体大小逐渐减小
- p:段落
- pre:预编译,保留原有样式
- hr:展示一条水平线
属性:
- color:颜色
- width:宽度 width=200 单位是px(像素)/ width = 50%;百分比
- align:对齐方式 left right center
- size:粗细
- b:加粗
- i:斜体
- u:下划线
- sup:上角标
- sub:下角标
font:字体标签
属性:
- color:颜色
- size:字体大小 默认是3 取值是1~7之间 +2→5
- face:字体
- center:文本居中
3.4图片标签
img:展示图片
属性:
- src:资源路径
- width:宽度
- height:高度
- title:鼠标悬浮时,展示的内容
- align:对齐方式,left right
- alt:图片路径不存在时,展示的内容
相对路径:以.开头的路径
./:当前目录下(可省略)
../:上一级目录
3.5列表标签
有序列表
- ol:定义有序列表 属性type:默认值是1,还可以是a,A,i,I;start:开始值
- li:列表的每一项
无序列表
- ul:定义无序列表 属性type:默认值是disc,还可以是circle,square
- li&