第一天复习：

html骨架：

DTD：文档类型定义，规定了使用哪一个版本的html规范

html标签：双标签，表示整个网页

head标签：配置html页面

title：网页标题

meta: 设置字符集charset

body: 书写标签组成的网页结构

语法：

标签之间对空格，缩进，换行不敏感，对嵌套关系敏感

文本内容之间空白折叠现象

标签语法：

标签名必须书写在一对尖括号中

结束标签必须书写关闭符号/。

双标签是成对出现的

容器级标签：可以书写任何内容h1

文本级标签：只能书写文本类的内容不能书写容器级标签。p

属性： k=” v”

div+css布局

绝大部分网页布局都是div+css布局。

优点：做到了结构和样式分离。便于代码维护

结构：

<body>
<div class="header">
<h1 class="logo">logo</h1>
<div class="nav">nav</div>
</div>
<div class="content">
<div class="aside">侧边栏</div>
<div class="main">主内容</div>
</div>
<div class="footer">footer</div>
</body>

样式：

<style type="text/css">
/*清除默认样式*/
* {
padding: 0px;
margin: 0px;
}
.header {
width: 100%;
height: 100px;
background-color: #eee;
}
.logo {
float: left;
width: 200px;
height: 100px;
background-color: red;
}
.nav {
float: right;
width: 600px;
height: 100px;
background-color: red;
}
.content {
width: 100%;
height: 500px;
background-color: #eee;
margin-top: 30px;
}
.aside {
float: left;
width: 300px;
height: 500px;
background-color: green;
}
.main {
float: right;
width: 600px;
height: 500px;
background-color: green;
}
.footer {
width: 100%;
height: 100px;
background-color: #eee;
margin-top: 30px;
}
</style>

二、列表

列表有3种：无序列表，有序列表，自定义列表

列表：相类似，相近的内容使用列表语义

2.1无序列表

作用：给文本添加无序列表语义。

ul:unordered list 无序列表

li:list item 列表项

ul和li是第一个成对出现的标签,出现ul一定有Li，有li一定被ul包裹

ul内部只能嵌套li不能出现任何其他标签。

ul>li + tab键快速生出嵌套关系标签

<h3>服装分类</h3>
<ul>
<li>男装</li>
<li>女装</li>
<li>儿童装</li>
</ul>

ul是容器级标签，li也是容器级标签，内部可以书写任何标签，甚至可以书写ul>li

<h3>服装分类</h3>
<ul>
<li>
<h4>男装</h4>
<ul>
<li>夹克</li>
<li>西服</li>
<li>休闲装</li>
</ul>
</li>
<li>
<h4>女装</h4>
<ul>
<li>长裙子</li>
<li>短裙子</li>
<li>T恤</li>
</ul>
</li>
<li>
<h4>儿童装</h4>
<ul>
<li>童装</li>
<li>童鞋</li>
<li>童帽子</li>
</ul>
</li>
</ul>

ul内部可以嵌套一个或者多个li标签，li之间没有先后顺序

无序列表前面的小圆点，样式是css设置。

list-style: square;

2.2 有序列表

作用：给文本添加有序列表语义

ol:ordered list 有序列表

li:list item 列表项

每一个列表项之间有顺序之分

ol,li也是一组成对出现的标签，ol一定嵌套li。

ol内部嵌套一个或者多个Li

<ol>
<li>html基础考试</li>
<li>js基础考试</li>
<li>js进阶考试</li>
<li>nodejs考试</li>
</ol>

ol,li都是容器级标签，ol内部只能书写Li，li是容器级可以书写任何内容

<h3>考试说明</h3>
<ol>
<li>
<h4>html基础考试分数统计</h4>
<ol>
<li>100分</li>
<li>98分</li>
<li>70分</li>
<li>50分</li>
</ol>
</li>
<li>
<h4>js基础考试分数统计</h4>
<ol>
<li>98分</li>
<li>90分</li>
<li>70分</li>
<li>50分</li>
</ol>
</li>
<li>
<h4>html进阶考试分数统计</h4>
<ol>
<li>100分</li>
<li>98分</li>
<li>70分</li>
<li>50分</li>
</ol>
</li>
</ol>

有序列表前面的数字，css设置

list-style: none;

2.3 自定义列表

作用：给文本添加自定义列表语义

dl: definition list 自定义列表

dt: definition title 标题

dd: definition description 描述

dl嵌套dt和dd，dt和dd是同级关系，dt是标题，dd是对标题解释说明（dl>dt+dd）

<dl>
<dt>苹果公司</dt>
<dd>苹果是美国公司</dd>
<dd>苹果公司收益很多</dd>
<dt>华为公司</dt>
<dd>华为总部在深圳</dd>
<dd>是国内很好的公司</dd>
<dt>小米公司</dt>
</dl>

dl，dt,dd都是容器级标签

dl内部书写dt和dd，可以书写多组dt和dd,dd是对dt解释说明，dd可以有多条也可以没有。

一般我们在使用dl时，只嵌套一组dt和dd，便于样式书写。

结构：

<dl>
<dt>苹果公司</dt>
<dd>苹果是美国公司</dd>
<dd>苹果公司收益很多</dd>
</dl>
<dl>
<dt>华为公司</dt>
<dd>华为总部在深圳</dd>
<dd>是国内很好的公司</dd>
</dl>
<dl>
<dt>小米公司</dt>
</dl>

样式：

<style type="text/css">
dl {
float: left;
width: 300px;
height: 400px;
background-color: lightblue;
margin-left: 30px;
}
</style>

想要资料的就加我q3252897743，不懂感恩心态的朋友，就不要找我索取了，谢谢

web前端基础之第二天

二、列表

2.1无序列表

2.2 有序列表

2.3 自定义列表

猜你喜欢