文章介绍了CSS代码的空格规范，如属性值前后空格的使用，以及HTML的基本语法，包括标签的类型如双标签、单标签，各种元素如div、h1-h6、p、img、a等的用法和特点。还提到了块元素、行内元素和行内块元素的区别，以及元素显示模式的转换和文字垂直居中的方法。此外，文章强调了布局中的盒子模型、浮动和定位的重要性。
CSS代码风格
空格规范：
1. 属性值前面，冒号后面，保留一个空格；
2. 选择器（标签）和大括号中间保留空格。
基本语法概述：
1.HTML标签是由尖括号包围的关键词，如<html>
2.HTML标签通常是成对出现的，例如<html>和</html>，我们称为双标签。标签对中的第一个标签是开始标签，第二个是结束标签。
3.有些特殊的标签必须是单个标签（极少情况），例如<br/>，我们称为单标签。
标签：
分区 div
标题标签 h1~h6
段落标签 p，p标签中不能放任何块元素
图像 img：src属性（必须有）、alt属性，属于替换元素（块和行内元素之间，具有两种元素的特点）
列表 ul/ol/dl：用来布局
超链接 a：行内元素，在a 标签中可以嵌套除它自身外的任何的元素（包括块元素）
表单 form
表格 table：显示数据，合并单元格
框架 iframe
属性：
在标签中（开始标签或者自结束标签）还可以设置属性
属性是一个名值对（x = y）
属性用来设置标签中的内容如何显示
属性和标签名或者其他属性应该使用空格隔开
属性名（值）不能瞎写，应该根据文档中的规定来编写
有些属性有属性值，有些没有，如果有属性值，属性值应该使用引号引起来。
href属性指定链接的地址:超文本引用（hypertext reference）；超链接
单标签：<br/>换行、<hr /> 水平线、<img/>、<input/>、<meta/>
特殊字符/实体: 使用&，> 大于号，< 小于号，  空格
块元素: 标题标签、p标签、blockquote（长引用）、div、ul、ol、li等
行内元素: em标签（语音语调的一个加重）、strong标签（强调重要的）、q标签（短引用）、a标签、b、i、del、s、span等，其中span是最典型的行内元素。
行内块元素: img、input、button、td他们同时具有块元素和行内元素的特点
块元素的特点：
1. 比较霸道，独占一行
2. 高度、宽度、外边距以及内边距都可以控制
3. 宽度是默认容器（父级宽度）的100%
4. 是一个容器及盒子，里面可以放行内或者块级元素
注意：
文字类的元素内不能使用块级元素，p标签主要用于存放文字，因此p中不能放块级元素
同理，h1~h6等都是文字类块级标签，里面也不能放其它块级元素。
行内元素的特点：
1. 相邻的行内元素在一行上，一行可以显示多个
2. 高、宽直接设置是无效的
3. 默认宽度就是它本身内容的宽度
4. 行内元素只能容纳文本或其他行内元素
注意：
链接里面不能再放链接
特殊情况链接 a 里面可以放块级元素，但是给 a 转换一下块级模式最安全
行内块元素的特点：
1. 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
2. 默认宽度就是它本身内容的宽度（行内元素特点）
3. 高度、行高、外边距以及内边距都可以控制（块级元素特点）
元素显示模式转换
比如想要增加链接 a 的触发范围
转换为块级元素： display: block;
转换为行内元素： display: inline;
转换为行内块元素： display：inline-block
单行文字垂直居中的代码
解决方案：让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中
网页布局要学习的三大核心: 盒子模型、浮动 和 定位
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
