一、走进HTML
html基本标签;
1标题标签:
...
title /'taɪt(ə)l/ n. 冠军;标题
2段落和换行标签:
...
3水平线标签:
4斜体:...
5字体加粗:...
7超链接:a
8锚链接:创建跳转标记乙位置 创建跳转链接甲位置
9功能性链接:
10注释和特殊符号
注释: 空格 大于号(>):> 小于号(<):" 版权符号 @©
W3C标准
规范:标签名称、属性名称必须小写
标签必须严格嵌套,并且必须闭合,即使空元素标签也必须闭合
属性值必须用引号引起来
[if !supportLists]二、[endif]网页穿上美丽的衣服
Css:层叠样式表
CSS的优势
内容与表现分离
网页的表现统一,容易修改
丰富的样式,使页面布局更加灵活
减少网页的代码量,增加网页的浏览速度,节省网络带宽
运用独立于页面的CSS,有利于网页被搜索引擎收录
网页中引用CSS样式
内联样式:
””>
内部样式表:
外部样式表:创建一个外部的css文件:*.css,把样式写在这个文件中;谁想用这个样式,谁就引入这个css文件即可
” href=”样式文件的路径”/>
@import”css/types.css”;
链接式与导入式区别:标签属于XHTML,@import是属于CSS2.1;使用链接的CSS文件先加载到网页当中,再进行编译显示 ;使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中 ;@import是属于CSS2.1特有的,对于不兼容CSS2.1的浏览器来说就是无效的
使用css语法
声明:...
...:能让某几个文字或者某个词语凸显出来
center定义居中的内容。
font和 basefont定义 HTML 字体。
标签选择器:p{font-size:16px;color:red;}
类选择器:.second{font-size:20px;color:#096;}
ID选择器:#third{font-size:24px;color:black;}
CSS样式优先级;行内样式>内部样式表>外部样式表
ID选择器>类选择器>标签选择器
Css常用的字体
color 颜色
font-size 字体大小如:font-size:12px;
font-family 字体类型如:font-family:"隶书";
font-style 字体样式如:font-style:italic;
font-weight 加粗如:font-weight:bold ;
Css常用的文本
Text-align 水平居中方式如:text-align:left(左) text-align:center(居中) text-align:right(右)
text-indent 首行缩进如:text-indent:20px
line-height 行高如:line-height:25px;
text-decoration 文本装饰如:text-decoration:underline(下划线);
a:hover 悬停;伪类名如:a:hover {color:#B46210;text-decoration:underline;}
Width宽 height高 如:#header {width:200px;height:280px;}……
常见的伪类名鼠标样式
div标签(网页布局 排版网页内容)如
Css的背景
背景属性
背景颜色:background-color:#B70447;
背景图像
图像路径:background-image:url(img/buy.png);
重复方式: background-repeat:no-repeat;
背景定位: background-position:10px 15px;
背景属性简写
background:url(img/buy.png) no-repeat #f9f9f9 10px 15px;
三、列表、表格与表单
1列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表始于
-
标签。每个列表项始于
- 。
无序列表:
有序列表也是一列项目,列表项目使用数字进行标记。
有序列表始于
-
标签。每个列表项始于
- 标签。
有序列表:
自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以 标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以 开始。
自定义列表:
列表样式
list-style-type
list-style-image
list-style-position
list-style
2表格
表格由 标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。
如:
……
表格的跨行和跨列:
3表单
HTML 表单用于搜集不同类型的用户输入。
表单的基本结构:
名字:
密码:
表单元素:tybe元素类型:text、password、checkbox、radio、submit、reset、file、image 和 button,默认为 text 定义用于文本输入的单行输入字段:
Size:元素的宽度,当type 为 text 或 password时
Maxlength:type为text 或 password 时,输入的最大字符数
Checked:type为radio或checkbox时,指定按钮是否是被选中
隐藏域:type="hidden" 只读:readonly="readonly" 禁用:
disabled="disabled"
提交按钮: 定义用于向表单处理程序(form-handler)提交表单的按钮。
单选按钮输入: 定义单选按钮。
列表框: ……
多行文本域:
rows="y">文本内容
4css高级选择器
并集选择器:多个选择器通过逗号连接而成,同时声明多个风格相同样式
交集选择器:由两个选择器连接构成,选中二者范围的交集,两个选择器之间不能有空格第一个必须是标签选择器,第二个必须是类选择器或者ID选择器
后代选择器:外层的选择器写在前面,内层的选择器写在后面,之间用空格分隔 标签嵌套时,内层的标签成为外层标签的后代
子元素选择器:通过>连接在一起而成,仅作用于子元素
属性选择器:选取带有指定属性的元素,或选取带有指定属性和值的元素
四盒子模型
1边框、外边距、内边距、行内元素和块级元素
外框
Heigh:高 margin:外边距(一个值四个方向、一值上下、两值左右四个值、上下左右坚持左上原则)
Border:边框 padding:内边框 width:宽
边框样式;border-top-style:上边框样式
border-right-style:右边框样式
order-bottom-style:下边框样式
border-left-style:左边框样式
Border-style:设置四个边框样式
none:无边框 solid:实线边框 dashed:虚线边框 dotted:点状边框 double:双线边框 hidden:与none相同,应用于表解决边框冲突
边框颜色:border-top-color:上边框颜色
border-right-color:右边框颜色
border-bottom-color:下边框颜色
border-left-color:左边框颜色
border-color:设置边框颜色 加颜色十六进制
边框粗细:border-top-width:上边框粗细
border-right-width:右边框粗细
border-bottom-wid:下边框粗细 border-left-width:左边框粗细
border-width:边框粗细
关键字:thin(细小)、medium(中间)、thick(粗大)加像素值px
边框简写:(border-bottom: 9px #F00 dashed ;border: 9px #F00 solid;同时设置边框的颜色、粗细和样式)
*transport:透明色 外边距塌陷浏览器bug 给父容器加overflow:hidden
内边距
padding-left:左内边距
padding-right:右内边距
padding-top:上内边距
padding-bottom:下内边距
Padding:内边距
Content-box 盒子的实际高度=元素内容(正常模式 怪异模式:ie浏览器自成)
盒子的实际高度和宽度仅应用于元素内容不包括内边距和边框
Border-box 盒子的实际高度=元素内容+边框+内边距
盒子的实际高度和宽度包括元素内容和内边距
盒子实际高度=上下外边距+上下边框+上下内边距+内容宽度
盒子实际宽度=左右外边距+左右边框+左右内边距+内容宽度
外边距
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:左外边距
margin:外边距
行内元素和块级元素区别
块级元素会独占一行,其宽度自动填满其父元素宽度有(p、div、h1-h6、li)
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化,设置宽高无效有(span、em)
行内块元素不会独占一行、可以设置宽高有(img)
块级元素可以设置width, height属性,行内元素设置width, height无效,块级元素可以设置margin 和 padding
Display属性:控制元素的显示和隐藏,块级元素与行内元素的转变
Display-none;设置元素不会被显示
Display-black;元素会被显示为块级元素
Display-inline;元素会被显示为行内元素
Display-inline-block;元素会被显示为行内块元素