1、标题各个页面的命名：
- 首页 index.html
- 列表页 list.html
图片列表页 list_pic.html
视频列表页 list_video.html
新闻列表页 list_news.html
产品列表页 list_product.html - 展示页 show.html
图片展示页 show_pic.html
视频展示页 show_video.html
新闻展示页 show_news.html
产品展示页 show_product.html - 单页 page.html html
2、html标签
<h1>-<h6> 特点：加粗，自动换行，自带边距，字体字号。用于标题
<p></p> 特点：自动换行，自带边距。 用于段落。
<img/> 特点：空元素，起始标签里闭合标签。用于插入图片
图片标签与路径：
常见图片格式 jpg png gif
Gif （只支持全透明）
Jpeg /jpg
Png 半/全透明都支持
属性： title:可以放任何描述图片的内容。显示方式：鼠标放到图片上显示，跟随鼠标下方显示。
alt： 用于图片无法正常显示时所提示的文字。
src: 图片路径
<a></a> 特点：鼠标放到a链接上显示鼠标指针显示为小手。用于点击跳转到另一个资源（另一个页面）。自带样式，
属性：href链接地址
target 定义是否新窗口打开：
_self(在原来页面打开)
_blank（新窗口打开）
_top（打开时忽略所有的框架）
_parent（在父窗口中打开）
跳转： 锚链接：跳转当前页面的指定位置/跳转到另一个页面的指定位置
<strong></strong> <b></b> 用于：文本加粗。
<br/> 特点：空元素，强制换行。
<!--...--> 特点：不显示在网页中。用于：注释，
<hr/> 特点：空元素. 用于分割，称为水平线。
3.css
3.1为什么使用CSS
为了美化页面
3.2 CSS语法：
选择器{声明1;声明2} 声明1： 属性名:属性值
3.3 CSS写法：
- 标签选择器：
特点：标签选择器的写法和标签是一致的，弊端：整个页面所有的标签都会使用统一的样式。 - ID选择器：
特点：同一个ID名一个页面只能使用一个次。写法：#+ID名{声明;} 弊端：样式不能共用。 - 类选择器：
特点：可以重复使用类的样式，类名的第一个字符不能使用数字。一个标签内可以定义多个类型
3.4、CSS怎么用
- 内联样式:应用于标签里的一个style属性，只能对当前标签生效。内容与表现混在一起
<p style="color:sienna;margin-left:20px">这是一个有样式的段落。</p>
- 内部样式： 针对整个页面生效，不能对多个页面使用
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
- 外面样式：可以被多一个页面引用，内容与表现分离。
- 链接式引入（
<link/>):先加载样式，在显示内容
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
- 导入式引入 (@import):先显示内容结构，再加载样式,对于不兼容CSS2.1的浏览器来说是无效的。
字体：font
字体;font-family;英文类型放到中文类型之前
加粗：font-weight:100;
字号：font-size:12px;
字体样式：font-style:normal;
简写顺序：字体样式 加粗 字号/行高 字体;
文本 text
行高：line-height:60px;
居中：text-align:right/left/center;
文本修饰：text-decrotion:overline/line-through/underline;
首行缩进：text-indent:2em;
字符间距：letter-spacing:10px;*//对于英文来说，是字母之间的间距，对于中文来说是字间距。*
字间距：word-spacing:10px;*//对于中文来说没有效果，对于英文来说是单词之间的距离。*
文字投影：text-shadow:X方向偏移距离 Y方向偏移距离 投影大小 颜色;
控制元素中的字母：text-transform:uppercase/lowercase/capitalize;
文字过多显示省略号：
1.阻止换行：white-space:nowrap;
2.溢出隐藏：overflow:hidden;
3.显示省略号：text-overflow:ellipsis;
背景：background
背景颜色：background-color
背景图片：background-image
背景图片重复：background-repeat:no-repeat/repeat-x/repeat-y
背景图片定位：background-position
背景图片路劲：background-image:url();
背景图片固定：background-attachment:fixed
背景图片大小：background-size:百分比/数值/cover/contain,
(百分比是相对于选择器的百分比，并非图片本身的百分比，
100%指充满整个区域，50%是区域的一半，百分是两个值的时候，
第一个是宽，第二是指高，如果是一个值的时候，是等比缩放；
数值，是指定背景图片的宽度，
如果是两个值的时候，第一个值是指宽度，第二值是指高度，
如果是一个值的时候，是以宽度为准的等比缩放；
cover是等比缩放，还是填满整个区域；
contain是等比缩放，是以某一边紧贴容器边缘；)
背景图片起始位置：background-origin:border-box/padding-box/content-box
border-box:是指从左上角的边框位置开始
padding-box:是指除边框所占空间外，从padding所占空间开始的左上角起始。
content-box:是指从内容区域的左上角开始，这里不包括padding和border所占的空间
背景图片的裁剪： background-clip:border-box/padding-box/content-box
border-box:是裁剪border之外的区域
padding-box:是裁剪padding 之外的区域
content-box：是指裁剪内容区域之外的区域
多重背景：background:颜色/图片/定位/大小/重复/固定
background:url() no-repeat left top/50%,url() right bottom/10% 20%;
CSS链接
1.a:link 未访问过的链接
2.a:visited 访问过的链接样式
3.a:hover 鼠标经过样式
4.a:active 鼠标按下那一刻的样式
需要严格按顺序才能看到效果
鼠标指针样式： cursor:pointer;
CSS注释：/…/
CSS文字类型不生效
1.CSS文件是否引入
2.编码问题----1）HTML页面的编码 2）CSS文件的编码 @charset "utf-8";`
块元素和内联元素
块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
块级元素主要有：
address , blockquote , center , dir , div , dl , fieldset , form , h1，h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript ,ol , p , pre , table , ul ,li
内联元素主要有：
a , abbr , acronym , b , bdo ,big , br , cite , code , dfn , em , font , i , img , input , kbd ,label , q , s , samp , select , small , span , strike , strong , sub ,sup ,textarea , tt , u , var
可变元素(根据上下文关系确定该元素是块元素还是内联元素)：
applet,button ,del ,iframe , ins ,map ,object ,script
CSS中块级、内联元素的应用：
利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个：
display:block-- 显示为块级元素
display:inline – 显示为内联元素
display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
我们常将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。
列表
1.无序列表 <ul></ul> 块级元素，容器标签
特点：1）不排序 2）自带小圆点 3）自带边距 4）自动换行 5）与li一起使用
2.有序列表 <ol></ol> 块级元素 ，容器标签
特点：1）排序 2）自带边距 3）自动换行 4）与li一起使用
3.定义列表 <dl><dt></dt><dd></dd></dl>
特点1）dl与dt、dd一起使用 2）自带边距 3）dd自带左边距
列表样式：
无序：list-style-type:cricle/square;
有序：list-style-type:lower-roman/lower-alpha;
边框样式：
border:width style color
border-width:10px;
border-color:#ff0000;
border-style:none/solid/double/dotted/dashed...
border-top/border-left/border-right/border-bottom
盒子模型：
外边距：margin:上 右 下 左
margin-top/margin-left/margin-right/margin-bottom
DIV水平居中 margin:0 auto;
边框：border
内边距: padding:上 右 下 左
padding-left/padding-right/padding-bottom/padding-top
盒子模型的尺寸： 盒子的实际宽度=左右边框（边框*2）+左右内边距（内边距*2）+内容宽度；
盒子的实际高度=上下边框（边框*2）+上下内边距（内边距*2）+内容宽度；
盒子大小属性： box-sizing:content-box/border-box;
content-box与border-box的区别：
border-box的实际宽度包括所有元素内容，包括边框和内边距，
content-box的实际宽带只包括内容元素的宽度。
盒子与盒子之间的距离用外边就（margin）
扫一扫
474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
