目录
一、HTML标签
1、常用标签
<html> </html> | 网页根元素,用来定义整个HTML文档 |
<head> </head> | 网页头部区 |
<body> </body> | 网页主体内容区,用来定义HTML文档的主体 (显示在网页的内容都要写在里面) |
<title> </title> | 用来定义文档标题 |
<hx> </hx>(x=1~6) | 用来定义文档的x级标题 |
<p> </p> | 用来定义文档段落 |
<a> </a> | 用来定义文档超链接 (使用场景:下载;压缩文件;网站链接;电子邮件;手机电话;短信信息等) |
<table></table> | 用来定义表格 |
2、列表标签
无序列表 | 有序列表 | 自定义列表 |
<ul> <li> </li> ...... </ul> | <ol> <li> </li> ...... </ol> | <dl> <dt> </dt> <dd> </dd> </dl> |
3、其他标签
加粗 | <b></b> |
倾斜 | <i></i> |
下划线 | <u></u> |
删除线 | <s></s>、 |
...... |
4、一个例子
<html>
<head>
<title>2022春所选课程简介</title>
</head>
<body>
<h1 align = "center">2022春所选课程简介</h1>
<h2>所选课程如下</h2>
<ol>
<li>离散数学</li>
<li>足球</li>
<li>大学英语</li>
<li>中文写作</li>
<li>算法与程序设计实践</li>
<li>中国近代史纲要</li>
<li>高等数学</li>
<li>JAVA</li>
<li>数字电路与数字逻辑</li>
<li>计算机新技术讲座</li>
<li>网页设计与开发</li></li>
</ol>
<table border="1">
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr>
<td>离散数学</td>
<td>大学英语</td>
<td>离散数学</td>
<td>算法与程序设计实践</td>
<td>大学英语</td>
</tr>
<tr>
<td></td>
<td>中文写作</td>
<td>高等数学</td>
<td>高等数学</td>
<td>网页设计与开发</td>
</tr>
<tr>
<td>篮球</td>
<td>高等数学</td>
<td></td>
<td>数字电路与数字逻辑</td>
<td>中国近代史纲要</td>
</tr>
<tr>
<td></td>
<td>中国近代史纲要</td>
<td></td>
<td>计算机新技术讲座</td>
<td>数字电路与数字逻辑</td>
</tr>
<tr>
<td></td>
<td></td>
<td>JAVA</td>
<td>JAVA</td>
<td></td>
</tr>
</table>
<h3>离散数学</h3>
<p>研究离散量的结构及其相互关系的数学学科,是现代数学的一个重要分支</p>
<h3>大学英语</h3>
<p>英语听说读写</p>
<h3>高等数学</h3>
<p>由微积分学,较深入的代数学、几何学以及它们之间的交叉内容所形成的一门基础学科</p>
<h3>JAVA</h3>
<p>JAVA编程语言</p>
<h3>算法与程序设计实践</h3>
<p>C语言的数据类型、运算符和表达式,数据查询和编辑算法,递推、穷举、倒推算法,结构体与共用体,编译预处理等内容</p>
<h3>数字电路与数字逻辑</h3>
<p>介绍了小规模数字集成电路的逻辑设计技术以及中、大规模数字集成电路和可编程逻辑器件</p>
<h3>网页设计与开发</h3>
<p>是根据希望向浏览者传递的信息(包括产品、服务、理念、文化),进行网站功能策划,然后进行的页面设计美化工作</p></h3>
<p><a href="https://passport2.chaoxing.com">超星学习通登录</a></p>
</body>
</html>
二、CSS 基础
CSS简介
1、CSS是什么
CSS(Cascading Style Sheets,层叠样式表)是一种CSS以设计、改变其HTML页面的样式而知名,用于控制页面的外观样式,将表示样式应用到标记的Web和其他媒介,如XML文档中。
2、CSS的发展历史
- 1996年12月W3C推出了CSS规范的第一个版本,其中包含了颜色,背景和文字等相关属性;
- 1998年W3C发布了CSS的第二个版本即CSS2.0,实现了内容和表现效果分离,并开始使用样式表结构。
- 2001年5月W3C开始进行CSS3标准的制定。该标准将整个网页系统划分为很多的相互独立的子模块,然后让程序员根据不同的模块进行开发与设计对应的层叠样式表,用来减少CSS文件的体积。
3、CSS的作用
- 实现内容与样式的分离(HTML 专注去做结构呈现,样式交给css),便于团队开发。
- 控制页面布局, 使页面更精美。比如: 设置浮动、定位等样式。
- 美化界面,。比如: 设置标签文字大小、颜色、字体加粗等样式。
- 样式复用,便于网站的后期维护。
- 丰富我们的网页,使布局更加灵活自如。
CSS引用方式
1、外链式
即将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过<link>标签将外部样式表文件连接到HTML文件中。
- 优点:代码量少,一个 CSS 文件可以控制多个页面有利于改版和维护,有效的利缓存机制,加快页面的访问速度。
- 缺点:对于单个页面,会有多余的代码从外部引入中的 href 属性会给服务器造成请求压力。
<head>
<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>
补充:
- href:定义所连接外部样式表文件的地址,可以是相对路径,也可以是绝对路径。
- type:定义链接文档的类型,这里需要指定为“text/css”,表示链接的外部文件为CSS。
- rel:定义当前文档与被链接文档之间的关系。
2、内嵌式
即将CSS代码集中写在HTML文档的<head>头部标签中,并用<style>标签定义。
- 优点:代码量少;相对于外部引入,单页代码量少没有服务器请求压力;符合规范,做到了 html 和 css 分离,但不够彻底。
- 缺点:只对其所在的HTML页面有效。在设计网站的时候,不建议用,因为不能充分发挥CSS代码的重用优势。
<head>
<style type="text/css">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
补充:
- <style>标签一般位于<head>标签中的<title>标签之后;
- 在<style>标签中,只有设置type的属性值为“text/css”,浏览器才知道<style>标签包含的是CSS代码。
3、行内式(内联式)
即通过style属性设置标签的样式,实际上任何HTML标签都拥有style属性,用于设置行内式。属性和属性值的书写规范与CSS样式规则一样。
- 优点:优先级较高,个别特殊情况下时候使用
- 缺点:只能作用于当前标签上,不能重复使用,代码复用性差后续维护代码较难,代码可读性较差
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;">内容</ 标签名>
补充:
- 行内式CSS只对其所在的标签及嵌套在其中的子标签起作用。
- 通常CSS位于<head>头部标签中,但是行内式CSS位于<html>根标签中。
CSS三大特性
1、层叠性
相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。
层叠性原则:
- 若样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式;
- 若样式不冲突,则不会层叠。
2、继承性
即子标签会继承父标签的某些此样式,如文本的颜色和字号,简单理解:子承父业
简单继承:
- 子元素可以继承父元素的样式( text -, font -, line ﹣这些元素开头的可以继承,以及 color 属性)
- 恰当的使用继承可以简化代码,降低CSS的复杂性。
< style >
body
{
color : brown ;
font :12px/1.5' Microsoft yahei';
}
</ style >
< body >
< p ></ p >
</ body >
行高继承:
- 行高可以跟单位也可以不跟单位;
- 如果子元素没有设置行高,则会继承父元素的行高为1.5;
- 此时子元素的行高是:当前子元素的文字大小*1.5。
3、优先级
即当同一个元素指定多个选择器就会由优先级产生。
- 选择器相同,则执行层叠性
- 选择器不同,则按照选择器权重执行
选择器权重:
选择器 | 选择器权重 |
继承或者* | 0,0,0,0 |
元素选择器 | 0,0,0,1 |
类选择器,伪类选择器 | 0,0,1,0 |
Id选择器 | 0,1,0,0 |
行内选择器 style=" " | 1,0,0,0 |
!important 重要性 | 无穷大 |
CSS常用属性
1、字体类
属性名称 | 描述 | 补充 |
font-family | 设置元素字体 | |
@font-face | 定义字体 | |
font-style | 规定文字样式 | normal : 正常的, 默认就是正常的 italic : 倾斜的 |
font-weight | 规定文字粗细 | bold: 加粗 bolder: 比加粗还要粗 lighter: 细线, 默认就是细线 |
font-size | 规定文字大小 | 格式:font-size: 30px; 单位:px(像素 pixel) |
2、文本类
属性名称 | 描述 | 补充 |
color | 设置文本颜色 | |
text-decoration | 给文本添加装饰 | underline: 下划线 line-through: 删除线 overline: 上划线 |
text-align | 设置文本水平对齐方式 | left:左 right:右 center:中 |
text-indent | 设置文本缩进 |
3、盒模型类
属性名称 | 描述 |
height | 描述设置元素的高度 |
width | 设置元素的宽度 |
border | 设置边框 |
margin | 用于在任何定义的边框之外,为元素周围创建空间,外边距 |
padding | 用于在任何定义的边界内的元素内容周围生成空间,内边距 |
4、背景类
属性名称 | 描述 |
background | 在一条声明中设置所有背景属性的简写属性 |
background-color | 设置背景颜色 |
background-image | 设置背景图片 |
background-repeat | 用于控制背景图片的平铺方式 |
background - position | 指定背景图像的位置 |
background - size | 规定背景图像尺寸 |
**补充
1、选择第几个标签
标签 | 补充 |
first-child | 表示选择列表中的第一个标签 |
last-child | 表示选择列表中的最后一个标签 |
nth-child(3) | 表示选择列表中的第3个标签 |
nth-child(2n) | 表示选择列表中的偶数标签 |
nth-child(2n-1) | 表示选择列表中的奇数标签 |
nth-child(n+3) | 表示选择列表中的标签从第3个开始到最后 |
nth-child(-n+3) | 表示选择列表中的标签从0到3,即小于3的标签 |
nth-last-child(3) | 表示选择列表中的倒数第3个标签 |
last-of-type | 表示其父元素下的最后一个指定类型的元素。 |
2、常见命名规则
(1)帕斯卡命名法(Pascal)
单字之间不以空格断开或连接号(-)、底线(_)连结,第一个单字首字母采用大写字母;后续首字母亦用大写字母,例如:FirstName、LastName。每一个单字的首字母都采用大写字母的命名格式,被称为“Pascal命名法”,也有人称之为“大驼峰式命名法”(Upper Camel Case),为驼峰式大小写的子集。
(2)驼峰命名法(Camel)
1.小驼峰法
变量一般用小驼峰法标识。驼峰法的意思是:除第一个单词之外,其他单词首字母大写。
例如:变量myStudentCount的第一个单词全部小写,后面的单词首字母大写。
2.大驼峰法
相比小驼峰法,大驼峰法(即帕斯卡命名法)把第一个单词的首字母也大写了。
使用场景:
减号和加号之类的操作符是保留字符,不允许用在函数或变量的名字里。这同时意味着它们也不能用在方法或属性的名字里(方法和属性其实是关联在某个对象上的函数和变量)
例:
当你需要引用一个中间带减号的CSS属性时,DOM要求你用驼峰命名法,则CSS属性font-family 变为DOM属性fontFamily
(3)下划线命名法(UnderScoreCase)
逻辑断点(单词)用的是下划线隔开
例如:show_message(); // string user_name;
(4)匈牙利命名法(Hungarian)(了解)
基本原则:变量名=属性+类型+对象描述