时间:2021-07-01 10:21:17 帮助过:31人阅读
产品经理提出项目需求
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 知识点汇总的详细内容,更多请关注Gxl网其它相关文章!