整个前端开发的工作流程

1. 产品经理提出项目需求

2. UI出设计稿

3. 前端人员负责开发静态页面(跟前端同步的后台人员在准备数据)

4. 前后台的交互

5. 测试

   立即学习“前端免费学习笔记（深入）”；

6. 产品上线(后期项目维护)

互联网原理

1. 当用户在浏览器输入网址的时候，就会发送到对应的服务器，请求该网址对应的网页信息

2. 服务器会把该网址对应的网页资源，都下载到你电脑的临时文件夹

3. 临时文件夹中的资源，通过浏览器显示出来(所以，我们第二次请求网站的时候，速度会快很多)

元素

• 行内元素：一行中有n多个行内元素，行内元素不能设置宽和高

• 块元素：一个块元素，独自占一行；

• 行内块元素：一行中可以有多个行内块元素，但是可以设置宽和高

html骨架结构

• !DOCTYPE..文档声明头(html5,html4.01,XHTML)

• 在html4.01和XHTML中各有3个小规范

1. strict 严谨的

2. transitional 普通的

3. frameset 框架

• html：超文本标记语言；里面用的都是"标签对儿"

1. head

• meta（charset:UTF-8,GB2312）

• 
  (以上两个meta都是为了SEO优化)

• 标题

• 段落 p:虽然p是块元素，但是他里面放的也是图片，文字；

• span:里面用来放文本：图片，文字；

• a链接

• 图片

• css：写在

  里面

• 样式的基本语法：
  选择器(div){
  key:value
  }

  p{
  height:40px;
  line-height:40px;
  background-color:red;
  }

  登录后复制

• 选择器：

1. 标签选择器：div,h,p,a,img,span

2. class选择器:.xinxi
   (千万不要用汉字和数字开头做为class名，一定要用英文)

html更多解读

• html只考虑标签嵌套，跟tab和空格无关，无数个空格，也只算作一个
  

• 图片标签
  

• 相对路径：以当前页面为出发点查找的；(./ 或 不写,找到父级../)

• 绝对路径：都是以http开头的；例如：

• 图片标签上有两个常用属性，src属性：引入图片地址; alt标签：图片无法正常加载时，用来替代的文字；(alt也可以省略)

• a链接常用的属性

1. href:'要跳往的地址',href的作用

• 可以填写绝对路径，跳到直到的网页

• 可以写#：1）不确定地址的时候 2)简单的回到顶部效果

• 利用锚点进行页面切换

• a链接的锚点使用

1. 本页面各个模块之间的相互跳转
   

    
   2 实现不同页面之间，不同模块的相互跳转
   

列表

• 无序列表:无序列表中的li也是容器；

  <ul>
  <li></li>
  <li></li>
  </ul>

  登录后复制

• 有序列表

  <ol>
  <li></li>
  <li></li>
  </ol>

  登录后复制

• 定义列表：dl,dt,dd都是容器

  <dl>
  <dt>表头</dt>
  <dd>详情介绍</dd>
  </dl>

  登录后复制

表单

• 表单用

• 输入文本框

• 输入密码

• 单选按钮：单选按钮组，一定要加上name，否则无法实现单选效果；

  <input type="radio" name="sex"/>男
  <input type="radio" name="sex"/>女

  登录后复制

• 多选框

• 下拉单

  <select>
  <option name="city" value="bj">北京</option>
  <option name="city" value="sh">上海</option>
  <option name="city" value="sz">深圳</option>
  <select>

  登录后复制

• name和value主要用于前端向后台提交数据；

• id：

1. 设置样式(不建议)

2. 在JS阶段，用来获取元素

3. id配合a链接，进行锚点设置；

• 留言框：

按钮

• 普通按钮 type=button

• 提交按钮 type=submit

• 重置按钮 type=reset

选择器

• 标签选择器：div h1~h6 p span a img ul li ol dl dt dd input select

添加一个小icon的步骤：

• 到官网上去取图片（以京东为例）：

2. 把以上图片另存为，存到电脑中

3. 注意：把icon图标放到文件夹的"根目录"；

4. 在html页面中加入：

以上就是HTML+CSS 知识点汇总的详细内容，更多请关注php中文网其它相关文章！