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:语言属性 lang是language的简写
en:英语
en定义语言为英语
zh-CN定义语言为中文
-->
<head>
<!--
网页的头部
双标签
头部里的信息不会显示在网页中
-->
<Meta charset="UTF-8">
<!--
网页的元信息
charset="UTF-8": 设置文档的编码方式
charset属性:设置编码方式
UTF-8:万国码, 通用性好
文档字符集 了解
字符集(Character set)是多个字符的集合,便于计算机识别和存储各种文字.
在<head>标签内,通过<meat> 标签的charset 属性来规定 HTML 文档应该使用哪种字符编码.
(2)常用的字符集 了解
UTF-8被称为万国码,包含全世界所有国家需要用到的字符
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 回车
注意事项:h1标题一个页面中只有一个,h2~h6是可以有多个的.
特性:
1.宽度默认撑满整个父元素
3.独立成行--垂直布局
4.自带外间距
应用场景:
1.logo
3.产品标题
4.模块标题
p标签:
1.p
双标签
段落标签
主要放成段的文字
<p></p>
特点:
1.高度默认撑满父元素(宽度和父元素的宽度一样)
2.高度由内容撑开
4.自带上下外边距
-->
<!-- 这些嵌套都是错误的 -->
<p>
<p>2222</p>
</p>
<p>
<div>div</div>
</p>
6.hr标签:
特性
独立成行, 垂直布局
-->
行级标签:
<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
a span b strong em i sub sup del
3.行内块标签
img input
-->
<!--
1.div
双标签
构建网页的基本标签
无语义标签
可以划分网页结构
<div></div>
特点:
1.宽度默认撑满父元素(宽度和父元素的宽度一样)
2.高度由内容撑开
-->
<!-- 并列 -->
<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 href=""></a>
href:跳转的路径
-->
<!--
href:跳转的路径;
2.target='-blank' 在新窗口跳转
语法:
<a href="">内容</a>
特性
4.换行和空格会被解析
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>
<!-- 网址 -->
<a href="https://www.baidu.com/" target="_self">百度</a>
<!-- 在新的页面打开 -->
<a href="https://www.baidu.com/" target="_blank" title="百度1" style="text-decoration: none;">百度1</a>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。