本帖最后由 我是楠楠 于 2018-7-4 17:29 编辑
【郑州校区】html+css手记 ----------------------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：定义重置按钮 -----------------------html存在的语义化的标签----------------------
语义化的标签，就是在布局的时候多使用语义化的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。
1、div标签 块元素，表示一块内容，没有具体的语义
2、em标签 行内元素，表示语气中的强调词
3、i标签 行内元素，原本没有语义，w3c强加了语义，表示专业词汇
4、b标签 行内元素，原本没有语义，w3c强加了语义，表示文档中的关键字或者产品名
5、strong标签 行内元素，表示非常重要的内容
----------------------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(背景图像的起始位置)
15、position:relative;：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
16、position:absolute;：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
17、overflow:auto;：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
18、overflow:hidden;：内容会被修剪，并且其余内容是不可见的。
19、overflow-x:hidden;横向内容被修剪
20、overflow-y:hidden;纵向内容被修剪
21、opacity:0.6;：透明度的设置，60% background-repeat(背景图片是否及如何重复)
background-attachment(背景图片是否固定) background-position(背景图像的起始位置) /*清空指定标签样式*/
/* 去掉标签默认的内边距和外边距 */
body,ul,li,dl,dd,input,select,h1,h2,h3,h4,h5,h6,p{margin:0px;padding:0px;} /* 去掉列表的项目符号 */
ul{list-style: none;} em{font-style: normal;} /* 去掉默认的下划线 */
a{text-decoration: none;} /* 去掉图片在加链接时的边框 */
img{border:0;} /* 让h标签继承body设置的文字大小 */
h1,h2,h3,h4,h5,h6{font-size:100%;} .fl{float: left;}
.fr{float: right;} .clearfix:before,.clearfix:after{
content:'';
display: table;
} .clearfix:after{
clear:both;
} .clearfix{zoom:1;} #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 元素定义引号的类型：*/ 8、css选择器对应权重计算： 1、!important 放在对应样式的后面，权重值为10000；
2、style内联样式，权重值为1000；
3、ID选择器，权重值为100；
4、类、伪类和属性选择器，权重值为10；
5、标签和伪元素选择器，权重值为1；
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）等权重值为0；
#css盒子模型
margin：
4值，顺时针方向：分别设置上 右 下 左 的margin的值
3个值，顺时针方向：分别设置上 左右 下 的margin的值
2个值，分别设置：上下 和 左右 的margin的值
1个值，同时设置四个边的margin
border
padding：
4值，顺时针方向：分别设置上 右 下 左 的padding的值
3个值，顺时针方向：分别设置上 左右 下 的padding的值
2个值，分别设置：上下 和 左右 的padding的值
1个值，同时设置四个边的padding
传智播客·黑马程序员郑州校区地址 河南省郑州市 高新区长椿路11号大学科技园（西区）东门8号楼三层 联系电话 0371-56061160/61/62 来校路线 地铁一号线梧桐街站A口出 | 
收藏
淘帖
踩
