笔记
2017-08-27 本文已影响0人
maocy
Html中: <!--注释语句-->
CSS：/*注释语句*/ 单行//
css 样式由选择符和声明组成，而声明又由属性和值组成
在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。
当有多条声明时，中间可以英文分号“;”
http://www.imooc.com/code/611
html
快速参考手册
http://www.w3school.com.cn/html/html_quick.asp
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
<br />
<hr />
＃超链接
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
<a href="http://www.w3school.com.cn">This is a link</a>
有两种使用 <a> 标签的方式：
１ 通过使用 href 属性 - 创建指向另一个文档的链接
２ 通过使用 name 属性 - 创建文档内的书签 ＃跳转
<a href="#C4">查看 Chapter 4。</a>
<h2>Chapter 3</h2>
<h2><a name="C4">Chapter 4</a></h2>
＃target指定位置显示
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
#邮件链接：
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
#图片作为链接
<a href="/example/html/lastpage.html">
</a>
#图片
1 背景图片
<body background="/i/eg_background.jpg">
gif 和 jpg 文件均可用作 HTML 背景。
如果图像小于页面，图像会进行重复。
2 排列图片
<p>图像  在文本中</p>
middle/top
3 浮动图片
<p>
<img src ="/i/eg_cute.gif" align ="left">
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。right
</p>
4 图片映射
#表格
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
#列表
1 无序列表
<ul type="disc">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
2 有序列表
<ol type="A">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
3 嵌套列表
4 自定义列表
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
HTML <div> 和 <span>
#可以通过 <div> 和 <span> 将 HTML 元素组合起来。
大多数 HTML 元素被定义为块级元素或内联元素。
1 块级元素
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <table>
2 内联元素
内联元素在显示时通常不会以新行开始。
例子：<b>, <td>, <a>, <img>
*HTML <div> 元素
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
*HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
HTML 类
对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。
为相同的类设置相同的样式，或者为不同的类设置不同的样式。
<div class="cities">
span.red {color:red;}
HTML布局
1 使用 <div> 元素的 HTML 布局
<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。
2 使用 HTML5 的网站布局
HTML5 提供的新语义元素定义了网页的不同部分：
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题
HTML 框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
框架结构标签（<frameset>）
框架结构标签（<frameset>）定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积
HTML 背景
<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">
HTML实体
大于号 >
CSS
- 内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
- 内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。在 head 部分通过 <style> 标签定义内部样式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
- 外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
[看10遍教程不如写一遍代码--HTML入门demo小结](http://www.cnblogs.com/yanhaoqi/p/5958042.html)
<!-- html是网页的根标签，网页中所有内容都要写到html标签中，一个页面中只能有一个html标签 -->
<!-- head中的内容不会在页面中显示，它用来告诉浏览器如何解析网页 -->
<!-- title用来设置整个网页的标题（主要内容）
搜索引擎在检索一个网页时，将会最先检索title中的内容，注意title中的内容不要太长，尽量在25个文字左右
-->
<!-- body是网页的主体，网页中所有可见的内容都要编写到body中 -->
<!-- 即使网页编写的不符合规范，浏览器也会尽最大的努力正确的解析页面 -->
<!-- 常用的标签 -->
<!-- 标题标签 -->
<!-- 在html中一共有六级标题标签，h1~h6 h1最大，h6最小 ，但是我们并不关心它的显示大小
h1~h6叫语义化标签，h1表示一级标题，它的重要性仅次于title，对于搜索引擎检索是很重要
注意，一般情况下一个页面中只能有一个h1
h1以后的标题标签重要性越来越低，一般我们使用标题就到h3 h3以后的很少用
-->
<!-- 段落标签
p标签标示的是一个段落，它里面的内容，会单独占一行
并且它会默认在段落的前后各加一个换行
-->
<!-- 在HTML中，多个连续的空格或者是换行，浏览器只会解析成一个空格
换行时需要使用标签来操作
-->
<!--
水平线
hr标签可以在页面中的指定位置，输出一条水平线
-->
<!-- 在HTML中一些特殊符号是不能直接编写的比如小于号 大于号不能和字母一块
我们需要使用转义字符（实体）来表示这些特殊符号
实体的语法：
&实体的名字;
小于号：
<
大于号:
>
空格：
版权声明：
©
-->
<!-- meta用来设置网页的元数据，比如可以用来设置网页的编码 -->
<meta charset="utf-8" />
<!-- 我们还可以使用meta来设置网页的关键字 -->
<!-- name属性用来设置，属性的名字。 content用来设置属性的值 -->
<!-- 我们可以同时为一个网站设置多个关键字，多个关键字之间使用,隔开 -->
<meta name="keywords" content="美女,帅哥,HTML5,Java" />
<!-- meta还可以用来设置网页的描述（简介） -->
<!-- 搜索引擎在检索页面时，会检索keywords和description中的内容
但是这些内容不会影响网站在搜索引擎中的排名
-->
<meta name="description" content="专注于搜集各种美女帅哥的图片" />
<!-- meta还可以用来做请求的重定向 -->
<!-- http-equiv="refresh" 固定值
content="秒数;url=目标地址"
-->
<meta http-equiv="refresh" content="5;url=demo8.html" />
<!-- HTML的注释不能嵌套所有语言的注释都不能嵌套-->
<!-- 标签必须正确结束 -->
<!-- 要么成对出现 -->
<!-- 属性必须有值，且值必须加引号 -->
<!-- html中不区分大小写 , 但是所有的规范里都推荐我们使用小写 -->
<!-- 标签可以嵌套，但是不能交叉嵌套 -->
<!-- 可以通过target属性来设置在哪里打开目标页面
_self 表示在当前页面打开链接
_blank 表示在一个新的窗口中打开
- 我们还可以将target的值设置为一个内联框架的名字
这时它会在指定的内联框架中打开新的页面
-->
<!-- a的href属性可以设置为一个 #id属性值 这样点击超链接以后，网页会自动定位到该id对应的元素的位置 -->
<!-- 在每一个元素中都可以设置一个id属性，id是标签的唯一标识，在同一个页面中不能出现相同的id属性值 -->
<!-- 我们如果将超链接的href设置#，则超链接点击后会自动的回调当前页面最上边 -->
<!-- 这种发送邮件的连接，href应该以mailto:开头，后边跟着一个电子邮件地址，这样点击以后将会打开系统中默认的邮件客户端向目标地址发送邮件-->
<!-- 元素之间的关系
父元素
- 直接包含子元素的元素我们称为父元素
子元素
- 直接被父元素包含的元素我们称为子元素
祖先元素
- 直接或间接包含后代元素的元素我们称为祖先元素（父元素也是祖先元素）
后代元素
- 直接或间接被祖先元素包含的元素我们称为后代元素（子元素也是后代元素）
兄弟元素
- 拥有相同的父元素的元素我们称为兄弟元素
-->
<span> 在CSS定义中属于一个行内元素,在行内定义一个区域，也就是一行内可以被 <span> 划分成好几个区域，从而实现某种特定效果。 <span> 本身没有任何属性,可以在span中对文字样式进行设置。 <div> 在CSS定义中属于一个块级元素 <div> 可以包含段落、标题、表格甚至其它部分。这使DIV便于建立不同集成的类，如章节、摘要或备注。在页面效果上，使用 <div> 会[自动换行](https://www.baidu.com/s?wd=%E8%87%AA%E5%8A%A8%E6%8D%A2%E8%A1%8C&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YYPj79uWF-n1P-nHKhrAck0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPj0vPjnYPWcY)，使用 <span> 就会保持同行。
<!-- id和class
id和class属性值必须以字母开头
id选择器 #id
class选择器 .class
在前端开发中，编写css时，一般我们选择使用 class选择器，尽量避免使用id选择器。
class属性用来为一个元素分组，页面中相同的class属性值可以出现多个，并且一个元素可以拥有多个class
-->
<!-- 标签中还支持一个属性，叫做title
一个元素设置了title属性以后，当鼠标引入到元素上边时，title中的文字会显示出来
-->
/*
:first-letter表示第一个字母
* */
p:first-letter{
color: red;
font-size: 30px;
}
/*
* :first-line表示的是第一行
*/
.p2:first-line{
background-color: yellow;
}
/*
* :first-child选中第一个子元素
* first-child是在所有的子元素中进行排序
*/
/*p:first-child {
background-color: yellowgreen;
}*/
/*
* :last-child可以选中页面中的最后一个子元素
*/
/*p:last-child{
background-color: royalblue;
}*/
/*
* :nth-child(位置)
* 可以找到指定位置的子元素，需要一个子元素的位置
* 如果位置写一个odd，则表示选中奇数行
* 如果写一个even，则表示选中偶数行
*/
/*p:nth-child(even){
background-color: red;
}*/
/*
* :first-of-type 在指定类型元素中找到第一个子元素
*/
<p class="p1">我是一个段落</p>
/*
* CSS的样式设置具有继承性
* 祖先元素上的样式会自动应用到他的后代元素中
* 但是并不是所有的样式都有继承性
* 比如：背景颜色就不能继承
*
* 特殊情况：
* 如果给body设置背景颜色，它会默认将背景颜色应用到其父元素上<html>
*/
/*p{
font-size: 60px;
background-color: yellow;
}*/
/*
* 选择器的优先级（权重）
* 当我们使用不同的选择器，为同一个元素设置同一个样式时，到底要应用哪个选择器设置的样式呢？
* 这个是由选择器的优先级（权重）来决定
*
* 注意当一个元素上有相同的样式产生冲突时，会根据选择器的优先级来决定显示那个样式，优先级高的优先显示
* 优先级的计算，需要将所有的选择器相加来计算，如果优先级一样，则谁在下边用谁
* 优先级的累加，不能超过选择器的最高数量级
*
*
* 内联样式：
* 内联样式的优先级最大，内联样式会优先于所有的选择器显示
* 优先级是 1000
* ID选择器：
* 优先级是 100
* 类和伪类选择器：
* 优先级是 10
* 元素选择器：
* 优先级是 1
* 通配选择器（*）：
* 优先级是 0
* 继承来的样式：
* 没有优先级
*
* 我们可以在一个样式的后边添加一个 !important 来将该样式设置为优先级最高的样式，这样他会优先于所有的样式显示
* 但是在开发中和内联样式一样，尽量避免使用!important
*/
