华为云id: hw29835637css 第六章 css定位定位position就是用于设置元素在页面上的位置，有static（默认值，表示标准布局）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）。定位位置用top，left，right，bottom属性来设置元素具体位置，值可以百分比或者具体数字+px也可以是负值。层级z-index设置定位元素的层级，值越大层级越大。当a和b元素同在一区域，层级大的显示上面。相对定位relative默认标准文档流来定位不影响周围其他元素排布。.parent{ position: relative; top: 10px; left: 11px; }绝对定位absolute相对于除了static定位之外的第一个父元素进行定位，没有就相对于页面定位。它会脱离标准流。多用于父元素是相对定位，组成父相子绝模式。

华为云id: hw29835637css 第五章 css浮动浮动就是元素脱离文档流向左或向右布局。浮动float，默认none不浮动，left向左浮动，right向右浮动。一旦设置了浮动，元素都会变成块级元素并且脱离标准流使父元素的内容塌陷。阻止父元素塌陷就要清除浮动clear，默认none无，left左侧不准浮动，right右测不准浮动，both两侧都不准浮动；清除浮动overflow用于设置元素不够容纳内容时的显示方式，默认visible，auto自动添加滚动条，hidden隐藏超出的内容，scroll显示滚动条。常用清除浮动（在父元素上添加class）.clearfix:after{ display: block; content: ''; clear: both; }。常见浮动案例：三列布局（左右固定中间自适应），双 飞翼布局。

华为云id: hw29835637css 第四章 css盒模型所有的HTML元素都可以看做一个盒子模型，盒模型主要用来对HTML元素进行布局。一个盒模型由4大部分组成，元素内容（content），内边距（padding），边框（border），外边距（margin）。内边距指在HTML元素内容和边框之间的区域，值可用百分比或者长度值，默认为0，长度值不能为负数。（百分比指的是父元素长度比例）内边距有四个小属性：padding-top上内边距，padding-bottom下内边距，padding-right右内边距，padding-left左内边距。简写为：padding: 上 右 下 左；（思考：可以试试padding写一个或写两个或者三个值时什么样？）边框border指元素内容和内边距的一条边线，它有三种属性：样式（border-style），宽度（border-width），颜色（border-color），默认none无边框。样式值有：dotted，dashed，solid，double，groove，ridge，inset，outset等。宽度值有：thin，medium，thick和长度值。颜色值有：颜色名（英文），十六进制颜色值或者rgb函数值。简写：border：1px solid red;外边距margin指元素边框之外的区域，它的作用是控制元素与元素之间的距离。和内边距同理属性值。当margin左右属性值为auto时可设置元素左右居中显示。控制元素如何显示display。有四个属性值：block（块级元素，可设大小，占一行），inline（内联元素，不可设大小），inline-block（内联块级元素，可设大小），none（隐藏）。

华为云id: hw29835637css第三章 css常用属性文本字体：font-family；字体尺寸：font-size（用px或者百分比）；字体样式：font-style（默认normal为标准，italic为斜体）；字体粗细：font-weight（默认值normal，bold粗体相当于700，bolder更粗，lighter更细）。例如：font-family: '微软雅黑';  font-size: 20px;文本颜色：color（属性值：颜色名，十六进制颜色值，rgb颜色值）；文本行高：line-height（属性值：长度值，百分比）；文本对齐：text-align（属性值：left，right，center）；文本方向：direction（属性值：ltr（左），rtl（右））；文本缩进：text-indent（属性值：长度值，百分比）；装饰线：text-decoration（属性值：underline下划线，overline上划线，line-through中划线，none默认无）；文本间隔：letter-spacing；文本阴影：text-shadow（属性值：x轴偏移量+y轴偏移量+模糊距离+颜色）例如：text-shadow：10px 10px 5px gray；宽度：width（属性值：auto，长度，百分比）；高度：height（属性值：auto，长度，百分比）；最小（大）宽度：min-width（max-width）；最小（大）高度：min-height（max-height）。列表项前面的标记：list-style-image（默认none，可设置一个图片url作为标记图片）；设置位置：list-style-position（默认值outside或者inside）；列表项前面图标类型：list-style-type（默认值disc，其它值：circle，square，decimal，none，lower-alpha，upper-alpha）；它们一般用于ol或者li，ul（标签）。全部简写为：list-style。例如：ul{ list-style：decimal inside；}。背景颜色：background-color（属性值：颜色名（red），十六进制颜色（#ff0000），rgb值（rgb（255， 0， 0）））；元素背景图片：background-image（默认none，还可以设置一个图片路径）；背景图片平铺方式：background-repeat（默认repeat（背景图片在x轴和y轴方向平铺显示），repeat-x（沿x轴平铺），repeat-y（沿y轴平铺），no-repeat（不平铺））；背景图片位置：background-position（默认左上角零点位置。位置参数：x轴方向left，center，right；y轴方向top，center，bottom。还可设置百分比：x轴位置x%，y轴位置y%）；背景图片固定或者滚动：background-attachment（默认scroll滚动或者fixed固定）。简写：background：url（路径） no-repeat center center。

华为云id: hw29835637css第二章 css的选择器  1.通配符选择器（用 * 表示），可以选中页面中的所有元素，一般用于设置一些初始化的公共属性。例如：*{margin: 0; padding: 0;}  2.元素选择器（使用某个HTML元素名作为选择器）。例如：h1{ color: red; }  3.id选择器（在HTML标签上设置的一个id属性值），id是唯一一个不能重复。例如: #main{ color: red; }  4.类选择器（和id选择器一样但是能重复）。例如：.box{ color: red; }  5.属性选择器（对某种属性的元素设置css样式），格式：E[attribute]{ color: red; }  E表示元素，[]表示元素的属性。例如：input[type="text"]{outline: none; }       属性的种类（属性：attribute，属性值：value）：              1.[attribute]用于选取指定属性的元素              2.[attribute=value]用于选取指定属性和指定属性值的元素              3.[attribute~=value]用于选取属性值中包含指定值的元素              4.[attributte|=value]用于选取以指定值开头的属性值的元素   6.伪类（以冒号开头，指那些处在一定状态的元素）。   7.伪类选择器（通过伪类来选中相应元素进而添加样式的选择器），元素选择符和冒号之间不能有空格。例如：a:hover{ color: red; }        a标签伪类（注意顺序）：          1. :link未被访问的链接          2. :visited已被访问的链接          3. :hover鼠标经过链接上方时的状态          4. :active链接被激活时的状态   8.派生选择器     1.后代选择器（用来选择某个元素的所有后代元素）。例如：p span{ color: red; }      2.子元素选择器（用来选择作为某一个元素子元素的元素，并且子元素只选第一级子元素）。例如：p>span{ color: red; }     3.相邻兄弟选择器（用来选择紧跟其后的兄弟元素，并且这两个相邻元素一定是同级元素）。例如：div>p{ color: red; }  9.选择器权重（同样的样式选择权重最大的样式）    1.通配符选择器权重：0    2.标签选择器的权重：1    3.类、伪类、属性选择器的权重：10    4.id选择器的权重：100    5.内联样式的权重：1000    6.特殊处理：!important （强制使用）

华为云id: hw29835637CSS 第一章css英文全称是cascading style sheets，中文名为级联样式单也叫层叠样式表单，即样式。css是一种样式表现语言，主要是对HTML样式定义，比如布局，颜色，宽高大小等的设计，从而展现绚丽的外表。css3.0是目前最新的版本。css编写工具常用VScode编辑器，调试工具常用Chrome浏览器（谷歌浏览器）。css引入有三种：1.内联样式（将css直接写入html元素标签中的style属性中）；2.内部样式（将css样式写到标签中）；3.引入外部样式（通过元素引入外部的一个css文件）；4.导入外部样式（在元素中，使用@import导入一个外部的css文件）。css语法：selector { property：value；......} selector叫选择器（指定那个元素写样式），property叫样式名，value叫样式值。css样式对大小写不敏感，但统一使用小写。css的特性：1.层叠特性；2.继承性例子：h1{ color: red; width: 100px; height: 10px; }#box{ font-size: 16px; }

华为云id: hw29835637第三章 常用标签1. HTML基本结构：一个html标签包裹着head和body标签，并最开头文档声明标签。2.标题元素：~，其中重要性最高，重要性最低。并且字体越来越小。（注意: 一个HTML文档一般只有一个标题）。3.段落标签：p，浏览器会自动在其前后创建一些空白；中文字行数取决于浏览器窗口的宽度;中连续空格最终都将解析成一个空格。4.用来划分区域，代表网页中的块，即叫做块标签（块级元素）。它通常用于包裹大块内容无特殊意义。5.内联标签（内联元素）用在一行文本中，用来修饰文字。6.链接标签：用于定义网页链接（跳转）。属性href表示链接的地址（相对地址或者绝对地址都行）；属性target表示点击链接后打开的方式，默认“_self“表示当前窗口打开新链接，"_blank"表示在新的窗口中打开。      （华为官网）7.图片标签：img属于单标签结构。属性src表示图片地址（相对路径或者绝对路径都行）；属性alt兼容无图片浏览器会提示alt属性内的文字；还可以在img标签上增加width和height来设置图片的宽度和高度。      （）8.列表标签：无序列表ul（列表项内容没有前后顺序）和有序列表ol（列表项内容有前后顺序）。li表示列表项。属性type定义图形符号样式，disc为点（默认形式）；square为方块；circle为圆。 有序列表ol前缀常为数字或着字母。   （语文数学英语 ）9.自定义列表标签：dl，dt定义标题（列表中的项目），dd定义列表项（描述列表的项目）。     （华为公司华为子公司1华为子公司2华为子公司3）。总结：  块级元素（可设置宽高，并且自动换行）div、h1~h6、p、ul、ol、li、table、form等  行内元素（无法设置宽高和自动换行）span、a等  行内块级元素（可设置宽高不可自动换行）img、input、button等

华为云 ID: hw29835637form标签定义表单，有两个重要属性action（表单提交的地址），method（表单提交的方式）。表单提交方式有两种，一个是get，一个是post。其他的表单控件元素必须放在form标签的内部。    4.input单标签，属性type代表表单的类型（定义不同的表单控件）。    5.单文本框       单选框       多选框       普通按钮       提交按钮       重置按钮       文件上传按钮   6.select用来定义列表，option用来定义列表项。               数学         语文         英语         7.textarea定义多行文本域       

华为云ID：hw298356371.表格用来定义，表示表格一行，表示表格一列，定义表格标题。2.表格头部，表格主体，表格底部。3.用来包裹标签表示表格行。4.有两个常用属性，colspan定义单元格跨行，rowspan定义但余个跨列。（）案例： 表格案例         姓名     科目     成绩               张三     语文     96分           小明     语文     66分    

华为云ID：hw29835637第二章 初识HTML1.web开发主要分前端开发和后端开发，前端主要是页面的展示和用户的交互，后端主要是对数据的处理和服务的访问。2.前端开发主要三大内容：HTML、CSS、JavaScript。3.后端开发主要三大开发：程序、数据库、服务器。4.web开发标准：web应用开发需要遵循的标准。网页主要由三部分组成：结构标准（XML、HTML和XHTML），表现标准（CSS），行为标准（DOM、JavaScript）。5.HTML：网页的内容（结构），比如图片、文字、视频等；CSS：网页的样式展现（外表）;JavaScript：网页上的交互（动作）。6.开发工具：VScode是由微软推出的针对web开发的代码编辑器。7.HTML又叫做超文本标记语言（标记语言）；XHTML是可扩展超文本标记语言，它是一种更严格、更纯净的HTML语言。8.HTML和XHTML不同点：XHTML元素必须被正确地嵌套，XHTML元素必须被关闭，标签名必须用小写字母，XHTML文档必须拥有根元素。9.HTML语义化：不同的HTML标签代表不同的网页内容（比如：nav导航，header头部，footer尾部等等）。10.HTML语义化优势：使HTML结构变清晰有利于代码维护；有利于搜索引擎抓取；使代码具有可读性；使代码简洁提高页面加载速度；有利于屏幕阅读器等设备的识别。11.HTML是有一些列标签组成，而每个标签是以""和">"包裹的单词叫元素。12.标签种类：单标签（比如：input、img）；双标签（比如：div、span、p）13.在开始标签中定义，以名值对的形式出现。    （比如：内容其中class和title就是属性）