H5基础知识总结

H5基础知识总结

1.DOCTYPE html

2.html结构

HTML标签/标记/元素/节点：<标签名>
单标签：
双标签:

html标签：根标签
head: 头部，一般包含不可见内容
body: 内容部分， 一般包含可见内容
meta：声明，声明编码格式
title: 页面标题

3.基本标签

标题标签：h1~h6 双标签

段落标签：

空格标签：&nbsp (html中，多个空格，换行也会被解析成一个空格)

换行标签：

分割线：

---

加粗标签：

斜体标签：

输入框：

图片标签：

超链接：

4.列表

ul：无序列表 ol：有序列表 dl：自定义列表 （ol有 type和start）

5.表格

表头，表体，表尾

行，列，合并行，合并列： rowspan colspan

6.表单

单行文本输入框：<input type=“text” value=“黄晓明” placeholder="请输入姓名"name=“username”>

密码输入框：

多行文本输入：

按钮：

​

​

​

单选框：

复选框：

checked 默认选中 disabled 禁用

下拉菜单：

​

​

​

​ (selected 默认选中)

颜色：颜色单词，十六进制：#ff3344，rgba(255,255,255,0.4)

常用块标签：div ,h1~h6,p,ul,dl,ol,table

常用内联标签：a,span,b,strong,i,em,input,select,textarea

img:内联块，支持宽高，不独占一行

7.文本属性

font-size font-family font-style font-weight text-align line-height text-decoration

letter-spacing text-indent

8.盒子模型

边框：border-style solid 实线 dashed 虚线 dotted 点线 double 双线

边框圆角:border-radius

宽度 = width + padding + border + margin
高度 = height + padding + border + margin

9.定位

position:relative/absolute/fixed

相对定位/relative：1.不会提升层级,对自身节点没有影响 2.为绝对定位服务,让后代节点可以以自身作为定位参照物

绝对定位/absolute：

1. 提升层级(整层)：脱离文档流

2. 定位参照物：

   a.查找父节点是否有定位，如果有则是定位参照物，如果没有则继续查找父节点的父节点…
   b.如果所有父节点都没有定位，则以浏览器页面作为定位参照物

固定定位：fixed

​ 固定定位：相对于浏览器窗口

​ 绝对定位：相对于页面内容

10.溢出，隐藏

overflow:hidden/scroll/auto

display:block/none/