html+css初级开发工程师
Posted 程序员哆啦A梦
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html+css初级开发工程师相关的知识，希望对你有一定的参考价值。
html+css初级开发工程师
html简介
www
- 维网（环球信息网）简称web
- 分为 Web客户端 和 Web服务器程序
- WWW可以让 Web客户端（常用浏览器）访问浏览 Web服务器上的页面
W3C
万维网联盟
文件名的命名规范：
不能数字开头，
在项目中不可用汉字命名。
不能出现特殊字符
html
概念：
1.描述网页的语言
2.超文本标记语言，由一套标记标签组成
3.不是编程语言
声明：告诉浏览器用什么标准去解析网页
网页的组成部分：
结构层，表示层，行为层
标签：
概念：
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" title="图"/>
<img src="img/dada.png" />
超链接
<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" >
<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、每个块级元素都从新的一行开始，并且其后的元素也另起一行。<br/>
2、元素的高度、宽度、行高以及顶和底边距都可设置。<br/>
3、元素宽度在不设置的情况下，是它本身父容器的 100%（和父元素的宽度一致），除非设定一个宽度。
<div> <p> <h1>~<h6>
<ol> <ul> <dl> <li>
<address> <blockquote>
<form>
行内元素
1、和其他元素都在一行上；<br/>
2、元素的高度、宽度、行高及顶部和底部边距不可设置；<br/>
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
<a> <span> <br/> <i>
<em> <strong> <label>
行内块状元素
1、和其他元素都在一行上；<br/>
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：<!-[if IE]><!-您的代码-><![endif]>，
针对IE6及以下版本：<!-[if it IE 7]><!-您的代码-><![endif]->，
这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。以上是关于html+css初级开发工程师的主要内容，如果未能解决你的问题，请参考以下文章
markdown Snippets.md是我最常用的HTML，CSS和JavaScript代码片段，用于前端Web开发
[AndroidStudio]_[初级]_[配置自动完成的代码片段]