介绍:
1.搭建网页的结构:html5.0
2.对页面的页面元素进行修饰,比如定位等。表现(CSS)
3.和页面的元素进行交互。行为(javascript,jQuery)
4.BootStrap(前段框架)—响应式布局
1、 文件夹、文件命名规则:由英文字母、数字、下划线共同组成,数字不能开头,不能使用汉字作为文件名
我们书写标签的时候尽量以严格的方式来书写
1)有结束标签的必须加结束标签
2)标签名尽量用小写
3)属性值必须加单引号或双引号
4)实现标签的正确嵌套
2、 https://www.runoob.com/菜鸟教程
3、HTML默认首页可以命名为:index或者default
4、HTML静态文件后缀名:.html或者.htm
5、HTML(HyperText Markup Language):超文本标记语言
注意:HTML不属于编程语言,而是制作网页的基础语言,主要用于描述超文本中内容的显示方式
6、HTML5版本声明:
作用:用于告知浏览器使用哪个版本的HTML或XHTML规范
位置:必须放在html文档的首行,且放置于
标签之前
注意:不属于html标签,就是一条声明语句
7、字符集声明标签:`
`
该标签放置于标签内
【正常都是用UTF-8,国际编码】
注意:简体中文编码:
8.
主页内容
10、HTML基本骨架
文档标题
主体【页面所有可视部分】
注意:html标签是head和body的父级元素,head和body标签是html标签的子元素
11、标签可以嵌套,但不允许交叉
【标签嵌套】对
【标签交叉】错
12、HTML标签不区分大小写:即与
与
并无区别
13、HTML注释一段内容时使用“"
结束(Ctrl+?)
14、W3C标准包括:HTML、CSS【CSS样式】、JavaScript【脚本】
15、HTML网页中默认字体大小为:12px、14px【px像素】
第二单元:常见的HTML标签及其属性 内容
1、HTML基本语法:<标签名 属性=“属性值”>内容标签名>
2、属性的概念:用来表示标签的特征
属性值的概念:为属性赋的值被称为属性值
3、HTML标签分类:单标签、双标签
(1)单标签:
、、
、、
(2)双标签:、、
等
4、样式标签:【都属于行内元素】
倾斜:
倾斜强调:
加粗:
强调加粗:
下划线:
5、HTML特殊符号:
空格:
【英文半角空格】
大于号:>
小于号:<
版权符号:©
双引号:"
注册符号:®
连接符号&:&
6、标题标签:
【块级元素】~
H1级别最高、字体最大,依次递减,h6级别最低,字体最小
7、段落标签:
【块级元素】
8、图片标签:
标签属性:
(1)宽度属性:width=“数值”
【不带单位,默认单位是px】
(2)高度属性:height=“数值”
【不带单位,默认单位是px】
(3)图片路径属性:src=“图片路径”
(4)鼠标滑过显示提示文字属性:title=“提示文字”
(5)图片非正常显示时显示提示文字:alt=“提示文字”
注意:所有的标签都具有title属性,除了
标签没有title属性
9、水平线标签:
标签属性:
(1)宽度属性:width=“数值”
(2)颜色属性:color=“颜色名称/十六进制颜色/rgb()颜色”
1)颜色名称:red
(红色)、green
(绿色)、blue
(蓝色)
2)十六进制颜色:
#ff0000(或#f00)(红色)、#00ff00(#0f0)(绿色)
#0000ff(#00f)(蓝色)、#000000(#000)(黑色)、#ffffff(#fff)(白色)
3)rgb()颜色:值得范围是(0-255)
rgb(255,0,0)(红色)、rgb(0,255,0)(绿色)、rgb(0,0,255)(蓝色)
rgb(255,255,255)(白色)、rgb(0,0,0)(黑色)
(3)水平线粗细:size=“数值”
(4)水平对其方式:align=“left/center/right”
10、路径:相对路径、绝对路径
(1)相对路径:自己相对于目标文件的路径
Web/html/index.html
…/index.html【添加…/用于路径不在同一目录下,返回上一级】
(2)绝对路径:完整的描述文件路径,精确到盘符或服务器
例如:http://www.baidu.com【精确到服务器】
C://Web/imgs/01.jpg【精确到盘符】
第三单元:元素分类、列表标签、超链接标签
1、HTML元素分类:行内元素、块级元素、行内块级元素【可变元素】
(1)行内元素(display:inline):行内元素在同一行显示,只能包含文本或其他的行内元素
注意:默认情况下行内元素不具有宽高属性,也不具有:margin-top和margin-bottom【上下外间距】
举例:a、i、span、img、time、em、strong、label、b、textarea、input、select
(img和input可以设置宽高)
(2)块级元素(display:block):块级元素独占一行,可以包含行内元素或其他块级元素【注意:块级元素具有宽高属性】
举例:div、p、hr、ul、li、ol、dl、dt、dd、table、form、h1-h6
(3)行内块级元素(display:inline-block):既有宽高属性,同时还有同行特性【能设置宽度,并且在同一行显示】
举例:img、input【默认情况】
hello
world
斜体字
强调文本
小号文本
大写 不推荐使用
下标文本
上标文本
h2o 水
m2 m的平方
hello 从右到左输出
2、无序列表标签:
标签属性:type=“circle
(空心圆)/square(实心方块)/disc(实心圆)【默认值】”
- 列表项
- 列表项
- 列表项
练习:
1.请选择以下正确的答案()
A.答案1
B.答案2
C.答案3
D.答案4
2.请选择以下正确的答案()
A.答案1
B.答案2
C.答案3
D.答案4
3.请选择以下正确的答案()
A.答案1
B.答案2
C.答案3
D.答案4
3、有序列表标签:
标签属性:type=“A(大写字母)/a(小写字母)/i(小写罗马数字)/I(大写罗马数字)/1(阿拉伯数字)【默认值】”
`reversed=“reversed”:`
设置有序列表的倒叙显示(项目符号倒叙)
4、自定义列表标签:、
- 自定义项
- 自定义描述项
- 自定义项
- 自定义描述项
5、超链接标签:内容
标签属性:
(1)路径属性:href=“跳转链接的路径”
(2)打开方式属性:target=“_self/_blank/_top/_parent”
_self:当前窗口(原窗口)
_blank:新窗口打开
_top:主框架打开、_parent:父级框架打开
注意:1)超链接是一对一的关系(一次只能连接一个文件)
2)不仅仅可连接到网页,还可以连接到图片
3)超链接可以为用户提供链接下载文件
以下内容【可提前做笔记也可以明天用到后再做笔记,绿色的是今天没具体讲的明天可以用到具体讲】
2)超链接标签
内容:文本或者图片
我们可以通过绝对路径和相对路径来回跳转
绝对路径:
相对路径:
-->
内容:文本或者图片 有些网站防盗链 所以不让跳转
新浪网
相对路径
绝对路径
绝对路径lalala
index.html
3)图像标签
图片跳转 把图片嵌套在超链接里面
菜鸟:图像标签下的map
rect:矩形 左上0,0 右下82,126
circle圆形 圆心:90,59 半径3
4)span强调凸显标签
今天打折,只要7折起 :凸显7折 展现不了凸显
今天打折,只要
7折起
5) 标签间距大
换行标签:换行间距不大