HTML 基础

HTML

全称: HyperText Markup Language

中文名: 超文本标记语言

标记

标记分两种: 单标记 双标记
标记的特点: 要闭合 大小写不敏感 有属性
单标记语法: <标记名 属性名="属性值"/>
双标记语法: <前标记名 属性名="属性值"></后标记名>

html模板

1: 版本控制
2: html文档区域
3: 文档包含头部(head)和身体(body)
4: 头部包含编码格式(meta utf-8)和标题(title)

文本格式必须为html后缀

选择器

标签选择器

标签名{

}


id 选择器

#id 名称{

}


类选择器

.class名称{

}


后代选择器

选择器 选择器 ...{

}


选择器优先级

1: 标签(名)选择器
2: id 选择器
3: class 选择器
4: 后代选择器
相同选择器,样式冲突的情况下,后面覆盖前面

CSS样式

边界

border: 给当前标记设置边界(默认上下左右)
border-left: 给当前标记设置左边界
border-right: 给当前标记设置右边界
border-top: 给当前标记设置上边界
border-bottom: 给当前标记设置下边界

border-width: 给当前标记设置粗细
border-left-width: 给当前标记设置左边界粗细
border-right-width: 给当前标记设置右边界粗细
border-top-width: 给当前标记设置上边界粗细
border-bottom-width: 给当前标记设置下边界粗细

border-color: 给当前标记设置边界颜色
border-left-color: 给当前标记设置左边界颜色
border-right-color: 给当前标记设置右边界颜色
border-top-color: 给当前标记设置上边界颜色
border-bottom-color: 给当前标记设置下边界颜色

border-style: 给当前标记设置边界的类型
            solid 实线
            dotted 点状线
            dashed 虚线
border-left-style: 给当前标记设置左边界的类型
border-right-style: 给当前标记设置右边界的类型
border-top-style: 给当前标记设置上边界的类型
border-bottom-style: 给当前标记设置下边界的类型

组合写法:
border:border-width border-color border-style

文本

文本颜色 color: 颜色值;
文本位置 text-align: left(靠左对齐,默认) | right(靠右对齐) | center(居中对齐)
字号大小 font-size: 单位是 px 
文字修饰 text-decoration: underline(下划线) | line-through(中划线) | none(取消修饰)

背景

背景样式 background
背景颜色 background-color: 颜色值;
背景图片 background-image:url("图片路径")
背景图片平铺 backround-repeat: repeat-x(沿着 x 轴平铺) | repeat-y(沿着 y 轴平铺) | no-repeat(不平铺);
背景图片定位 background-position: x y;
x 轴:支持 left center right 支持百分比
y 轴:支持 top center bottom 支持百分比
背景图片尺寸 background-size: x y | cover(把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中) | 
contain(把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域);

复合写法
background: background-color background-image background-position background-repeat

边距

外边距

外边距 margin
左边距 margin-left: 数值 | auto
右边距 margin-right: 数值 | auto
上边距 margin-top
下边距 margin-bottom

外边距 复合写法
1: margin: 0 (上) 0 (右) 0 (下) 0 (左)
2: margin: 0 (上) 0 (左右) 0 (下)
3: margin: 0 (上下边距) 0 (左右边距)
4: margin: 0 (上下左右边距都是0px)

内边距

内边距 padding
左内距 padding-left: 数值
右内距 padding-right: 数值
上内距 padding-top
下内距 padding-bottom

内边距 复合写法
1: padding: 0 (上) 0 (右) 0 (下) 0 (左)
2: padding: 0 (上) 0 (左右) 0 (下)
3: padding: 0 (上下边距) 0 (左右边距)
4: padding: 0 (上下左右边距都是0px)

浮动布局

浮动布局 float: left | right | none
清除浮动 clear: left | right | both

clear 
1: 只能清除同级标签的浮动影响
2: 只能清除既是同级又在它上面的标签的浮动影响

浮动造成高度塌陷 父级标签使用overflow:hidden解决

标签

常用标签

标题标签
h1 ~ h6

段落标签
<p></p>

列表标签
有序列表: 组合标签 双标签 块级 ol li
无序列表: 组合标签 双标签 块级 ul li
自定义列表: 字典列表 双标签 块级 dl dt dd
列表修饰: list-style-type: 符号... | none;

图片标签
图片标签 单标签 比较特殊 可以设置尺寸 有行级标签的特点
src="" 指定引入的图片的地址
alt="" 图片内容的描述 必须的 描述的准确

超链接标签
超链接 a 双标签 行级
href="" 指定标签跳转的地址
target="_blank | _self(默认)" 指定链接跳转的方式
a 标签的四种状态
默认状态: link
访问过的状态: visited
悬浮的状态: hover
点击按住没有松开的状态: active

脱离文档流

文档流: 
1、从左至右，从上至上的布局。 
2、符合html中标签本身含义的布局，比如某些标签独占一行。有些标签属于行内元素等。 

脱离文档流:
让元素在文档流里飞起来,不再占用原来的空间。
也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素
不存在而进行定位。

定位

    position: static    不定位    默认状态
    position: relative  相对定位  相对于自身 不脱离文档流
    position: absolute  绝对定位  相对于定位父级去定位
    position: fixed     固定定位  相对于窗口的位置始终不变

过渡效果

    /* 过渡时间 */
    transition-duration: 1s;
    /* 过渡属性 */
    /* 希望哪些样式变化的时候有过渡效果,多个属性用","隔开 */
    /* 默认是 all */
    transition-property: height, background;
    /*
        过渡的运动方式/速度变化
        linear: ;       匀速
        ease: ;         由快到慢,逐渐变慢
        ease-in: ;      变快
        ease-out: ;     变慢  
        ease-in-out: ;  先快再慢
    */
    transition-timing-function: linear;
    /*过渡延时*/
    transition-delay: 1s;
    /*复合写法*/
    transition: all 1s 2s linear;
    /*兼容性*/
    /*谷歌 - webkit 内核*/
    -webkit-transition: all 1s 2s linear;
    /*火狐*/
    -moz-transition: all 1s 2s linear;
    /*IE*/
    -ms-transition: all 1s 2s linear;
    /*欧朋(Opera)*/
    -o-transition: all 1s 2s linear;

2D变形

    旋转
    transform: rotate(度数deg);

    平移
    transform: translate(0, 0);

    缩放
    transform: scale(1);

    倾斜
    transform: skew(0);

注意: 复合写法时,根据写的顺序,产生的效果并不相同!

form 表单

    <!-- action: 表单要提交的服务器接口 -->
    <!-- method: 表单提交的方式,默认是 GET,一般用 POST -->
    <form action="" method="">
    <!-- 输入框 -->
    <!-- placeholder 占位符,给用户提示 -->
    <!-- value 最终要发送给服务器的值 -->
    <!-- name 给服务器值得时候标识这个值是什么值 -->
    <input type="text" placeholder="请输入用户名" 
    name="userName" value="baidu" />
    <br/>
    <input type="email" placeholder="请输入邮箱" 
    name="email"/>
    <br/>
    <label for="height">身高</label>
    <input id="height" type="text" placeholder="请输入身高" 
    name="height"/>
    <br/>
    <input type="password" placeholder="请输入密码" />
    <br/>
    <!-- 单选 -->
    <input type="radio" name="gender" value="男" />
    <input type="radio" name="gender" value="女" />
    <input type="radio" name="gender" value="保密" />
    <br/>
    <!-- 多选 -->
    <input type="checkbox" name="hobby" value="篮球" />
    <input type="checkbox" name="hobby" value="足球" />
    <input type="checkbox" name="hobby" value="网球" />
    <br/>
    <!-- 上传文件 -->
    <!-- multiple 上传多个文件 -->
    <input type="file" multiple />
    <br/>
    <!-- 按钮 -->
    <input type="button" value="我是一个按钮" />
    <br/>
    <!-- 隐藏属性 -->
    <!-- 收集一些不需要用户填写的信息,可以使用 hidden 
    类型 input -->
    <!-- 如注册设备类型是 Mac -->
    <input type="hidden" name="type" value="Mac" />
    <br/>
    <!-- 提交信息的按钮 -->
    <input type="submit" value="注册" />
    <br/>
    <!-- 清空表单信息 -->
    <input type="reset" value="清空" />
    <br/>

    <textarea></textarea>
    <!-- 下拉框 -->
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    </form>
    <!-- 如果重置/提交按钮在 form 外,点击按钮是无效的,
    可以通过 form 属性管理到 form 表单的 ID 来绑定到一起 -->
    <!-- 换行 -->
    <div>测试<br/>测试</div>

table 表格

    table{
        /* collapse: 合并边框 */
        /* separate: 不合并 */
        border-collapse: separate;
        /* hide: 不合并边框的时候,让空的单元格隐藏 */
        empty-cells: hide;
        text-align: center;
        /* vertical-align 该表表格垂直居中方式*/
        /* top middle bottom */
        /* inherit: 继承父级 */
        vertical-align: inherit;
    }