html_css
学习⽬标
能够使⽤h1~h6、hr、p、br 等与⽂本有关的标签
能够使⽤有序列表ul-li和⽆序列表ol-li显示列表内容
能够使⽤图⽚img标签把图⽚显示在⻚⾯中
能够使⽤超链
能够使⽤CSS的基本选择器选择元素
能够使⽤常⻅的CSS属性
第⼀章-HTML⼊⻔
知识点-HTML介绍
1. ⽬标
知道什么是HTML
2. 路径
1. 什么是html
2. html可以做什么
3. 讲解
3.1什么是html
超⽂本标记语⾔(Hyper Text Markup Language),标准通⽤
标记语⾔下的⼀个应⽤。HTML 不是⼀种编程语⾔,⽽是⼀种
标记语⾔,是⽹⻚制作所必备的。
超⽂本标记语⾔:功能⽐⽂本强⼤, 就是指⻚⾯内可以包含图
⽚、链接,甚⾄⾳乐、程序等⾮⽂字元素。
超⽂本标记语⾔: 语法由标签组成
学习HTML的核⼼是标签
3.2.html可以做什么
设计⻚⾯,做⽹⻚
4. ⼩结
1. 什么是HTML?
超⽂本标记语法
2. 标记语⾔
设计⻚⾯,做⽹⻚
知识点-HTML结构和基本语法
1.⽬标
掌握HTML的结构和基本语法
2.路径
1. HTML的结构
2. HTML语法规范
3. 标签属性
3.讲解
3.1HTML的结构
⽂档结构介绍:
⽂档声明:⽤于声明当前HTML的版本,这⾥的
<!DOCTYPE html>是HTML5的声明
html根标签:除⽂档声明以外,其它内容全部要放在根
标签html内部
⽂档头部配置:head标签,是当前⻚⾯的配置信息,
外部引⼊⽂件, 例如⽹⻚标签、字符集等
⽂档显示内容:body标签,⾥边的内容会显示到浏览
器⻚⾯上
3.2HTML语法规范
扩展名是html或者htm
html标签不区分⼤⼩写
html由头(head)和体(body)组成
标签是可以嵌套的,标签⾥⾯可以放标签
标签⼀般由起始标签开始,结束标签终⽌(成对出现)。但是
如果标签不修饰内容,可以在标签⾥结束。
3.3.标签属性
<p></p >
<P></P>
------
<p></P>
<P></p >
<p id="1">hello</p >
<br/>
武器 (标签) 属性(标签属性)
攻击之⽖ +6点攻击⼒
倚天剑 +50点攻击⼒ 15%暴击
属性是属于标签的,修饰标签,让标签有更多的效果
属性⼀般定义在起始标签⾥⾯。
<font color='red'>hello</ font>
属性⼀般以 属性=属性值的形式存在
属性值⼀般⽤ '' 或者“ ” 括起来。 不加引号也是可以的.
(不建议使⽤)
4.⼩结
1. HTML结构
2. 语法和属性基本和xml类似, 但是不要背, 练练就⾏了
实操-HTML快速⼊⻔
1. 需求
使⽤HTML展示hello sz85... 字体颜⾊为红⾊
2. 步骤
1. 创建⼯程
2. 创建HTML
3. 定义 font标签
4. 设置font标签的color属性为red
<html>
<head></head>
<body></body>
</html>
3. 实现
3.1 使⽤idea创建static web项⽬
1. File -> new -> Module
2. 选择static web
3. 设置Module的名称
3.2 创建html⽂件
1. 在static web项⽬上右键 -> New -> Html File
2. 设置HTML⽂件名称
3.3 编写HTML代码
3.4 使⽤浏览器访问
1. 把⿏标移动到右上⻆,会浮动出来浏览器按钮,点击
“Chrome”按钮,使⽤Chrome浏览器打开当前⽹⻚
2. 在浏览器上看到效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--⻚⾯的标题-->
<title>第⼀个html⻚⾯</title>
</head>
<!--⻚⾯的内容-->
<body>
hello world......
</body>
</html>
4. ⼩结
第⼆章-HTML常⽤的标签
练习-公司简介
1. ⽬标
按照需求完成某个公司的公司简介
2. 路径
1. 学习⽂字排版相关的标签
1. 标题标签
2. 横线标签
3. 段落和换⾏
4. ⽂字@