通过十几天的学习好吧，已经把HTML和CSS的基础知识学习的差不多了，为了大家能够更好的学习前端，所以我就把自己的笔记贡献出来了，哈哈，希望可以给大家带来帮助吧。
bordercollapse:collapse 去掉table和td之间的空隙 nth-of-type（）列的样式 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不会撑开盒子 | 
收藏
淘帖
踩
