网页设计

网页设计思维导图思维导图：包含HTML5标签（<br>(换行标签)、<hr>(一条水平下划线))、<aear>（热点区域）、<input>(输入框)、）CSS等等

网页设计思维导图

• HTML5标签
  • 1.标签不区分大小写 2.允许属性值不使用引号 3.允许部分属性值的属性忽略
  • 标记分类
    • 单标记
      • <br>(换行标签)
      • <hr>(一条水平下划线))
      • <aear>（热点区域）
        • target=（打开链接）
      • <img>(图片显示)
        • src（路径）
          • ".."表示上一级文件 "/"表示下一级
          • alt（加载失败时显示）
      • <input>(输入框)
        • <input type = "属性">
        • type（属性）
          • text
          • password
          • hidden
          • file
          • radio
          • checkbox
          • button
          • submit
          • reset
        • autofocus
        • disabled
        • form
        • list
        • pattern
        • placeholder
        • readonly
        • required
        • autocomplete
        • 概要
      • 多媒体标记
        • embed
          • src
          • autostart
          • loop
          • hidden
          • width
          • height
          • 子主题
    • 双标记
      • 超链接
        • a
          • href（路径）
          • target（设定链接页面显示的目标窗口）
            • 在同一个窗口打开（默认）
            • _blank（在新窗口打开）
            • _self（在当前窗口中打开）
            • _top（在当前新窗口打开）
            • _parent(在上一级窗口打开)
          • title
            • 鼠标经过链接时显示的文本
          • media
          • hreflang
            • 设置或返回被链接资源的代码
          • type
          • name
            • 锚点
              • id
        • 锚点超链接
          • name
          • id
        • 电子邮箱超链接
          • eg：<a href = "@163.com"><a>
        • 图像超链接
          • img
            • 1.src插图2.usemap = "#(name)"
          • map
            • 定义图像映射，利用name定义可点击的图像
          • area
            • 定义可点击区域，要嵌在<map>中
            • 区域
              • shape（形状）
                • rect（矩形），circle（圆形），poly（多边行）
              • coords（坐标位置）
            • href
            • target
            • alt
      • 链表标记
        • ul（无序，默认有"."）
          • type: disk()实心圆，square（小正方形），circle（空心圆）
        • ol（顺序，默认为"数字"）
          • <ol start = "2" type = "a"> <li></li> <li></li> <ol> 输出： b c d
          • type
          • start
          • reversed（反向排序）
        • li
        • dl（没有任何项目符号）
          • <dl> <dt>小标题1</dt> <dd>选项1</dd> <dd>选项2</dd> <dt>小标题2</dt> <dd>选项1</dd> <dd>选项2</dd> </dl>
          • <dt><dd></dd></dt>
      • 结构标记
        •  
        • header
          • 页眉标记
        • nav
          • 导航标记
        • section
          • 章节标记
        • article
          • 独立文本标记
        • aside
          • 相关文本标记
        • footer
          • 页脚标记
      • 表格标记
        • table
          • 1️bgcolor：设置表格颜色 2️background：设置表格的背景图像 3️border：设置表格线的粗细。 4️bordercolor：设置表格边框的颜色。 5️width和height：设置表格宽度和高度。 6️align：设置表格在页面中的相对位置 7️cellspacing:设置相邻单元格之间，单元格和边框之间的间距（默认2px）。 8️cellpadding：设置单元格中的内容到单元格边框之间的距离（默认为1px）。 9bordercolordark：设置3D边框的阴影颜色。
          • thead
          • tbody
          • tfoot
        • tr（行内定义）
          • 1️bgcolor：设置行颜色 2️background：设置行的背景图像。 3️valign：设置一行中所有内容的垂直相对位置。 4️bordercolor：设置行边框的颜色。 5️height：设置行的高度。 6️align：设置一行中所有内容的水平相对位置。
        • td（单元格）
          • 1！！！！！！ colspan：合并水平方向的单元格数 2！！！！！！！！！ rowspan：合并垂直方向的单元格数 1️bgcolor：设置行颜色 2️background：设置行的背景图像。 3️valign：设置一行中所有内容的垂直相对位置。 4️bordercolor：设置行边框的颜色。 5️height：设置行的高度。 6️align：设置一行中所有内容的水平相对位置。
        • th（单元格）
          • 不同与td，th为于第一行 内容默认加粗且居中显示
        • caption（定义表格标题）
          • 必须放到<table>标记之后 标题会居中显示在表格上方
      • 滚动的文本或图像
        • marquee
      • 分组标记
        • figure
          • 定义独立的内容或图文
          • figcaption
            • 为figure增加标题 只能存一个 放在其内部最前或最后
        • hgroup
          • 形成一个标题组
          • figcaption
      • 交互标记
        • details
          • summary（作为第一个元素）
            • 用于定义标题 与ul联用
        • progress（进度）
          • max
          • value
        • meter（表示指定范围内的数值）
          • high
          • low
          • max
          • min
          • optimum
          • value
      • 表单标记
        • form
          • 下拉列表框标记
            • select
              • option
          • 多行文本输入（单标记）
            • textarea
          • 按钮标记
            • button
• CSS
  • 选择器
    • 子元素选择器
      • div>span{ 属性； } 父>子
    • 元素选择器
      • p{ 属性; }
    • 交集选择器
      • span.p.h3{ 属性； }
    • id选择器
      • #id{ 属性; } 元素里面设置id值
    • 类选择器
      • .class(名称){ 属性； } 元素设置class
    • 并级选择器（只在一个选择器）
      • #p，h1{ 属性； } （用逗号隔开）
    • 通配选择器
      • *{ 属性； } 全局属性
    • 后代选择器
      • #d1 p span{ 属性； } 用空格隔开
    • 伪类选择器
      • a
        • :link (正常链接)
        • :visited(访问过的颜色)
        • :hover(鼠标划过时的颜色)
        • :actice(点击时的颜色)
        • ，也可用于其他元素的设置
    • 伪元素
      • ::
        • :：focus（获取焦点）
        • ::after（指定元素后）
        • ::before（指定元素前）
        • ::selection
  • 字体
    • color
    • fint-size(字号)
    • font-family
      • 华文彩云，Arial，微软淡雅
    • font-style
      • normal
      • italic（倾斜）
    • font-weight
      • normal
      • bold
  • 盒子
    • margin(外边距)
      • 只指定左或右的margin为auto将会将margin设为最大
      • left和right同时设为auto的会居中
      • 垂直取最大 水平相加
    • border边框
      • border-width
      • width
        • 一个值
          • 全
        • 两个值
          • 上下，左右
        • 三个值
          • 上，左右，下
        • 四个值
          • 上，右，下，左
      • color
      • style
        • soild，dotted（点线），dashed（虚线）
    • padding
      • atuo（无效）
    • content
    • display
      • line
      • block
      • inline-block
      • none
    • 定位
      • position属性
      • static不开启定位
      • 相对定位relative
        • 不会脱离文档流，原来的位置仍保留，不会被其他元素占据
        • 利用 left 、 right 、 top 、 bottom
      • 绝对定位absolute
        • 脱离文档流，相当于最近的祖先元素进行定位内联元素会变成块元素
      • 固定定位fixed
        • 永远固定在窗口