1.html介绍:
页面的三大组成部分
1>.html 结构层 刚出生的小鸟
2.>css 样式层 长出五颜六色的羽毛
3.>js 行为层 会飞了
结构层html和表现层css,是W3c制定的规范,万维网联名.
行为层js, 是ECMA 制定的规范, 欧洲计算机协会.
html:Hyper text mark-up language
HyperText Mark-up Language
超文本标记语言
超文本: 不仅可以放文本还可以放标签
通过HTML标记(标签)对网页中的文本 图片 多媒体等内容进行描述.
"超文本":不仅能承载简单的文字 还能包含超链接 图片 音频 视频等.
"标记语言":标记语言是有一套标记标签组成的.
2. html文档:
网页
后缀名为.html
.MP3
.MP4
.doc
.docx
.txt
标签:标记
构建网页的基本单位
标签是由尖角号<>和关键词组成
标签是由尖角号<>括起来的关键词组成
div
p
单标签:只有一个开始标签
<标签名>或
<标签名/>
<img src="" alt="">
<img src="" alt=""/>
双标签:由开始标签和结束标签组成
<标签名></标签名>
<div></div>
<div>:开始标签
</div>:结束标签
内容写在开始和结束标签中间
<div>休息休息</div>
元素:标签及内容
<div>休息休息</div>
标签: <div></div>
标签上的属性:
双标签要写在开始标签上
单标签就写在标签上
属性:属性名和属性值组成
属性名和属性值由等号连接
属性值要用引号包着
单引号和双引号都可以
3.html文档结构介绍:
<!DOCTYPE html>
<!--
文档类型定义DTD
不是标签,是声明语句
告诉浏览器的解析器用那种语法来解析该文档
html5语法
要写在第一行
-->
<html lang="en">
<!--
双标签
根标签
lang="en":定义当前文档显示文字的语言
lang:语言属性 lang是language的简写
en:英语
en定义语言为英语
zh-CN定义语言为中文
-->
<head>
<!--
网页的头部
双标签
头部里的信息不会显示在网页中
通过link标签引入外链css文件或者内部样式
通过script标签引入外链的js文件或者内部js
-->
<meta charset="UTF-8">
<!--
网页的元信息
charset="UTF-8": 设置文档的编码方式
charset属性:设置编码方式
UTF-8:万国码, 通用性好
文档字符集 了解
字符集(Character set)是多个字符的集合,便于计算机识别和存储各种文字.
在<head>标签内,通过<meat> 标签的charset 属性来规定 HTML 文档应该使用哪种字符编码.
(2)常用的字符集 了解
UTF-8被称为万国码,包含全世界所有国家需要用到的字符
GB2312简单中文,包括6763个汉字
GBK包含全部的中文字符,是GB2312的扩展, 加入对繁体字的支持,兼容GB2312
BIG5繁体中文,港澳台等用
-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
网页标题
双标签
可以作为添加书签时的名字
-->
</head>
<body>
<!--
双标签
网页的主体
网页中所有的内容都写在body中
兄弟关系: 并列关系 body 和 head title和meat
父子关系: 嵌套关系 html和body html和head
-->
<div></div>
<div>
<p>
<p>
<span></span>
</p>
</p>
</div>
</body>
</html>
4.html文档:
两种方式打开html文档结构
1.英文状态下的 !,回车
2.输入html:5 回车
5.标题标签:
h系列标签:标题标签
标题标签中文字大小依次减小,重要程度依次减弱.
注意事项:h1标题一个页面中只有一个,h2~h6是可以有多个的.
特性:
1.宽度默认撑满整个父元素
2.高度默认由内容撑开
3.独立成行--垂直布局
4.自带外间距
5.自带加粗效果
应用场景:
1.logo
2.文章页标题 内容章节标题
3.产品标题
4.模块标题
p标签:
1.p
双标签
段落标签
主要放成段的文字
<p></p>
特点:
1.高度默认撑满父元素(宽度和父元素的宽度一样)
2.高度由内容撑开
3.垂直布局, 独立成行(一个div标签占一行)
4.自带上下外边距
注意: p标签不能嵌套块级标签p div...
应用场景:文章中的段落 页面中的文字块
-->
<!-- 这些嵌套都是错误的 -->
<p>
<p>2222</p>
</p>
<p>
<div>div</div>
</p>
6.hr标签:
hr标签:水平分割线 块级标记
特性
moren自带间距 自带边框
独立成行, 垂直布局
作用:在页面中显示一条水平线
-->
<!-- 强制换行标签 不参与标签分类 -->
行级标签:
<span>
<p>肖战</p>
</span>
<a href="#">
<img src="./images/1.jpg" alt="">
</a>
7.块级标签:
1.块级标签
div p h1-h6 hr ul li ol dl dt dd
2.行级标签(行内标签)
a span b strong em i sub sup del
3.行内块标签
img input
-->
<!--
1.div
双标签
构建网页的基本标签
无语义标签
可以把div标签理解成一个盒子
可以划分网页结构
<div></div>
特点:
1.宽度默认撑满父元素(宽度和父元素的宽度一样)
2.高度由内容撑开
3.垂直布局,独立成行 (一个div标签占一行)
div标签可以嵌套任何标签
-->
<!-- 并列 -->
<div></div>
<div></div>
<!-- 嵌套 -->
<div>
<div></div>
</div>
<div></div>
8.路径:
绝对路径
网址路径(带着协议的路径 http https)
https://img.alicdn.com/imgextra/i3/110009838/O1CN01PidGCJ2MXr6YIFYL1_!!0-saturn_solar.jpg_468x468q75.jpg_.webp
某盘符下的路径 不要用
C:\Users\Administrator\Desktop\软件学院0823web\day01\1代码\images\2.jpg
相对路径
/ 根目录
./ 当前目录
../ 上级目录
../../上上级目录
../......
文件夹名/ 表示下一级目录
-->
<img src="./day01/img/a.jpg" alt="">
9.a标签:
a: 超链接标签
行级标签
<a href=""></a>
href:跳转的路径
-->
<!--
a：超链接标签
href：跳转的路径；
网址，本地文件 ，空链接 （#占位，跳转到当前页的顶部）
target：被链接文档在哪里显示
1.target=‘-self’ 在当前窗口跳转，默认值
2.target='-blank' 在新窗口跳转
语法:
<a href="">内容</a>
特性
1.宽度默认由内容撑开
2.高度默认由内容撑开
3.默认横向显示, 水平布局,一行排不下,自动折行
4.换行和空格会被解析
5.自带文字颜色
6.自带下划线
7.鼠标指针的形状为手型
8.去掉a标签下划线text-decoration:none;
-->
<!-- 会跳转到当前页面,点击一次跳转一次 刷新一下页面 -->
<a href="">百度</a>
<a href="">狗东</a>
<!--
跳转的路径:
#:空链接 占位, 跳转到当前页的顶部
-->
<br>
<br>
<br>
<br>
<br>
<br>
<!--
#:空链接 占位 ,跳转到当前页的顶部 只跳转一次
-->
<a href="#">跳转到当前页的顶部</a>
<!-- 伪链接 失去跳转功能 -->
<a href="javascript">伪链接</a>
<!-- 文件 -->
<a href="./1-阶段介绍.html">1-阶段介绍.html</a>
<!-- 网址 -->
<!-- target:被链接文档在哪里显示 -->
<!-- 默认值 在当前页面打开 -->
<a href="https://www.baidu.com/" target="_self">百度</a>
<!-- 在新的页面打开 -->
<!-- 去掉a标签的自带下划线 -->
<a href="https://www.baidu.com/" target="_blank" title="百度1" style="text-decoration: none;">百度1</a>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。