前言
网页主要由三部分组成：结构，表现(样式)和行为(交互)。
网页现在最新的标准是：W3C;
目前模式是HTML，CSS和JavaScript；(前段开发最核心的三个技术)
-
HTML：超文本标记语言(全称：Hyper Text Markup Language)；负责网页的结构，类似于人；
-
CSS：全称“层叠样式表”；负责网页的表现即外在样式，类似于衣服，化妆；
-
JavaScript：脚本语言；负责网页的行为，与外界交互，类似于说话，走路，跳舞；
前端开发其他技术
前端技术最核心的是HTML、CSS和JavaScript，但是对于一个真正的前端工程师来说，哪怕你精通这三个，你也不能称为一个真正的“前端工程师”。因为前端技术除了HTML、CSS和JavaScript这三种，还需要学习Ajax、SEO等。
-
Ajax，即“Asynchronous Javascript And XML（异步JavaScript和XML）”，是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个页面。Ajax是前后端交互的技术，主要实现在前端。
-
SEO，即“Search Engine Optimization（搜索引擎优化）”。SEO优化是专门利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。
总结：前端技术只能开发静态网页，而进一步学习了后端技术，才能开发一个用户交互性更好、功能更加强大的网站；后端技术有ASP.NET（或PHP）、SQL Server等；
ps：学习路线：HTML入门→CSS入门→HTML进阶→CSS进阶→JavaScript入门→jQuery入门→ASP.NET入门（或PHP入门）→Ajax→ASP.NET进阶（或PHP进阶）；
HTML
HTML学习就是学习各种标签，然后针对想要的内容来使用相应的标签(标签即HTML元素);
定义
是一种解释执行的文本类标记语言，是用于编写网页的主要语言，“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本：图片 音乐 视频等非文本的元素
标记：通过标记来安排各部分内容的位置
结构
基本标签
html标签
<html></html>
整个网页是从<html>这里开始的，然后到</html>结束。
head标签
<head></head>
代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”（在浏览器不可见）。
head内部标签
| <head>内部标签 | 说明 |
|---|---|
| <title> | 定义网页的标题 |
| <meta> | 定义网页的基本信息（供搜索引擎） |
| <style> | 定义CSS样式 |
| <link> | 链接外部CSS文件或脚本文件 |
| <script> | 定义脚本语言 |
| <base> | 定义页面所有链接的基础定位（用得很少） |
body标签
<body></body>
代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）。
元素分类
块级元素
独占一行空间，用来布局段落，列表，导航等；
特点：
-
独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
-
块级元素内部可以容纳其他块元素或行元素；
常见块级元素：div p h1-h6 ul li ol dl dt dd
行内元素
与其他元素共享一行空间，一般被嵌套在块级元素中使用，作为段落的一部分；
特点：
-
可以与其他行内元素位于同一行；
-
行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；
常见行内元素：strong 强调，i 斜体，u下划线，em，span
空元素
只有单个标签的元素，也称为自闭和标签，只有开始符号没有结束符号；自闭合标签由于没有结束符号，不能插入其他标签或文字，只能定义自身的属性；例如img 一般情况不给单标签元素写结束标签
常见空元素(转义的表现，应去掉“/”)：</br>,</hr>
段落标签
段落标签：
| 标签 | 语义 | 说明 |
|---|---|---|
| <h1>~<h6> | header | 标题 |
| <p> | paragraph | 段落 |
| break | 换行 | |
| <hr> | horizontal rule | 水平线 |
| <div> | division | 分割（块元素） |
| <span> | span | 区域（行内元素） |
文本修饰标签：
| 标签 | 语义 | 说明 |
|---|---|---|
| <strong> | strong（加强） | 加粗 |
| <em> | emphasized（强调） | 斜体 |
| <cite> | cite（引用） | 斜体 |
| <sup> | superscripted（上标） | 上标 |
| <sub> | subscripted（下标） | 下标 |
列表
有序列表：
<ol type="列表项符号"> <li>有序列表项</li> <li>有序列表项</li> <li>有序列表项</li> </ol>
列表项符号
| type属性值 | 列表项的序号类型 |
|---|---|
| 1 | 数字1、2、3…… |
| a | 小写英文字母a、b、c…… |
| A | 大写英文字母A、B、C…… |
| i | 小写罗马数字i、ii、iii…… |
| I | 大写罗马数字I、II、III…… |
无序列表
<ul type="列表项符号"> <li>无序列表项</li> <li>无序列表项</li> <li>无序列表项</li> </ul>
列表项符号
可选值:
disc:默认值，实心圆“●”
circle:空心圆“○”
square:实心正方形“■”
定义列表(少用)
<dl> <dt>定义名词</dt> <dd>定义描述</dd> …… </dl>
解释：<dl>即“definition list（定义列表）”，<dt>即“definition term（定义名词）”，而<dd>即“definition description（定义描述）”。
一般<dd>落后<dt>四个字符的距离，描述<dt>的内容
在该语法中，<dl>标记和</dl>标记分别定义了定义列表的开始和结束，<dt>后面添加要解释的名词，而在<dd>后面则添加该名词的具体解释。
表格
表格标签
表格基本标签
| 标签 | 语义 | 说明 |
|---|---|---|
| table | table（表格） | 表格 |
| tr | table row（表格行） | 行 |
| td | table data cell（表格单元格） | 单元格 |
表格结构标签
| 标签 | 语义 | 说明 |
|---|---|---|
| thead | table head | 表头 |
| tbody | table body | 表身 |
| tfoot | table foot | 表脚 |
| th | table header | 表头单元格 |
表格结构：
基本结构：<table>、<tr>和<td>是HTML表格最基本的3个标签，其他标题标签<caption>、表头单元格<th>可以没有，但是这3者必须要有。
语法
<table> <tr> <td>单元格1</td> <td>单元格2</td> </tr> <tr> <td>单元格1</td> <td>单元格2</td> </tr> </table>
说明：<table>和</table>标记着表格的开始和结束，<tr>和</tr>标记着行的开始和结束，在表格中包含几组<tr></tr>就表示该表格为几行。<td>和</td>标记着单元格的开始和结束。
完整结构：包括表格标题（caption）、表头（thead）、表身（tbody）和表脚（tfoot）4部分。
语法
<table> <caption>表格标题</caption> <!--表头--> <thead> <tr> <th>表头单元格1</th> <th>表头单元格2</th> </tr> </thead> <!--表身--> <tbody> <tr> <td>标准单元格1</td> <td>标准单元格2</td> </tr> <tr> <td>标准单元格1</td> <td>标准单元格2</td> </tr> </tbody> <!--表脚--> <tfoot> <tr> <td>标准单元格1</td> <td>标准单元格2</td> </tr> </tfoot> </table>
说明：
<thead>、<tbody>和<tfoot>这三个标签分别表示表头、表身、表脚。th表示表头单元格，th表示表身单元格。每一对“<tr></tr>”表示一行。
合并行,合并列
合并行使用td标签的“rowspan属性”，而合并列则用到td标签的“colspan属性”。
合并行
语法：<td rowspan="跨度的行数">
举例：
<!DOCTYPE html> <html> <head> <title>合并行rowspan</title> </head> <body> <table> <!--第1行--> <tr> <td>姓名:</td> <td>小明</td> </tr> <!--第2行--> <tr> <td rowspan="2">喜欢水果:</td> <td>苹果</td> </tr> <!--第3行--> <tr> <td>香蕉</td> </tr> </table> </body> </html>
结果：
合并列
语法：<td colspan="跨度的列数">
举例：
<!DOCTYPE html> <html> <head> <title>合并列colspan</title> </head> <body> <table> <!--第1行--> <tr> <td colspan="2">绿叶学习网精品教程</td> </tr> <!--第2行--> <tr> <td>HTML教程</td> <td>CSS教程</td> </tr> <!--第3行--> <tr> <td>jQuery教程</td> <td>SEO教程</td> </tr> </table> </body> </html>
结果：
图像
图像标签
图像标签为<img>。<img>是一个自闭合标签。
语法：img src="图片地址" alt="图片描述（给搜索引擎看）" title="图片描述（给用户看）">
解析：
| 属性 | 说明 |
|---|---|
| src | 图像的文件地址 |
| alt | 图片显示不出来时的提示文字 |
| title | 鼠标移到图片上的提示文字 |
说明：src和alt这两个属性是img标签必不可少的属性；
链接
链接标签
<a>
语法：<a href="链接地址" target="目标窗口的打开方式">网页显示内容<a>
<a>标签target的属性值
| target属性值 | 说明 |
|---|---|
| _self | 默认方式，即在当前窗口打开链接 |
| _blank | 在一个全新的空白窗口中打开链接 |
| _top | 在顶层框架中打开链接 |
| _parent | 在当前框架的上一层里打开链接 |
链接的分类
-
外部链接： 跳转到指定网页；
-
内部链接：①内部页面链接；②锚点链接；
锚点链接举例：
<!DOCTYPE html> <html> <head> <title>锚点链接</title> </head> <body> <div> <a href="#music">推荐音乐</a><br /> <a href="#movie">推荐电影</a><br /> <a href="#article">推荐文章</a><br /> </div> ……<br /> ……<br /> ……<br /> ……<br /> ……<br /> ……<br /> <div id="music"> <h3>推荐音乐</h3> <ul> <li>林俊杰-被风吹过的下图</li> <li>曲婉婷-在我的歌声里</li> <li>许嵩-灰色头像</li> </ul> </div> ……<br /> ……<br /> ……<br /> ……<br /> ……<br /> ……<br /> <div id="movie"> <h3>推荐电影</h3> <ul> <li>蜘蛛侠系列</li> <li>钢铁侠系统</li> <li>复仇者联盟</li> </ul> </div> ……<br /> ……<br /> ……<br /> ……<br /> ……<br /> ……<br /> <div id="article"> <h3>推荐文章</h3> <ul> <li>朱自清-荷塘月色</li> <li>余光中-乡愁</li> <li>鲁迅-阿Q正传</li> </ul> </div> </body> </html>
结果：
分析：
锚点链接：点击某一个超链接，它就会跳到当前页面的某一部分；点击“推荐音乐”、“推荐电影”和“推荐文章”这三个超链接，滚动条就会滚动到相应的版块。
表单
用于收集来自用户的信息，比如登录、注册、新建一些数据的时候，将收集到的信息发送给服务器端处理程序，实现客户端和服务器端传递数据的作用
表单标签
input标签
大部分表单都是用”input标签“完成的
语法：<input type="表单类型"/>
通过一张表单概括所有表单标签
分析：下述表单都是使用input标签，所不同的就是type属性值不同
textarea标签
多行文本框
语法：<textarea rows="行数" cols="列数">多行文本框内容</textarea>
与input的单行文本框，密码文本框比较：
-
单行文本框
语法：<input type="text" value="默认文字" size="文本框长度" maxlength="最多输入字符数"/>
-
密码文本框
语法：<input type="password">
select标签与option标签
下拉列表由<select>和<option>配合使用
语法：
<select multiple="mutiple" size="可见列表项的数目"> <option value="选项值" selected="selected">选项显示的内容</option> …… <option value="选项值">选项显示的内容</option> </select>
多媒体
插入音频，视频和flash
在网页中插入音频、视频和flash都是使用embed标签。
语法：<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度"></embed>
说明：
-
多媒体文件地址可以是相对地址，也可以是绝对地址。
-
width和height使用px作为单位。
插入背景音乐
为某个网页设置背景音乐，使用的是bgsound标签。不过bgsound标签只适用于IE浏览器，在Firefox等浏览器中未必适用。
设置网页背景音乐时常用的方法除了使用bgsound标签，还有使用embed标签和object标签。
语法：<bgsound src="背景音乐的地址"/>
说明：loop="2"表示重复2次，loop="infinite"表示无限次循环播放，也可以使用loop="-1"表示无限次循环播放。
浮动框架iframe
简介
iframe标签（浮动框架标签）：
浮动框架是一种较为特殊的框架，它是在浏览器窗口中嵌套的子窗口，整个页面并不一定是框架页面，但要包含一个框架窗口。<iframe>框架可以完全由设计者定义宽度和高度，并且可以放置在一个网页的任何位置，这极大地扩展了框架页面的应用范围。
<frameset>生成的框架结构是依赖上级空间尺寸的，它的宽度或者高度必须有一个和上级框架相同。而<iframe>浮动框架可以完全由指定宽度和高度决定。
语法：<iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高" scrolling="取值"></iframe>
-
src属性是iframe的必须属性，它定义浮动框架页面的源文件地址。
-
scrolling="取值"：
auto：默认值，整个表格在浏览器页面中左对齐；
yes：总是显示滚动条，即使页面内容不足以撑满框架范围，滚动条的位置也预留no在任何情况下都不显示滚动条
no：任何情况下都不显示滚动条
举例：
代码：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <div id="main"> <h3>绿叶学习网</h3> <iframe src="http://www.baidu.com" width="400px" height="300px" scrolling="no"></iframe> </div> </body> </html>
结果：
浮动框架，说白了就是在一个页面嵌入一个或多个子页面
总结
首先发布一下html和前端学习的序言部分，后面的css和js都会陆续整理然后发布；以上这些都是自己在学习的过程中整理的笔记，希望大家批评指正；
95
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
