@yinzhi6367 2015-02-28T10:59:51.000000Z 字数 7410 阅读 4967

Html&CSS

Coursera

学习资源

Codecademy 编程之美
w3school HTML元素清单
前端教程网入门
梦之都 - 网站设计与开发教程 ^{暂时无法访问，可能已关闭}

暂记表

words	full	mean
` `
`<q>`
`<blockquote>`
`<ul>`	unordered list
`<ol>`	ordered list
`<li>`	list item
`<>`
`<tbody>`		表格加载完才显示
`<br />`
`<>`
`<>`
特殊字符	替换符
<	&lt
>	&gt
&	&amp
	&nbsp

_{[1] Unicode 字符清单}

HTML

HTML 用来结构化网页. 我们用 HTML 来标记内容，用标记提供结构。我们称匹配标记和它们之间的内容为元素.

元素 = 开始标记 + 内容 + 结束标记

有些元素没有内容，如<br>、<img>，可以称之为 空元素.

有些元素前后都默认换行，这些特立独行的元素称为 块元素，有些则随波逐流，称为 内联元素.

属性

一种易于编写、易于组织的形式.通过使用属性，我们可以用各种信息个性化元素.

<!--如果car是个元素会怎么样？-->
<car make="BMW" model="Mini Cooper">My Car</car>

你可以像上面一样组织自己的元素和属性，可以不用<>的标记方式. 只是浏览器只懂事先指定好的元素和元素属性，只支持标准委员会通过的 HTML 准则.

组织

简单并灵活的文件组织形式能让你的工作更方便，最好在构建网站的早期就组织好文件结构，这样就不用改一堆相对路径.

在 html 中链接需要提供相对路径.

同级只需要提供文件名，表示和当前页面在同一根目录下.

子目录需要以类似/beverages/lounge.html的形式提供路径.

父目录需要以类似../lounge.html的形式提供路径.

_{+ (记住 Head First 中的文件组织图)}

注释

<!--注释文字-->

表格

<table summary="表格简介">
    <caption>标题文本<caption>
    <tr>
        <th></th>
        <th></th>
    <tr>
    <tr>
        <td></td>
        <td></td>
        ...
    </tr>
...
</table>

表单

网站使用HTML表单(form)与用户交互。表单可以把浏览者输入的数据传送到服务器端.

简单的表单

<form method="传送方式(get/post)" action="服务器文件(如save.php)">
    <label for="username">账户：</label>
    <input type="text" name="myName" />
    <br />
    <label for="pass">密码：</label>
    <input type="password" name="pass" />
</form>

文本域

用于提供多行文本输入

<form action="save.php" method="post">
    <label>简介：</label>
    <textarea cols="50" rows="10">多行输入框提示...</textarea>
    <input type="submit" value="确定" name="submit" />
    <input type="reset" value="重置" name="reset" />
</form>

单选框、复选框

当checked="checked"时，该选项被默认选中.
同一组的单选按钮，name一致才起单选作用.

<form name="iForm" method="post" action="save.php">
<!-- 单选框 -->
    你是否喜欢旅游<br />
    <input type="radio" name="radioLove" value="喜欢" checked="checked">喜欢
    <input type="radio" name="radioLove" value="喜欢">不喜欢
    <input type="radio" name="radioLove" value="喜欢">无所谓
    <br /><br />
    你对哪些运动感兴趣?<br />
    <input type="checkbox" name="checkbox1" value="跑步">跑步
    <input type="checkbox" name="checkbox2" value="打球">打球
    <input type="checkbox" name="checkbox3" value="登山">登山
    <input type="checkbox" name="checkbox4" value="健身">健身
</form>

下拉列表框

<form name="iForm">
    <label>爱好:</label>
    <select>
<!-- select 属性 multiple="multiple" 可以实现Ctrl+单击的多选框 -->
        <option value="向服务器提交的值">显示的值</option>
        <option value="读书">读书</option>
        <option value="编程" selected="selected">编程</option>
    </seltct>
</form>

提交按钮

<input type="submit" value="提交">

重置按钮

<input type="reset" value="重置">

label

改进可用性，将标签内容和相关控件关连.

<label for="控件id名称">male</label>
<input type="radio" name="sex" id="male">

当你点击到label内容区域，也会激活radio的选项.

input

id是唯一标识符，不允许有重复值；
name用来标识html标签，但允许有重复值；
value代表某个html标签的值.

name 相当于控件名称，不影响网页功能实现。但是，当我们需要把控件关联的数据传递到后台数据库，就必须设置name属性，否则这个值没办法传递到服务器上进行保存.
value 是按钮上显示的文本或输入字段初始值.
id 用于前台程序（css、javascript）编号，让它为不同id的元素设置不同样式、响应动作.

URL

http:¹//codecademy.com²/learn.html³
协议://网站名/绝对路径

当Web服务器收到如下链接：

http://www.codecademy.com

会自动在末尾加/，并在目录中定位默认文件，通常默认文件名为index.html或default.html.

所以提交上面的简写时，服务器会返回

http://www.codecademy.com/index.html

_{注：通常不在链接中加上 index.html，这样的绝对路径缺乏容错性：服务器默认的可能是 default.html，也有可能页面由脚本编写，网页使用 index.php}

相对路径只能用于链接到同一网站内的页面，但它可以确保网站移动或更名后不出问题，因为所有路径都是相对的.

所以，使用相对路径来链接你的本地网页，使用URL来链接其它网站的页面.

除URL外，还有file、mail等协议.

一般web服务器在大多数情况下默认80端口接受请求.有时web服务器会设定一个不同的端口来接受请求，http://www.mydomain.com:8070/index.html中，8070就是指定端口，把网站名比作地址，端口就是改地址的邮箱号码.

CSS

css 样式由选择符和声明组成，声明又由属性和值组成.

选择符{属性:值}

同一选择符下的声明，用;分隔.

注释

/*注释字段*/
p{
    font-size:12px;
    color:red;
}

内联式、嵌入式和外部式css

内联式就是直接写在现有html标签中

<span style="color:blue">超酷的互联网</span>

嵌入式就是嵌入在现有html文件的<head></head>之间

<head>
...
<style type="text/css">
    span{
        color:blue
    }
</style>
...
</head>

外部式就是写在单独的外部.css样式文件里，并在<head></head>内将css样式文件链接到html文件内.

<html>
...
<link ref="css文件名.css" rel="stylesheet" type="text/css">
...
</html>

一般情况下，三种方法的优先级遵循就近原则（离被设置元素越近优先级别越高），即 内联式 > 嵌入式 > 外部式

CSS选择器

css样式声明由两部分组成：

选择器{
    样式;
}

选择器指明{样式}的作用对象.

标签选择器

P{
    font-size:12px;
}

类选择器

首先在标签中用class="类选择器名称"为标签设置一个类.

.类选择器名称{css样式代码;}

id选择器

首先为标签设置id="id名称"

#id选择器名称{css样式代码;}

同一个id选择器只能在一个文档中用于一个对象；类选择器可以使用多次，且对于同一个对象可以用多个类选择器.

子选择器

用>选择指定标签的第一级子元素

<p class="first">'理论'是你知道是这样，但它却不好用。'实践'是它很好用，但你不知道是为什么，<span>程序员将理论和实践结合到一起：<span>既不好用，也不知道是为什么。</span></span>

.first>span{border:1px solid red;}只会对.first类第一级子元素span的内容 程序员将理论和实践结合到一起：既不好用，也不知道是为什么 起作用.

包含选择器

加入选择所有子后代元素.

.first span{color:red;}

通用选择器

匹配html中所有标签元素

*{color:red;}

伪类选择符

并非给html标签设置样式，而是给标签的某种状态设置样式

a:hover{
    color:red;
    font-size:20px
}

分组选择符

同时为多个标签元素设置同一个样式时，可以使用分组选择符：

h1,span{
    color:red;
}

CSS选择器的权值

继承

css的某些样式具有继承性，如：

<p style="color:purple;border:1px solid red;">优秀的判断力来自经验，但<span>经验来自于错误的判断</span></p>

继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代。

有些css样式是不具有继承性的，如 border:1px solid red;

特殊性

权值规则：

1. 标签的权值为1，类选择符的权值为10，ID选择符的权值为100
2. 继承也有权值但很低，有的文献提出它只有0.1
3. 相同权值的css样式，就近原则

p{color:red;}   /* 权值为1 */
p span{color:green;}    /* 权值为1+1=2 */
.warning{color:white;}  /*权值为 10 */
p span.warning{color:purple;}   /*权值为 1+1+10=12 */
#footer .note p{color:yellow;}  /* 权值为 100+10+1=111 */

层叠

如果对同一个元素有多个 css样式，且它们具有相同权值，怎么办？ 就近原则

重要性

做网页时，有些特殊情况需要为某些样式设置具有最高权值，怎么办？!important

p{color:red!important;}
p{color:green;}

注意!important要写在分号前面

当网页制作者没有设置css样式时，浏览器会按照自己的一套样式显示网页，并且用户也可以在浏览器中设置自己习惯的样式，比如加大字体，mactype效果。这时的优先级为：

浏览器默认样式 < 网页制作者样式 < 用户自定义样式

但!important是个例外，权值高于用户自定义样式

权值表

类型	权值
标签选择器	1
类选择器	10
id选择器	100
`!important`	最高权值
`*`	<1
继承	0.1

CSS 格式化排版

字体

不要设置不常用字体，因为如果用户本地电脑上没有安装你设置的字体，就会显示浏览器默认字体

现在一般网页喜欢设置微软雅黑：

body{
    font-family:"Microsoft Yahei";  
    /* 字体名称包含空格时建议加上引号 */
}

也可以用 "微软雅黑"，兼容性没有 "Microsoft Yahei"好.

颜色、加粗、斜体、下划线等效果示例：

p{
    font-size:12px;
    color:#666
    font-weight:bold; /* 粗体 */
    font-style:italic; /* 斜体 */
    text-decoration:underline; /* 下划线 */
}

删除线

p{
    text-decoration:line-through;
}

段落缩进、行间距

p{
   text-indent:2em; /* 缩进两个文字长度 */ 
   line-height:1.5em;
}

字间距和字母间距：

span{
    letter-spacing:50px; /* 基本字符间距 */
    word-spacing:50px; /* 英文单词间间距 */
}

对齐

h1{
    text-align:center; /*常用 center,left,right*/
}

元素分类

◇ 块级元素

常见块级元素有： <div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<table>,<address>,<bolckquote>,<form>

特点：

每个块级元素都从新的一行开始，并且其后的元素另起一行.
元素的高度、宽度、行高、顶边距、底边距都可设置.
元素宽度在不设置的情况下，是它本身父容器的100%.

◇ 内联元素

常见内联元素有：<a>,<span>,<br>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>

特点：

和其它元素在同一行.
元素的高度、宽度、行高、顶边距、底边距不可设置.
元素宽度就是它包含的文字或图片的宽度，不可改变.

◇ 内联块状元素

常见的内联块状元素有：<img>,<input>

特点：

和其它元素在一行上.
元素的高度、宽度、行高、顶边距、底边距都可设置.

块级元素和内联元素的转换

a{
    display:block;  /* 将内联元素a转换为块元素 */
}
table{
    display:inline; /* 将块元素转换为内联元素 */
}
address{
    display:inline-block  /* 将元素设置为内联块级元素 */
}

盒模型

div{
    width:200px;
    height:18px;
    padding:20px 20px 20px 20px;
    margin:20px 10px 15px 30px;
    border:2px solid red;
    /* 可以分开为 border-width border-style border-color */
    /* border-style 常见有 solid（实线）dotted（点线）dashed（虚线）*/
    /* 可以为border-top、bottom、left、right分别做设置,margin 和 padding 亦可分别设置 */
}

一个元素的实际宽度 = margin + border + padding + 内容width

margin 可以理解为盒模型的上下边距，padding 是填充.

布局模型

流动模型（Flow）

流动（Flow）是默认的网页布局模式。

块状元素在所处的包含元素内自上而下按顺序垂直延伸分布（块状元素以行的形式占据位置）
内联元素在所处的包含元素内从左到右水平分布

浮动模型（Float）

层模型（Layer）

颜色值

最初用英文命令颜色：

p{color:red;}

颜色不够用，于是有了RGB颜色,由red、green、blue三基色的比例来配色，每一项的值可以是 0~255 的整数：

p{color:rgb(133,45,200);}

也可以是 0%~100% 的百分数：

p{color:rgb(20%,33%,25%);}

现在 比较普遍使用的是十六进制颜色,原理也是 RGB 设置，但每一项的值由0-255 变成了十六进制 00-ff

p{color:#00ffff;}

长度值

网页设计中常用到的长度单位有 px、em、%,这三种单位 都是相对单位。

1.像素

像素指显示器上的小点（CSS规范中假设“90像素=1英寸”），实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

2.em

就是本元素给定字体的 font-size 值

p{font-size:12px;
  text-indent:2em;
}

上面是段首缩进 24px（即两个字体大小的距离），如果 font-size 设置为10，则缩进 20px.

如果给 font-size 设置单位为 em，则继承父级的 font-size.

html

<p>我们这个世界的一个问题是，<span>蠢人信誓旦旦，智人满腹狐疑。</span></p>

css

p{font-size:14px;}
span{font-size:0.8em;}

结果 span 中的字体大小就为 14*0.8 = 11.2px

3.百分比

p{font-size:12px;line-height:130%;}

设置行间距为字体的130%（12*1.3=15.6px）

单词表

words	full	mean
HTML	Hypertext Markup Language	超文本标记语言它是什么
CSS	Cascading Style Sheet	级联样式表长什么样
href	hypertext reference	超文本引用 where to go
src	source	it tells the link where the picture comes from
br	break
wbr		可拆分单词

words	full	mean

技巧

浏览器忽略大多数空白，你可以用它们让你的 HTML 更具有可读性.

https

Hypertext Transfer Protocol Secure 是超文本传输协议（http）和 SSL\TLS 的组合，用以提供加密通讯及对网络服务器身份的鉴定，简单的说就是加密的 http协议。大家都知道 http 默认采用80端口，而https协议默认为443端口。

telnet ×.×.×.× 443

对于dns污染的

nslookup -vc facebook.com

扩展阅读

HTTP协议详解