----------------------html定义和基本结构----------------------
HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语
言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,一个html文件就是一个网页,html文件用编辑器打开显示
的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。
一个html的基本结构如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页显示内容
</body>
</html>
第一行是文档声明,第二行“<html>”标签和最后一行“</html>”定义html文档的整体,“<html>”标签中的‘lang=“en”’定义网页的语言为英文,定义
成中文是‘lang="zh-CN"‘,不定义也没什么影响,它一般作为分析统计用。 “<head>”标签和“<body>”标签是它的第一层子元素,“<head>”标签里面负责对网
页进行一些设置以及定义标题,设置包括定义网页的编码格式,外链css样式文件和javascript文件等,设置的内容不会显示在网页上,标题的内容会显示在标题
栏,“<body>”内编写网页上显示的内容。
html文档规范
1、标签小写
2、属性用双引号括起来
3、所有的标签闭合
<div></div> <br />
4、图片加alt属性;alt=“”加上属性,可以读图片信息
----------------------常用html标签----------------------
#<h1>、<h2>、<h3>、<h4>、<h5>、<h6>:html标题
#<p>:标签定义一个文本段落
#<br/>:换行
#<:<
#>:>
# :空格
#<img src="images/pic.jpg" alt="产品图片" />:标签可以在网页上插入一张图片,它是独立使用的标签,通过“src”属性定义图片的地址,通过“alt”属性
定义图片加载失败时显示的文字,以及对搜索引擎和盲人读屏软件的支持。
#<font></font>:字体标签
#./:当前路径
#../:上一级路径
#<a href="">:标签可以在网页上定义一个链接地址,通过src属性定义跳转的地址,通过title属性定义鼠标悬停时弹出的提示文字框。页面内定义了“id”或者
“name”的元素,可以通过a标签链接到它的页面滚动位置,前提是页面要足够高,有滚动条,且元素不能在页面顶部,否则页面不会滚动。
#<ol></ol>、<li></li>:定义一个有编号的内容列表
#<ul></ul>、<li></li>:定义一个无编号的内容列表
#<dl></dl>、<dt></dt>、<dd></dd>:定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。
#table标签:声明一个表格
1、border: 定义表格的边框
2、cellpadding: 定义单元格内内容与边框的距离
3、cellspacing: 定义单元格与单元格之间的距离
4、align: 设置单元格中内容的水平对齐方式,设置值有:left | center | right
5、valign: 设置单元格中内容的垂直对齐方式 top | middle | bottom
6、colspan: 设置单元格水平合并
7、rowspan: 设置单元格垂直合并
#tr标签:定义表格中的一行
#td和th标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格
#<iframe>标签:创建包含另外一个html文件的内联框架(即行内框架),src属性来定义另一个html文件的引用地址,frameborder属性定义边框,scrolling属性
定义是否有滚动条,a标签的target属性可以将链接到的页面直接显示在当前页面的iframe中
-----------------------常用表单----------------------
#form:定义一个表单区域,action属性定义表单数据提交的地址,method属性定义提交的方式。
#label:定义表单控件的文字标注
#input类型为text:定义了一个单行文本输入框
#input类型为password:定义了一个密码输入框
#input类型为radio:定义了单选框
#input类型为checkbox:定义了单选框
#textarea:定义多行文本输入
#select:定义下拉列表选择
#input类型为submit:定义提交按钮
#input类型为reset:定义重置按钮
----------------------css基本语法及页面引用----------------------
#css页面引入方法:
1、外联式:通过link标签,链接到外部样式表到页面中。
2、嵌入式:通过style标签,在网页上创建嵌入的样式表。
3、内联式:通过标签的style属性,在标签上直接写样式。
#常用的应用文本的css样式:
1、color 设置文字的颜色,如: color:red;
2、font-size 设置文字的大小,如:font-size:12px;
3、font-family 设置文字的字体,如:font-family:‘微软雅黑‘;
4、font-style 设置字体是否倾斜,如:font-style:‘normal‘; 设置不倾斜,font-style:‘italic‘;设置文字倾斜
5、font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
6、font 同时设置文字的几个属性,写的顺序有兼容问题,建议按照如下顺序写: font:是否加粗 字号/行高 字体;如: font:normal 12px/36px ‘微软雅
黑‘;
7、line-height 设置文字的行高,如:line-height:24px;
8、text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉
9、text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px
10、text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中
11、margin:30 auto;盒子水平居中
12、margin-top:-1px 进行边线的合并
13、margin合并问题:两个盒子margin重叠去相对比较大的值作为之间的margin值
14、Object.style.background=background-color(图片背景颜色) background-image(背景图片路径) background-repeat(背景图片是否及如何重复)
background-attachment(背景图片是否固定) background-position(背景图像的起始位置)
#css选择器:
1、标签选择器:
2、id选择器:
3、类选择器:
4、属性选择器:
1、[attribute] 用于选取带有指定属性的元素。
2、[attribute=value] 用于选取带有指定属性和值的元素。
3、[attribute~=value] 用于选取属性值中包含指定词汇的元素。
4、[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
5、[attribute^=value] 匹配属性值以指定值开头的每个元素。
6、[attribute$=value] 匹配属性值以指定值结尾的每个元素。
7、[attribute*=value] 匹配属性值中包含指定值的每个元素。
5、派生选择器:
1、后代选择器:‘空格‘,h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素
2、子元素选择器:‘>‘
3、相邻兄弟选择器:‘+‘
6、组选择器:‘,‘
7、伪类及伪元素选择器:一般称为黑魔法解决一些html中的bug
.box2:before:
.box2:before{
content:"前面的文字";
color:red ;
}
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
p:first-child {color: red; } /*匹配第一个p元素*/
q:lang(no){ quotes: "~" "~" }/*为属性值为 no 的 q 元素定义引号的类型:*/
#css盒子模型
margin:
4值,顺时针方向:分别设置上 右 下 左 的margin的值
3个值,顺时针方向:分别设置上 左右 下 的margin的值
2个值,分别设置:上下 和 左右 的margin的值
1个值,同时设置四个边的margin
border
padding:
4值,顺时针方向:分别设置上 右 下 左 的padding的值
3个值,顺时针方向:分别设置上 左右 下 的padding的值
2个值,分别设置:上下 和 左右 的padding的值
1个值,同时设置四个边的padding