html、css提高

11.4 html、css提高

• html 路径‘列表’表格‘表单
• css id选择器‘盒子模型 显示’隐藏‘浮动

1.html路径

就和linux一样，90%一样
相对路径：同级，上级，下级，和linux一样
前端开发中，绝对路径不允许使用，都用相对路径
可以用互联网绝对地址：src=“http://www.baidu.com/img/bd_logo1.png”

2. html列表

无序列表，有序列表，项目列表（自定义列表）
列表是整体管理的大标签，嵌套表示某一项的小标签

无序ul嵌套ui，ul是无序，li是某一项

ul>li 大于号表示包含标签生成列表，清除项目符号 css：list-style = none;

有序列表ol嵌套 li

项目列表，dl嵌套dt和dd

dl是整体标签，dt是项目标题，dd是项目的描述信息
dl>dt+dd

ulli做导航

快捷键ul>(li>a{我是a $})*5 +tab键
ul>li>(span+a) 快速构局，管理关系

3.表格

表格布局已经改成div布局
div读取一行显示一行

表格：table嵌套tr(行)，tr嵌套tb(单元格)

table>tr>td
table1的border属性可以加描边，他的css属性
border属性可以控制边的粗细，颜色，线条种类，border是一个key对应多个v，多个值之间用空格隔开，而且不分先后
solid实线
border-collapse 合并表格边框线

扩展

cellspacing = 50拉开单元格之间的距离
cellpadding = 20 拉开内容与td边缘之间距离
注意加了border-collapse这些效果不生效

合并单元格：在要合并的td上加clospan=‘num’
竖向合并
rowspan

table里还有th表头这个标签,caption表格标题的标签

4.表单

<form action="http://www..." method="get">
<p>
<label>姓名：</label><input type="text" name="username" />
</p>
<p>
<label>密码：</label><input type="password" name="password" />
</p>
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<p>
<label>个人描述：</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍贯：</label>
<select name="site">
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">广州</option>
    <option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
</p>
</form>
单行文本框文字提示

placeholder 设置input输入框的默认提示文字。

表单就涉及数据的交互。
登录，注册和搜索功能要用表单

form标签：表单域标签，只是一个整体的区域

action属性，提交地址，method，提交方法，post加密方式

form只是整体的区域，具体功能表单控件实现

input：框 它不换行 提交按照键值对，value表示框值，name表示key，框名
type属性：text，文本框 默认文字html属性placeholder或者用value再用js控制
框的属性也是通过value这个属性收集数据 type属性：passowrd， 密码框
单选框type属性radio：name属性表示单选款名字，要实现单选就要单选框名字一样，默认勾选用checked="checked"或者直接checked。让点文字就能实现点选，扩大触发区域，单选框加id，用label包裹起来文字，<label for “id_n”>文字
file属性：上传文件
submit属性，提交，提交到form声明的地址，value属性可以更改显示文字
button属性，普通按钮，同样value更改显示文字，用js绑定功能 button标签和这个功能完全一样
reset属性：重置。
checkbox属性：多选框，多选，默认选中checked

textarea控件标签：文本域，加个css静用拖拽。
resixe:none
outline：none,消除文本框选中提示

select表单控件标签实现下拉框，
select里嵌套option实现选项 做默认选中option里加selected

5.css选择器

id选择器：用#这个符号 注意，一个id选择器一个页面只能使用一次,是唯一标志符

<style>
#aa{
}
</style>
<h2 id="aa"></h2>

并集选择器：
用,隔开列上多个选择器

<style>
div, span, p, #sa, .aa{
	xxx:xxx
}
</style>

层级选择器：
有空格就是层级选择器

<style>

ul li{
}
父层 空格 子层{}
</style>

伪类选择器：
就是状态，当。。。时，例如鼠标悬停
例如超链接可以未点击，点击后，悬停，划过，伪类就是这四个状态

选择器 冒号 link(未点击) visited（点击后）hover(划过) active(点击时，按住不松开)
a:link{}
a:visited{}
a:hover{}
a:active{}

实际只写
a{} 初始的状态
a:hover{} 只做悬停提示

标签选择器：选中一类标签
. :设置一类
# :层级较深
， ：不同的选择器在一起设置相同样式
‘ ’ ：有桥套关系在用
： ：hover悬浮状态

6.css盒子模型

盒子模型是抽象的比喻，抽象盒子来看网页
盒子就是标签，用于装东西
width盒子宽度，heigth盒子高度，border盒子边框
padding盒子填充，拉开内容和盒子边缘距离

蓝色模型尺寸计算 border+padding+原来尺寸content

css3有一个属性，box-sizing:border-box固定盒子尺寸，启动盒子内减模式，以conten的大小固定盒子

拉开盒子与盒子的距离：margin，叫外边距，出现在盒子外面

content - padding - border - margin

盒子模型的一些属性：

border - padding - margin三个

html快捷键div.aa +tab键div标签类名aa

<div class="aa"></div>

四个方向，left,right,top,bottom可以加描述

padding:10px 20px 30px 40px;分别表示上右下左顺时针；有三个数就是上，左右一样，下；有两个值是上下一样，左右一样；
margin和padding的设置方法完全一样；

浮动 同级元素

只用设置一个浮动

CSS float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止。