通过十几天的学习，好吧，已经把HTML和CSS的基础知识学习的差不多了，为了大家能够更好的学习前端，所以我就把自己的笔记贡献出来了，希望可以给大家带来帮助吧。
bordercollapse:collapse 去掉table和td之间的空隙
display：block 自动换行
text-decoration: none去下滑线
cursor: pointer 把光标变成小手
< 小于<
> 大于>
空格
© 版权
® 商标
& 和(and)
padding 内边距
line-height 行间距
text-align 文本居中
colspan 跨列合并
rowspan 跨行合并
清除内边距 margin=0 padding=0
嵌套关系垂直外边距合并结局方案
1.给父盒子设置一个边框
2.给父盒子一个上padding值
3.给父盒子添加overflow：hidden
盒子稳定性：width>padding>margin.
border-radius：顶角弧度
web标准三层 结构 表现 行为 （w3c制定）
骨架格式
<html>
<head>
<title></title>
</head>
<body>
</body>
<html>
嵌套关系（父子关系）
<head>
<title></title>
</head>
并列关系
<head>
</head>
<body>
</body>
标题标签
<h1></h1>
<h2></h2>
...
<h6></h6>
段落标签 水平线标签 换行标签
<p></p> <hr /> <br />
div&span标签
<div></div>用来布局的，一行只能放一个div
<span></span>文字标签，用来布局的，一行可以有多个span
文本格式化标签
<strong></strong>文字以加粗的方式显示
<em></em>文字以倾斜的方式显示
<del></del>文字以加删除线方式显示
<ins></ins>文字以加下划线方式显示
图像标签img（属性之间必须用空格隔开）
<img src="图像URL" />
<img/>标记属性
src 图像的路径
alt 图像不能显示时的替换文本
title 鼠标悬停时显示的内容
（width 图像的宽度
height 图像的高度
border 图像的边框）以后会用css编写
链接标签
<a href="跳转目标" target="目标的跳转方式(self或者_blank)"></a>
外部链接前必须添加http:// 空连接使用#代替
注释标签(不会显示到页面上)
<!--注释语句--> 快捷键ctrl+/
相对路径
同一级路径 直接写文件名
下一级路径 /
上一级路径 ../
绝对路径（不常用）使用本地文件地址，只可以在本地显示
锚点链接
1. 使用相应的id名标注跳转目标的位置（找目标）
<h3id="two">
2.使用<a href="#id名">文本</a> 创建链接文本
base标签 设置整体标签的打开方式（新窗口或者自身页面）
把所有的连接 都默认添加target="_blank"
table标签
tr 标签 用于定义表格中的行，必须嵌套在 table标签中
td td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
表格的主要目的是用来显示特殊数据的
一个完整的表格有表格标签（table），行标签（tr），单元格标签（td）组成，没有列的标签
<tr></tr>中只能嵌套<td></td> 类的单元格
<td></td>标签，他就像一个容器，可以容纳所有的元素
表格属性（重点记住cellspacing、cellpadding，我们经常有个说法，是三参为0，
平时开发的我们这三个参数 border cellpadding cellspacing 为 0）
border 表格边框
cellspacing 设置单元格与单元格边框之间的空白间距
cellpadding 设置单元格内容与单元格之间的空白间隔
width 设置表格的宽度
height 设置表格的高度
align 设置表格在网页中的水平对齐方式
th 表格表头单元格
caption 表格标题
合并单元格
跨行合并 rowspan=""
跨列合并 colspan=""
(1. 先确定是跨行还是跨列合并
2. 根据 先上 后下 先左 后右 的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量
3. 删除多余的单元格 单元格
)
无序列表（ul） 注意： 1.<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的
<ul> 2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
<li></li> 3. 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！
<li></li>
</ul>
有序列表（ol）(很少用) 无序列表:里面只能包含li 没有顺序，我们以后布局中最常用的列表
<ol>
<li></li> 有序列表：1.里面里面只能包含li 2.有顺序， 使用情况较少
<li></li>
</ol>
自定义列表：里面有2个兄弟，dt和dd
自定义列表（dl）
<dl>
<dt><dt>
<dd><dd>
<dd><dd>
</dl>
&表单控件&
input控件（单标签）
1.type属性（<input type="属性值" value="你好"> ）
这个属性通过改变值，可以决定了你属于那种input表单。
2.value属性值
value 默认的文本值。
背景必须要给宽和高
3.name属性
name表单的名字， 这样，后台可以通过这个name属性找到这个表单。
页面中的表单很多，name主要作用就是用于区别不同的表单。
4. checked属性
表示默认选中状态。 较常见于 单选按钮和复选按钮。
label标签
label标签主要目的是为了提高用户体验。 为用户提高最优秀的服务。
用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
（当我们鼠标点击 label标签里面的文字时，光标会定位到指定的表单里面）
textarea控件(文本域)
通过textarea控件可以轻松地创建多行文本输入框.
cols="每行中的字符数" rows="显示的行数" 我们实际开发不用
select下拉列表
1. select 中至少包含一对 option
2. 在option 中定义selected=" selected "时，当前项即为默认选中项。
3. 但是我们实际开发会用的比较少
form表单域
在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。
background-repeat:no-repeat;背景图片不平铺
repeat-x 横向平铺
repeat-y 纵向平铺
背景附着：background-attachment;
盒子实际大小=内容的宽度width+内边距padding+边框border
如果盒子没有宽度则padding不会撑开盒子 |
|
收藏
淘帖
踩
