来黑马学习的短短几十天时间里，主要学习了HTML和CSS的主要知识
HTML初识：
常用的布局标签
一、双标签：有始有终，又开始和结束两个标签组成，结束标签比开始标签多一个/;
1、标题标签（双标签）：分为6个档次分别是h1到h6；
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
2、段落标签
P 一般用来盛放一段文字也就是段落
3、图片标签img
img标签通过自身原则性属性src找到我们的图片所在位置，将图片引入到我们的html页面；
4、div和span
div大标签，主要用来做网页的布局，独自占一行；
span小标签，也是用来做布局的，但是一般用来放小图标或者特殊效果的文字，一行可以存在多个；
5、常见的文本修饰标签（小标签）
加粗标签：<b>单纯的加粗</b> <strong>语义化强调</strong>
倾斜标签：<i>单纯的加粗</i> <em>语义化强调</em>
删除线标签：<s>单纯的加粗</s> <del>语义化强调</del>
下划线标签：<u>单纯的加粗</u> <ins>语义化强调</ins>
6、超链接a（重点）
概念
双标签 <a href=”文件路径”></a>
二、单标签: 不需要包含内容，直接在开始标签最后面添加一个结束的符号/;
例如：<br /> <hr /> <img src=””/>
1、base标签：单标签，base标签可以统一设置超链接a的打开方式,书写在<head></head> 之间；
<base target=“_blank”>
常用的特殊符号是：空格 、小于号<、大于号>、版权©；
三、表格
table嵌套tr，tr嵌套多个td，tr表示行，td单元格我们也可以认为是列；
table表示整体，tr表示行，td表示列；
列表
四、列表分为：无序列表，有序列表，自定义列表
无序列表：ul嵌套li，li里面可以放任何标签，ul里面不要嵌套其他标签只放li标签；
默认的列表样式我们在css里处理；
有序列表：ol嵌套li标签；
自定义列表：dl嵌套dt和dd，dt表示我们要描述的标题，dd是描述的内容
五、表单（重点）
作用：搜集用户信息
组成部分：提示文本、表单、表单域（总体的提交数据的标签）组成
文本框 type=”text” <input type="text" >
密码 type=”password” <input type="password">
单选按钮：type=“radio” , <input type="radio" >想要实现单选效果我们需要给input标签设置相同的name进行设置归为一类；
复选按钮：type=“checkbox”，<input type="checkbox" >也可以设置同样的name名称，但是 不会影响多选的效果；
单选按钮 <input type="radio" checked="checkde“ >
复选按钮 <input type="checkbox" checked="checkde" >
提交按钮：<input type=“submit” />；
重置按钮：<input type=“reset” />；
图片按钮：<input type=“image“ src=”图片路径” /> src属性必须书写查找图片路径；
文件域名：<input type=“file” /> 上传文件使用；
button标签按钮：<button>我也是按钮</button>
文本域textarea
textarea 双标签，可以控制宽高，自带的两个属性cols和rows不使用，后期我们会使用css进行对应；
select下拉列表：一对select标签嵌套多对的option标签
<select>
<option></option>
<option></option>
</select>
CSS
1.Css在网页布局中的作用
2.控制文字的常见属性
Font-size line-height text-indent text-align：center/left/right
字体综合写法 font：是否倾斜 是否加粗 文字大小/ 行高 字体；
3.背景
背景的复合写法：background:背景颜色 url(背景图片路径) 平铺方式 是否固定 X轴 Y轴；
4.权重计算
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
!important 提高权重，有提权的效果，有了样式优先生效；
5.边框border
综合写法（工作常用，强制记忆）
border:边框粗细 边框线条样式 边框的颜色；
6.浮动布局特比注意点
在做浮动布局的时候一般是多个盒子进行布局，父级里面的所有的布局的子盒子都要浮动，不允许只浮动一部分；
7.清除浮动的方法
额外标签法、父级加overflow属性法、使用after伪元素法、使用双伪元素清除浮动；
8.文字在盒子里面水平居中 Text-aline:center line-height=height
9.定位=定位模式+边偏移（left、right、top、bottom）
10.定位的分类
静态定位：position:static;（不用，自动忽略）
相对定位：position:relative;
绝对定位：position:absolute;
固定定位：position:fixed;
相对定位：position:relative;
11.overflow:hideen;的常用技巧（重点）
01 overflow:hideen;可以让超出固定范围的内容隐藏掉；
02 overflow:hideen;可以清除浮动，布局的时候我们做左右或者左中右布局，都是父级嵌套子级盒子，然后将子级盒子浮动，但是如果没有给父级添加固定的高度，子级浮动以后父级的高度为0，不占位，会影响后面的布局，就给父级添加overflow:hideen;来解决；
03 overflow:hideen; 嵌套的父子级盒子出现外边距塌陷问题，两个嵌套的盒子，都没有浮动或者定位，给子级盒子添加了margin-top就会出现父级跟着掉下来的塌陷问题，就给父级添加overflow:hideen;来解决；
最后四天里，我们通过品优购项目的练习，大体掌握了自己如何对一个静态网页进行布局并编写。
|
|
收藏
淘帖
踩
