HTML的概念:超文本标记语言 : HyperText Markup Language 首字母组成
结构层 :
网页是有图像、文字、音频、视频、按钮等元素搭建起来的
HTML
表现层 :
美化网页,相当于网页的外衣,让网页更漂亮些
CSS
行为层
:
让网页动起来 ,常见的网页特效(返回顶部、轮播图、选项卡、吸顶效果、红包雨、
倒计时等)
javascript
简称
js
举个例子 :
盖房子,房子是由水泥、钢筋、砖块等元素垒起来的,这个相当于网页的结构层;对
房子进行装修,相当于网页的表现层、按开关,灯就亮了,这个相当于网页的行为层
HTML的语法:
1.
标签分为两种:
常规标签
(
双标签
)
:
有开始标签和结束标签
eg :
空标签 (单标签)
:
只有开始标签,没有结尾标签
eg
:
2.
标签是可以嵌套
备注 :
只要嵌套就会出现缩进(
tab
键的间距),
body
和
head
比较特殊,可以不缩进
3.
属性 :属性是对标签的补充和说明,多个属性之间用空格隔开,属性是不分先后顺序的,写
在
<
的第一个单词叫标签名,标签名和属性之间也是用空格隔开的
4.
在标签的前后写空格和回车不会影响代码的展示
5. HTML
注释 :
语法 :
快捷键 :
ctrl + /
注释不是给用户看的,不能展示在浏览器中,它是给程序员自己看的,便于后期的维护和 开
发。
插入图像:
语法 :
<img
src
=
""
alt
=
""
>
属性 :
src :
图像的路径
alt :
图像加载失败给的提示信息
图像加载成功,
alt
内容不会显示
图像加载失败,才会显示
alt
中的内容
标题标签
语法 :
<h1></h1>
~
<h6></h6>
共六级标题,
h1
是最大的标题,
h6
是最小标题
特点 : 字号逐渐变小,有加粗效果在里面
用法 :用于写网页中的标题
备注 : 一个网页中,
h1
标签只能出现一次 ,一般用于写网页中的
logo
或者文章页的大标题 ,
h2~h6
在一
个网页中可以出现多次,至于用哪个分析合理即可
段落标签
语法 :
<p></p>
用法 : 用于写网页中段落
强行换行标签
语法 :
<br>
用法 :强行换行
文本标签
语法 :
<span></span>
用法 : 用于控制局部内容的样式
备注:文本标签,可以理解成是一个小盒子,没有实质意义在里面,一般都是包着一个字或者几个字
格式化文本标签
1.
文本加粗
<b></b>
:
仅有加粗效果
<strong></strong>
: 不仅有加粗效果,还有加重语气在里面
2.
文本倾斜
<i></i>
:
仅有文本倾斜效果
<em></em>
:不仅有文本倾斜效果,还有着重文本在里面
3.
上标下标
<sup></sup>
: 定义上标
<sub></sub>
: 定义下标
4.
删除线
<del></del> 等等
路径问题
1.
绝对路径
情况一:完整的
URL
地址:
http://www.ujiuye.com/statics/images/logo.png
情况二:具体的盘符 :
c:/dog.png
2.
相对路径 :相对路径是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系
(
/
):一个斜杠表示根目录 或者下一级。
(
./
):一个点(
.
)后面跟一个斜杠表示当前目录,也就是当前文件所在目录。
(
../
):两个点(
.
)后跟一个斜杠表示前文件所在目录的上一级目录。
(
../../
):表示当前文件所在目录的上上级目录,以此类推。
语义化
语义化 :根据内容的结构选择合适的标签。
好处 :
在没有
CSS
的情况下,页面也能呈现出很好地内容结构。
语义化使代码更具可读性,便于团队开发和维护。
语义化有利于用户体验(例如:
title
、
label
标签、
alt
属性的灵活运用)。
语义化有利于
SEO
优化
css
语法
CSS
:
Cascading Style Sheets
层叠样式表或者级联样式表 ,用于控制页面的样式的
包含两部分 : 选择符 和 一条或多条声明组成
选择符 又叫选择器,给要定义样式的标签起的名字,标签名是可以当做选择器符
声明都是放在
{}
中的,声明是不分先后顺序的