HTML CSS

目录

第二章、HTML5的基础

第三章和第四章、HTML5页面元素及属性

第五、六章、应用CSS3设置网页样式

第七章、CSS新增选择器

第八章、CSS盒子模型

第九章、CSS背景

第十章、列表和超链接

第十一章、表格

专题1、表格标签

第十三章、浮动与定位

第十四章、多媒体技术

第十五章、网页布局

网站


第二章至第十五章所学知识点

第二章、HTML5的基础

 专题1、HTML5文档基本格式:<!DOCTYPE>标签,<html>标签,<head>标签,<body>标签;  

专题2、HTML5语法:标签不区分大小写,允许属性值不使用引导,允许部分属性值的属性省略;         

专题3、HTML5标记及属性:标记主要分为双标记和单标记,还有注释标记;标记属性有字体,颜色,位置,字号;嵌套结构遵循就近原则;

专题4、HTML5文档头部相关标记:<title>,<meta/>,<link>,<style>。

第三章和第四章、HTML5页面元素及属性

专题1、标题和段落标记:标题标记<h1>至<h6> 属性align,段落<p>属性align,标题标记和段落标记是双标记,<hr/>水平线是单标记,<br/>强制换行也是单标记;  

专题2、文本格式化标记:<strong>,<em>,<del>,<ins>;

专题3、特殊字符标记:常用的空格是nbsp;  < 大于号是&lt;  > 小于号是&gt;     

专题4、列表元素:有序列表,无序列表和定义列表,主要列表的嵌套;  5、图像标记:常用图像格式有GIF,PNG,JPG;引用是有绝对路径,相对路径,常用相对路径;

专题1、HTML结构元素:section元素,header元素,footer元素,nar元素,article元素,hgroup元素  

专题2、HTML5级块性元素:aside元素,figure元素; figcaption元素;

专题3、HTML5新增的语义元素:mark元素,time元素,meter元素,progress元素;   

专题4、HTML5新增的交互性元素:details和summary元素,menu元素,command元素;   

专题5、HTML5新增的通用属性:contenteditable属性,hidden属性,spelleheck属性。

第五、六章、应用CSS3设置网页样式

专题1、CSS样式规则

选择器用于指定CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式。格式如下:

选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

专题2.、引入CSS样式表

  1. 行内式也称为内联样式,是通过标签的style属性来设置元素的样式,其基本语法格式如下:

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

  1. 内嵌式是将CSS代码集中写在HTML文档的<head>头部标签中,并且用<style>标签定义, 
  2. 链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过<link />标签将外部样式表文件链接到HTML文档中
  3. 导入式基本不使用,因为页面会先加载html,然后再去加载CSS,这样就会造成页面样式的延迟。
  4. 四种方式的优先级
    1. 理论上:行内>内嵌>链入>导入
    2. 实际上:就近原则
  5. 内嵌、链接、导入在同一个文件头部,谁离相应的代码近,谁的优先级高。

专题3、CSS基础选择器

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标记选择器最大的优点是能快速为页面中同类型的标记统一样式,同时这也是它的缺点,不能设计差异化样式。

1)、类选择器使用"."(英文点号)进行标识,后面紧跟类名,

其基本语法格式如下:

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 

2)、id选择器使用“#”进行标识,后面紧跟id名,其基本语法格式如下:

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

3)、通配符选择器用"*"号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素。其基本语法格式如下:

*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

4)、标签指定式选择器又称交集选择器,由两个选择器构成,

其中第一个为标签选择器,第二个为class选择器或id选择器,

两个选择器之间不能有空格,如h3.special或p#one。

5)、后代选择器用来选择元素或元素组的后代,

其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。

当标签发生嵌套时,内层标签就成为外层标签的后代。

6)、并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器都可以作为并集选择器的一部分。

若某些选择器定义的样式完全或部分相同,可利用并集选择器为它们定义相同的样式。

专题1、字体样式属性

  1. 字号大小:font-size:长度 | 绝对尺寸 | 相对尺寸 | 百分比 ;
  2. 字体:font-family :字型1,字型2, …… ;
  3. 字体粗细:font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
  4. 字体风格:font-style: normal | italic | oblique ;
  5. 小型大写字母:font-variant: normal | small-caps ;    
  6. 综合:font:font-style  font-variant  font-weight  font-size/line-height  font-family ;
  7. 引用字体:@font-face
  8. 长单词换行:word-wrap
  9. 专题2、文本外观属性
  10. 文本颜色color : color_name | HEX | RGB | RGBA | HSL | HSLA | transparent ;
  11. 字符间距和单词间距:letter-spacing和word-spacing
  12. 文本行高:line-height: normal | 长度 | 百分比 | 数值 ;
  13. 文本对齐方式:text-align: left | right | center | justify | start | end | match-parent | justify-all;
  14. 文本大小写:text-transform : none | capitalize | uppercase | lowercase | full-width
  15. 文本修饰:text-decoration: decoration | underline | overline | bink
  16. 文本缩进:text-indent
  17. 文本对空白格的处理:white-space: normal | pre | nowrap
  18. 文本的阴影:text-shadow: none | 阴影 [ , 阴影 ]* ;
  19. 阴影 =  长度1 , 长度2 , [ 长度3 ], [颜色];
  20. 文本的溢出:text-overflow: cilp | ellipsis

专题3、CSS层叠性和继承性

  1. 层叠性是指多种CSS样式的叠加。
  2. 继承性是指书写CSS样式表时,子标签会继承父标签的某些样式,如文本颜色和字号。

专题4、CSS优先级

ID选择器的特殊性值,加100。  权值

类选择器、属性选择器或伪类,加10。

元素(标签)和伪元素,加1。

通配选择器*对特殊性没有贡献,即0。

行内样式---1000

最后比较特殊的一个标志!important(权重),它没有特殊性值,但它的优先级是最高的,

为了方便记忆,可以认为它的特殊性值为10000。

 

第七章、CSS新增选择器

专题1、属性选择器

  1. E[att^=value] 属性选择器是指选择名称为E的标记,且该标记定义了att属性,att属性值包含前缀为value的子字符串。
  2. E[att*=value]选择器用于选择名称为E的标记,且该标记定义了att属性。
  3. E[att$=value] 属性选择器是指选择名称为E的标记,且该标记定义了att属性。

专题2、关系选择器

关系选择器主要包括子代选择器(>)与兄弟选择器(+  ~)

专题3、结构化伪类选择器

(1):root选择器,用于匹配文档根元素(html元素),效果是整篇文章一个效果。

(2):not选择器,用某元素是排除某一个元素

(3):only-childy选择器,用于匹配某父元素唯一的子元素的元素。

(4):first-child选择器和:last-child选择器分别用于为父元素中的第一个或者最后一个子元素设置样式。

(5)使用:first-child选择器和:last-child选择器可以选择某个父元素中第一个或最后一个子元素,

(6):nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定类型的第 n 个子元素和倒数第n个子元素。

(7):empty选择器用来选择没有子元素或文本内容为空的所有元素。

(8):target选择器用于为页面中的某个target元素(该元素的id被当做页面中的超链接来使用)指定样式。

专题4、伪类选择器

  1. :before伪元素,位于{被选中元素内容}前,中必须匹配conten属性。注意被选中的内容要用" "双引号
  2. :after伪元素,位于{被选中元素内容}前,中必须匹配conten属性

 

第八章、CSS盒子模型

专题1、边框属性

  1. 边框样式:border-style(-top|bottom|left|right) : none | solid | dashed | dotted | double ; (一定要记得写这个)
  2. 边框宽度:border-width: 像素值 ;
  3. 边框颜色: border-color: 颜色、十六进制、rgb
  4. 综合设置边框:border:宽度、样式、颜色
  5. 圆角边框:border-radius: 水平半径参数/垂直半径参数
  6. 图片边框:border-image:图片路径/边框宽/重复方式/……

专题2、内边距属性

padding(-top | right | bottom | left) --不允许为负值

专题3、外边距属性

margin (-top | right | bottom | left) --可以为负值

专题4、Box-shadow属性

格式:box-shadow:像素值1 像素值2 像素值3 像素值4 颜色值 阴影类型

专题5、Box-sizing属性

格式:box-sizing:conter-box / border-box ;

第九章、CSS背景

专题1、背景属性

  1. 背景颜色:background-color:颜色值、十六进制、rgb;
  2. 背景图片: background-image:url(路径);
  3. 背景不透明:background-color:rgba(r,g,b,alpha)或opaclty:值;
  4. 背景图像平铺:background-repeat:repeat | no-repeat | repeat-x | repeat-y;
  5. 背景图像位置:background-position:像素、百分比、关键字;
  6. 图像固定方式:background-attachment: scroll | fixed;
  7. 背景图像大小:background-size:宽、高(px、%、cover、contain);
  8. 背景图像显示区域与裁剪区域:background-clip:属性值;
  9. 背景复合属性:background

专题2、CSS3渐变属性

  1. 线性渐变:background-image: linear-gradient(渐变角度,颜色值1,…,颜色值n);
  2. 径向渐变:background-image:radial-gradient(渐变现状 圆心位置,颜色值1,…,颜色值n);
  3. 重复线性渐变:background-image:repeating-linear-gradient;
  4. 重复径向渐变:background-image:repeating-radial-gradient;

第十章、列表和超链接

专题1、列表标签

  1. 无序列表:<ul> <li>列表1</li> <li>列表2</li> </ul>
  2. 有序列表:<ol> <li>列表1</li> <li>列表2</li> </ol>
  3. 定义列表:<dl> <dt>名词1</dt><dd>名词解1</dd></dl>

专题2、CSS控制列表样式

  1. list-style-type属性—控制无序列表和有序列表的项目符号

无序列表的属性值:disc实心圆、circle空心圆、square实心正方形、none不显示;

有序列表的属性值:decimal、upper-alpha、lower-alpha、upper-roman、lower-roman、none。

  1. list-style-image属性

基本格式:ul{list-style-image:ulr(图片路径);}

  1. list-style-position属性

属性值:inside列表项目符号在文本内、outside在文本外

专题3、超链接标签

格式:<a href=”路径(跳转目标)”target=”目标窗口弹出方式”>文本、图像</a>

专题4、锚点链接

先使用<a href=”id名”>链接文本</a>

后使用id名标注跳转目标的位置

专题5、链接伪类控制超链接

名:link{CSS样式规则;}未访问时超链接的状态

名:visited{ CSS样式规则;} 访问后超链接的状态

名:hover{ CSS样式规则;}鼠标经过、悬停时超链接的状态

名:active{ CSS样式规则;}鼠标点击不动是超链接的状态

 

第十一章、表格

专题1、表格标签

创建表格的基本标记为 <table> </table>、<tr> </tr> 、<td> </td>, 默认的情况下,表格的边框为0,宽高(自适应)靠表格内容支撑

  1. table:定义表格,可以设置边框,<table border="0">--默认
  2. tr:定义行,不可以输入内容,只可以输入<td></td>
  3. td:定义单元格,像容器(可以容纳所有标记)、放表格的内容 、还可以嵌套表格<table></table>

专题2、CSS控制表格样式

  1. 表格边框:<caption>标记,用于定义表格标题,border-collapse属性设置表格边框合并为一个单元格的边框,属性值:collapse
  2. 单元格边框:可以对<th>和<td>标记应用内边距样式属性padding,或对<table>标记应用HTML标记属性cellpadding.
  3. 单元格宽高:宽度(width)只能影响单元格的一列,并取一列的最大值;高度(height)只能影响单元格的一行,并取一行的最大值

专题1、创建表单

  1. 表单的构建:提示信息、表单域、表单控件
  2. 创建表单的基本格式:<form action=”url地址” method=”提交方式” name=”表单名称”></form>

专题2、表单控件

大致可分为input控件、textarea控件、select控件

第十三章、浮动与定位

专题1、浮动

  1. 浮动的基本格式:选择器:{float:属性值(left、right、none);}
  2. 清除浮动的基本格式:选择器:{clear:属性值(left、right、both、none);}
  3. 标签的浮动属性:空标签、overflow、after对象

专题2、标记定位

  1. 定位模式

基本格式:选择器{position:属性值(statie、relative、absolute、fixed);}

  1. 边偏移

基本格式:{top/bottom/left/right:属性值(偏移量);}

专题3、元素转换

  1. 块元素:在页面中以区域块的形式出现,通常每一个块元素独占一整行或占多整行,可以对其设置宽、高等属性,<div>标签是最典型的块元素;
  2. 行内元素:在页面中占独立的区域,仅靠自身大小来支撑结构,一般不可以设置宽、高、对齐等属性,<span>标签是最典型的函内元素。
  3. 元素类型的转换:

display-inline:显示为行内元素;

display-block:显示为块元素;

display-inline-block:显示为行内元素,可以设置宽高等属性,但不会独占一行;

display-none:元素被隐藏,不显示,也不占用页面的空间。

第十四章、多媒体技术

专题1、嵌入视频

格式:<video src="视频文件路径" controls="controls"> 文字 </video>

video标签支持三种视频格式,Ogg 、WebM、MPEG4,必备属性src controls,其他属性:autoplay 、loop、preloadshux、poster

专题2、嵌入音频

格式:<audio src="音频文件路径" controls="controls"> 文字 </audio>

audio标签支持三种视频格式,Ogg Wav MP3必备属性src 、controls,其他属性autoplay、loop、preload

专题3、控制视频的宽高

Video标记设置width、height属性来缩放视频,这样的视频即使在页面上看起来很小,但它原始大小依然没变。

第十五章、网页布局

专题1、布局概述

  1. 布局概述:布局就是指对网页中的模块进行合理的排布,使页面排列清晰,美观易读。
  2. 布局的流程:先确定页面版心的宽的,后分析页面的模块:header、nav、banner、content、footer(标签之间的关系:并列、嵌套等)最后来控制网页的各个模块:HTML CSS JS(脚本....)

专题2布局类型:

单列布局、两列布局、三列布局(通栏布局)

专题3、网页模块命名规范

 (1)避免使用中文字符命名 

 (2)命名不要以数字揩油

 (3)不要占用关键字

 (4)命名时要用较少的字母表达最容易理解的

 (5)驼峰式命名:除了第一个单词外,其他单词首字母大写--partOneNum

 (6)帕斯卡命名:每个单词之间用"_"隔开--content_one_a--比较常用。

网站

以上是我上课时做的笔记,希望内容对你有所帮助。同时强烈推荐小伙伴们使用以下两个的网站

https://www.w3school.com.cn

https://www.runoob.com/

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值