【学习笔记】HTML5基础知识

表格Table

【学习笔记】HTML5基础知识_第1张图片
【学习笔记】HTML5基础知识_第2张图片

表单Form

【学习笔记】HTML5基础知识_第3张图片
【学习笔记】HTML5基础知识_第4张图片
【学习笔记】HTML5基础知识_第5张图片

块元素和行内元素

【学习笔记】HTML5基础知识_第6张图片
【学习笔记】HTML5基础知识_第7张图片
【学习笔记】HTML5基础知识_第8张图片
【学习笔记】HTML5基础知识_第9张图片

浮动元素float

【学习笔记】HTML5基础知识_第10张图片
【学习笔记】HTML5基础知识_第11张图片
在这里插入图片描述
【学习笔记】HTML5基础知识_第12张图片
【学习笔记】HTML5基础知识_第13张图片

CSS

css选择器优先级

【学习笔记】HTML5基础知识_第14张图片
在这里插入图片描述

css属性

【学习笔记】HTML5基础知识_第15张图片

【学习笔记】HTML5基础知识_第16张图片

background【学习笔记】HTML5基础知识_第17张图片

border【学习笔记】HTML5基础知识_第18张图片

font

【学习笔记】HTML5基础知识_第19张图片

margin【学习笔记】HTML5基础知识_第20张图片

【学习笔记】HTML5基础知识_第21张图片
【学习笔记】HTML5基础知识_第22张图片

【学习笔记】HTML5基础知识_第23张图片

padding

【学习笔记】HTML5基础知识_第24张图片
【学习笔记】HTML5基础知识_第25张图片
【学习笔记】HTML5基础知识_第26张图片

【学习笔记】HTML5基础知识_第27张图片
【学习笔记】HTML5基础知识_第28张图片

color

【学习笔记】HTML5基础知识_第29张图片

position定位

【学习笔记】HTML5基础知识_第30张图片

CSS示例



	
		
		
		
	
	
		
"header">
"head">
"banner">
"category">
"item">
"item">
"item">
"item">
"item">
"item last">
"case">
"title">Case
"item-wrapper">
"item">
"item">
"item">
"client">
"title">Client
"item-wrapper">
"item">
"item">
"item">
"item">
"item">
"bottom">

CSS选择器

【学习笔记】HTML5基础知识_第31张图片
【学习笔记】HTML5基础知识_第32张图片
【学习笔记】HTML5基础知识_第33张图片
【学习笔记】HTML5基础知识_第34张图片

CSS 书写规范

CSS书写顺序

  1. 位置属性(position, top, right, z-index, display, float等)
  2. 大小(width, height, padding, margin)
  3. 文字系列(font, line-height, letter-spacing, color- text-align等)
  4. 背景(background, border等)
  5. 其他(animation, transition等)

分类的命名方法

使用单个字母+"-"为前缀:
【学习笔记】HTML5基础知识_第35张图片

统一命名

  1. 布局 g-
    【学习笔记】HTML5基础知识_第36张图片

  2. 模块 m- 、元件 u-
    【学习笔记】HTML5基础知识_第37张图片

  3. 功能 f-
    【学习笔记】HTML5基础知识_第38张图片

  4. 皮肤 s-

【学习笔记】HTML5基础知识_第39张图片

  1. 状态 z-
    【学习笔记】HTML5基础知识_第40张图片

你可能感兴趣的:(html,html)