HTML和CSS的入门小结

来源：互联网发布：seo 百度云编辑：程序博客网时间：2024/04/30 19:07

在Codecademy上敲完了HTML&CSS的course，可能是入门的关系，没有感觉很吃力
以下是自己整理的干货，只是一些最基本的语法和初学者容易忘记的地方

1.<!DOCTYPE html>，让浏览器知道该文档类型，位于首行
2.<head> <title>文档的标题</title> </head>
3.<a href="你的超链接">你的文本</a>
4.<img src="你的图片链接"/>，这个是自闭合标签
5.<p style:"xxxxxxxx">里面可以设置很多:

字号：font-size: 12 px

颜色：color: red

字体：font-family： Arial

背景色：background-color: brown

文本对齐：text-align: center/left/right

6.<strong>想要加粗的文本</strong>
7.<em>想要变成斜体的文本（强调：emphasize）</em>
8.HTML的注释：
9.表格

<table>     <tr>这是行            <td>这是列</td>     </tr></table>

10.表格标题

<table>  <thaed>  <tr>     <th colspan="2"(标题所占的单元格)>表格的标题</th>  </thead></table>

11.span标签：<span sytle="xxxxx">想改变的文本</span>
12.盒子：<div></div>(division)
13.内联样式的css：

<p style="color: red">My little red</p>等价于下面：<style>    p{      color: red;      }</style>

14.<link ?; ?; ?/>需要三个属性(自闭合标签)：

type属性：一直是”text/css”

rel属性：一直是”stylesheet”

href属性：指向你的css文件地址

15.选择器：selector{ }
16.CSS的注释：/*我是被注释的*/
17.十六进制的颜色(hexadecimal)以#开头不区分大小写
18.字体可以同时输入多个，但只显示最前面用户电脑可识别的字体

p{font-family: Tahoma, Verdana, serif; }

如果电脑不认识第一个，那么往后轮，轮到识别为止，用字体间用，隔开
19.CSS常见参数：

height、width：高、宽（单位px）

border-color：边框颜色

border-style：边框样式

border-width：边框粗度

border：1px solid blue（三个参数）

border-radius：设置边框弧度（单位px、%）

margin：边缘

text-align：文本对齐

text-decoration：文本的装饰，超链底的下划线（none为无）

20.*{ } ：通配符，用来匹配页面上的所有元素
21.指定类(可多个)：HTML中:class='xxx' CSS中: .xxx{ }
22.指定ID(只一个)：HTML中：id='xxx' CSS中: #xxx{ }
23.伪类选择符（Pseudo selectors）：ABC：nth-child(x){ }(x为序号)
24.mainDiv > div子代选择器（只对应用对象直接相应子节点有效）
mainDiv div 后代选择器（对应用对象内的所有响应子节点有效）
25.display属性：block、inline-block、line、none
26.边距：
margin：1px 2px 3px 4px =margin-top；margin-right；margin-bottom；margin-left
padding： 设置方式同margin
padding：4px（设置四个方向都是4px），边距的赋值也可以是负数
这里写图片描述
27.浮动： float：（left、right）
28.position：absolute （绝对定位）、relative（相对定位）、fixed（固定）

0 0