HTML基础
一、HTML5基础
1.1 HTML5简介
HTML是一种超文本标记语言
1.2 网页的基本标签 开闭组合(双标签:前开后闭 单标签:自开自闭)
a:标题标签 h1~h6 格式:<h1>内容</h1> 块级元素 效果:h1字体最大 依次减小 双标签
b:段落标签 p标签 格式:<p>内容</p> 块级元素 双标签
c:换行标签 br 格式:<br/> 效果: 起到换行作用 单标签
d:水平线标签 hr 格式:<hr/> 效果 一条贯穿屏幕左右的水平横线 块级元素 单标签
e:字体样式标签 em 效果:包围的字体变斜体 strong 效果:包围的字体加粗 都是双标签
f:注释标签 格式:<!-- 注释内容 --> 不会被html读取加载到网页内容
g:转义字符 格式: &开头 ;结尾 常见: 空格 < < > > " " 还有版权符号是 ©
1.3 图像标签< 行内元素 >
a:常见图片格式 jpg gif bmp png 浏览器支持请参阅w3cSchool帮助文档
b:标签 img 单标签 格式:<img src="image/***.jpg" alt="图像加载失败的替代文字" title="鼠标悬停显示内容"/> 宽高用css
1.4 超链接标签< 行内元素 >
a:标签 a 双标签 格式:<a href="连接地址 #代表自链接" target="目标窗口位置 _blank 新窗口 _self 当前窗口">内容</a>
a:应用场景:
⒈页面间的跳转:从当前页面跳转到另外一个页面
⒉锚连接 :当前页面某一位置的跳转 格式:<a href="#位置名">位置名</a>
⒊功能性连接:比如打开qq,email,msn等... 可以不看,不重要...
二、列表.表格与媒体元素
2.1 列表 块及元素
a:无序列表 格式:<ul><li>内容1</li><li>内容2</li></ul> 每行序号是小圆点 可以用css改样式
b:有序列表 格式:<ol><li>内容1</li><li>内容2</li></ol> 每行序号类型 用属性 type="" 选择 种类A.a.1
c:定义列表 格式:<dl><dt>标题</dt><dd>内容1</dd><dd>内容2</dd></dl> 没有序号
2.2 表格
标签:table 双标签 定义表格 内元素 tr 代表 一行 th 代表 一列
属性:colspan="数字" 代表跨几列 rowspan="数字" 代表跨几行 属性作用在 th 元素内 例:<th colspan="2">内容</th>
语法:<table><tr><th>列1</th><th>列2</th></tr></table>
2.3 媒体元素
a:音频元素 格式:<audio src="music/**.mp3" controls></audio>
b:视频元素 格式:<video src="video/***.MP4" controls></video>
...浏览器支持格式请查阅w3cSchool,支持多种浏览器支持 请添加多个 <source src="路径"/ type="audio/类型">
2.4 HTML5的结构元素
不重要,后面布局全部是div + css 布局
三、表单
标签:form 双标签
属性:method="post 或 get" post安全 get会把提交信息显示在浏览地址栏 action="提交到的页面"
标签:input 单标签 属性具体用法请查阅 w3cSchool
属性:type 表单元素类型 name 表单名 value 表单值(可选) size 表单的初始宽度 maxlength 制定最大输入字符数 checked默认被选中
...表单验证内容 可以不看 后面都是用JavaScript进行表单验证
四、初始CSS3.0
4.1 语法结构
<style> 样式内容 </style>
4.2 CSS样式的引用
a:行内元素 例:<div style='color= red;'></div> 基本不用 不利于增删改查
b:内部样式 例:<head><style> 样式内容 </style></head> 没有做到样式的分离 基本不用
c:外部样式 创建单独的css文件 例:<head><link href="css/***.css" rel="stylesheet"/></head> 注:@import导入不用
4.3 选择器
⒈基本选择器
a:标签选择器 例:div{}
b:类选择器 例:.class{} 选择类 <div class="class" class="..."></div>创建类 一个类名可以多次使用 一个元素中可以创建多个类
c:id选择器 例:#id{} 选择id <div id="id"></div> id具有唯一性 一个id名全局只使用一次
⒉高级选择器
a:层次选择器 后代:E F 子选择:E>F 相邻兄弟:E+F 通用兄弟:E~F
b:结构伪类选择器 E:first-child 等等 使用查w3cSchool 技巧:E:nth-of-type(n) n可以是 n 2n 3n 2n+1 等 有规律的选择
c:属性选择器 格式:div[name]{} 选中所有具有name属性的 div标签 具体查阅:http://www.w3school.com.cn/cssref/css_selectors.asp
⒊伪元素选择器
::first-letter将样式添加到文本的首字母{css样式}
::first-line首行{css样式}
::before在某元素之前插入一些内容{content:''}
::after在某元素之前插入一些内容{content:''}
说明:这里规范最好使用2个冒号
总结:后代选择器通常会造成所有长子都被选中的情况,所以一般不使用,推荐使用 子选择器
选择器会计算权重 : 优先级 id>class>标签 同时出现的情况下 按权重使用样式
如果权重一样: 就使用就近原则 谁离的近 使用谁的样式
五、CSS3 美化网页元素
5.1 字体样式:
font-family 字体 font-size 字体大小 font-style 字体风格 font-weight 字体粗细
一次性设置:font:风格 粗细 大小 字体; 顺序设置
文本阴影 格式: text-shadow:x y 阴影半径 阴影颜色;
5.2 网页文本排版
a:文本样式 通常使用span标签 包围需要设置样式的文本
color 文本颜色 text-align 水平对齐 text-indent 首行缩进 line-height 行高 text-decoration 下划线类型
b:列表样式
针对列表 排序图片的 修改
例: list-style-type:none 无图形
5.3 背景样式 div标签 的块级背景装饰
a:背景颜色 background-color: red;
b:背景图片 background-image: url("image/**.jpg") no-repeat 不重复排序
background-position: x y; 定位背景图片的位置
c:背景尺寸 background-size : auto; 具体查阅:http://www.w3school.com.cn/cssref/pr_background-size.asp
d:背景色的渐变: background:linear-gradient(to right,red,black)
5.4 超链接伪类 (悬停属性 和 单击未释放伪类 适用于其他标签)
⒈a:link 单击访问前的样式或者说状态
⒉a:visited 单击访问后的样式或者说状态
⒊a:hover 鼠标悬浮其上时的样式或者说状态
⒋a:active 鼠标单击不释放时的样式或状态
总结:当一个模块同时设置了背景颜色和背景图片时,图片表现层高于颜色,所以会优先显示图片
父级标签的所有文本样式 如color font-family font-size..等 会被子标签块继承
当块级元素设置了高度时(例高度为100px): line-height:100px;可以让文本上下居中
六、盒子模型
6.1 边框
a:边框 border:1px solid red; 把边框用线描绘出来 可以设置边框粗细 边框线的类型 边框线的颜色
b:内外边距 margin 外边距 padding 内边距
c:盒子的具体尺寸 可以用box-sizing 来设置 参考:http://www.w3school.com.cn/cssref/pr_box-sizing.asp
d:圆角边框 border-radius 可以设置盒子的圆角大小
c:盒子阴影 box-shadow:inset x y 模糊半径 颜色;
总结:盒子的总尺寸=border+padding+内容的宽高 占的总尺寸=border+padding+内容的宽高+margin
七、浮动
7.1 display 属性
display: block 盒子成为块级元素 inline 盒子成为行内元素 inline-block 两种属性皆有 none 盒子被隐藏
7.2 float 属性
float:left 盒子左浮动 right 盒子右浮动 none 盒子不浮动
7.3 清除浮动 clear 属性
clear:left 清除左浮动 right 清除右浮动 both 清除两侧浮动 none 允许左右出现浮动
7.4 解决父级边框塌陷的4种方法
a:浮动元素后面加空div .div{clear:both} 常用
b:设置父元素的高度 基本不用
c:父级添加overflow属性 overflow:hidden等;参阅http://www.w3school.com.cn/cssref/pr_overflow-style.asp
d:父级添加伪类after div:after{content:'';display:block;clear:both;} 推荐使用
总结:display:inline-block 和 float 浮动的区别 前者是标准文档流 后者脱离标准文档流 各有优劣
使用浮动后的效果:字体围绕效果 & 父级边框的塌陷
八、定位网页元素
8.1 position 属性
position:static 没有定位 relative 相对定位 absolute 绝对定位 fixed 固定定位;top: npx;left: npx;
8.2 z-index 属性
可以设置任何非0整数 0默认不动 任何负数 或 正整数 都可以调整 某个盒子的显示层位置
8.3 opacity 属性
设置网页元素的透明度 参考http://www.w3school.com.cn/cssref/pr_opacity.asp
总结:绝对定位 和 固定定位的区别 前者会随着滚动条移动 后者 会固定在屏幕上的某个位置 不会随着滚动条移动
相对定位 一种情况是相对自己原本的位置定位 另一种情况 如果父级使用了此属性 那么它会相对父级位置定位
九、利用CSS3 制作网页动画
9.1 transform 属性
a:2D变形 transform: translate(x y) 平移 scale(n)缩放 rotate(n deg)旋转 skew(x,y)倾斜
b:3D变形 transform: rotateX(n deg) 或 rotateY(n deg) 3D视角旋转
9.2 CSS3 过渡
属性:transition 参考http://www.w3school.com.cn/cssref/pr_transition.asp
9.3 CSS3 动画 参考http://www.w3school.com.cn/css3/css3_animation.asp
动画的创建:
@keyframes 动画名{0%{css样式} 50% {css样式} 100%{css样式} }
动画的使用: 参考http://www.w3school.com.cn/cssref/pr_animation.asp
animation: 动画名 完成动画的时间 动画的速度曲线 动画开始前的延时 动画播放次数 是否轮流反向播放动画; 6个属性。