html学习文档

编辑工具的技巧1.整体退格Tab2.整体进格Tab+ShiftWeb基本概念1.静态网页：2.动态网页：动态网页的内容由动态语言生成3.动态语言嵌入HTML网页中4.动态语言由计算机执行，根据不同的条件、信息、动态的生成网页内容5.常见的动态语言：PHP、JSP、C#、ruby、python...6.现代网站几乎均为动态网站，内容均为动态生成，数据信息保存在数据库中6.1动态语言编写的代码、程序负责处理、生成动态内容6.2动态代码由计算机执行之后返回信息6.3动态代码的执行是很消耗资源的，相对静态网页要慢很多7.Web服务：实现HTTP协议，处理静态网页及资源（javascript、CSS、图片、视频等）(Apache、IIS、Nginx、Lighttpd)8、应用服务：执行动态语言，返回结果（常用服务tomcat、PHP、Unicom）9.数据库服务：存储网站数据（文章、用户信息等）（MySQL、PostgreSQ、Oracle、MongoDB）1.：WordWideWeb（万维网）2.Resource资源（包括网页，图片，视频）3.URI（UniformResourceIdentifier）统一资源标示符3.1.URL：统一资源定位符（）1.1协议-域名-路径3.2.URN:统一资源名称(ISBN0-486-27557-4)4.Html的元素（Tag）可以包含属性5.属性为Tag提供额外信息6.属性一般保存在起始Tag内7.tagname=”value”如metacharset=”utf8”imgsrc=”logo.png”1.HTML常用Tag分类1.文本类（标题、内容、引用）2.列表类（有序、无序）3.链接类4.对象类（图片、视频）5.表格类6.表单类（内容提交相关功能）HTMLText1.标题：h1/h1h2/h2h3h32.段落p/p3.标记重点内容em/emstrong/strong4.改变文字的显示b/b5.标记内容span/span6.分割线hr7.引用blockquotecite/blockquote8.代码pre/preHTMLList1.有序列表olli/li/ol2.无序列表ulli/li/ul3.列表嵌套ulliulli/li/ul/li/ul4.定义列表dldtdtdd/dd/dlHTMLLink1.链接到本网页其他位置ahref=”#somewhere”link/apid=”somewhere”…./p.2.链接到其他网页ahref=”adv.html”adv/aahref=””百度/aHTML图片与视频1.插入一张图片imgsrc=”log.jpg”alt=”linuxcast.logo”//后一个是给浏览器搜索用的2．插入一个优酷视频HTMLTable控制列tablewidth=600border=blackcellspacing=0trtd1/tdtd2/tdtd3/td/trtrtd2.1/tdtd2.2/tdtd2.3/td/trtrtd3.1/tdtd3.2/tdtd3.3/td/tr/table合并的思想：合并单元格，就是删除多余的tddiv+css1.div元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。2.css是英语CascadingStyleSheets(层叠样式表单)的缩写，他是一种用来表现HTML或XML等文件式样的计算机语言。3.div+css是网站标准（或WEB标准）中常用术语之一，通常为了说明与HTML网页设语言中的表格（table）定位方式的区别、因为XHTML网站设计标准中，不再使用表格定位技术，而采用DIV+CSS的方式实现各种定位。4.div是用于存放内容（文字，图片，元素）的容器。5.css是用于指定在div中的内容如何显示，包括这些内容的位置和外观6.使用IDE开发css（myeclipse），因为myeclipse可以给我们提示功能css的基本语法元素style=”属性名：属性值；属性名2：属性值2；”元素可以是HTML的任何元素属性名：属性值要参考文档使用css可以统一网站的风格css分类：内部css,外部css1.使用ide开发，css（myeclipse）因为myeclipse可以给我们提示功能提示快捷键Alt+/类选择器1.类选择器的基本语法.类选择器名{属性名：属性值；}在html文件中如果要引用类选择器，则2.id选择器名基本语法#id选择器名{属性名：属性值；}3.html选择器html元素{属性名：属性值；}Id选择器》类选择器》html选择器》通配符选择器4.通配符选择器（使用统配符选择器，对外边距和内边距清0）{属性名：属性值}5.父子选择器（需求：）#style{font-weight:bold;}#stylespan{font-weight:lighter;font-style:italic;background-color:yellow;}#stylespanspan{font-weight:lighter;font-style:italic;background-color:yellow;}spanid=style这是一则span非常span重/span要/span的消息/span1.注意1子选择器标签是html可以识别的标记2.2父子选择器可以有多级3.父子选择器适用于id选择器和类选择器4.一个元素可以同时被id选择器和类选择器5.一个元素最多可以有一个id选择器，但是可以有多个类选择器。当html文件中如何适用多个class选择器6.当class选择器发生冲突时，以css文件中，最后出现的class选择器样式为准块元素和行内元素1.行内元素：（inlineelement），特点只占内容的宽度，默认不会换行spana2.块元素：（blockelement），特点不管内容有多少，他要换行，同时占满整行，块元素可以放文本，行内元素，块元素。divp3.块元素和行内元素可以互换4.如果我们希望一个元素按照块元素方式显示：则display：block；5.如果我们希望一个元素按照行内元素方式显示：则display：inline；css的标准流与非标准流1.标准流，在网页布局中，写在前面的元素，出现在前面，后面的元素，出现在后面，这是默认的布局方式，也称为标准流。2.非标准流：在实际网页布局中，我们可以需要使用非标准的方式来布局（在某个元素脱离它本身的位置）CSS的盒子模型3.4.定位-浮动-基本概念CSS定位（positioning）属性允许你对元素进行定位。Position属性值4.1static（默认值）：元素框正常生成。块级元素生成一个矩形框，作为文档流/标准流的一部分，行内元素则会创建一个或多个行框，置于其夫元素中。Relative（相对定位）：元素框偏离某个距离。元素仍保持其未定位前的形状，他原本所占的空间仍保留。从这一角度看，好像该元素仍然定义在文档/标准流中一样。Absolute（绝对定位）:元素框从文档流完全删除，并相对于其包含块定位Javascript用于客户端Web开发的脚本语言，脚本语言：1脚本语言有自己的变量，函数，控制语句（顺序、分支、循环）1.js位置是可以随意的2.js必须用scriptlanguage=”javascript”//js的代码/script如果没有使用script包起来，则浏览器会视为普通文本在html文件中（jsp/php/asp）可以出现多对script片段，浏览器会按照先后顺序依次执行3.Js的数据类型：基本数据类型分为：1.数值2字符串3布尔型4.Myeclipese