大家好，欢迎来到IT知识分享网。
day02
回顾：
文本类型：h p i/em strong hr br u /ins b/strong s/del
h1一般用在logo 盒子
布局类型： div, span, 列表系列 ul>li ol>li dl>dt+dd
ul ol dl 直接子代 不能是其他元素
ul > li> div
功能性: 
相对路径: / ./ …/ …/…/
alt:
title: 鼠标悬停
一：功能性标签：超链接
功能：跳转网页 、 跳转到某一个网页某一个部分（锚点链接）
<a href="目标界面的地址">内容</a> 以相对路径方式 内容： 1.文字 <a href="目标界面的地址">新浪</a> 2.a>div>img , 图片链接 a>img 3.邮箱链接 4.下载链接 锚点链接
1.抛下目标点 id=“”
2.a链接href属性里写锚点 href=“#id值”
base标签
统一设置a链接的打开方式 和 基础路径
必须写到head标签
例子：
<base href="http://baidu.com?" target="_blank"> 二：表格标签
列表：一维（线性关系）
表格：二维展示（行 列）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D04tLSOn-50)(media/table.jpg)]
<table>表格 //表格的标题 <caption>2020年8月份工资统计表</caption> //表格头部 <thead> //table row 一行 <tr> //th列标题标签 <th>姓名</th> <th>基本工资</th> <th>岗位工资</th> </tr> </thead> //表格主体 <tbody> <tr> //1列 1单元格 <td>周大伦</td> <td>9000</td> <td>500</td> </tr> </tbody> //表格底部 <tfoot> 备注：这个月给大家发30%,不许异动！ </tfoot> </table> 自带属性：
border
<table border="1"></table> 默认黑色 cellspacing设置单元格与单元格之间的距离
<table cellspacing="0"></table> 默认黑色 cellpadding设置单元格内容与边框的距离
<table cellspacing="0" cellpadding="0"></table> 默认黑色 align设置在水平方向的对齐方式
left:
right:
center:
bgcolor设置单元格or表格背景色
width,height设置宽高
跨列合并
水平方向上单元格合并
从左到右 属性写在最左侧的单元格身上 接着删除被合并的列 删除的个数 = 合并个数-1
colspan="列数" 跨行合并
垂直方向上单元格的合并
从上到下 属性写在最上侧的单元格身上 接着删除被合并的行 删除的个数 = 合并个数-1
rowspan="行数" css属性
border-collpase:collpase;细线边框 特性：
1.行等高，列等宽
- 表格不设置宽高时 是自己适应的 由内容撑开的 每列，每行的高度或者宽度都是取决于内容的
- 你设置了表格的宽高 ，你设置的> 默认撑开的 以你设置的为主 反之
三：CSS简介，引入，选择器
css简介
css: cascading层叠 style 样式 sheet 表
作用：美容师
css包含内容： 布局 ，圆角，阴影，渐变，背景属性， 选择器
引入的三种方式
行内引入
<div style="color:red;background-color:blue;font-size:20px" ></div> style="样式集合" 1-n个css属性 每个属性以;隔开 属性名字和属性值以:隔开 特点：1.只对当前元素起作用
缺点：冗杂 阅读性不好 后期维护困难 w3c提倡样式 结构行为相分离 违背提倡
优点：优先级高
适应场景：1.覆盖 2.js操作动态样式
文本内部嵌入
<head> <style> div {
width: 200px; height: 200px; } .first-div {
/* 背景色 */ background-color: red; /* 字体大小 */ font-size: 30px; line-height: 200px; /* 文字颜色 */ color:#000; } </style> </head> 优点：冗杂减少 结构清晰 后期好维护 一定程度上将样式和结构相分离
缺点：没有彻底分离
适用嵌入： 覆盖公共样式文件里的样式
css选择器
基础选择器
全局选择器 *
* {
}匹配包含html在内的所有元素
标签选择器
标签名字 {
} 类选择器
.类名 {
} <div class="类名"></div>匹配的是拥有此类名的所有元素 id选择器
唯一识别 匹配的就是一个元素
#id值 {
} <div id="值"></div>匹配的是拥有此id值得一个元素 优先级规则
从大到小 id>class>tagName标签名>* 如果同级选择器 取决于代码执行的顺序 就近原则 id 100 二进制 class 10 tagName 1 * 0 外部链接引入
<link rel="stylesheet" href=""> rel:指明当前引入的文件类型 href="" 引入文件的地址 引入方式优先级：行内>文本内部嵌入 >文本外部链接
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/139610.html
