前端基础：HTML+CSS第1天学习笔记

996技术站 - 活在未来 | KingSun966技术站，极客带你看世界！https://www.996station.com程序员开发指南Descriptionhttps://guide.996station.com

HTML+CSS第1天学习笔记

1.三大标准

一个网页是由三大语言去组成的一个网站。

①结构标准

HTML

HTML负责的是网页的结构，好比人的骨骼。

②表现（样式）标准

CSS

CSS负责网页端美化。好比人的化妆师。

③行为标准

JavaScript

JS负责与后端进行数据交互。页面的交互效果。

2.单双标签

标签有些是单标签，没有封闭的。

有些是双标签的，有封闭的。

 ①单：

<br>

②双：

<div></div>

3. 常用的特殊符号

空格符：&nbsp;

左尖括号：&lt;

右尖括号：&gt;

4. 几个功能标签

加粗：<b></b>   <strong></strong>

倾斜：<i></i>   <em></em>

下划线：<u></u>    <ins></ins>

删除线：<s></s>    <del></del>

红色部分代表强调语气：更加容易让搜索引擎搜索到

5. 图片标签

网页只能接受的图片格式：jpg   png  gif

6. 文本垂直居中的方法

height:40px;line-height:40px;

要点：行高的值等于盒子的高度就能做垂直居中

7. CSS属性

字体颜色：color:red;

字体大小：font-size:30px;

宽高：width:30p;height:30px;

边框：border:1px solidred;      border-top:1px solid blue;

行高：line-height:30px;

首行缩进：text-indent:2em;   1em代表一个中文字

加粗否：font-weight:bold/normal;   bold加粗   normal不加粗

下划线：text-decoration:underline/none;   underline加下划线。None去掉下划线

左右浮动：float:left;float:right;

外边距：margin:0;        盒子与盒子之间的间距

内边距：padding:10px;   盒子与内容之间的间距

8. 外链式

在Html页面引入CSS文件。

好处：1.可以重复调用。2.页面整洁。3.便于管理

步骤：

1. 新建一个CSS文件

2. 在html的head标签中写上：link回车 – 回车

9. Hbuilder快捷键

注释：Ctrl+?

新建文件：Ctrl+n

快速输入标签：div按tab