HTML+CSS 知识点汇总

产品经理提出项目需求

UI出设计稿

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

前后台的交互

测试

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

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

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

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

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

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

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

!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只考虑标签嵌套，跟tab和空格无关，无数个空格，也只算作一个

图片标签 img src= 相对路径/绝对路径 /

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

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

图片标签上有两个常用属性，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图标放到文件夹的 根目录 ；

在html页面中加入： link rel= icon href= favicon2.ico type= image/x-icon ／

以上就是HTML+CSS 知识点汇总的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。