1、标记、标签、元素:对事物的标记,在HTML中就是用书名号和字母来表示某些内容。
1.1标记一般都有一对来表示<标记>标记>。
1.2属性:标签所对应内容的一些特征。
1.2.1使用:<标签属性名=”属性值”>
2、超文本:网页上除了文字以外的图片、动画、视频、超链接。
2.1超链接能够跳到其他网页的文字。
3、标记语言:计算机语言,人机沟通的工具。
4、第一个网页
4.1表示把HTML文件内容当做HTML来处理。
4.2
负责头部的处理:负责网页的头部:设置网页的基本信息,标题,编码等。aq4.3
4.4
4、常用HTML标记
4.1文字:直接写在body标签中。
4.2给文字设置样式。
4.2.1颜色:color属性
4.2.2大小:size属性范围:1~7
4.2.3字体:face属性
4.4:显示图片
4.4.1src属性:指定显示图片的地址。地址可在网络中复制。
4.4.2对其属性:
4.5主体body:
Bgcolor属性:设置网页的背景颜色
5、HTML注意点:
5.1一对开始标签和结束标签之间不仅可以放文字还可以放其他的东西。
6、HTML特殊符号:
6、实现网页大致步骤:
7.1先对页面进行分析
7.2画出网页的线框图
7.3实现网页的框架
7.4填充网页内容
7.5细节调整
页面布局
8.1表格
8.1.1.1border属性:设置表格的边框
8.1.1.2width属性:宽度
8.1.1.3height属性:高度
8.1.1.4bgcolor属性:背景颜色,优先级table
8.1.1.5align属性:设置整个表格的对齐方式,center表居中。
8.1.2tr标签:表格中的一行
8.1.2.1align属性:设置单元格内容的对齐方式。
8.1.3colspan:合并处于同一行的单元格,删除多余的
rowspan:合并同一列的单元格
8.2css盒模型
补充:
1、中文乱码
1.1页面上
标签添加1.2文件本身编码格式。
2、点击颜色小方块可选择颜色,也可使用取色器取色
3、html中的border标签和CSS中不同,前者为内容属性,后者只为id所在标签属性。
1、地址:绝对地址和相对地址
1.2相对路径:相对HTML文件或当前页面其他文件所在目录的路径,/表示下一级目录,../表示上级目录,../../表示上级目录的上级目录。
2、表格:
单元格,标题栏行数,标题栏单元格(可与 | 混用) | 2.1cellspacing属性:设置表格内部单元格之间的距离。 2.2cellpadding属性:设置单元格与文字内容的边距。 3、H1~h6,一级标题,二级标题,三级标题........................ 4、P,段落标签,自动缩进 5、Br,强制回车,一个标签换一行换行。 为什么class属性可以重复,使用时如何区分 伪类和伪元素如何使用 CSS层叠样式表 1、层叠:一种属性 2、样式表: 6、使用 6.1内联样式(标签级):在html标签中使用style属性 6.2内部样式表页面级:在head区域使用style元素来包含CSS 6.3外部引用(企业专用):外部后缀为CSS的文件,使用link来进行引用 6.4Css基本使用:标签名{css属性:值;} 7、Css属性 7.1width:设置某个html标签的宽度 7.2height:设置某个html标签的高度 7.4margin:0;设置html标签之间的空隙为0,一般对body设置 margin:0auto;/*可以让html标签水平居中*/ margin:0auto;只对表格有效,因为是相对于窗口的位置 7.5text-align:center;/*可以让html标签内容对齐方式,一般用于包含具体内容的标签*/ 7.6font-size:文本大小最低10px 7.7font-family:设置字体类型color设置文本颜色 7.8border:设置标签边框,一共三个值:大小,边框式,颜色。 7.9border-spacing:代替cellspaceing。以像素为单位 7.10background-color back-ground-size:背景图图片在盒子里的显示方式,cover拉伸,repeat平铺 7.11text-decoration:none;去掉下划线underline(下划线) 7.12border-radius:10px10px的圆角 该属性可单独对每条边设置圆角,从左上角顺时针设置圆角 例border-radius:10px10px0xp0xp 7.13vertical-align:处理图片或者表单标签的垂直对齐方式,middle、right、left 8、注释 8.1对代码的说明 8.2为什么要写 8.3怎么写/**/ 8.4无位置要求 9、Css选择器 9.1目的:能够实现对部分html标签设置不同的样式 9.2定义:利用不同的特殊符号加上html属性值来达到选择元素的目的。 9.3分类 id用于标记唯一样式,只使用一次。 9.3.1id 使用结合html元素的id属性来选择元素 规范:#id属性值{CSS代码} 作用:对设置id属性的元素设置样式 注意:一个页面不能出一样的id属性,只对一个元素有效果 使用场景:样式比较特殊的html标签。 9.3.2class 使用:结合html元素的class属性来选择元素。 规范:.class属性值{CSS代码} 作用:能够对页面上拥有同样class属性值的一个或多个元素设置样式。 范围:class属性每个html标签都可以使用。 使用场景: 9.3.3标签 9.3.4组合 目的:减少不必要的class属性或者id属性 使用:同事在一个选择器内同事使用id选择器、class选择器、标签选择器、伪类选择器的两个或多个。 作用:能够更精确的选择到html标签并修改样式 规范:css选择器css选择器{css代码} 9.3.5伪类 目的:当用户鼠标发生某种行为时对html标签 分类:a:link;a:hover;a:visited;a:active a:link:打开页面时超链接默认的样式。 a:visited:当超链接被点击之后使用的样式。 a:hover:当鼠标悬停到超链接时,使用的样式 a:active:当鼠标点击不放的时候,使用的样式 hover不仅仅运用于超链接,大多数html标签都可以使用。 9.4属性值命名规范:尽可能让命名有意义。使用单词,非中文及全拼。 里面可以包含英文字母-数字,以字母开头。 10、层叠 10.1当CSS有多个选择器同时对一个HTML标签的统一属性进行修改时,会引发层叠特性。 10.2定义:是作用于CSS选择器的一套完善的优先级规则 10.3规则:没有使用组合选择器:优先级:id>class>标签>伪类 10.4使用了组合选择器 如果谁有id选择器,那么就用谁的。如果都有id选择器,哪边有额外的选择器就用谁的。 1.使用表格布局:不兼容移动端,不会跟浏览器的宽度变化而调整。 2.响应式布局:可以随浏览器窗口宽度的变化而进行页面布局调整。具有一定的灵活性,改善用户体验,用于替代表格布局。 3.响应式布局的核心实现,标签div-div核心是盒模型以及div浮动模型 1.div 定义:一个mtml标签 特性:1.1独占一行。没有width、height等常用的html属性、可以使用CSS设置样式。 1.2浮动特性可以让多个div显示在一行 1.2.1定义:指的是一个css属性:float 1.2.2使用float:left;float:right; 1.2.3浮动元素只会和浮动元素显示在一行 2、让几个浮动元素水平居中于页面。 3、div内容的水平垂直居中。 水平:text-align:center 垂直:1、line-heigh:的高度,针对一行内容或文字。 2、针对多行内容或文字: ①把里面的内容放入一个小的div当中,然后对小的div设置margin-top来模拟居中效果。 5.css盒模型 5.1定义:盒模型布局是一规范。 5.2作用将页面上的html标签都看成盒子,每个盒子都可以设置相应的css盒模型属性,包括width、height、margin、padding、border。利用这些属性来设置盒子的大小和位置,从而达到布局的效果。 5.3可以设置css盒模型的html标签: ①块级元素:独占一行html标签,即块级元素。div,p,h1~h6,body 5.3其他元素 ①行内元素:可以一行显示多个的html标签。a,img,font,span 5.5标准盒模型 ①一个块级元素由五个部分组成,由内到外为:1、width/height-->padding(可无)-->border(可无》-->margin(可无) ②padding处理盒子内容跟边框之间的距离。 ③margin:处理盒子(块级元素)与盒子之间的空隙 css定位: 1、背景:很多网页上特殊的部分需要更好的布局,借助CSS盒模型并不能很好的处理。在CSS盒模型上加上额外的定位知识去处理。 2、本质:是指一个CSS属性:position ①fixed a。设置了fixed的盒子(块级元素)位置会固定在屏幕上。可以通过设置、left、top、bottom、right来设置其在屏幕中的位置。 ②absolute:和fix一样,不过没有固定在窗口上 ④relative:a。不脱离文档流,向队员原来的位置进行偏移。使用top、left、right、bottom来设置盒子的偏移量。 b。在不影响其他标签的情况下改变自己的位置。 ③static(默认) 3、四个位置属性 3.1特点:只有设置了position属性的HTML标签才可以使用这四个Css属性 四个属性一般左右一个,上下一个即可定位盒子位置。 3.2left:盒子距离左边有一定的空隙,以像素为单位。right、top、bottom同理 4、文档流:html标签的默认展示方式 4.1当一个盒子使用了固定定位或者绝对定位之后,会脱离文档流,表现的像浮起来了一样,其他没有使用定位的盒子,会沉于原来盒子的下方。 5.css定位实现垂直居中,自身设置position,设置top为50%,但这个事自身顶部距离屏幕顶部为50%,所以需要设置自身的margin-top为负的自身高度的一半,来达到真真的垂直居中。水平居中同理可得。。。 5、如果定位html标签水平锤子居中,设置left、right、bottom、top为0,并且加上marin:auto; rgba:css颜色的宁一种写法 1、rgba+rgb+alpha(透明度) 2、rgb:采用三原色以及对应的饱和度来达到产生不同的烟丝 3、三原色;红、绿、蓝:饱和度0-255 4、rbga颜色写法rgb(0,0,0),依次为红、绿、蓝的饱和度。 常用的颜色 1、黑色rgb(0,0,0) 2、白色:rgb(255,255,255) 3、灰色:三个数字一样即为灰色,数字越大,颜色越浅 6、rgba a:alpha:透明度:0-1 表单
|