一、介绍
1.html涉及的三种语言
HTML:内容层,负责页面的内容
CSS:样式层,负责页面的样式
JS:交互层,负责页面的行为/交互
2.html的含义
hyper text markup language 超文本标记语言
hyper:文本、图像、超链接、视频、音频
markup:html的语法
3.HTML的特点:
(1)以.html或.htm为后缀
(2)用浏览器解析语法(默认从上往下执行,从左往右执行)
(3)页面可以嵌套JS脚本
二、html语法规则
1.<!DOCTYPE html>
doc:文本文档 type:类型
<!DOCTYPE html>
<html> 包裹页面
<head> 页面的头部
<meta charset="utf-8">
<title>模板文件</title> 页面的标题
<link rel="stylesheet" href="../css/bootstrap.css"/> 引入css文件
<script src="../js/bootstrap.bundle.js"></script> 引入js文件
</head>
<body>
</body>
</html>
2.html标签
标签名:用尖括号包裹
双标签:<head>页面内容</head>
单标签 <br/>,现在H5语法规则不需要写斜杠
3.html注释
语法格式<!--内容-->
注释不可以嵌套,不能再<>里写注释,ctrl+/表示注释,再按一次取消注释
三、html标签
1.文本样式标签
<b>加粗</b> strong
<q>双引号</q>
<i>斜体</i> em
<del> 删除线</del> s
<u>下划线</u>
<mark>高亮标记</mark>
<sup>上标字</sup>
<sub>下标字</sub>
2.换行标签
<br>或<br/>单标记标签
在编辑器中,回车是不能让文本换行的,需使用<br>标签让文本换行
3.转移字符
圈c 版权声明 ©
圈r 注册商标 ®
TM 商业商标 ™
关闭符号 ×
圈关闭符号 ⊗
除号 ÷
大于号 >
小于号 <
空格
空格的折叠现象:在编辑器中,多个空格或回车是无法生成多个空格或换行效果,这叫做空格的折叠现象,多个空格或回车会折叠成一个空格或换行显示,想要生成空格可以使用
4.段落标签
<p>段落</p>,单独成行,上下有垂直的间距
lorem用于生成假文,先输入lorem出现提示回车会按tab键补全代码
5.标题字标签
<hn>标题</hn>,单独成行,有上下垂直的间距
h1~h6,h1最大,h6最小,h4的字号与普通文本的字号一样
6.水平分割线标签
<hr>或<hr/>,水平分割先
页面中会添加一条独占一行的灰色的分割线
四、分区元素
1.块分区 div
div 单独成行,块级元素,无样式
div是最简单的块级元素,是最基本的分区元素
div将页面进行分区划分成几个块
div可以包裹body里的任意元素
2.行分区 span
span 行内元素,无特殊样式
可以设置页面中一行中的特殊样式
五、图片与超链接
1.标签属性
属性:也叫特征,用来描述标签某一方面的特征
标签属性:一个标签可以有多个属性,用来设置页面的不同样式
属性规则:
属性的声明必须放在开始标签中;
一个标签可以有多个属性;
多个属性之间用空格隔开;
属性之间没有顺序之分;
属性与属性之间用等号连接;
属性值用双引号包裹。
2.图片标签
(1)常见的图片类型:
jpg/jpeg 普通图片
png 透明图片
gif 动图
webp 新出的,谷歌的图片格式
(2)图片标签
<img>或<img/>,单标记标签
属性:
src 图片资源路径/url
alt 图片加载不出来替换的文字内容
width 图片的宽度
height 图片的高度
如果设置的宽高不符合本身的宽高,会使图片失真——会变形,为解决该问题,宽和高只设置一个
(3)url
统一资源定位符,uniform resource locator,资源路径
绝对路径:使用网络资源时,会用绝对路径
优点:节省本地服务器的存储空间
缺点:资源不稳定,当远程服务器把资源删掉之后,本地服务器就搜索不到了
相对路径:参照物是当前html
./ 表示当前目录 ,可以省略不写
../ 表示上一级目录
3.超链接
<a href = "">超链接</a>,可以跳转到其他页面
属性:
href 表示资源路径,如果开始写页面不知道跳转哪里,用#符占位,如果书写正确的情况下,按住alt可以跳转到其他页面
target 表示跳转到哪里
值:_blank 表示跳转到新的一个空白页面
_self 表示在当前页跳转,默认值
锚点:表示在当前页面定义一个位置,使用a标签,页面会在这个位置显示
定义锚点方式 <h3 id="h">跳转到这里了</h3>
超链接 <a href = "#h">跳转到那里了</a>