HTML和 CSS学习笔记.docx

1、HTML和 CSS学习笔记HTML 和 CSS 学习一、HTML篇1、网页的构造快每个网页都会包含三个部分：文本内容、对其他文件的引用、标记1.1、HTML思想Html 元素 描述内容是什么 而非看起来是什么样的。1.2、标记：标记由元素 、 属性、值 构成。1.3、对文件名和文件夹名的命名：1：文件名采用小写字母，省去切换大小写的麻烦，单词之间使用短横线分隔；2：使用正确的拓展名；1.4、Url:Uniform resource locator 同一资源定位符 是地址的别名，包含着关于文件的存储位置和浏览器该如何处理它的信息。URL： http :/ /tofu/index.html; 模式

2、(scheme) 主机名 路径名：目录+文件名常见的模式：http 超文本传输协议： http :/ /shangpin/index.html ftp 文本传输协议； ftp :/ /pub/proposal.pdf ;Mailto 邮件 mialto : someone;绝对URL： 包含了 指向目录或者文件的完整信息，包括模式、主机、路径。相对URL : 以包含URL本身的文件位置为参照点，描述目标文件的位置。注： 访问同意网站的文件时最好使用相对URL；2、基本的HTML结构2.1、文档大纲：2.2、常见容器普通页面构成：页眉、主体内容区域的文章、次要信息的附注栏和页脚页眉 ：heade

3、r role=”banner”导航 ：nav role=”navigation” 主要区域：main role=”main” 注：一个页面只能有一个main文章 ：article 注：article 是一个容器；区块 ：session 注：具有相似主题的一组内容；section 和 article 的区别在于：section 在本质上组织性和结构性更强，而 article 代表的是自包含的容器。附注栏 ：aside role=”complementary”页脚 ：footer role=”contentinfo”通用容器：div division(分割) 块级通用容器：span （跨度，范围）

4、 行内通用容器2.3、为元素添加标识符class 和 Id 的命名规范： 使用短横线分割多个单词【短横线是搜索引擎更容易接受的方式】2.4、其他常识：title属性、title元素、h元素title: 位置： 位于head部分，且必须放在 指定字符编码的meta元素后面； 作用： 对 SEO 优化搜索有非常大的作用，所以命名需要能概括出页面的特点；而且 数字控制在60个字符之内（包含空格）；h 作用： 对SEO优化 有重要作用。title 属性： 任何元素都可以添加title属性，不过多用于链接元素。3、文本元素3.1、文本元素使用规则：文本元素会根据语义产生对应的格式，但不要因为达到某种格式

5、，就乱用文本元素。3.2、常见的文本元素段落 ： p细则 ： small 【通常包括免责声明、注意事项、法律限制、版权信息等】强调 ： strong 重要； em重点 图片 ： figure【图片】 figcaption【图片的标题】引用参考： cite 【指明对某内容源的引用或参考，如音乐专辑、电影作品的标题】引述文本： blockquote 引述块级文本 q 引述行内文本时间 ： time【 YYYY-MM-DDThh:mm:ss】 datetimedatetime 属性（或者没有 datetime 属性的 time 元素）必须提供特定的机器可读格式的日期和时间缩写 ： abbr NFL定

6、义术语： 要定义的术语上标 ： 下标 ： H2O H2O联系信息： address email aa标注编辑： 新内容标注删除： 要删除的内容标记代码： 要输入的代码预格式化： 预格式化的文本可以保持文本固有的换行和空格突出显示： 输入希望引起注意的字词其他 ： u: u 元素用于非文本注解;wbr:代表“一个可换行处,此处可以在必要的时候进行换行。【与 br 不同， wbr 不会强制换行，而是让浏览器知道哪里可以根据需要进行换行。】ruby:旁注标记【rt:对基准字符进行注解的旁注字符 rp：用于在不支持 ruby 的浏览器中的旁注文本周围显示括号】【ruby 元素以及它们的子元素 rt 和

7、 rp 是HTML5 中为内容添加旁注标记的机制】bdi:bdo: 主要是 页面中混合了两种不同书写顺序的字符meter:用 meter 元素表示分数的值或已知范围的测量结果【meter 支持好几个属性。 value 是其中唯一必需包含的属性。如果不指定 min （最小值）和 max （最大值），则默认将它们分别设为 0 和 1.0。 low 、 high 和 optimum 属 性 通 常共同作用，它们将范围划分为低、中、高三个区间。 optimum 代表范围内的最优位置，】progress:它指示某项任务的完成进度;*% saved支持三个属性：max:【任务总量】 value【已经完成的

8、量】如果 progress 没有嵌套在 form 元素里面，又需要将它们联系起来，可以添加 form 属性并将其值设为该 form 的 id 。4、图像4.1、web图像和打印图像的区别格式、尺寸、颜色、透明度、下载速度、动画等六个主要方面还是有区别的。格式：质量高，文件小的格式： jpeg:有损格式；png、gif无损格式；但png压缩算法更好。尺寸：svg 可缩放矢量图片；1：放大或缩小不影响质量，也不影响文件大小。透明度： jpeg不支持透明度；gif【索引色透明】、png【索引色+alpha】。动画：一般使用：css、js、H5 canvas 、svg、flash来创建动画。保存用gi

9、f.综上所述：动画：gif;透明度：png;尺寸：svg;质量：png4.2、web图片的常见属性插入图片： 替代文本： 指定尺寸： 5、链接5.1、链接的组成部分：1：目标： 目标可以是跳转到另外的页面；也可以是到其他页面的特定位置：锚【anchor】2：标签：标签就是中间的那部分。5.2、创建链接：标签文本 Target ：target=”_blank” 在新的标签页打开；【在PC端这样做很棒，在手机端就不太妙了，所以，慎用】【小注】href 和 src 的区别：href：超文本引用，引用，以链接的形式跳转到另外的页面，而不会在本页面显示。Src：源：引入；将引入的东西在本页面显示。5.3

10、、创建锚文本标签段落5.4、创建其他类型的链接邮件： 邮箱地址电话： 电话号码2、CSS篇1、CSS的构造块1.1、构造样式的规则：样式表中的每条规则都有两个主要部分：选择器（selector）和声明块（declaration block）;选择器决定那些元素受影响；声明块以键值对的形式，定义要应用的格式化1.2、css的继承：当为某个元素应用css属性时，不仅会影响到该元素，而且还会影响到其分支元素。1.3、css的层叠：如果一个元素有多种样式规则，这些样式规则就可能会出现冲突！解决冲突的方法是要按规则办事：Css样式层叠规则：特殊性（行内样式优先级最高）、顺序（最后出现的优先级最高）、重要

11、性（|important）比所有规则的优先级都高 ；1.4、属性的值1：inherit：沿袭；该属性值会是当前元素沿袭弗父类元素的属性值。Pborder:inherit2：预定义的值；3：长度和百分数；长度：em【一个em的长度与对应元素的字号相等】 、 px ；百分数： 百分数是相对于父类元素的。4：纯数字；line-height：1.5 【行高】；z-index【将一个元素放置在另一个元素的后面】:opacity【设置元素的不透明级别 （0.0完全透明-1.0完全不透明）】5：url Background:url(file.ext); file.ext 指代具体的目标资源的路径和文件名；6

12、：颜色：hex、RGB、HSL【一种工业颜色标准，通过色相，饱和度，明度三个颜色通道】、RGBA、HSLA 其中 RGBA 和 HSLA 有透明度(Alpha) 2、操作样式表2.1、外联式：2.2、内联式 选择器2.3、行内式 style=”3、定义选择器定义选择器的五种标准：3.1、元素名称h2color:red;3.2、元素所在的上下文根据元素的祖先 祖先元素 空格 后台元素根据父类元素： 父类元素 子类元素相邻同胞元素： 同胞元素 + 相邻同胞元素普通同胞元素： 同胞元素 普通同胞元素3.3、元素类或ID./#classname/idname3.4、元素的伪类或伪元素伪类 ：第一个子元

13、素： ：first-child;最后一个子元素： ：last-child;如果：前面没有那将选择所有的第一个子元素；如果：前面有，那将从所有的第一个子元素中选择冒号前面的元素。：link ：hover：active：visited：focus伪元素 ：第一个字母： ：first-letter第一行： ：first-line：before：after3.5、元素是否有某些属性和值【】：方括号包围目标属性和目标属性值；=”value”： 属性值等于value的元素；=”value” 属性值是以空格分隔的多个单词，其中有一个完全匹配指定值；|=”value” 属性值等于这里的 value 或以 va

14、lue开头的元素将被选中=”value” 属性值以value 开头，value 为完整的单词或单词的一部分$=”value” 属性值以value结尾，value为完整的单词或者单词的一部分；*=”value” 属性值至少包括这里的value一次的元素被选中；4、为文本添加样式4.1、字体font-family:name;【注：包含多个单词的应使用引号括起来】替代字体：font-family:name1,nane2,name3;【注：如果没有第一个字体，就使用第二个】4.2、大小font-size:直接使用： px 、 特定字号； font-size:35px;xx-small/x-small/

15、small/medium/large/x-larger/xx-large使用百分数、em font-size:2em/100%;【em：父元素】【rem：根元素】4.3、粗细Font-weight:三种格式： bold /bolder/lighter/light/normal;100900 之间的100的整数倍；400表示正常，700表示粗体；4.4、倾斜Font-style:italic/oblique/normal;4.5、行高Line-height：；1）：数字，与元素字体大小相乘得出需要的行高；2）：以 em 、 像素 、 磅 为单位的值；3）：p% 字体大小的百分数；4.510、同时

16、设置所有的字体值可以同时设置：字体的样式、粗细、变体、大小、行高、和字体系列等；font : normal/italic/oblique normal/bold/lighter/400/700 size line-height font-family 4.6、颜色颜色/十六进制/RGB/HSL/RGBA/HSLAColor:colorname / #rrggbb rgb(r,g,b) / rgba(r,g,b,a) / hsla(h,s,l,a)背景色：Background-color background-image url() none background-repeat repeat r

17、epeat-x repeat-y no-repeat background-attachment fixed scroll local background-position x: left center right y: top center bottom4.8、间距单词之间的距离称为：字间距；word-spacing:length; normal/0;字母之间的距离成为：字偶距；letter-spacing:length; normal/0;4.9、缩进Text-indent:length;缩进对内敛元素没有效果；可以设置：display:block;display:inline-bloc

18、k;4.10、对齐方式Text-align:left/right/center/justify4.11、修改文本大小写text-transform:capitalize/uppercase/lowercase/none;4.12、使用小型大写字母font-variant:small-caps/none;4.13、装饰文本给文本添加下划线等其他类型的线条；text-decoration:underline/overline/line-through/none;4.14、设置空白属性设置空白属性就是让浏览器显示额外的空格。white-space : pre /nowrap/normal;pre:让

19、浏览器显示源文本中所有的空格和回车；nowrap:确保所有空格不断行，文本全部显示在一行。overflow:hidden; text-overflow:ellipses；超出的文本会显示为省略号；5、用css进行布局5.1、开始布局的注意事项1）：内容和显示分离；2）：布局分为固定式fixed和响应式fluid3）：注意浏览器之间的差异性；5.2、构建页面的原则总的原则是结构良好、语义化的HTNL;1：恰当使用容器元素，将页面分成不同的逻辑区块；2：根据许哟啊，可以给容器元素配上角色；3：按照一定的顺序来放置内容，确保页面在不使用css的情况下也是合理的。5.3、常见的容器元素及其对应的角色：

20、页眉 ：header role=”banner”导航 ：nav role=”navigation” 主要区域：main role=”main” 注：一个页面只能有一个main文章 ：article 注：article 是一个容器；区块 ：session 注：具有相似主题的一组内容；附注栏 ：aside role=”complementary”页脚 ：footer role=”contentinfo”通用容器：div division(分割) 块级通用容器：span （跨度，范围） 行内通用容器5.4、盒子模型Margin :5px;Border：5px 9px ;Padding：5px 9px

21、 11px ;Padding：5px 9px 11px 0 ; 使用一个值： 这个值会应用于全部四个边；使用两个值： 前一个应用上下两边，后一个应用左右两边；使用三个值： 第一个会应用上边，第二个应用左右两边，第三个应用下边；使用四个值： 按照顺时针的顺序： 上右下左；值：可以是带有单位的数字，百分数，或者em / rem ；WidthHeight5.5、控制元素的显示类型和可见性显示类型：块级元素：显示在单独的行；行内元素：显示在行内；Display: block : Inline:None:Inline-block:让元素与其他内容显示在同一行，同时也具有块级元素的属性；这里的块级元素属性

22、是指：with、height、margin-top、margin-bottom等；可见性：Visibility:hidden/visible；5.6、设置元素的高度和宽度Height: 带单位的数字 或者 auto Width： 带单位的数字 或者 auto 或者 父元素的百分数；Min-width:Min-height:Max-width:Max-height:5.7、使元素浮动Float：left/right/none；Width:600px; / 设置浮动元素显示的宽度Clear：left/both/right/none； /设置该属性后，该元素及它后面的元素就会显示在浮动元素的下面；是

23、容器具有清楚浮动的能力：clearfix;5.8、对元素进行定位相对定位：Position:relative ;Top/right/bottom/left：d;使用position:static 覆盖 position:relative;绝对定位：Position:absolute;Top、right、bottom、left：d;在栈中定位元素Z-index:n ; n 为元素在定位过的对象堆中的层级的数字；n的值越大，元素在堆中就越高；5.9、处理溢出问题Overflow:visible/hidden/scroll/auto;Visible: 让所有的内容可见，包括溢出的部分；（这是默认项）

24、Hidden: 隐藏盒子装不下的内容；Scroll; 无论元素是否需要都给元素添加上滚动条；Auto； 让滚动条仅在访问者访问溢出的内容时才出现；5.10、使元素垂直对齐Vertical-align: baseline / middle / top / bottom / text-top / text-bottom /sub / super / 百分比/ 带单位的值；Baseline : 使元素的基准线对齐 父元素的基准线；Middle : 使元素位于父元素的中央；Top : 使元素的顶部对齐当前行里最高元素的顶部Bottom ：使元素的底部对齐当前行里最低元素的底部Text-top : 使元

25、素的顶部对齐父元素的顶部；Text-bottom : 使元素的底部对齐父元素的底部；Super ： 成为父元素的上标；Sub : 成为父元素的下标；5.11、修改鼠标指针Cursor：pointer【手】/default【箭头】/crosshair【+】/move【四向箭头】/waite【沙漏】/help【？】/text【I】/progress【沙漏】/auto/x-resize【双向箭头，x:n、nw；】；6、列表6.1、创建列表所有的列表都是由父元素和子元素组成的。三种列表类型：有序列表： 父元素：ol ; 子元素： li； 无序列表： 父元素：ul；子元素： li; 描述列表： 父元素：

26、dl；子元素： dt【术语】/ dd【描述】 6.2、标记List-style-type:marker;Marker: 可以是以下属性中的一种：disc、circle、square、decimal、upper-alpha、lower-alpha、Upper-roman、lower-roman 、 none;自定义标记：控制标记的位置：List-style-option : inside ; outside(default)；Inside： outside:6.3、编号ol start=”n” 设置列表的起始编号；li value=”n” 设置当前列表项目的值；6.4、同时设置所有的列表样式属性

27、ul List-style: circle inside ;7、表单7.1、表单的输入和输出元素7.2、表单的属性7.3、对表单元素的组织1: 使用filedset legend 进行组织；2：使用分隔表单元素；3：使用说明标签 并使用 for属性；4：使用 pattern 正则表达式 验证；注意name id for 的使用规范；注意使用required / required=”required”;autofocus / autofocus=”autofoucs”;multiple/multiple = “multiple”disabled/disabled=”disabled”;GenderMaleFemale很讨厌很讨厌