当前位置:Gxlcms > html代码 > HTML+CSS知识点汇总

HTML+CSS知识点汇总

时间:2021-07-01 10:21:17 帮助过:31人阅读

整个前端开发的工作流程

  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 name="description" content="要描述的内容"/>

    • <meta name="keywords" content="关键字,关键词"/>
      (以上两个meta都是为了SEO优化)

    • <title>页面的标题</title>

  2. 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;
      }
    • 选择器:

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

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

html更多解读

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

  • 图片标签<img src="相对路径/绝对路径"/>

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

  • 绝对路径:都是以http开头的;例如:

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

  • a链接常用的属性

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

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

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

    • 利用锚点进行页面切换

  2. title:鼠标以上时的提示

  3. target:打开方式(默认的_self当前页面打开; _blank新页面打开)

  4. 这些属性中,title和target都可以省略;

  • a链接的锚点使用

  1. 本页面各个模块之间的相互跳转
    <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:

  1. 设置样式(不建议)

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

  3. 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的步骤:

  • 到官网上去取图片(以京东为例):


  1. 把以上图片另存为,存到电脑中

  2. 注意:把icon图标放到文件夹的"根目录";

  3. 在html页面中加入:<link rel="icon" href="favicon2.ico" type="image/x-icon"/>

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

人气教程排行