update
This commit is contained in:
qianguyihao
parent
59d3b6bc0c
commit
e1efed3d5b
@ -56,13 +56,13 @@ web标准总结：
|
||||
|火狐|gecko|
|
||||
|Safari|webkit|
|
||||
|
||||
PS：「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲染引擎决定了浏览器如何显示网页的内 ，容以及页面的格式信息。**渲染引擎是兼容性问题出现的根本原因。**
|
||||
PS：「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。**渲染引擎是兼容性问题出现的根本原因。**
|
||||
|
||||
|
||||
|
||||
### Sublime Text 的使用
|
||||
|
||||
详情请移步至：[Sublime Text使用技巧](https://github.com/smyhvae/tools/blob/master/02-Sublime%20Text%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7.md)
|
||||
详情请移步至：[Sublime Text使用技巧](https://github.com/smyhvae/tools/blob/master/01-%E4%B8%AA%E4%BA%BA%E6%95%B4%E7%90%86/02-Sublime%20Text%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7.md)
|
||||
|
||||
|
||||
|
||||
@ -74,13 +74,14 @@ PS：「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲
|
||||
## 一、HTML的介绍
|
||||
|
||||
### 1、HTML的概述：
|
||||
|
||||
**html**全称为HyperText Mackeup Language，译为<font color=#0000ff>**超文本标记语言**</font>，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式。比如字体什么颜色，大小等。
|
||||
- 超文本：音频，视频，图片称为超文本。
|
||||
- 标记 ：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。
|
||||
|
||||
**作用**：HTML是负责描述文档**语义**的语言。
|
||||
|
||||
**注意**：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(<font color=#0000ff>**没有编译过程**</font>)，HTML页面直接由浏览器解析执行。
|
||||
**注意**：HTML语言不是一个编程语言(有编译过程)，而是一个**标记语言**(<font color=#0000ff>**没有编译过程**</font>)，HTML页面直接由浏览器解析执行。
|
||||
|
||||
|
||||
|
||||
@ -113,29 +114,34 @@ XHTML与HTML4.0的标记基本上一样。
|
||||
XHTML是<font color="blue">**严格的、纯净的**</font>HTML。
|
||||
|
||||
**编写XHTML的规范：**
|
||||
|
||||
（1）所有标记元素都要正确的嵌套，不能交叉嵌套。正确写法举例：`<h1><font></font></h1>`
|
||||
|
||||
（2）所有的标记都必须小写。
|
||||
|
||||
（3）所有的标记都必须关闭。
|
||||
双边标记：`<span></span>`
|
||||
单边标记：`<br>` 转成 `<br />` `<hr>` 转成 `<hr />`还有`<img src=“URL” />`
|
||||
|
||||
- 双边标记：`<span></span>`
|
||||
- 单边标记：`<br>` 转成 `<br />` `<hr>` 转成 `<hr />`还有`<img src=“URL” />`
|
||||
|
||||
（4）所有的属性值必须加引号。`<font color="red"></font>`
|
||||
|
||||
（5）所有的属性必须有值。`<hr noshade="noshade">`、`<input type="radio" checked="checked" />`
|
||||
|
||||
（6）XHTML文档开头必须要有DTD文档类型定义
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 3、HTML的网络术语
|
||||
|
||||
- 网页 ：由各种标记组成的一个页面就叫网页
|
||||
- 主页(首页) : 一个网站的起始页面或者导航页面
|
||||
- 网页 ：由各种标记组成的一个页面就叫网页。
|
||||
- 主页(首页) : 一个网站的起始页面或者导航页面。
|
||||
- 标记： `<p>`称为开始标记 ，`</p>`称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
|
||||
- 元素：`<p>内容</p>`称为元素.
|
||||
- 属性：给每一个标签所做的辅助信息。
|
||||
- xhtml： 符合XML语法标准的HTML。
|
||||
- dhtml：dynamic，动态的。`javascript + css + html`合起来的页面就是一个dhtml。
|
||||
- http：超文本传协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP 邮件传输协议，ftp:文件传输协议。
|
||||
- http：超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP 邮件传输协议，ftp:文件传输协议。
|
||||
|
||||
|
||||
### 4、HTML的编辑工具
|
||||
@ -143,7 +149,7 @@ XHTML是<font color="blue">**严格的、纯净的**</font>HTML。
|
||||
- NotePad：记事本。
|
||||
- EditPlus：语法高亮显示。技巧： 根据颜色判断单词是否出错 （不是100%）。不好的地方：没有代码提示。
|
||||
- UltraEdit：根据颜色判断单词是否出错，可以显示2进制数据。
|
||||
- Sublime：新一代的代码编辑器。
|
||||
- Sublime Text：新一代的代码编辑器（用的最多）。
|
||||
- dw(dreamweaver，专业工具) ：建立WEB站点和应用程序的专业工具。它将布局功能、开发工具、代码编辑组合在一起。有代码提示。
|
||||
|
||||
PS：后缀名不能决定文件格式，只能决定打开文件打开的方式。
|
||||
@ -186,7 +192,7 @@ PS：后缀名不能决定文件格式，只能决定打开文件打开的方式
|
||||
- 自然界中所有的颜色都可以用红、绿、蓝(RGB)这三种颜色波长的不同强度组合而得，这就是人们常说的三原色原理。
|
||||
- RGB三原色也叫加色模式，这是因为当我们把不同光的波长加到一起的时候，可以得到不同的混合色。例：红+绿=黄色，红+蓝＝紫色，绿+蓝=青
|
||||
- 在数字视频中，对RGB三基色各进行8位编码就构成了大约1678万种颜色，这就是我们常说的真彩色。所有显示设备都采用的是RGB色彩模式。
|
||||
- RGB各有256级(0-255)亮度，256级的RGB色彩总共能组合出约1678万种色彩，即256×256×256=16777216
|
||||
- RGB各有256级(0-255)亮度，256级的RGB色彩总共能组合出约1678万种色彩，即256×256×256=16777216。
|
||||
|
||||
|
||||
|
||||
@ -197,9 +203,9 @@ PS：后缀名不能决定文件格式，只能决定打开文件打开的方式
|
||||
- HTML不区分大小写
|
||||
- HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
|
||||
- HTML的结构：
|
||||
声明部分：主要作用是用来告诉浏览器这个页面使用的是那个标准。<!doctype html>是HTML5标准。
|
||||
head部分： 不会显示在页面上，作用是告诉服务器一些页面的额外信息。
|
||||
body部分：我们所写的代码必须放在此标签內。
|
||||
- 声明部分：主要作用是用来告诉浏览器这个页面使用的是那个标准。<!doctype html>是HTML5标准。
|
||||
- head部分： 不会显示在页面上，作用是告诉服务器一些页面的额外信息。
|
||||
- body部分：我们所写的代码必须放在此标签內。
|
||||
|
||||
目前，IE浏览器是完全不支持H5的，支持最好的是Opera浏览器，可以支持95%以上；其次是google，可以支持一部分H5。
|
||||
|
||||
@ -848,6 +854,11 @@ href是英语`hypertext reference`超文本地址的缩写。读作“喝瑞夫
|
||||
|
||||
|
||||
|
||||
当然，我们也可以直接点金链接，访问一个网址。举例如下；
|
||||
|
||||
```
|
||||
<a href="http://www.baidu.com" target="_blank">点我点我</a>
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -1139,6 +1150,7 @@ aaa/../bbb/1.jpg
|
||||
上图中，点击菜单栏`插入-图像`，导入图片：
|
||||
|
||||
|
||||
|
||||
，在图片上点击右键，选择`属性`，弹出属性面板：
|
||||
|
||||
|
||||
|
||||
@ -73,15 +73,6 @@ CSS样式中，常见的背景属性有以下几种：（经常用到，要记
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
这里来一张表格的图片吧，一览无遗：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
现在，我们把上面的比较重要的属性挑选出来，如下：
|
||||
|
||||
- `background-color:#ff99ff;` 设置元素的背景颜色。
|
||||
|
||||
@ -43,6 +43,148 @@
|
||||
|
||||
我们起个名字叫`class=jrwm`是没有问题的，这在工作当中很常见，如果写成`class=join_us`反倒很别扭。
|
||||
|
||||
暂时我们的做法是：
|
||||
|
||||
- （1）给`class=jrwm_box`这个div里放一个`class=jrwm`的div。`class=jrwm`用来放绿色的背景图片。
|
||||
- （2）在`class=jrwm`里放一个超链接，并将超链接转为块级元素。
|
||||
|
||||
最终，导航栏的代码如下：
|
||||
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<style type="text/css">
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
body{
|
||||
font-size: 14px;
|
||||
font-family: "Microsoft YaHei","SimSun";
|
||||
height: 8888px;
|
||||
}
|
||||
.header{
|
||||
height: 58px;
|
||||
background-color: #191D3A;
|
||||
}
|
||||
/*版心*/
|
||||
.inner_c{
|
||||
width: 1000px;
|
||||
margin: 0 auto; /*让导航条、内容区域等部分的版心在父亲里居中*/
|
||||
}
|
||||
/*导航条的logo*/
|
||||
.header .logo{
|
||||
float: left;
|
||||
margin-right: 40px;
|
||||
}
|
||||
.header .nav{
|
||||
float: left;
|
||||
}
|
||||
.header .nav ul{
|
||||
list-style: none; /*去掉列表前面的圆点*/
|
||||
}
|
||||
.header .nav ul li{
|
||||
float: left;
|
||||
width: 100px;
|
||||
line-height: 58px; /*让行高等于这一行的高度，保证里面的文字垂直居中*/
|
||||
border-left: 1px solid #252947; /*每个li之间有间隔线*/
|
||||
}
|
||||
.header .nav ul li.last{
|
||||
border-right: 1px solid #252947;
|
||||
}
|
||||
.header .nav ul li a{
|
||||
display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/
|
||||
height: 58px;
|
||||
text-decoration: none; /*去掉超链的下划线*/
|
||||
color:#818496;
|
||||
text-align: center; /*让这个div内部的文本居中*/
|
||||
}
|
||||
.header .nav ul li a.current{
|
||||
color:white;
|
||||
background: #252947;
|
||||
}
|
||||
.header .nav ul li a:hover{
|
||||
color: white;
|
||||
background: #252947;
|
||||
}
|
||||
|
||||
.header .jrwm_box{
|
||||
float: left;
|
||||
height: 58px;
|
||||
width: 100px;
|
||||
padding-left: 48px;
|
||||
padding-top: 12px;
|
||||
|
||||
}
|
||||
.header .jrwm_box .jrwm{
|
||||
height: 34px;
|
||||
background-image: url(images/jrwm.png);
|
||||
background-repeat: no-repeat;
|
||||
text-align: center; /*让这个div内部的超链接居中*/
|
||||
}
|
||||
.header .jrwm_box .jrwm a{
|
||||
display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/
|
||||
line-height: 34px; /*让行高为背景图片的高度，可以保证超链接的文字在背景图片里垂直居中*/
|
||||
text-decoration: none; /*去掉超链的下划线*/
|
||||
color: white;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="inner_c">
|
||||
<div class="logo">
|
||||
<img src="images/logo.png " alt="">
|
||||
</div>
|
||||
<div class="nav">
|
||||
<ul>
|
||||
<li><a href="#" class="current">首页</a></li>
|
||||
<li><a href="#">博雅游戏</a></li>
|
||||
<li><a href="#">博雅新闻</a></li>
|
||||
<li><a href="#">关于我们</a></li>
|
||||
<li><a href="#">客服中心</a></li>
|
||||
<li class="last"><a href="#">投资者关系</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="jrwm_box">
|
||||
<div class="jrwm">
|
||||
<a href="">加入我们</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
## banenr图
|
||||
|
||||
> 因为涉及到 js 的内容，这里先不讲内容区域**轮播图**的效果。
|
||||
|
||||
我们首先在导航条和banner图之间加一道墙，即`class=cl`，然后采用隔墙法对其设置`clear: both;`的属性。
|
||||
|
||||
|
||||
然后设置banner的背景图片属性，添加banner图。
|
||||
|
||||
|
||||
## 内容区域的制作
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
24
推荐链接.md
Normal file
24
推荐链接.md
Normal file
@ -0,0 +1,24 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 2017-09-15
|
||||
|
||||
- [你所不知道的 CSS 滤镜技巧与细节](http://www.cnblogs.com/coco1s/p/7519460.html)
|
||||
|
||||
|
||||
|
||||
### 2017-09-19
|
||||
|
||||
- [适合程序员的写作技法](http://www.cnblogs.com/mindwind/p/7536748.html)
|
||||
|
||||
写作过程包括下面的部分：
|
||||
|
||||
- 需求
|
||||
- 设计
|
||||
- 实现
|
||||
- 测试
|
||||
- 交付
|
||||
|
||||
|
||||
4
面试相关/计算机网络.md
Normal file
4
面试相关/计算机网络.md
Normal file
@ -0,0 +1,4 @@
|
||||
|
||||
|
||||
- [HTTP最强资料大全](https://github.com/semlinker/awesome-http)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user