A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© Miilu.zero 初级黑马   /  2018-9-14 23:09  /  1020 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

Html基础部分
1、双标记:有开始也有结束标记,比如<h1>aaa</h1>
2、单标记:只有开始标记
<br> 或者 <br />
3、属性:定义在开始标记里,用空格隔开,属性名=“属性值”,多个属性,之间依然用空格隔开
4、html页面的标准格式
<!DOCTYPE .....>---文档类型声明
<html>-----整个页面
<head></head>---页面的整体定义
<body></body>---页面内容
</html>
5、文档类型声明:HTML语言拥有众多版本
传统型:<!DOCTYPE html PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
严格型、框架型、H5类型:<!DOCTYPEhtml>
6、head里:文档头,用于包含那些为页面进行整体定义的内容
title:页面的标题
meta:元数据,定义页面的编码格式、缓存、搜索关键字等...
<meta http-equiv="refresh" content="5"/>
<meta http-equiv="content-type"content="text/html;charset=utf-8" />
<meta name="keywords"content="CSS3,JavaScript"/> ---增加页面被搜搜到的概率
7、添加注释:为代码添加一些描述性的说明信息,提高代码的可阅读性、可维护度
<!-- 注释的内容 --> 注释的内容将不再参与页面的显示
二、文本
1、能够在页面上显示的文本内容:普通文本、标记文本
2、普通文本:直接书写直接显示
空格折叠的现象:将编辑时候的多个空格和多个换行,合成一个空格展示
特殊字符:有特定意义的字符、键盘无法录入的------使用“字符实体”替代
&lt; 表示 < less than &gt; 表示 > greater than
3、<h1>---标题文本(大字体、加粗、独占一行,行间距),常用于页面上的突出显示的文本。<h2>---<h6>也是标题
4、<p></p>---段落,被它所包含的文本,自成一个段落,且拥有行间距
5、<br/>--换行,相当于回车符
6、<b></b>--加粗显示;<i></i>--斜体显示;<u></u>--下划线显示
7、<div></div>---内容独占一行,不会带来其他效果,常用于页面内容的分组,实现特定的样式定义
8、<span></span>---常用于标出一行中的某些文本,定义特定的样式
9、块级元素:(block)内容会独占一行,比如h1、p、div
行内元素:(inline)可以和其他行内标记位于同一行,比如b、i、u、span
块元素:可以嵌套块元素和行内元素
行内元素:不可嵌套块元素
三、图像和链接
1、图像 <imgsrc="url" width="" height=""/>
2、关于地址
对于web程序而言,不能使用d:\images\a.jpg这种路径--》资源文件,服务器端发来,位于缓存区域。应该使用相对路径或者绝对路径
3、相对路径:相对于当前网页文件而言
<img src="a.jpg" /> <imgsrc="images/b.jpg" /> <img src="../images/c.jpg" />
4、绝对路径(全路径)
<img src="http://www.jd.com/a.jpg" />
5、链接
<a href="http://www.tmooc.cn"target="_blank">点击的内容</a>
锚点链接 name="name"href="#name" target="_blank"
四、表格
1、用于显示网格数据、页面的简单布局
2、表格的相关标记:tr:tablerow--表行;td:table defination---单元格
3、常用属性
caption:表格标题 border:边框
width和height:设置给table,行和列的尺寸,自适应;也可设置给td
align:水平方向上的对齐left/center/right
valign:垂直方向上的对齐top/middle/bottom
4、不规则表格
---通过设置td的colspan或者rowspan属性:跨列或者跨行
五、列表
1、有序列表<ol><li></li></ol>
2、无序列表<ul><li></li></ul>
3、自定义列表 <dl><dt></dt><dd></dd></dl>
六、表单
1、定义一个表单,如果没有form,无法使用submit提交
2、 inputtype=text 普通文本框;password 密码框;radio单选框;checkbox 多选框;button 普通按钮;submit 提交按钮;reset 重置按钮;file 文件域
( name 组名、value 选项值、checked 默认选中项。
一组单选框组名必须相同。并且只能定义其中一项默认选中。)
3、select 选择菜单,option 定义菜单项,如果option不定义value,则将option中间的文本字段作为value提交。
默认为单行的下拉菜单。用size属性可定义行数。用multiple定义可多选
4、textarea 文本域多行文本框 rows 行数 cols 列数。<textarea>初始值</textarea>
5、label文本标签可以用for属性与某个表单元素绑定。for的值为其他元素的 id 属性的值。
css 部分
类选择器:类选择器使用“.”(英文点号)进行标识,后面紧跟类名.
id选择器:id选择器使用#进行标识,后面紧跟id名。
通配符选择器:用*号表示, * 就是 选择所有的标签 他是所有选择器中作用范围最广的,能匹配页面中所有的元素。
后代、子代选择器
只存在一级的父子关系:可以称之为子代或者后代
多于一级的嵌套关系:只能称之为后代 后代语法:selector1 selector2{}
例:div span{} /*匹配出所有div元素中的span元素*/ #content .redBack{}
子代作用:只能匹配出父子关系的子级元素
目的:不希望选择任意的后代元素,而是希望缩小范围,只选择某个具体的子元素时使用。 语法:selector1>selector2{}。
伪类选择器
作用:匹配元素的不同状态 语法: :作为开始的
分类:
1)链接伪类 作用:只匹配超链接的状态
:link:适用于尚未访问的超链接:visited:适用于访问过后的超链接
2)动态伪类
:hover:适用于鼠标悬停在html元素上的状态
:active:适用于html元素被激活时
:focus:适用于html元素获取焦点时的状态
边框属性
1、简写方式:border:width style color; (四个方向)
width:边框宽度;style:边框样式,实线(solid),虚线(dotted),虚线(dashed);color:边框颜色,还可以取 transparent
2、单边定义:border-left/right/top/bottom :width style color;
border-方向:width style color;
3、单属性定义:border-color : color; 四个边框的颜色
4、单边框 单属性定义:border-方向-属性:值;
方向:top / bottom / left /right; 属性:color / width / style
浮动定位
1、定位:元素在网页中该出现的位置,元素框对于其正常位置应该出现的位置。
2、定位属性:更改当前元素的定位方式。
属性:position 取值:static/ relative / absolute / fixed
3、偏移属性 top :+- bottom :+- left :+-right :+-
top和bottom同时出现的话以top为主;left和right同时出现的话以left为主。
该组属性能够帮助我们完成元素的位置移动
4、堆叠顺序 属性:z-index取值:无单位的数字
5、分类:
1、普通流定位。流:排列元素的一种方式;
又称为 文档流定位 ,是页面默认排列元素的一种方式。
页面中的块级元素:元素是从上到下的方式排列(每个元素独占一行)
页面中的行内元素:元素是从左到右的方式排列(可以通过左右外边距调整位置或距离,上下外边距不行)
弊端:块级元素无法在一行内显示多个,布局不好做。
*2、浮动定位 解决问题:让多个块级元素能够在一行内显示
注意:
1、块级元素浮动后 ,宽度会变成自适应
2、行内元素 浮动起来后,除具备以上特点外,它将变成块级元素
3、浮动元素的外边缘不会超过其父元素的边缘
4、已经浮动的元素不会相互重叠
5、浮动元素只能向佐或向右,不能上下浮动
6、当包含框的宽度不能承装下所有的浮动元素时,那么最后一个浮动元素会自动换行。
相对定位:元素框会相对于它原来的位置偏移某个距离。
要参考元素本身的位置然后去实现新的位置移动。
1、属性和值position:relative; 配合偏移属性一起使用改变当前元素的位置
通过 top / left / bottom / right 属性值实现位置的微调
2、注意: 1、相对定位不会改变元素的形状;2、元素原本所占的控件仍然会保留
绝对定位
1、绝对定位的元素会脱离文档流,不占据页面空间,即允许压住页面的其他的元素。
2、绝对定位的初始化位置:
1)相对于最近的已定位的祖先元素 来实现位置的初始化;2)如果元素没有已定位的祖先元素,那么就相对于最初的包含块body实现位置的初始化
固定定位
1、什么是固定定位:将元素固定在页面的某个位置处不动,会将元素脱离文档流,不占页面空间。
2、属性 和 值position:fixed; 通过 left / bottom / right / top 实现位置调整
6、静态定位(了解) position:static; 默认定位方式。

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马