!-- <!DOCTYPE html> => 不是标签，html5的文档声明 => 当前网页使用html5的标准 -->
<!-- html5 => 更新版的html,有很多新特性.. -->
<!-- html4.01 => 文档声明特别长. -->
<!-- 每个网页都是由固定的标准组成 -->
<!-- html包裹head和body标签 -->
<!-- html => 这是一个html文档 -->
<!-- head => 网页头部 => 写一些网页的配置 -->
<!-- body => 网页的主体 => 所有网页要呈现的内容,都写在body中 -->
<!-- meta => 元标签 charset => 字符集 => 字典 -->
<!-- UTF-8 => 全世界的文字 (实际上只有200多个国家) => 世界大辞典 -->
<!-- GBK123 => 中文的字符集 -->
<!-- form => 用于和服务器进行数据交互 => 发送数据给服务器 -->
<!-- form包裹的是其他的表单标签,例如input,select,textarea -->
<!-- form标签会把内部的表单标签的value属性值,自动发送给服务器 -->
<!-- action="" => 填服务器的地址 -->
<!-- input的hidden类型, 在页面上看不见， 但是依然可以发送value到服务器 -->
<!-- type="submit" => 提交form表单 => 一定是在form标签里面才会发挥作用 -->
<!-- type="reset" => 重置 => 必须放在form标签内部才会发挥作用 -->
<!-- button => 普通按钮 => 双标签 -->
<!-- title => 网页标题 -->
<!--
form => 最传统,最老的方式
ajax => 主流
fetch => 新兴的方式
websocket => 服务器推送
-->
<!-- 焦点 => 标签可以输入的状态 => 获得焦点 -->
<!-- 表单如何获得焦点? => 点表单一下 -->
<!-- for="two" => 知道联动的表单标签的id -->
<label for="two">用户名:</label>
<input id="two" type="text" />
<!--
table => 表格
thead => 表头
tbody => 表体
tr => 行
td => 单元格
th => 表头单元格
border => 边框
cellpadding => 单元格内容和单元格4条边的距离.
cellspacing => 单元格和单元格之间的距离.
rowspan="2" => 跨两行
colsp
<!-- 做网页布局的标签 -->
<!-- 最常见的布局标签 => div -->
<!-- div标签没有语义, span也没有语义 -->
<!--
html5新增了一些语义化的布局标签
header => 网页头部
footer => 网页底部
section => 文章的一个大段 => 网页的一个大的区域 => 大的div
nav => 导航
article => 文章
aside => 侧边栏
-->
<!-- 资源标签 => 引入外部资源的一些标签, 例如js文件,css文件,图标... -->
<!-- link => 链接 => 外部文件, css文件, 图标文件 -->
<!-- href => 外部文件的地址 -->
<!-- rel => 外部文件的类型 stylesheet => 样式表 icon => 图标 -->
<!-- script => 引入js脚本的标签. src => js文件的路径 -->
<!-- iframe => 引入别的网页 src => 别的网页的地址 -->
<!-- 可以把多个自己写的网页组合成一个网页 => 网页html的复用 => 组件的作用 -->
<!-- html会把多个连续的空格，当成一个来处理 -->
<!-- 有些时候，某些特殊字符，不能靠之间输入来实现，只能通过实体字符来代替 -->
<!-- ( ) => 空格 -->
<!-- 可以通过实体字符来代替<和>, 防止浏览器把它们当成标签来处理。 -->
<!--
< => <
> => >
-->
给a标签的href属性添加某个元素的id选择器,就可以实现一个锚点功能
<!-- 相对路径 -->
<img src="./img/arrow.png" alt="图片找不到" />
<!-- 绝对路径 -->
<img src="http://127.0.0.1:5500/img/arrow.png" alt="图片找不到" />
<!-- html文档的路径 => http://127.0.0.1:5500/09.路径写法.html -->
<!-- 图片的路径 => http://127.0.0.1:5500/img/arrow.png -->
<!-- 广东深圳龙华区坂田街道坂田中心大厦8楼F教室 => 绝对路径 -->
<!-- 隔壁教室 => 相对路径 -->
<!-- 和html同目录下的arrow.png图片 -->
<img src="./arrow.png" alt="">
<!-- 从当前html文档所在文件夹的父文件夹找到arrow.png图片 -->
<img src="../arrow.png" alt="">
<!-- 进入当前文件夹内的img文件夹,找arrow.png图片 -->
<img src="img/arrow.png" alt="">
<!--
相对路径怎么写?
先确认是谁找谁这个问题,
01: 同目录怎么写. => ./
02: 向上一级. => ../
03: 向下一级. => /
-->
css的样式:
01: 选择器
基本选择器
关系选择器
02: 样式
标准盒模型
弹性盒模型 (难点)
定位
<!-- 基本选择器 => 直接可以选中元素的选择器 => 选中标签,方便添加样式 -->
01: id选择器 => #id名
02: 类选择器 => .类名 (最常用)
03: 属性选择器
04: 标签选择器 => 标签名
05: 通配符
<!-- 属性选择器 => [属性] => 万能选择器 => 工作中,不推荐用属性选择器来添加样式 -->
<!-- 通配符 => 选中页面上所有的标签 -->
.box{
/* background-color: red; */
}
/* #wrap的所有div子元素 */
#wrap > div{
/* background-color: red; */
}
/* #wrap内的所有子元素标签 */
#wrap > *{
/* background-color: red; */
}
#wrap div{
background-color: red;
}
</style>
</head>
<body>
<!-- 写选择器 => 选中的元素,一个不能多,一个不能少 -->
<!--
关系选择器
01: 子选择器 => > (大于号)
02: 后代选择器 => 空格
03: 交集选择器 => 什么都不写 (两个基本选择器连在一起写)
04: 并集选择器 -->
<div id="wrap">
<div class="box">111</div>
<div class="box">222</div>
<div class="box">333</div>
<div class="box">444</div>
<p class="box">dafsdsa</p>
<div>
<div>123124124</div>
</div>
</div>
/* 是div并且class又有box的标签 */
div.box{
/* background-color: red; */
}
div[class="box"]{
/* background-color: red; */
}
</style>
</head>
<body>
<!-- 交集选择器中,如果涉及了标签选择器,需要写在前面 -->
<div>1111</div>
<div class="box">2222</div>
<!-- 并集选择器 -->
/* div和p和button */
div,p,button{
background-color: red;
}
/* div的子元素span和p的后代元素a和ul的后代元素li */
div > span, p a, ul li {}
扫一扫
2496
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
