html+css基础 - 黑马程序员技术交流社区

Html基础部分
1、双标记：有开始也有结束标记，比如<h1>aaa</h1>
2、单标记：只有开始标记
<br> 或者 <br />
3、属性：定义在开始标记里，用空格隔开，属性名=“属性值”，多个属性，之间依然用空格隔开
4、html页面的标准格式
<!DOCTYPE .....>---文档类型声明
<html>-----整个页面
<head></head>---页面的整体定义
<body></body>---页面内容
</html>
5、文档类型声明:HTML语言拥有众多版本
传统型：<!DOCTYPE html PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
严格型、框架型、H5类型：<!DOCTYPEhtml>
6、head里：文档头，用于包含那些为页面进行整体定义的内容
title：页面的标题
meta：元数据，定义页面的编码格式、缓存、搜索关键字等...
<meta http-equiv="refresh" content="5"/>
<meta http-equiv="content-type"content="text/html;charset=utf-8" />
<meta name="keywords"content="CSS3,JavaScript"/> ---增加页面被搜搜到的概率
7、添加注释：为代码添加一些描述性的说明信息，提高代码的可阅读性、可维护度
 注释的内容将不再参与页面的显示
二、文本
1、能够在页面上显示的文本内容：普通文本、标记文本
2、普通文本：直接书写直接显示
空格折叠的现象：将编辑时候的多个空格和多个换行，合成一个空格展示
特殊字符：有特定意义的字符、键盘无法录入的------使用“字符实体”替代
< 表示 < less than > 表示 > greater than
3、<h1>---标题文本（大字体、加粗、独占一行，行间距）,常用于页面上的突出显示的文本。<h2>---<h6>也是标题
4、<p></p>---段落，被它所包含的文本，自成一个段落，且拥有行间距
5、<br/>--换行，相当于回车符
6、<b></b>--加粗显示；<i></i>--斜体显示；<u></u>--下划线显示
7、<div></div>---内容独占一行，不会带来其他效果，常用于页面内容的分组，实现特定的样式定义
8、<span></span>---常用于标出一行中的某些文本，定义特定的样式
9、块级元素：（block）内容会独占一行，比如h1、p、div
行内元素：（inline）可以和其他行内标记位于同一行，比如b、i、u、span
块元素：可以嵌套块元素和行内元素
行内元素：不可嵌套块元素

三、图像和链接
1、图像 <imgsrc="url" width="" height=""/>
2、关于地址
对于web程序而言，不能使用d:\images\a.jpg这种路径－－》资源文件，服务器端发来，位于缓存区域。应该使用相对路径或者绝对路径
３、相对路径:相对于当前网页文件而言
<img src="a.jpg" /> <imgsrc="images/b.jpg" /> <img src="../images/c.jpg" />
4、绝对路径(全路径)
<img src="http://www.jd.com/a.jpg" />
5、链接
<a href="http://www.tmooc.cn"target="_blank">点击的内容</a>
锚点链接 name="name"href="#name" target="_blank"
四、表格
1、用于显示网格数据、页面的简单布局
2、表格的相关标记：tr:tablerow--表行；td:table defination---单元格
3、常用属性
caption：表格标题 border：边框
width和height：设置给table，行和列的尺寸，自适应；也可设置给td
align：水平方向上的对齐left/center/right
valign：垂直方向上的对齐top/middle/bottom
4、不规则表格
---通过设置td的colspan或者rowspan属性：跨列或者跨行
五、列表
1、有序列表<ol><li></li></ol>
2、无序列表<ul><li></li></ul>

3、自定义列表 <dl><dt></dt><dd></dd></dl>
六、表单
1、定义一个表单，如果没有form，无法使用submit提交
2、 inputtype=text 普通文本框；password 密码框；radio单选框；checkbox 多选框；button 普通按钮；submit 提交按钮；reset 重置按钮；file 文件域
( name 组名、value 选项值、checked 默认选中项。
一组单选框组名必须相同。并且只能定义其中一项默认选中。)
3、select 选择菜单，option 定义菜单项，如果option不定义value，则将option中间的文本字段作为value提交。
默认为单行的下拉菜单。用size属性可定义行数。用multiple定义可多选
4、textarea 文本域多行文本框 rows 行数 cols 列数。<textarea>初始值</textarea>
5、label文本标签可以用for属性与某个表单元素绑定。for的值为其他元素的 id 属性的值。

类选择器：类选择器使用“.”（英文点号）进行标识，后面紧跟类名.

id选择器：id选择器使用#进行标识，后面紧跟id名。

通配符选择器：用*号表示， * 就是选择所有的标签他是所有选择器中作用范围最广的，能匹配页面中所有的元素。

后代、子代选择器
只存在一级的父子关系：可以称之为子代或者后代
多于一级的嵌套关系：只能称之为后代后代语法：selector1 selector2{}
例：div span{} /*匹配出所有div元素中的span元素*/ #content .redBack{}
子代作用：只能匹配出父子关系的子级元素
目的：不希望选择任意的后代元素，而是希望缩小范围，只选择某个具体的子元素时使用。语法：selector1>selector2{}。

伪类选择器
作用：匹配元素的不同状态语法： :作为开始的
分类：
1）链接伪类作用：只匹配超链接的状态
:link：适用于尚未访问的超链接:visited：适用于访问过后的超链接
2）动态伪类
:hover：适用于鼠标悬停在html元素上的状态
:active：适用于html元素被激活时
:focus：适用于html元素获取焦点时的状态

边框属性
1、简写方式：border:width style color; (四个方向)
width:边框宽度；style:边框样式,实线(solid),虚线(dotted),虚线(dashed)；color:边框颜色,还可以取 transparent
2、单边定义：border-left/right/top/bottom :width style color;
border-方向:width style color;
3、单属性定义：border-color : color; 四个边框的颜色
4、单边框单属性定义：border-方向-属性:值;
方向：top / bottom / left /right；属性：color / width / style

浮动定位
1、定位：元素在网页中该出现的位置，元素框对于其正常位置应该出现的位置。
2、定位属性：更改当前元素的定位方式。
属性：position 取值：static/ relative / absolute / fixed
3、偏移属性 top ：+- bottom ：+- left ：+-right ：+-
top和bottom同时出现的话以top为主；left和right同时出现的话以left为主。
该组属性能够帮助我们完成元素的位置移动
4、堆叠顺序属性：z-index取值：无单位的数字
5、分类：
1、普通流定位。流：排列元素的一种方式；
又称为文档流定位，是页面默认排列元素的一种方式。
页面中的块级元素：元素是从上到下的方式排列（每个元素独占一行）
页面中的行内元素：元素是从左到右的方式排列（可以通过左右外边距调整位置或距离，上下外边距不行）
弊端：块级元素无法在一行内显示多个，布局不好做。
*2、浮动定位解决问题：让多个块级元素能够在一行内显示

注意：
1、块级元素浮动后，宽度会变成自适应
2、行内元素浮动起来后，除具备以上特点外，它将变成块级元素
3、浮动元素的外边缘不会超过其父元素的边缘
4、已经浮动的元素不会相互重叠
5、浮动元素只能向佐或向右，不能上下浮动
6、当包含框的宽度不能承装下所有的浮动元素时，那么最后一个浮动元素会自动换行。

相对定位：元素框会相对于它原来的位置偏移某个距离。
要参考元素本身的位置然后去实现新的位置移动。
1、属性和值position:relative; 配合偏移属性一起使用改变当前元素的位置
通过 top / left / bottom / right 属性值实现位置的微调
2、注意： 1、相对定位不会改变元素的形状；2、元素原本所占的控件仍然会保留

绝对定位
1、绝对定位的元素会脱离文档流，不占据页面空间，即允许压住页面的其他的元素。
2、绝对定位的初始化位置：
1)相对于最近的已定位的祖先元素来实现位置的初始化；2)如果元素没有已定位的祖先元素，那么就相对于最初的包含块body实现位置的初始化

固定定位
1、什么是固定定位：将元素固定在页面的某个位置处不动，会将元素脱离文档流，不占页面空间。
2、属性和值position:fixed; 通过 left / bottom / right / top 实现位置调整
6、静态定位(了解) position:static; 默认定位方式。