html+css初级开发工程师

html+css初级开发工程师

html简介

www

1. 维网（环球信息网）简称web
2. 分为 Web客户端 和 Web服务器程序
3. WWW可以让 Web客户端（常用浏览器）访问浏览 Web服务器上的页面

W3C

万维网联盟

文件名的命名规范：

不能数字开头，
在项目中不可用汉字命名。
不能出现特殊字符

html

概念：

1.描述网页的语言
2.超文本标记语言，由一套标记标签组成
3.不是编程语言

声明：告诉浏览器用什么标准去解析网页

网页的组成部分：

结构层，表示层，行为层

标签：

概念：

1.由<>包围的关键词
2.标签通常成对出现，分为标签开头和标签结尾
3.有部分标签是没有结束标签，成为单标签，单标签内必须用 / 结尾

组成：

标签名   标签内容  标签属性

语义化标签：

概念：根据标签名就能判断出标签内容

作用： 
    1.网页结构层次更清晰。
    2.更容易被搜索引擎收录
    3.更容易让屏幕阅读器读出网页内容。

注：页面中所有的内容，都要放在 HTML 标签中

标签的内容可以是其他标签

标题标签

标题1
标题2
标题3
标题4
标题5
标题6
    

段落标签

段落标签
非常棒

换行标签

水平线

强调标签

倾斜
倾斜
强壮
加粗

图片标签

超链接

百度
主题
打开邮箱
跳转到笔记1的底部

列表标签

    

        
    
    
2
    
3




    
a
    
b
    
c



    
第一章
    
第一节
    
第二节
    
第三节

    
第二章
    
第一节
    
第二节
    
第三节

    
第三章
    
第一节
    
第二节
    
第三节

表格标签

    
通讯录
    

        

            
序号
            
姓名
            
电话
            
备注
        
    
    

        

            
1
            
dada
            
123456789
            
dada
        
        

            
123456789
        
        

            
2
            
dada
            
123456789
            
dada
        
    
    

        

            
共2人
        
    

表单标签

    用户名：

    密码：

    性别：
    男 
    女
    

    爱好：
     
         看书 
         旅游 
         运动 
         购物 
    
    

    个人简介：
    
    
    
    

无语义标签

模块划分

常见的企业站，多由头部区，展示图片区域，主题区域，底部信息区域组成

css的语法和选择器

css

概念：CSS 全称为层叠样式表，它主要是用于定义HTML内容在浏览器内的显示样式。

引入方式：

1.外部样式引入
    link
    @import
2.内部样式
    代码通常存放在标签内
3.内联样式
语法：css 样式由选择符和声明组成，而声明又由属性和值组成
    选择符{属性:值}例：p{color:red;}
    选择符：又称选择器，指明网页中要应用样式规则的元素

选择器：

1. 标签选择器
2. 类选择器
3. id选择器
4. 通配符选择器
5. 后代选择器
6. 子元素选择器
7. 群组选择器
8. 伪类选择器

背景：

背景颜色 background-color
背景图片 background-image
背景图片位置 background-position
背景图片重复 background-repeat
背景图片定位 background-attachment:scroll/fixed
简写：
background:#ff0000 url(bg01.jpg) no-repeat fixed center

重点：

1. link和@import的区别（无样式闪烁问题FOUC）

   @import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

   加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

   @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

2. 三种引入样式的优先级
3. 选择符的优先级

   通配符* 0
   标签 1
   类/伪类/属性 10
   ID 100
   行内样式 1000
   important 1/0(无穷大)

css样式

基本样式：

宽 高 鼠标样式 可见样式 溢出隐藏 透明度

字体样式：

字体 font-family
字号 font-size
字的样式： font-style
字的粗细：font-weight
font:font-style font-weight 20px/40px "宋体"
字的颜色：color

文本属性：

行高：line-height
文本修饰：text-decoration：none
缩进：text-indent
字符间距：letter-spacing
空白间距：word-spacing
英文大小写：text-transform:capitalize/uppercase/lowercase
文字水平对齐方式:text-align
文本所在行高垂直对齐方式：vertical-align

盒模型

/*样式初始化*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{
    margin:0;
    padding:0;
}
ul,ol{
    list-style: none;
}

盒模型：

组成部件：外边距+边框+内边距+内容

IE盒模型和标准盒模型切换

box-sizing:border-box/content-box;

元素分类

块级元素

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的 100%（和父元素的宽度一致），除非设定一个宽度。

 
 
~

 
 
 

 

行内元素

1、和其他元素都在一行上；

2、元素的高度、宽度、行高及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

行内块状元素

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

  select
textarea button iframe

元素分类转换

display

block：将元素转换为块级元素
inline：将元素装换为行级元素
inline-block：将元素转换为内联块元素
none: 将元素隐藏

样式初始化的原因：

由于浏览器内核的不同，对标签默认样式的解析不同，导致页面呈现的样式不同。

样式初始化

h1,h2,h3,h5{
    margin:0;
    list-style:none;
}

浮动

浮动原理

1. 浮动使元素脱离文档普通流，漂浮在普通流之上的。
2. 浮动元素依然按照其在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或者向右浮动，直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它。
3. 浮动会产生块级框（相当于设置了 display:block），而不管该元素本身是什么。

清除浮动的方法

1. 给浮动元素的后面添加一个空的块级元素用clear:both;

css定位

相对定位（相对于原位置）

1. 需要设置 position:relative（相对定位），
2. 它通过 left、right、top、bottom 属性确定元素在正常文档流中的偏移位置。
3. 相对于原位置移动，移动的方向和幅度由 left、right、top、bottom 属性确定，偏移前的位置保留不动。
4. z-index 层级设置

绝对定位（相对于父类）

1. 需要设置 position:absolute(绝对定位)，这条语句的作用将元素从文档流中拖出来
2. 使用 left、right、top、bottom属性相对于其最接近的一个具有定位属性的父类包含块进行绝对定位。
3. 如果不存在这样的包含块，则相对于 body元素，即相对于浏览器窗口。
4. z-index 层级设置

固定定位（相对于网页窗口）

与 absolute 定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed 属性功能相同。

z-index 层级设置

页面布局

布局思路：

1. 从外向里
2. 从上至下
3. 从左至右

样式编写顺序：

1. 定位（float position left right bottom top z-index）
2. 宽、高、边距
3. 文字样式
4. 背景样式
5. 过渡 动画

样式书写规范：

1. 0.5可以写.5，0可以省略
2. 对于可以简写的属性尽量简写 background margin padding border
3. 给子元素添加样式前写父级类名
4. 尽量使用类，不要使用id

问题：

1. 乱码问题 编码
2. 样式引入无效问题（属性丢失，路径错误）
3. 清除浮动问题
4. 定位乱的问题---找绝对定位的父级添加相对定位
5. a标签鼠标经过无效问题--a:link a:visited a:hover a:active

兼容性问题(CSS HACK)

概念：CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号。

CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。

1、属性级Hack：

IE6能识别下划线“_”和星号“*”，
IE7能识别星号“*”，但不能识别下划线”_ ”，
而firefox两个都不能认识。

2、选择符级Hack：

IE6能识别*html .class{}，
IE7能识别*+html .class{}或者*:first-child+html .class{}。

3、IE条件注释Hack：

IE条件注释是微软IE5开始就提供的一种非标准逻辑语句。

针对所有IE：<!-[if IE]><!-您的代码-><![endif]>，
针对IE6及以下版本：<!-[if it IE 7]><!-您的代码-><![endif]->，
这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。