HTML 进阶

标签

标签分类

  • 块级标签：占据一行，需要换行

    div、p、h1～h6、ul、ol、li、dl、dt、dd

    特点：

    1. 独占一行
    2. 可以设置宽、高
    3. 如果不设置宽度，宽度默认为容器的100%

  • 行内标签：在一行，不换行

    span、a、b、i、u、em

    特点：

    1. 与其他元素同行显示
    2. 不可以设置宽、高
    3. 宽高就是文字或图片的宽高

标签嵌套规则

  1. 块级元素可包含行内元素和某些块级元素

  2. 行内元素不能包含块元素，只能包含行内元素

  3. 块级元素不能放在p标签内

  4. 特殊块级元素只能包含行内元素，不能再包含块级元素

    如：h1-h6、p、dt

  5. 块级元素与块级元素并列，行内元素与行内元素并列

结构分析

调试工具F12

网页区块分析：网页整体结构

网页制作流程

  1. 用户：提出需求
  2. 产品经理：规划和实现原型图
  3. 设计师：网页设计图
  4. 前端工程师：切图–html结构–css样式–js基础

项目

基本网页排版布局

  • 头部内容

    LOGO标签

    导航栏

    banner图

  • 主题内容

    文章内容

    链接区

  • 页脚内容