概述
目录
第二章、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; < 大于号是< > 小于号是>
专题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样式表
- 行内式也称为内联样式，是通过标签的style属性来设置元素的样式，其基本语法格式如下:
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
- 内嵌式是将CSS代码集中写在HTML文档的<head>头部标签中，并且用<style>标签定义，
- 链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标签将外部样式表文件链接到HTML文档中
- 导入式基本不使用，因为页面会先加载html,然后再去加载CSS，这样就会造成页面样式的延迟。
- 四种方式的优先级
- 理论上：行内>内嵌>链入>导入
- 实际上：就近原则
- 内嵌、链接、导入在同一个文件头部，谁离相应的代码近，谁的优先级高。
专题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、字体样式属性
- 字号大小：font-size:长度 | 绝对尺寸 | 相对尺寸 | 百分比 ;
- 字体：font-family :字型1,字型2, …… ;
- 字体粗细：font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
- 字体风格：font-style: normal | italic | oblique ;
- 小型大写字母：font-variant: normal | small-caps ;
- 综合：font：font-style font-variant font-weight font-size/line-height font-family ;
- 引用字体：@font-face
- 长单词换行：word-wrap
- 专题2、文本外观属性
- 文本颜色color : color_name | HEX | RGB | RGBA | HSL | HSLA | transparent ;
- 字符间距和单词间距：letter-spacing和word-spacing
- 文本行高：line-height: normal | 长度 | 百分比 | 数值 ;
- 文本对齐方式：text-align: left | right | center | justify | start | end | match-parent | justify-all;
- 文本大小写：text-transform : none | capitalize | uppercase | lowercase | full-width
- 文本修饰：text-decoration: decoration | underline | overline | bink
- 文本缩进：text-indent
- 文本对空白格的处理：white-space: normal | pre | nowrap
- 文本的阴影：text-shadow: none | 阴影 [ , 阴影 ]* ;
- 阴影 = 长度1 , 长度2 , [ 长度3 ], [颜色];
- 文本的溢出：text-overflow: cilp | ellipsis
专题3、CSS层叠性和继承性
- 层叠性是指多种CSS样式的叠加。
- 继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。
专题4、CSS优先级
ID选择器的特殊性值，加100。 权值
类选择器、属性选择器或伪类，加10。
元素(标签)和伪元素，加1。
通配选择器*对特殊性没有贡献，即0。
行内样式---1000
最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，
为了方便记忆，可以认为它的特殊性值为10000。
第七章、CSS新增选择器
专题1、属性选择器
- E[att^=value] 属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。
- E[att*=value]选择器用于选择名称为E的标记，且该标记定义了att属性。
- 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、伪类选择器
- ：before伪元素，位于{被选中元素内容}前，中必须匹配conten属性。注意被选中的内容要用" "双引号
- ：after伪元素，位于{被选中元素内容}前，中必须匹配conten属性
第八章、CSS盒子模型
专题1、边框属性
- 边框样式：border-style(-top|bottom|left|right) : none | solid | dashed | dotted | double ; （一定要记得写这个）
- 边框宽度：border-width: 像素值 ;
- 边框颜色: border-color: 颜色、十六进制、rgb
- 综合设置边框：border：宽度、样式、颜色
- 圆角边框：border-radius: 水平半径参数/垂直半径参数
- 图片边框：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、背景属性
- 背景颜色：background-color:颜色值、十六进制、rgb;
- 背景图片： background-image:url（路径）；
- 背景不透明：background-color：rgba(r,g,b,alpha)或opaclty:值；
- 背景图像平铺：background-repeat：repeat | no-repeat | repeat-x | repeat-y;
- 背景图像位置：background-position:像素、百分比、关键字;
- 图像固定方式：background-attachment: scroll | fixed;
- 背景图像大小:background-size:宽、高（px、%、cover、contain）;
- 背景图像显示区域与裁剪区域：background-clip：属性值；
- 背景复合属性：background
专题2、CSS3渐变属性
- 线性渐变：background-image: linear-gradient(渐变角度，颜色值1，…,颜色值n);
- 径向渐变:background-image:radial-gradient(渐变现状 圆心位置，颜色值1，…，颜色值n);
- 重复线性渐变:background-image:repeating-linear-gradient;
- 重复径向渐变:background-image:repeating-radial-gradient；
第十章、列表和超链接
专题1、列表标签
- 无序列表：<ul> <li>列表1</li> <li>列表2</li> </ul>
- 有序列表：<ol> <li>列表1</li> <li>列表2</li> </ol>
- 定义列表：<dl> <dt>名词1</dt><dd>名词解1</dd></dl>
专题2、CSS控制列表样式
- list-style-type属性—控制无序列表和有序列表的项目符号
无序列表的属性值：disc实心圆、circle空心圆、square实心正方形、none不显示；
有序列表的属性值：decimal、upper-alpha、lower-alpha、upper-roman、lower-roman、none。
- list-style-image属性
基本格式：ul{list-style-image:ulr(图片路径);}
- 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，宽高（自适应）靠表格内容支撑
- table:定义表格，可以设置边框,<table border="0">--默认
- tr:定义行，不可以输入内容，只可以输入<td></td>
- td:定义单元格，像容器（可以容纳所有标记）、放表格的内容 、还可以嵌套表格<table></table>
专题2、CSS控制表格样式
- 表格边框：<caption>标记，用于定义表格标题，border-collapse属性设置表格边框合并为一个单元格的边框，属性值：collapse
- 单元格边框：可以对<th>和<td>标记应用内边距样式属性padding，或对<table>标记应用HTML标记属性cellpadding.
- 单元格宽高：宽度（width）只能影响单元格的一列，并取一列的最大值;高度（height）只能影响单元格的一行，并取一行的最大值
专题1、创建表单
- 表单的构建：提示信息、表单域、表单控件
- 创建表单的基本格式：<form action=”url地址” method=”提交方式” name=”表单名称”></form>
专题2、表单控件
大致可分为input控件、textarea控件、select控件
第十三章、浮动与定位
专题1、浮动
- 浮动的基本格式:选择器:{float:属性值（left、right、none）;}
- 清除浮动的基本格式：选择器:{clear:属性值（left、right、both、none）;}
- 标签的浮动属性：空标签、overflow、after对象
专题2、标记定位
- 定位模式
基本格式:选择器{position:属性值(statie、relative、absolute、fixed);}
- 边偏移
基本格式:{top/bottom/left/right:属性值(偏移量);}
专题3、元素转换
- 块元素：在页面中以区域块的形式出现，通常每一个块元素独占一整行或占多整行，可以对其设置宽、高等属性，<div>标签是最典型的块元素；
- 行内元素：在页面中占独立的区域，仅靠自身大小来支撑结构，一般不可以设置宽、高、对齐等属性，<span>标签是最典型的函内元素。
- 元素类型的转换：
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、布局概述
- 布局概述：布局就是指对网页中的模块进行合理的排布，使页面排列清晰，美观易读。
- 布局的流程：先确定页面版心的宽的，后分析页面的模块：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/
最后
以上就是喜悦绿茶为你收集整理的HTML CSS第二章、HTML5的基础第三章和第四章、HTML5页面元素及属性第五、六章、应用CSS3设置网页样式第七章、CSS新增选择器第八章、CSS盒子模型第九章、CSS背景第十章、列表和超链接第十一章、表格专题1、表格标签第十三章、浮动与定位第十四章、多媒体技术第十五章、网页布局网站的全部内容，希望文章能够帮你解决HTML CSS第二章、HTML5的基础第三章和第四章、HTML5页面元素及属性第五、六章、应用CSS3设置网页样式第七章、CSS新增选择器第八章、CSS盒子模型第九章、CSS背景第十章、列表和超链接第十一章、表格专题1、表格标签第十三章、浮动与定位第十四章、多媒体技术第十五章、网页布局网站所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复