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很讨厌很讨厌
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1