回顾:
1:五大常用浏览器 以及内核?
Chrome webkit Blink
FireFox Gecko
IE Trident
Opera Presto
Safafi Webkit
2: HTML : 超文本标记语言
超:
标记: 标签
,语义标签: hi, em,strong hi h1
语言: 不是编程语言
em,i strong,b ins u del s p hi div span img
并列:兄弟 关系
嵌套: 父子关系 html> body+head
img路径 绝对 D:/a/1.png 相对 : 同级 ./ 上一级 : …/ …/…/
1:无序列表
2:有序列表
3:自定义列表
4:超链接标签
<a></a> anchor 锚点
(1)链接使用
href : 链接地址
target: 控制链接的打开方式
-
_self 默认打开方式 在本页打开
-
_blank 在新页面打开
<base target="_blank"> 一次性设置超链接的打开方式为新页打开 必须放在head标签里
(2)锚点功能
[外链图片转存失败(img-KiDPDDYD-1563370562420)(C:\Users\Administrator\Desktop\第一阶段\day02\笔记\media\锚点功能.png)]
点击锚点链接跳转相同界面的不同部分
5:表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<table>
<!-- 表格头部 thead-->
<thead>
<!-- 字段 tr行 > th字段 -->
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>email</th>
<th>薪资</th>
</tr>
</thead>
<!-- 表格身体部分 tbody -->
<tbody>
<!-- tr >td 列 单元格 -->
<tr>
<td>二妮</td>
<td>78</td>
<td>女</td>
<td>无</td>
<td>8000</td>
</tr>
<tr>
<td>3妮</td>
<td>78</td>
<td>女</td>
<td>无</td>
<td>8000</td>
</tr>
<tr>
<td>4妮</td>
<td>78</td>
<td>女</td>
<td>无</td>
<td>8000</td>
</tr>
<tr>
<td>5妮</td>
<td>78</td>
<td>女</td>
<td>无</td>
<td>8000</td>
</tr>
</tbody>
</table>
</body>
3:默认属性:
- border: 边框 border=“1” 边宽 默认是黑色
- cellpadding: 10px ; 单元格内容与边框的距离
- cellspacing:10px; 单元格与单元格的距离
- ?cellpadding=“0px” cellspacing=“0px” 双线合并成单线—> 粗的 因为是两条合并 —> 细线 边框 ? css 一个属性
- 宽度属性 width
- 高度属性 height
- bgcolor : 背景色
- align: 水平对齐
- background: 背景图片 background=“地址”
4: CSS属性
细线边框属性:border-collapse: collapse
文本对齐 text-align: left 居左/right右对齐/center居中
5: 合并单元格
[外链图片转存失败(img-Mgqig60v-1563370562421)(C:\Users\Administrator\Desktop\第一阶段\day02\笔记\media\表格课堂练习02.jpg)]
跨行合并
1:rowspan =" 合并的行数" 从上到下合并 最初始的那一行身上
2:删除被合并的那几行 删除的行数= 合并的行数-1
跨列合并 column 列
colspan =“合并的列数” 从左到右合并 属性写到最左边的那一列身上
2: 删除的列数= 合并的列数-1
默认属性设置宽高合并过后会丢失样式 ,要新添加样式
6:表单
功能:用于收集用户数据
[外链图片转存失败(img-8U1HEQD4-1563370562421)(C:\Users\Administrator\Desktop\第一阶段\day02\笔记\media\biaodan.jpg)]
[外链图片转存失败(img-yDKZ0zdJ-1563370562422)(C:\Users\Administrator\Desktop\第一阶段\day02\笔记\media\input.png)]
<body>
<!-- 大盒子 -->
<form action="">
<!-- 表单控件 input type="类型"
type:
text: 文本框
password 密码框 文字隐藏 变成小圆圈
radio 单选框
checkbox 多选框
file 文件上传域
文本域 <textarea></textarea>
button 普通按钮
submit 提交按钮 作为表单提交的按钮 form 必须包含一个提交按钮
reset 重置按钮
image 图片按钮
name: 作用:指明当前用户输入的是什么数据
-->
姓名: <input type="text" name="username"><br>
密码: <input type="password" name="userpasswd"><br>
<!-- 要想实现单选框成为一道单选题 必须保证这两个表单元素身上的name属性值相同 -->
性别: 男: <input type="radio" name="sex" value="1" >
女: <input type="radio" name="sex" value="0"><br>
爱好: <br>
游泳 <input type="checkbox" name="hobby" value="swimming">
唱歌 <input type="checkbox" name="hobby" value="sing">
耍杂技 <input type="checkbox" name="hobby" value="shua">
数钱: <input type="checkbox" name="hobby" value="money"><br>
<!-- 下拉列表 select > option 选项 -->
工作地:
<select name="city" id="">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select><br>
上传自拍(不要美颜):
<input type="file" name="photo"><br>
评价你自己:
<textarea name="desc" id="" cols="" rows=" " style="width:316px;height:273px" ></textarea>
<br>
<!-- <input type="button" value="普通按钮"><br> -->
<!-- <input type="submit"> -->
<!-- <input type="reset"> -->
<!-- 弥补默认提交按钮样式上的缺陷 css不是万能的 -->
<!-- <input type="image" src="./image/图片提交按钮.png"> -->
</form>
</body>
</html>
css引入
[外链图片转存失败(img-OHMuHlJW-1563370926040)(C:\Users\Administrator\Desktop\第一阶段\day02\笔记\media\有css.png)]
[外链图片转存失败(img-WOVOlLq5-1563370926041)(C:\Users\Administrator\Desktop\第一阶段\day02\笔记\media\无css.png)]
1:行内引入
<div style="属性名1：属性值;属性名2:属性值;"></div>
缺点:
缺点： 1：结构不清晰 后期代码维护困难
2：繁杂 体积大
3:web标准 结构html样式css行为js 相分离 行内样式就是没有形成样式和结构相分离
用处: 行内样式去覆盖文本内或者文本外样式（建议一个或两个单独样式可以写在行内）
2:文本内部引入
<head>
<style>
</style>
</head>
缺点: 不彻底
用处： 属于自己结构里的样式，作用范围只在当前结构文件内
3：文本外部引入（彻底分离，后期代码好维护）
1:新建一个对应的样式文件 .css
2:通过link标签在head头部引入这个样式文件
<link rel="stylesheet" href="03-外部样式.css">
rel :说明当前链接资源的类型 stylesheet 样式表
href : 路径 地址 相对和绝对 跳出一个 ../ 同级./
三种引入方式的优先级别
选择器
基础选择器:
4个
* {
样式的集合; --->属性名:属性值;
}
* 全局选择器 选择中所有标签 包含Body在内
标签选择器（将结构里的所有span标签都挑选回来）
标签名 {
属性名:属性值;
......
}
span {
color:red ; //选中结构里所有span标签 加上颜色为红色
}
/* 类选择器(多个) 标签起个类名 class="a" 其次通过.类名去使用*/
.a {
background-color: yellow
}
/* id选择器 唯一性(身份证号) 起一个id名字 #id名调用 */
#p1 {
font-size: 30px;
}
基础选择器的权重关系（优先级）
css三大特性:层叠性 优先级
id>class>标签选择器
| id选择器 | class选择器 | 标签选择器 |
|---|---|---|
| 100 | 10 | 1 |
进阶
基础选择器组合起来就形成了进阶里的几种选择器
1：群组选择器 选择器1,选择器2，选择器3 { color:blue }
2:交集选择器 选择器1选择器2 { }
3：后代选择器 父子关系(不仅仅选择儿子 是儿子+孙子 只要满足条件即可) 父元素选择器 子元素选择器 { }
<div>
<span class="box1" >span01</span>
<span class="box1" >span01</span>
</div>
<div class="box1"></div>
div .box1 {
}
4：子代 选择器1>选择器2 { }
.box > a {
color: red;
}
5:伪类链接选择器(a链接)
(1) :hover 鼠标移入
div.box:hover {
color:blue;
}
(2)未被访问的时候 :link
a:link {
color:red;
}
颜色表示
1：red,blue…
**2: rgb表示法 red green blue ** color:rgb( 0-255 ,0-255 ,0-255 )
0—255—>256
3: 6位16进制去表示颜色
字体的属性
-
字体大小 font-size: 16px ;
-
字体形态 font-style: italic倾斜/normal正常
-
字体粗细 font-weight:100-900 (100 400正常 600粗 900最粗)
-
字体家族font-family: '楷体‘，’宋体‘，‘微软雅黑’
-
行高 line-height:盒子高度
font:font-style font-weight font-size/line-height font-family font:normal 400 30px/1.5 "微软雅黑"; 一定按照顺序写!!!![外链图片转存失败(img-MYo0XAvZ-1563370926041)(E:\0408课堂代码\day03\笔记\media\行高.jpg)]
文字水平居中和垂直居中
text-align:center;
line-height:盒子高度;
大小表示法
-
px 100px
-
em 相对于父元素的字体大小
<div> 我是div标签 <span>我是span标签</span> </div> div { font-size:20px; } div span { font-size:1em; // 20px 2em 40px ..... } -
rem 相对于html标签的字体大小
html { font-size:20px; } <div> 我是div标签 <span>我是span标签</span> </div> div { font-size:2rem;//40px } div span { font-size:3em; //60px }css三大特性
层叠性
优先级
继承性 ： text- ,line-,color,font- 大部分具有继承性 （父元素拥有遗传给孩子）
扫一扫
278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
