网页的组成
HTML: 内容层—负责页面的内容—文字 链接 图片… CSS:样式层—负责页面的样式—颜色 大小 位置 表现… JavaScript:行为层—负责页面的行为—交互效果 轮播图 |
页面的内容与样式也有标准,它的标准是由w3c制定的,万维网联盟 |
HTML的定义
HTML超文本标记语言Hyper Text Markup Language 可以把它简单理解成我们常见的网页 Html是一门编程语言,由大量的标签组成 超文本:文本 图片 超链接 音频 视频… 标记(标签):html的语法标签 <标签> |
1.注释
html注释 | <!-- --> |
css注释 | /* */ |
js注释 | // 单行注释 /* */ 多行注释 |
2.标题标签
h1~h6 标签 ,按照级别逐级递减的。h1级别最高,原则上在一个页面中只能出现一个h1
所有的标题标签都有默认样式,加粗有外间距
特性:属于“块级”,默认自占父级宽度的一整行
3.段落标签
p标签写一行或者一段文字,在页面中常用写大段的内容。
p标签级别要比标题小,不能包裹标题和p本身,同时也不能包裹其他的块级标签
特性:属于“块级”,默认自占父级宽度的一整行
lorem敲tab就会出现一段假文
4.span标签
span没有任何的样式,但它属于“行级”标签,与文字同级别都在一行显示
5.标签的嵌套关系
在html编辑器中,回车也代表一个空格,多个空格多个回车都代表一个空格
行级元素被包裹不用换行包裹 |
<p><span>¥</span>77</p> |
块级元素的包裹书写的时候需要这样的换行包裹样式,可以清晰的分出父子级关系 |
<div> <p>111</p> </div> |
6.div标签
首先div属于“块级”,可以包裹任何的元素以及内容
其次div标签没有任何初始样式
div可以作为布局标签使用,可以完成多种嵌套关系来保证页面显示的,区域性和整体性
7.视频标签
video视频标签需要插入一个视频地址,src属性的值就是视频地址
<video src="视频的地址" loop></video> |
在有视频的页面中,右键—检查—找到video标签的src属性,复制src属性中(引号中的)的值
8.路径
可以在值中添加路径的常用属性
src引入属性,video,img,script等
href引用属性,a,link等
相对路径写法
当前的文件 | 就是相对的文件源 |
找同级 | ./ |
找同级的下一级 | ./同级目录/xx |
找上一级 | ../ |
9.图片标签
img图片是单标签,必须依靠src属性引入图片的路径。
alt是图片描述属性,可以不写内容
10.超链接
a标签是超链接标签,默认动作就跳转
a属于“行级”标签
href属性中需要写将要跳转的地址,暂时没有地址,可以先填写#代表跳转到当前
<a href="https://www.baidu.com/">点击我去百度</a> <a href="./1.html">我想看我写的1.html</a> <a href="#">代表跳转到当前页</a> |