HTML
标签
-
meta
- 标签永远位于
文档的头部,即head元素内部 - 可提供有关页面的元信息,如针对搜索引擎和更新频度的描述和关键词
- 标签永远位于
-
charset
- 这个属性规定在外部脚本文件中使用的字符编码
如果外部文件中的字符编码与主文件中的编码方式不同,就要用到charset属性- 默认的字符编码是 ISO-8859-1
-
- 标记了一个段落
- p元素会自动在其前后创建一些空白.浏览器会自动添加这些空间
-
input
- 用于搜集用户信息
// 规定input元素的值 <input value="请输入姓名..."> -
a
- 一般鼠标放到一个页面显示
小手的时候,绝对有a标签 - 用于定义
超链接,用于从一张页面链接到另一张页面 - 这个元素最重要的属性是
href属性,它指示链接的目标 target = "_blank"
// _blank 在新窗口中打开链接 <a href="http://baidu.com" target="_blank">百度一下,你就知道</a> <br> // _parent 在父窗体中打开链接 <a href="http://baidu.com" target="_parent">百度一下,你就知道</a> <br> // _self 在当前窗体中打开链接,此为默认值 <a href="http://baidu.com" target="_self">lalala</a> <br> // _top 在当前窗体打开链接,并替换当前的整个窗体(框架页),一个对应的框架页的名称,在对应框架页中打开 <a href="http://baidu.com" target="_top">百度一下,你就知道</a> - 一般鼠标放到一个页面显示
-
p
- 标签定义段落
- p元素会自动在其前后创建一些空白,浏览器会自动添加这些空间,您也可以在样式表中规定
-
section
- 标签定义文档中的节(section,区段).比如章节,页眉,页脚,或文档中的其他部分
- 属性
- cite
- 值
- section的URL,假如section摘自web的话
- cite
-
src
- src属性规定外部脚本文件的URL
- URL
- 外部脚本的URL.可能的值有
- 绝对URL - 指向其他站点(如 src="www.example.com/example.js")
- 相对URL - 指向站点内的文件(如src="/scripts/example.js")
- 外部脚本的URL.可能的值有
- URL
- src属性规定外部脚本文件的URL
-
src和href的区别
href是引用,相当于iOS中的import,不是必须的src是引入,是必须的,没有这个资源,标签就用不起来- 给
#表示跳转到当前界面
-
border: 5px dashed purple
- 边框5px 边框为虚线,颜色紫色
-
border: 5px solid purple
- 边框5px 边框为实线,颜色紫色
-
line-height
- 这个属性设置
行间的距离 (行高) - 不允许使用负值
- 该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
- line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
- 原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。
- 这个属性设置
-
text-align: right
- 右对齐
-
class
- 这个属性用来
规定元素的类名 - 大多数时候用于指向样式表中的类. 不过,也可以利用它通过JavaScript来改变带有指定class的HTML元素
- class 属性不能在以下 HTML 元素中使用：base, head, html, meta, param, script, style 以及 title。
- 可以给 HTML 元素赋予多个 class，例如：
- 类名不能以数字开头！只有 Internet Explorer 支持这种做法。
- 这个属性用来
-
box-shadow: 0 0 2px orangered
-
float: right;
-
font-family
- 规定元素的字体系列
- font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。
- 有两种类型的字体系列名称：
- 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace" - 提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。
- 注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。
- 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
-
ul
- 大的,是列表的盒子
无序列表,ul里面放li
-
ol
- 大的,是列表的盒子
有序列表,ol里面放li- 有个属性type,可以改变序列号的值
-
hr
分割线
-
li
- 标签定义列表项目
- 标签可用在有序列表
<ol>和无序列表<ul>中
-
display
- 该属性规定元素应该生成的框的类型
- 这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。
-
响应式布局
- 它是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.
- 这个概念是为解决移动互联网浏览而诞生的
-
相对路径
- 资源在当前的项目中
- ./ ../ ././
-
绝对路径
- 资源不在当前的项目中 网络上 本地
- http:// https:// ftp:// file://
-
div
- 优势: 可以自定义
- div本身很纯洁
HTML5新增标签
- HTML5新增了27个标签元素,废弃了16个标签元素
- 主要包括如下:
- 结构性标签
article文章主题内容(博客,帖子,..)header标记头部区域内容footer标记脚部区域内容section区域章节表述nav菜单导航,链接导航
- 级块性标签(很少用)
- 行内语义性标签
meter特定范围内的数值,如工资,数量,百分比time时间值progress进度条,可用max,min,step进行控制,完成对进度的表示和监听video视频元素,用于视频播放,支持缓冲预载和多种视频媒体格式audio音频元素,用于音频播放,支持缓冲预载和多种音频媒体格式
- 交互性标签
CSS
-
Cascading Style Sheets, 层叠样式表
-
美化网页
-
编写格式
- 键值对的
// 左边属性,右边值 color: red -
CSS的3种书写形式
-
第一种:
行内样式(也叫内联样式)- 直接在
标签的style属性中书写
<body style="color: red;"> - 直接在
-
第二种:
页内样式- 在
本网页的style标签中书写
<style> body { color: red } <style> - 在
-
第三种:
外部样式- 在
单独的CSS文件中书写,然后在网页中用link标签引用
<link rel="stylesheet" href="index.css"> - 在
-
-
CSS的规律
- 就近原则
- 网页从上到下依次执行
- 叠加原则
- 就近原则
-
网站
- N个网页
- 服务器
- 数据库
- ...
-
CSS的两大重点
- 属性
- 通过属性的复杂叠加才能做出漂亮的网页
- 选择器
- 通过选择器找到对应的标签设置样式
- 属性
-
CSS中的选择器
-
选择器的作用
- 选择对应的标签,为之添加样式
-
标签选择器- 关键字标签- 根据标签名找到标签
<div>div1</div> <div>div2</div>// 注意:这里不一定是div,也可能是别的标签 div { color: red } -
类选择器- 关键字class,"."加上"类名"<p class="high">第一段文件</p> <p>第二段文字</p> <div class="high">div1</div> <div>div2</div>.high { color: red } -
id选择器-"#"加上"id名称"<p id="first">第一段文件</p> <p>第二段文字</p>#first { color: red; } -
并列选择器-","隔开<p class="high">第一段文件</p> <p>第二段文字</p> <div class="high">div1</div> <div>div2</div>div , .high { color: red; } -
复合选择器-精准定位:"标签名" + "." + "class名",中间不是用的","<p class="high">第一段文件</p> <p>第二段文字</p> <div class="high">div1</div> <div>div2</div>div.high { color: red; } -
后代选择器<div> <p>div里面的p</p> <span> <p>div里面的span里面的p</p> </span> </div> <p>外面的p</p>div p { color: red; } -
相邻兄弟选择器<div> <p>div里面的p</p> <span> <p>div里面的span里面的p</p> </span> <div> <p>与div相邻的p</p> <p>与p相邻的p</p>div + p { color: red; } -
属性选择器// 第一种写法 <div name="jack">1111</div> <div name="rose">2222</div> <div>3333</div>// 第一种写法 div[name] { color: red; }<!--第二种写法--> <div name="jack">1111</div> <div name="rose" age="20">2222</div> <div age="10">3333</div><!--第二种写法--> div[name][age] { color: red; } -
伪类-触发某些操作的时候:active- 向被激活的元素添加样式
:focus(掌握)- 向拥有键盘输入焦点的元素添加样式
- 一般用在input上
:hover(掌握)- 当鼠标悬浮在元素上方时,向元素添加样式
:link- 向未被访问的链接添加样式
:visited- 向已被访问的链接添加样式
:first-child- 向元素的第一个子元素添加样式
:lang- 向带有指定lang属性的元素添加样式
-
伪元素:first-letter- 向文本的第一个字母添加特殊样式
:first-line- 向文本的首行添加特殊样式
:before- 在元素之前添加内容
:after- 在元素之后添加内容
-
-
选择器的优先级别
-
通配符<!--通配符: 1.优先级别非常低 2.性能比较差--> <style> * { } <style> -
css样式遵循的规律1.相同类型的选择器遵循: a.就近原则 b.叠加原则 2.不同类型的选择器遵循: a.选择器的针对性越强,它的优先级就越高 b.选择器的权值加到一起,大的优先;如果权值相同,后定义的优先 c.important(1000) > 内联 > id选择器(100) > 类选择器(10) | 伪类(10) | 属性选择(10) | 伪元素(10) > 标签选择器(1) > 通配符(0) > 继承
-
-
标签的类型
-
块级标签- 独占一行
- 能随时设置宽度和高度
- 如: div, p, h1, h2, ul, li
-
行内标签(内联标签)- 多个行内标签能同时显示在一行
- 宽度和高度取决于内容的尺寸
- 如: span, a, label
-
行内-块级标签(内联-块级标签)- 多个行内-块级标签可以显示在同一行
- 能随时设置宽度和高度
- 如: input, button
-
-
修改标签的显示类型
- CSS中有个
display属性,能修改标签的显示类型none: 隐藏标签block: 让标签变为块级标签inline: 让标签变为行内标签inline-block: 让标签变为行内-块级标签(内联-块级标签)
- CSS中有个
-
CSS属性
-
可继承属性-
父标签的属性值会传递给子标签
-
一般是
文字控制属性 -
如:
/// 1.这两个-所有标签都可继承 // 属性规定元素是否可见 visibility: hidden // 规定要显示的光标的类型(形状) cursor: move /// 2.内联标签可继承(w3school查询,太多了) line-height: 行高,用来做垂直居中 text-decoration: none 去掉下划线 /// 3.块级标签可继承 text-indent: 首行缩进 text-align: 水平居中 /// 4.列表标签可继承 list-style: 声明列表的属性,就是列表前面那个小圆点
-
-
不可继承属性- 父标签的属性值不能传递给子标签
- 一般是
区块控制属性 - 如
1.display: 2.background: 可设置背景图片和背景颜色 3.overflow: 处理超出的内容 4.盒子模型
-
-
盒子模型
-
content(内容)- 盒子里装的东西
- 网页中通常指文字和图片
- 属性如下:
1.height: 设置元素高度 2.max-height: 设置元素的最大高度 3.max- 设置元素的最大宽度 4.min-height: 设置元素的最小高度 5.min- 设置元素的最小宽度 6. 设置元素的宽度 -
padding(填充,内边距)- 属性
1.padding: 在一个声明中设置所有内边距属性 2.padding-bottom: 设置元素的下内边距 3.padding-left: 左内边距 4.padding-right: 右内边距 5.padding-top: 上内边距// 上, 右, 下, 左 padding: 10px 5px 15px 20px; // 上, 右＆左, 下 padding: 10px 5px 15px; // 上＆下, 右＆左 padding: 10px 5px // 所有的4个内边距都是10px padding: 10px -
border(边框)p { // 实线边框5px borde: 5px solid red; } // 设置边框圆角 border-radius -
margin(外边距)
-
-
CSS3新增特性
-
RGBA透明度- RGB取值: 从0255(OC中是01)
-
块阴影和圆角阴影1.box-shadow: h-shadow: [必须].水平阴影的位置,允许负值 v-shadow: [必须].垂直阴影的位置,允许负值 blur: [可选]. 模糊距离 spread: [可选].阴影的尺寸 color: [可选].阴影的颜色.请参阅CSS颜色值 inset: [可选].将外部阴影(outset)改为内部阴影 2.text-shadow -
圆角1.border-radius
-
-
CSS布局
- 默认,所有网页布局都是在
标准流中- 标准流: 从上到下,从左到右
脱离标准流-
任何标签,一旦脱离标准流,就会被强制转换为行内块级标签 -
float属性常用取值: 1.left: 浮动到父标签的最左边 2.right: 浮动到父标签的最右边 -
position属性// 子绝父相 常用取值: 1.absolute: 绝对定位, 相对于static定位以外的第一个父元素进行定位 2.fixed: 绝对定位, 相对于浏览器窗口进行定位 3.relative: 相对定位, 相对于其正常位置进行定位 4.static: 默认值. 没有定位,元素出现在正常的流中 5.inherit: 规定应该从父元素继承position属性的值 -
内容居中-
所有标签水平居中
1.行内标签 和 行内-块级标签: 在父标签中设置 text-align: center; 2.块级标签: 在自身设置 margin: 0 auto; -
所有标签垂直居中
1.行内标签 和 行内-块级标签: 在父标签中设置 line-height 2.块级标签: position: absolute; left: 50% top: 50%; transform: translate(-50%, -50%);
-
-
box-sizing
- 以特定的方式定义匹配某个区域的特定元素,默认值content-box
- 将box-sizing设置为
border-box,可以把边框和内边距放入框中
-
- 默认,所有网页布局都是在