web网页开发-HTML与CSS

发表于
web 应用开发之 HTML 与 CSS

web网页开发-html与css

1 HTML

html 是一种标记语言，语法是写各种的标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--区块会换行-->
<div></div>

<!--同一行-->
<span></span>

<!--标题 h1 到 h5-->
<h1></h1>

<!--加粗-->
<strong></strong>

<!--链接 herf 是其链接内容，herf 是该标签的属性-->
<a herf = "wizard-lhx.github.io"></a>

<!--视频和图片-->
<video src = "" controls></video>

<!--输入表单-->
<input type = "text">

<!--按钮-->
<button>按钮</button>

2 CSS

CSS 是用来设计网页布局的样式表

2.1 盒状模型

任何网页都可以理解为一个个盒子进行嵌套、排列。

1
2
3
4
5
6
7
8
9
10
11
<div style="border: solid black; padding:2px; margin: 5px; box-shadow: 0 0 0 2px #fff"></div>
<!--或者在下方用样式表形式-->
<div class="box"></div>
<style>
.box{
    border: solid black;
    padding:2px;
    margin: 5px;
    box-shadow: : 0 0 0 2px #fff;
}
</style>

盒状模型

2.2 FLEX 布局

使用 flex 布局容易使其子元素对齐

1
2
3
4
5
<!--横向对齐，左端对齐，上下居中-->
<div style="display: flex; flex-direction: row;justify-content: flex-start;align-items: center">
    <div style="width: 20px;height: 20px"></div>
    <div style="width: 10px;height: 40px"></div>
</div>

2.3 字体格式

1
2
<!--字体大小、粗细、颜色-->
<span style="font-size: 5px;font-weight: normal;color: blue">hello</span>

3 检查网页样式

在网页中按下Fn+F12打开浏览器检查窗口。点击检查元素图标可以快速定位样式。
样式检查