html+css初级开发工程师

html简介

www

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

W3C

万维网联盟

文件名的命名规范：

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

html

概念：

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

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

网页的组成部分：

结构层，表示层，行为层

语义化标签：

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

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

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

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

标题标签

<h1 id="main">标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

段落标签

<p>段落标签<p>非常棒</p></p>

换行标签

<br/>

水平线

<hr/>

强调标签

<em>倾斜</em>
<i>倾斜</i>
<strong>强壮</strong>
<b>加粗</b>

图片标签

<img src="img/dada.png" alt="dada" title="图"/>
<img src="img/dada.png" alt=""/>

超链接

<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="#main">主题</a>
<a href="mailto:xxxxx@163.com">打开邮箱</a>
<a href="笔记1.html#footer">跳转到笔记1的底部</a>

列表标签

<ul>
    <li>
        <a></a>
    </li>
    <li>2</li>
    <li>3</li>
</ul>


<ol>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>

<dl>
    <dt>第一章</dt>
    <dd>第一节</dd>
    <dd>第二节</dd>
    <dd>第三节</dd>

    <dt>第二章</dt>
    <dd>第一节</dd>
    <dd>第二节</dd>
    <dd>第三节</dd>

    <dt>第三章</dt>
    <dd>第一节</dd>
    <dd>第二节</dd>
    <dd>第三节</dd>
</dl>

表格标签

<table border="1" width="800">
    <caption>通讯录</caption>
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>电话</th>
            <th>备注</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">1</td>
            <td rowspan="2">dada</td>
            <td>123456789</td>
            <td rowspan="2">dada</td>
        </tr>
        <tr>
            <td>123456789</td>
        </tr>
        <tr>
            <td>2</td>
            <td>dada</td>
            <td>123456789</td>
            <td>dada</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4" align="right">共2人</td>
        </tr>
    </tfoot>
</table>

表单标签

<form action="" method="post">
    用户名：<input type="text" name="username"/><br/>
    密码：<input type="password" name="password"/><br/>
    性别：
    <input type="radio" name="sex" value="0">男 
    <input type="radio" name="sex" value="1">女
    <br/>
    爱好：
    <select name="like"> 
         <option value="看书">看书</option> 
         <option value="旅游" selected="selected">旅游</option> 
         <option value="运动">运动</option> 
         <option value="购物">购物</option> 
    </select>
    <br/>
    个人简介：
    <textarea cols="50" rows="10"></textarea>
    <input type="button" name="but" value="按钮">
    <input type="submit" name="submit" value="提交">
    <input type="reset" name="reset" value="重置">
</form>

无语义标签

<div></div>
<span></span>

模块划分

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

css的语法和选择器

css

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

引入方式：

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

选择器：

标签选择器
类选择器
id选择器
通配符选择器
后代选择器
子元素选择器
群组选择器
伪类选择器

背景：

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

重点：

link和@import的区别（无样式闪烁问题FOUC）
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
三种引入样式的优先级
选择符的优先级
通配符* 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%（和父元素的宽度一致），除非设定一个宽度。

<div> <p> <h1>~<h6>
<ol> <ul> <dl> <li>
<address> <blockquote>
<form>

行内元素

1、和其他元素都在一行上； 
2、元素的高度、宽度、行高及顶部和底部边距不可设置； 
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

<a> <span> <br/> <i>
<em> <strong> <label>

行内块状元素

1、和其他元素都在一行上； 
2、元素的高度、宽度、行高以及顶和底边距都可设置。

<img> <input> select
textarea button iframe

元素分类转换

display

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

样式初始化的原因：

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

样式初始化

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

浮动

浮动原理

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

清除浮动的方法

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

css定位

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

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

绝对定位（相对于父类）

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

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

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

z-index 层级设置

页面布局

布局思路：

从外向里
从上至下
从左至右

样式编写顺序：

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

样式书写规范：

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

问题：

乱码问题编码
样式引入无效问题（属性丢失，路径错误）
清除浮动问题
定位乱的问题---找绝对定位的父级添加相对定位
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：&lt;!-[if IE]&gt;&lt;!-您的代码-&gt;&lt;![endif]&gt;，
针对IE6及以下版本：&lt;!-[if it IE 7]&gt;&lt;!-您的代码-&gt;&lt;![endif]-&gt;，
这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。