-
HTML标签： 格式排版
p 段落 双
br 换行 单
hr 分隔线 单
h1~h6 标题 双
pre 原样格式化输出 双
div -
HTML标签 ：文本
<em> 强调 倾斜 双
<ruby></ruby> 加拼音
<rt></rt>
<strong> 加粗 强调 双
<mark></mark> 标记 选中 双
<sub></sub> 下标
<sup></sup> 上标
<ins></ins> 插入的内容
<del></del> 删除的内容 -
CSS： 在html中的使用
link 外部css 单 href type rel
<style> 双
style属性 -
CSS选择器以及优先级
#id
.className
tagName
*
组合 空格 后代 selector1 selectoer2 后代元素
组合 大于号 子元素 selectoer1>selectoer2 子元素
组合 点 并集 p.item 并集 标签是p并且class是item的 标签在前class在后
群组 逗号 selectoer1,selecoter2 一起设置
and p.item .item.first-item p#nav <div class="item first-item">
id > class > tagName
-
CSS属性： 字体 文本 颜色
font:[bold|style] size family
font-family:
font-size:
font-weight bold
font-style italic
font-variant: small-capscolorword-spacing
letter-spacing
text-align left/right/center
vertical-align: middle/top/bottom
line-height
word-wrap: break-word / overflow-wrap
white-space: pre / pre-wrap
text-decoration: underline / overline / line-through / none
text-indent -
CSS颜色和长度
# 颜色
colorName
rgb() rgb()
#十六进制
# 长度
px
em
百分比
1 CSS 属性/尺寸/边框/内边距/背景
尺寸
-
width max-width min-width 后面还会在讲 先用width
-
height max-height min-height
边框
-
border-style 边框风格 solid / dotted / dashed / double / none
-
border-width 边框宽度
-
border-color 边框颜色
-
border 复合属性
border: 1px solid #ccc
内边距 边框与文字的距离
-
padding-left
-
padding-top
-
padding-right
-
padding-bottom
-
padding
padding: 值; 上下左右
padding: 值1 值2； 值1：上下 值2：左右
padding: 值1 值2 值3; 值1：上 值2：左右 值3:下
padding: 值2 值2 值3 值4； 值1：上 值2：右 值3：下 值4：左
背景属性
-
background-color 背景颜色
transparent默认透明色 -
background-image 背景图片 url()
-
background-repeat 背景图片平铺 repeat no-repeat repeat-x repeat-y
-
background-position 背景图片位置 像素或者方位
-
background-attachment 背景图片固定 scroll / fixed
-
background 复合属性
background: color image repeat postion attachment
CSS Sprite 精灵图 雪碧图
-
利用 background-position 设置背景图片的位置
-
把很多小的图片 集成到一张大图上
-
好处： 减少网络请求数量
2 超级链接
2.1 a 元素
属性
-
href 要跳转的链接
-
target _blank / _self 在新的一页打开 默认在原窗口打开
-
title 鼠标划上去后，显示的信息
-
download H5新增的
特殊用法 调用系统的应用 如果没有对应的功能点了也没用
-
跳转网页 href="http://www.oldboy.cn"
-
发短信 href="mailto:fuming@oldboy.com"
-
打电话 href="tel:10086" 电脑没打电话功能
-
发邮件 href="sms:10086
2.2 路径
-
相对路径 ./ ../
-
绝对路径 URL
http://www.biadu.com/index.html -
特殊的相对路径
/lesson/path/index.html
2.3 cursor css属性
cursor: pointer; move wait no-drop 手 十字 转圈 禁止访问
2.4 锚点
设置锚点
第一种方式
<a name="锚点名字"></a> 例子：<a name="jieshao"></a>
找到锚点的方式：
<a href="#锚点名字">同志介绍</a>
<a href="#">返回顶部</a>
第二种方式
随便一个元素
<tagname id="锚点的名字"></tagname> 例子：<div style="height:600px" id="nihao">
跳转到指定锚点
<a href="#锚点名"></a>
2.5 完整URL
http://www.badiu.com/path/demo/contents/index.php?a=100&b=300#mao1
协议protocol http
主机名hostname www.baidu.com / IP
路径 path /path/demo/contents/
文件名filename index.php
查询内容query ?a=100&b=300
锚点 #mao1
3图 片
img元素
属性
-
src 图片位置
-
title 鼠标移动上去的提示信息
-
alt 图像的替代文字 假如图像源没了
-
usemap 图片映射
图片映射
map元素
-
name 起名 和usemap关联起来
-
id 和上面一样
area元素
-
shape rect 左上点+右上点 circle 圆心+半径 poly 几对点就是几边形
-
coords 根据shape指定的形状 确定坐标
-
target _blank _self 是否在本窗口打开新的链接
-
href 要跳转的地址
-
title 提示信息
作业
-
完成图片映射 和 锚点的联系
-
css sprites 练习
-
读取md转成html