HTML and CSS学习概述
一·Web浏览器是一个连接到Web服务器，向Web服务器请求信息，然后解析返回来的HTML标记，并将其显示在浏览器窗口内的程序。
1.
Microsoft
2.Internet Explorer（IE）
3.
Mozilla系列的FireFox
二.网页的表现形式:
字体大小、字体颜色、版面布局、背景等等，所有这些用来改变内容外观的东西，我们称之为“表现形式”。
在网页中，用来对编写文档表现形式的语言是CSS（层叠样式表）。
三.网页的行为
网页与用户交互，响应鼠标或者按键事件，校验用户的输入，甚至动态地在网页运行时添加、更改文档内容、表现形式以及结构-----------网页的行为
W3C组织定义的标准网页
行为语言ECMAScript以及DOM编写。
四.Web应用程序的组成部分2：Web服务器
1.nternet存放网页的计算机称为Web服务器。
2.
Web服务器上通常会运行一个专门用来提供网页服务的Web服务器软件
Apache
Tomcat
IIS
. . .
3.Web服务器本质上是一个可以提供网页浏览
服务的可执行软件，Web服务器启动后，该软件就一直运行，并监听为操作系统为该软件分配的端口（操作系统为Web服务器分配的端口通常为80或8080）。
五.Web应用程序的组成部分3：Web浏览器
1.Web浏览器是一个连接到Web服务器，向Web服务器请求信息，然后解析返回来的HTML标记，并将其显示在浏览器窗口内的程序。
Microsoft Internet Explorer（IE）
Mozilla系列的FireFox
。。。
2.对Web标准的支持不同，造成跨浏览器网页编程的困难
六.Web应用程序的组成部分4：HTTP协议
1.浏览器和Web服务器之间如何通讯？
2.
Web服务器和Web浏览器都讲同一种语言，叫做超文本传输协议HTTP（HyperText Transfer Protocol）。
3.
HTTP协议是一套规则和过程，它使计算机能够通过Web交换信息。有了HTTP协议，那么不管这些计算机在哪个地方，使用的是什么操作系统，运行的是什么Web服务器软件，
使用的是什么浏览器产品，它们都可以通过HTTP相互通讯。
七.网页的分类
1.静态网页:以.html或.htm文件保存，包含图像声音等媒体信息，不包含任何客户交互的动态内容，访问效率高，开发容易。
2.客户端动态网页
web服务器将原始的html界面和一组包含逻辑的脚本、组件
等一起发送到客户端，这些脚本和组件包含如何与用户交互并产生动态内容的指令。由客户端的浏览器及其附带的插件解析html页面并执行这些指令。典型的客户端包括
Javascript Active控件 JavaApplet.
3.服务器端动态网页
web服务器在客户不同的请求下，动态的生成相应的内容。
八：Web项目的分工
专业的网页设计师负责网页的设计、版面布局、图像制作、网页元素颜色搭配等有关设计的工作，
Web程序员则负责客户端脚本或者服务器段脚本的编码工作。
Web文档主要由结构、表现和行为三个部分组成。对应于此结构，一般Web文档的表现部分即CSS，由网页设计师负责编写。而网页的行为部分，一般由Web程序员负责。
而文档的结构，则是二者都关心的部分。
在当今Web2.0时代，精通XHML/CSS/JavaScript的UI工程师或者用户体验工程师，已经成为一个非常时髦的职业。
九：客户端网页编程工具
1. Dreamweaver 2.
WebStorm
xhtml 基础
一.1.XHTML元素分为块级元素和内嵌元素两种类型，二者的不同之处在于块级元素定义的文本是换行的，而内嵌元素定义的文本是不换行的。
常见的块级元素包括div.blockquote、
列表元素（dl、ol、ul）、fieldset、form、h1-h6、hr、p、pre、table等。
内嵌元素包括：span、a、img、label、所有的表单输入元素、iframe、object等。
2.如果是内嵌元素，下一个元素就显示在该元素同一行上的后续位置。
如果是块级元素，下一个元素就在浏览器下一行显示。
二..1.在XHTML中标记名称必须小写
2.在XHTML中属性必须小写
3.在XHTML中标记必须正确嵌套
4.在XHTML中标记必须关闭（标记成对出现）
5.在XHTML中即使是空元素也必须关闭
6.在XHTML中属性值必须用双引号括起来
三.文档总体结构
<html
>
<head>
<title>网页文档标题</title>
</head>
<body>
文档正文...
</body>
</html>
2.用<!-- -->在文中做备注，不会显示在网页上
3.<html>定义一个空白页 <head>元素定义XHTML的标题部分 他的元素中可以包括文档标题，元数据信息，文档脚本，样式信息。
四.所有的XHTML都必须声明他们所使用的编码语言
<meta http-equiv="content-type" content="text/html" charset="GB2312"/>
GB2312：简体中文 也可用BIG5：繁体中文
五： h1 h2 h3 h4 h5 h6 六个元素支持6个级别的正文标题 文字大小和重要性逐级递减
1.<p>元素（paragraph）定义一个段落
<blockquote>元素将段落缩进事其于周围文字偏离。
2.列表
<ol>（Ordered List）有序列表<ol> <li> </li> </ol>
<ul>(Unorderd List)无序列表<ul> <li> </li> </ul>
<dl>(Defiend List)定义列表<dl> <dt> </dt> </dl>
3.<pre>自定义标签
4.<div>(division) <span>跨字符
5.特殊字符： ；空格
< 左尖括号<或小于号
> 右尖括号>或大于号
© 版权符号©
® 已注册符号®
& and符号&
— 长破折号
5、<a>创建超链接 <a href="URL">描述文本</a>
<a>标记的属性还包括title accesskey tabintex
title：为所设置的文本工具提示。 accesskey：给超链接设置一个快捷键。tabintex：设置页面上的tab次序。
六：在网页中显示图形
网页中使用的图像只有GIF(Graphical Interchange Format)和
JPG（也称JPEG. Joint Photographic Expert Grounp）两种
用<img>标记 src告诉计算机想要显示的图像文件名。
alt指定图像不能显示时应现实的文本。（图像不能显示时，鼠标移到图像上
就会显示alt文本值）
<img src="" alt="" />
七：插入多媒体信息
1）添加一个Flash文件
<object type="application/x-shockwave-flash"
data="flash文件路径" width="flash宽度" height="flash高度" id="对象在网页标识号">
<param name="movie" value="flash文件的路径" />
<param name="allowScriptAcess" value="sameDomain" />
<param name="quality" value="best" />
<param name="bgcolor" value="#FFFFFF" />
<param name="scale" value=noScale />
<param name="salign" value="TL" />
<param name="FlashVars" value="playerMode=embedded" />
</object>
八：添加视频文件
<object type="video/x-ms-wmv" data="wmv文件的地址" width="320" height="260">
<param name="src" value="wmv文件的地址" />
<param name="autostart" value="true" />
<param name="controller" value="true" />
</object>
九：表格状数据
<table>标记 <tr>标记嵌在<table>内 <th>做标题列嵌在 <tr>内 <td>嵌在<tr>内
border设置边框
示例1、<table border="1">
<tr>
<td>数据单元格1</td>
<td>数据单元格2</td>
<td>数据单元格3</td>
</tr>
<tr>
<td>数据单元格4</td>
<td>数据单元格5</td>
<td>数据单元格6</td>
</tr>
</table>
示例2、<table border="1">
<tr>
<th>标题</th>
<th>另一标题</th>
</tr>
<tr>
<td>行 1, 列 1</td>
<td>行 1, 列 2</td>
</tr>
<tr>
<td>行 2, 列 1</td>
<td>行 2, 列 2</td>
</tr>
</table>
示例3、创建空白单元格<table border="1">
<tr>
<th>标题</th>
<th>另一标题</th>
</tr>
<tr>
<td>行 1, 列 1</td>
<td>行 1, 列 2</td>
</tr>
<tr>
<td>行 2, 列 1</td>
<td></td>
</tr>
</table>
示例4、<table border="1">
合并单元格
<tr>
<th colspan="2">科目</th>
colspan：合并列
<th>J2EE</th>
<th>.NET</th>
<th>SQL</th>
</tr>
<tr>
<td rowspan="3">总成绩</td>
rowspan：合并行
<td>初级</td>
<td>90</td>
<td>100</td>
<td>89</td>
</tr>
<tr>
<td>中级</td>
<td>98</td>
<td>80</td>
<td>89</td>
</tr>
<tr>
<td>高级</td>
<td>86</td>
<td>98</td>
<td>78</td>
</tr>
</table>
十：框架结构
如果我们想在一个网页中调入一个外部网页，可以使用iframe元素。iframe嵌入的网页我们常称为内部框架。使用iframe的好处在于：可以在一个html网页中嵌入
另一个html网页，这里两个网页的内容相互融洽，成为一个整体；此外，还可以多次在一个网页内显示同一内容，再不必重复些内容，甚至可以再同一html文件中嵌
入多个html文件。iframe元素的基本
语法为：
<iframe
src="URL"
width="x" height="x"
scrolling="auto/yes"
frameborder="0/1"
name="内部框架的名称" >
<iframe>
其中：
*src是指调用的外部网页文件的路径，既可以是html文件，也可以是文本、JSP等；
*width、height:内部框架区域的宽度和高度；
*scrolling:当src的指定的外部文件在指定区域显示不完的滚动选项。如果设为no，则不出现滚动条；如果为auto：则自动出现滚动条；如果是yes,则显示滚动条；
*frameBorder：区域边框的宽度，可选值为0或者1。
*name:框架的名字，用来进行识别。
例如，下面的代码使用iframe在网页内部嵌入了w3c网站的首页：
<iframe src="http://www.w3c.org" width="250" height="200" scrolling="auto"frameborder="0" name="main"></iframe>
如果要在网页上放置一个超级链接，当点击超级链接时，在网页上打开另外一个网页，
那么，我们需要给iframe的name属性命名，并将超级链接a标记的target属性设置为iframe的
name属性值。例如：
<a href="http://www.w3c.org" target="main" >在本网页中打开w3c网站</a>
<iframe width="250" height="200" scrolling="auto" frameborder="0"name="main" ></iframe>
XHTML中的表单
一.HTML表单元素和属性可以分为两种类型：
1.
定义表单整体结构，使浏览器知道如何处理表单数据的元素；
创建输入控件的元素。
2.
基本表单结构
用form标记创建表单
form标记对内包括表单元素和其它XHTML元素。
3.基本格式：<form action="表单处理程序的URL" method="get|post">
4.<form>标记的其它属性：accept
accept-charset
enctype
name和id
5、用来创建HTML输入控件的元素有三种：<
input
type=""/>
select和option：创建一个下拉列表。
textarea：多行输入的文本框。
6、文本框 type=“text”
属性
size ：大小。
maxlength 输入的最大长度。
value返回值。
7、口令输入框 type=“password”
属性
size ：大小。
maxlength 输入的最大长度。
value返回值。
8、单选按钮 type=“radio”
属性
name名字
checked默认值
value返回值
9、复选框 type=“checkbox”
属性
name名字
checked默认值
value返回值
10、隐藏字段 type=“hidden”
属性
name名字 value返回值
11、文件上传控件 type=“file”
form表单属性
enctype =“enctype ”
method=“post”
12、下拉列表 select和option标记
select元素中的name属性给整个列表命名
multiple="multiple“
size
option元素中的value给每个选项一个唯一值。
13、多行文本框 textarea标记
属性
cols和rows设置大小
14、提交和重置 <input type="submit" value"提交" />
<input type="reset" value="重置" />
15、图片提交和重置按钮 type=“image” <input type="image" src="submit.gif" value="submit" alt="发送" />
<input type="image" src="reset.gif" value="reset" alt="清除" />
属性
value=“submit”（提交） /value=“reset”（重置）
alt提供一个可选的文本
16、命令按钮 type=“button”
属性
value<input type=“button” value=“增加” />
<input type="button" value="删除" />
17、<lable for="">与网页的可访问性有关
18、fieldset和legend元素
<fieldset>
<legend>标题</legend> <fieldset>表示周围一个细边的盒子<legend>在盒子上加一个标题
</fieldset>
19、在文本框增加一个readonly属性readonly="readonly" ，可以防止修改文本框中的数据。
disabled属性disabled="disabled" 可以使输入控件不可用
20、
<form id="" name="" action="URL" method="get/post"></form> id不可重复
HTML and CSS学习概述的更多相关文章
- HTML and CSS学习概述-续
1, CSS是层叠样式表(Cascading Style Sheets)的缩写,它用于定义HTML元素的显示形式,是一种格式化网页内容的技术.CSS现在已经被大多数浏览器所支持,成为网页设计者必须 ...
- CSS学习进度备忘
书签:“CSS 高级”跳过:另外跳过的内容有待跟进 __________________ 学习资源:W3School. _________________ 跳过的内容:1.“CSS id 选择器”的“ ...
- CSS 学习手册
目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- css学习归纳总结（三） 转
原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...
- css学习归纳总结（二） 转
原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...
- css学习归纳总结（一） 转
原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...
- 【2016年特别福利】史上最全CSS学习资料大全
css学习篇 [2016年特别福利]史上最全CSS学习资料大全
- 【转】css学习专题-BFC
css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...
随机推荐
- zabbix主动监测客户端设置
主动/被动模式 主动模式和被动模式的区别一开始我也非常模糊,其实这是zabbix的两种工作方式,是相对于zabbix的agent端来说的,定义为: 主动模式:zabbix的agent端,也就是客户端, ...
- Numpy函数库基础
利用Numpy函数库构造4*4随机数组,然后将数组转化为矩阵,然后矩阵与其逆矩阵相乘,计算机处理的误差 from numpy import * random.rand(4,4) print(rando ...
- hdu 5023 线段树+位运算
主要考线段树的区间修改和区间查询,这里有一个问题就是这么把一个区间的多种颜色上传给父亲甚至祖先节点,在这里题目告诉我们最多30颜色,那么我们可以把这30中颜色用二进制储存和传给祖先节点,二进制的每一位 ...
- 静态方法调用内部类时候的new 问题
package tool; /** * 静态方法调用内部类时候的new 问题 */ public class aa { // 静态方法 // 静态方法new 有问题 public static voi ...
- java日期加减年月日
/** * 日期相加减 * @param time * 时间字符串 yyyy-MM-dd HH:mm:ss * @param num * 加的数,-num就是减去 * @return * 减去相应的数 ...
- 【js语法】array
array操作说明 链接:http://www.w3school.com.cn/jsref/jsref_obj_array.asp 函数说明: concat():把两个array连接起来 join() ...
- Mysql自定义函数functions时报错
delimiter && [函数创建语句.....] [Err] 1418 - This function has none of DETERMINISTIC, NO SQL, or ...
- div指令和mul指令
div是除法指令,使用div做除法时需要注意: 1)除数:有8位和16位两种,在一个寄存器或者内存单元中 2)被除数:默认存放在AX或DX和AX中.如果除数为8位,被除数则为16位,默认在AX中存放: ...
- POST请求测试地址
http://service.xunjimap.com/xunjiservice/common1_0_4/index?53D2CFEB65F6BBEEEB42836FE18E7E0D params.a ...
- 工作中用Git对项目进行管理
前言 之前一直是用svn来管理代码的,今天第一次用git来管理代码,从安装.上传代码过程中遇到了很多问题,Github中建的repository之前还是https协议,最后不知道怎么又变成了git协议 ...