@yinzhi6367
2015-02-28T10:59:51.000000Z
字数 7410
阅读 4967
Coursera
words | full | mean |
---|---|---|
|
||
<q> |
||
<blockquote> |
||
<ul> |
unordered list | |
<ol> |
ordered list | |
<li> |
list item | |
<> |
||
<tbody> |
表格加载完才显示 | |
<br /> |
||
<> |
||
<> |
||
特殊字符 | 替换符 | |
< | < | |
> | > | |
& | & | |
  | ||
[1] Unicode 字符清单
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的元素设置不同样式、响应动作.
http:1//codecademy.com2/learn.html3
协议://网站名/绝对路径
当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 样式由选择符和声明组成,声明又由属性和值组成.
选择符{属性:值}
同一选择符下的声明,用;
分隔.
/*注释字段*/
p{
font-size:12px;
color:red;
}
内联式就是直接写在现有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样式声明由两部分组成:
选择器{
样式;
}
选择器指明{样式}
的作用对象.
标签选择器
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的某些样式具有继承性,如:
<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 |
字体
不要设置不常用字体,因为如果用户本地电脑上没有安装你设置的字体,就会显示浏览器默认字体
现在一般网页喜欢设置微软雅黑
:
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>
特点:
◇ 内联元素
常见内联元素有:<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 |
---|---|---|
Hypertext Transfer Protocol Secure 是超文本传输协议(http)和 SSL\TLS 的组合,用以提供加密通讯及对网络服务器身份的鉴定,简单的说就是加密的 http协议。大家都知道 http 默认采用80端口,而https协议默认为443端口。
telnet ×.×.×.× 443
对于dns污染的
nslookup -vc facebook.com