html结构
头部 head
内容 body
标签和属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id='' class=''>内容</p>
</body>
</html>
标签:分为自定义和预定义
标签作用描述内容类型
<p>内容</p>
属性:描述内容特征
- 预定义:如
id class
- 自定义:如
data-admin="admin"
自定义标签需要加上前缀data-
<p class="css">内容</p>
元素
元素等于标签加属性
文档
文本中任何内容都需要 标签 引入,
css
,`js
,php
DOM模型
<imput type="text" size="10" value ="" required></imput>
- required :布尔值 写
required
表示必须键入值,不写相反
页面加载顺序
自上而下
从左往右
HTML页面三宝
页面元素
css
javaScript
行内元素和块元素
- 行内元素不会独占一行,水平排列自动换行 如
a
span
input
- 块元素独占一行,垂直排列 如
p
div
语法糖
- {内容}
- [属性]
例如:[id=admin]{内容}
默认生成的是div - class可以写成
.class{nav}
- id可以写成
#id{nav}
- 重复生成 *n 表示
例如:
#id{nav}*6
- 父子管理用
>
表示例如:
ul>li{text}*10
- 兄弟关系
+
表示例如:
h1{cv}+p{vb}
- 父级
^
表示例如
.bix>span{cv}^p{12}
- 分组
()
表示nav>h3{导航}+(ul>li*3>a{cv})
- 序号
$
$@
ul>li{cv-$}*3
顺序生成 1-3
ul>li{cv-$@6}*3
顺序生成 6-8
ul>li{cv-$@-1}*3
倒序生成 1-3