版权声明:cao-denghua-非商业性使用-相同方式共享 3.0 中国大陆 (CC BY-NC-SA 3.0 CN) https://blog.csdn.net/caodenghua/article/details/83177447
miaov课件
第01节 基本机构和盒模型
html(Hypertext Markup Language)—— 结构
css(Cascading Style Sheets)—— 样式
js(javascript)—— 行为
html超文本标记语言
< # 标记
<html> # 标签
<html> </html> # 标签对
<!DOCTYPE HTML> # 声明文档类型
<meta charset="utf-8"/> # 代码编码格式
单标签:直接在后面斜杠结束的标签叫做单标签。
样式表出现的位置
# 行间样式表
<div style="……"></div>
# 内部样式表
<style>…………</style>
# 外部样式表
<link href="style.css" rel="stylesheet"/>
常见样式 一 background
background # 背景
background-attachment: fixed; # 背景是否滚动
background-color: gray; # 背景颜色
background-image: url(bg.jpg); # 背景图
background-repeat: no-repeat; # 背景图是否重复
background-position: center 0px; # 背景图位置
常见样式 一 border
border # 边框
border-width # 边框宽度
border-style # 边框样式
border-color # 边框颜色
边框样式:
solid # 实线
dashed # 虚线
dotted # 点线(IE6不兼容)
常见样式 一 padding
padding # 内边距
padding-top # 上边内边距
padding-right # 右边内边距
padding-bottom # 下边内边距
padding-left # 左边内边距
padding: top right bottom left;
注意:内边距相当于给一个盒子加了填充厚度会影响盒子大小。
常见样式 一margin
margin 外边距
外边距的问题:
1、上下外边距会叠压;
2、父子级包含的时候子级的margin-top会传递给父级;(内边距替代外边距)
外边距复合:margin: top right bottom left;
盒模型
盒子大小 = border + padding + width/height
盒子宽度 = 左border+左padding+width+右padding +右border
盒子高度 = 上border+上padding+height+下padding+下border
常见样式 一结构
结构样式:
width # 宽度
height # 高度
background # 背景
border # 边框
padding # 内边距
margin # 外边距
复合属性:一个属性多个属性值的命令,叫做复合属性。
常见样式 —文本设置
font-size # 文字大小(一般均为偶数)
font-family # 字体(中文默认宋体)
color # 文字颜色(英文、rgb、十六位进制色彩值)
line-height # 行高
text-align # 文本对齐方式
text-indent # 首行缩进(em缩进字符)
font-weight # 文字着重
font-style # 文字倾斜
text-decoration # 文本修饰
letter-spacing # 字母间距
word-spacing # 单词间距(以空格为解析单位)
常见复合属性
复合属性:
background
border
padding
margin
font:font-style | font-weight | font-size/line-height | font-family;
常见样式(17个)
width # 宽度
height # 高度
background # 背景
border # 边框
padding # 内边距
margin # 外边距
font-size # 文字大小
font-family # 字体
color # 文字颜色
line-height # 行高
text-align # 文本对齐方式
text-indent # 首行缩进
font-weight # 文字着重
font-style # 文字样式
text-decoration # 文本修饰
letter-spacing # 字母间距
word-spacing # 单词间距
第02节 常见标签
img标签/a标签
<img src="图片地址" alt="图片名"/> 图片(单标签)
# alt属性 是图片名字,是给百度搜索引擎抓取使用;
a标签: 链接/下载/锚点
target # 链接打开方式
blank # 新窗口
self # 当前窗口
<base target="_blank"/> 定义页面链接默认打开方式
常见标签
div # 块
img # 图片(单标签)
a # 链接、下载、锚点
h1-h6 # 标题
p # 段落
strong # 强调(粗体)
em # 强调(斜体)
span # 区分样式
ul # 无序列表
ol # 有序列表
li # 列表项
dl # 定义列表
dt # 定义列表标题
dd # 定义列表项
浅析SEO
SEO :搜索引擎优化;
部分方法:
a、页面标签语义化;
b、使用对SEO有利的标签:h1/h2/h3/strong/em……
c、提高页面关键词密度;
d、……等等;
SEM:搜索引擎营销;(包含SEO)
选择符
id选择符 (#)
群组选择符 (,)
class选择符 (.)
类型选择符 (div……)
包含选择符 (div p)
通配符 (*)
选择符的优先级
基础选择符的优先级
类型 < class < id < style(行间) < js
测试:
A、#header #div1 .box1 div .section p .link{………………}
B、#some .base #font #call a{………………}
选择符使用原则:准确的选中元素,又不影响其它。
A的四个伪类
伪类:伪类用于向被选中元素添加特殊的效果。(元素在特定情况下才具备的。)
link # 未访问(默认)
hover # 鼠标悬停(鼠标划过)
active # 链接激活(鼠标按下)
visited # 访问过后(点击过后)
A四个伪类的顺序:
link visited hover active
(love hate 记忆方法!)
A伪类的应用 和 兼容
a伪类的应用:
a、四个伪类全用(搜索引擎、新闻门户、小说网站)
b、一般网站只用( a{} a:hover{} )
IE6不支持a以外其它任何标签的伪类;
IE6以上的浏览器支持所有标签的hover伪类;
第03节 标签特性
标签样式初始化
css reset 原则:
但凡是浏览默认的样式,都不要使用。
body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;font-size:12px;}
ol,ul{margin:0;padding:0;list-style:none;}
a{text-decoration:none;}
img{border:none;}
块元素和内嵌元素
块的特征
1、默认独占一行
2、没有宽度时,默认撑满一排
3、支持所有css命令
内嵌(内联、行内)的特征
1、同排可以继续跟同类的标签
2、内容撑开宽度
3、不支持宽高
4、不支持上下的margin和padding
5、代码换行被解析
块和内嵌的转换
display:block # 显示为块
# 使内联元素具备块属性标签的特性
display:inline # 显示为内嵌
# 使行块属性标签具备内联元素的特性
display:inline-block;
Inline-block的特点和问题
特性:
1、块在一行显示;
2、行内属性标签支持宽高;
3、没有宽度的时候内容撑开宽度
问题:
1、代码换行被解析;
2、ie6 ie7 不支持块属性标签的inline-block;
inline-block的应用、cursor
a、分析结构(div 包一排a)
b、a标签支持宽高,并且在一排显示
c、有hover效果
d、当前状态不能点!
cursor 指针样式 (规定要显示的光标的类型)
cursor:pointer | text | move ……
cursor:url(hand.cur),pointer;
雅虎面试题
# 这么一段HTML,请挑毛病:
<P> 哥写的不是HTML,是寂寞。
<br><br> 我说:<br>不要迷恋哥,哥只是一个传说
# 空格符
# 标准:
<p>哥写的不是HTML,是寂寞。</p>
<p>我说:<br/>不要迷恋哥,哥只是一个传说</p>
# 最佳:
<p>哥写的不是<abbr title="Hypertext Markup Language">HTML</abbr>,是寂寞。</p>
<p><cite>我</cite>说:<br/><q>不要迷恋哥,哥只是一个传说</q></p>
# title 元素的额外信息
html标签:http://www.w3school.com.cn/tags/index.asp
前端规范
01、所有书写均在英文半角状态下的小写;
02、id,class必须以字母开头;
03、所有标签必须闭合;
04、html标签用tab键缩进;
05、属性值必须带引号;
06、<!-- html注释 -->
07、/* css注释 */
08、ul,li/ol,li/dl,dt,dd拥有父子级关系的标签;
09、p,dt,h标签 里面不能嵌套块属性标签;
10、a标签不能嵌套a;
11、内联元素不能嵌套块;