HTML总结
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、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
单行文字垂直居中的代码
解决方案:让文字的行高等于盒子的高度,就可以让文字在当前盒子内垂直居中
网页布局要学习的三大核心: 盒子模型、浮动 和 定位