HTML/CSS 知识点01 （转）
整个前端开发的工作流程
- 产品经理提出项目需求
- UI出设计稿
- 前端人员负责开发静态页面(跟前端同步的后台人员在准备数据)
- 前后台的交互
- 测试
- 产品上线(后期项目维护)
互联网原理
- 当用户在浏览器输入网址的时候，就会发送到对应的服务器，请求该网址对应的网页信息
- 服务器会把该网址对应的网页资源，都下载到你电脑的临时文件夹
- 临时文件夹中的资源，通过浏览器显示出来(所以，我们第二次请求网站的时候，速度会快很多)
元素
- 行内元素：一行中有n多个行内元素，行内元素不能设置宽和高
- 块元素：一个块元素，独自占一行；
- 行内块元素：一行中可以有多个行内块元素，但是可以设置宽和高
html骨架结构
- !DOCTYPE..文档声明头(html5,html4.01,XHTML)
- 在html4.01和XHTML中各有3个小规范
- strict 严谨的
- transitional 普通的
- frameset 框架
- html：超文本标记语言；里面用的都是"标签对儿"
- head
meta（charset:UTF-8,GB2312）<meta name="description" content="要描述的内容"/><meta name="keywords" content="关键字，关键词"/>
(以上两个meta都是为了SEO优化)<title>页面的标题</title>
- body
- 标题
<h1></h1><h2></h2> - 段落 p:虽然p是块元素，但是他里面放的也是图片，文字；
- span:里面用来放文本：图片，文字；
- a链接
<a href="要跳往的地址"> - 图片
<img src="相对地址/绝对地址"
- 标题
- css：写在
- 里面
-
样式的基本语法：
选择器(div){
key:value
}p{ height:40px; line-height:40px; background-color:red; } - 选择器：
- 标签选择器：div,h,p,a,img,span
- class选择器:.xinxi
(千万不要用汉字和数字开头做为class名，一定要用英文)
-
html更多解读
- html只考虑标签嵌套，跟tab和空格无关，无数个空格，也只算作一个
- 图片标签
<img src="相对路径/绝对路径"/> - 相对路径：以当前页面为出发点查找的；(./ 或 不写,找到父级../)
- 绝对路径：都是以http开头的；例如：http://i1.piimg.com/567571/f3f79e8903424ea4.jpg
- 图片标签上有两个常用属性，src属性：引入图片地址; alt标签：图片无法正常加载时，用来替代的文字；(alt也可以省略)
- a链接常用的属性
- href:'要跳往的地址',href的作用
- 可以填写绝对路径，跳到直到的网页
- 可以写#：1）不确定地址的时候 2)简单的回到顶部效果
- 利用锚点进行页面切换
- title:鼠标以上时的提示
- target:打开方式(默认的_self当前页面打开; _blank新页面打开)
- 这些属性中，title和target都可以省略；
- a链接的锚点使用
- 本页面各个模块之间的相互跳转
<div id="#div1"></div> <a href="#div1"></a>
2 实现不同页面之间，不同模块的相互跳转<a href="detail.html#detail1"></a>
列表
-
无序列表:无序列表中的li也是容器；
<ul> <li></li> <li></li> </ul> -
有序列表
<ol> <li></li> <li></li> </ol> -
定义列表：dl,dt,dd都是容器
<dl> <dt>表头</dt> <dd>详情介绍</dd> </dl>
表单
- 表单用
- 输入文本框
<input type="text" placeholder="默认提示"/> - 输入密码
<input type="password" placeholder="默认提示"/> -
单选按钮：单选按钮组，一定要加上name，否则无法实现单选效果；
<input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女 - 多选框
<input type="checkbox" checked/> -
下拉单
<select> <option name="city" value="bj">北京</option> <option name="city" value="sh">上海</option> <option name="city" value="sz">深圳</option> <select> - name和value主要用于前端向后台提交数据；
- id：
- 设置样式(不建议)
- 在JS阶段，用来获取元素
- id配合a链接，进行锚点设置；
- 留言框：
<textarea name="" value="" cols="" rows=""></textarea>
按钮
- 普通按钮 type=button
- 提交按钮 type=submit
- 重置按钮 type=reset
选择器
- 标签选择器：div h1~h6 p span a img ul li ol dl dt dd input select
添加一个小icon的步骤：
- 到官网上去取图片（以京东为例）：
- https://www.jd.com/favicon.ico
- 把以上图片另存为，存到电脑中
- 注意：把icon图标放到文件夹的"根目录"；
- 在html页面中加入：
<link rel="icon" href="favicon2.ico" type="image/x-icon"／>
Don't worry too much about the ambiguous future; just make the effort for the explicit present. 不为模糊不清的未来过分担忧，只为清清楚楚的现在奋发图强。
