1.web概述
1)web三要素(B/S架构)
浏览器(B)
代理作用,向服务器发送请求,服务器返回一个.html格式的文件,
浏览器(渲染)解释执行文件(页面)
服务器(S)
接收浏览器的请求,做出相应的处理,响应一个页面
HTTP协议
通讯协议
2)常用的浏览器
IE,FireFox,Chrome,Safari,Opera
3)html工作原理
html文件部署在服务器端
html页面运行在浏览器中
浏览器发送请求,服务器接收请求,响应一个页面,然后浏览器渲染内容
2.HTML概述
1)什么是html(Hyper Text MarkUp Language)
超文本标记语言
是一种用来设计网页的标记语言,用该语言编写的文件,后缀为.html或.htm,由浏览器解释执行,生成相应的页面
2)head元素
主要用于描述页面数据
,<link>,<style>,<script>...</p><p>1>title元素主要用来显示当前页面的标题</p><p>2>meta元素</p><p>主要用来定义页面元数据和消息头</p><p><meta http-equiv="Content-Type"</p><p>content="text/html; charset=UTF-8" /></p><p>http-equiv消息头</p><p>content消息内容</p><p>消息头：浏览器向服务器发送请求,服务器返回一些键值对页面刷新参照-->页面刷新.html</p><p>3)body元素</p><p>显示页面的数据(内容)</p><p>内容实体转义：</p><p>'---'</p><p>"---"</p><p><---<</p><p>>---></p><p>&---&</p><p>空格--- </p><p>1>分区元素</p><!--/p1--><!--p2--><p>div元素和span元素</p><p>div元素：块级元素，独占一行(元素前后会自动换行),可以设置宽高span元素：行内元素，不会独占一行，设置宽高无效</p><p>2>文本标题元素</p><p><h1>~<h6></p><p><h1></h1></p><p><h2></h2></p><p><h6></h6></p><p>h1字体最大,h6字体最小</p><p>3>段落元素</p><p><p></p></p><p>特点：行于行之间有空白的段落间距</p><p>4>列表元素</p><p>有序列表<ol></ol></p><p>无序列表<ul></ul></p><p>列表项<li></li></p><p>注意：列表只能写列表项<li>,列表项中输出文本内容</p><p>嵌套列表</p><p>5>图片元素</p><p><img src="" width="" height=""/></p><p>必要的属性：src(URI)</p><p>常用的属性：width,height 6>超链接元素</p><p><a href="" target=""></a></p><p>必要的属性：href(URL/URI)</p><p>常用的属性：target 取值_blank(打开新的窗口),</p><p>_self(在自身的窗口打开链接)等等</p><p>锚点：</p><p>利用a元素的name属性定义一个锚点</p><p><a name="mark"></a></p><p>超链接连接到锚点</p><p>#告诉浏览器跳转不是一个链接,而是一个内部位置</p><p><a href="#mark">回到Mark位置</a></p><p>发送邮件:</p><p><a href="mailto:邮箱地址?subject=hello&body=尊敬的学码思:">发送邮件</a></p><p>//outlook,foxmail</p><p>7>表格table</p><p>表格通常用来组织结构化的信息</p><p>table元素：定义(创建)表格</p><p>属性：</p><p>boder边框，默认值0，单位是像素px</p><p>cellpadding单元格与内容之间的垂直间距</p><p>cellspacing单元格与单元格之间的间距</p><p>align水平方向居左left(默认值)/居右right/居中center</p><p>width</p><!--/p2--><!--p3--><p>height</p><p>tr元素：创建行</p><p>属性：</p><p>align水平位置(left,center,right)</p><p>valign垂直位置(top,middle,bottom)</p><p>td元素：创建列(单元格,存放数据)</p><p>属性：</p><p>align水平位置</p><p>valign垂直位置</p><p>width</p><p>height</p><p>colspan跨列属性</p><p>rowspan跨行属性</p><p>完整的表格</p><p>表格的标题：<caption></caption>位于table第一行行分组：</p><p>将多个行分为一组</p><p><thead></thead></p><p><tbody></tbody></p><p><tfoot></tfoot></p><p>提示：<thead>和<tfoot>只能出现一次</p><p>,<tbody>可以出现多次</p><p>8>表单form</p><p><form action="" method="" enctype=""></p><p>input标记非input标记</p><p></form></p><p>action属性：表单提交之后哪一个程序处理</p><p>method属性：表单提交的方式</p><p>enctype属性：设置表单的MIME编码</p><p>表单控件：</p><p>文本框：</p><p><input type="text" name="username" value="张三"/></p><p>name属性：标记的一个名称,该名称用于生成一个请求参数, 如果没有命名,则浏览器不会该数据发送给服务器</p><p>value属性：文本框内容</p><p>密码框：</p><p><input type="password" name="" value=""/></p><p>单选框：</p><p><input type="radio" name="sex" value="男" checked/>男</p><p><input type="radio" name="sex" value="女"/>女</p><p>name属性：标记的一个名称,该名称用于生成一个请求参数, 如果没有命名,则浏览器不会该数据发送给服务器</p><p>,分组效果</p><p>checked属性：选中</p><p>复选框：</p><p><input type="checkbox" name="" value=""/></p><!--/p3--><!--p4--><p>name属性：同上</p><p>checked属性：选中</p><p>隐藏域：</p><p><input type="hidden" name="" value=""/></p><p>文件上传：</p><p><input type="file" name=""/></p><p>普通按钮：</p><p><input type="button" value="普通按钮"/></p><p>重置按钮：</p><p><input type="reset" value="重置按钮"/></p><p>恢复到页面加载的最初状态</p><p>提交按钮：</p><p><input type="submit" value="提交按钮"/></p><p>把form表单的数据提交给action指定的程序处理</p><p>下拉框：</p><p><select name="" multiple></p><p><option value="nj">南京</option></p><p><option value="sh">上海</option></p><p><option value="bj">北京</option></p><p></select> name属性：设置参数名，同上</p><p>value属性：设置参数值</p><p>multiple属性：可以使用单选下拉框变成多选下拉框</p><p>文本域：</p><p><textarea name="" rows="5" cols="5"></textarea></p><p>1.css简介</p><p>css指层叠样式表(Cascading Style Sheets)</p><p>1)css使用方式</p><p>1>内联方式</p><p><p style="color:red;width:200px;height:200px;">段落元素</p> 2>内部方式</p><p><head></p><p><style></p><p>p{</p><p>color:red;</p><p>width:200px;</p><p>height:200px;</p><p>}</p><p></style></p><p></head></p><p>3>外部方式</p><p><head></p><p><link type="text/css" rel="stylesheet"</p><p>href="css/外部的css.css" /></p><!--/p4--><!--p5--><p></head></p><p>CSS文件后缀名为.css</p><p>2)CSS语法规范</p><p>css由多个样式规则组成,每个样式规则有两部分：选择器和样式声明样式声明：样式名和样式值</p><p>例如：p{color:red}</p><p>css的特性：</p><p>继承性：子元素可以继承父元素的样式</p><p>层叠性：子元素继承父元素不冲突的样式</p><p>或者自身多个不冲突的样式是可以层叠的</p><p>优先级：子元素继承父元素有冲突的样式或者自身多个冲突的样式,需要考虑优先级</p><p>优先级从高到低：</p><p>内联方式,内部方式或外部方式(就近原则),浏览器默认的样式</p><p>3)选择器</p><p>1>元素选择器</p><p>table{</p><p>boder:1px double red;</p><p>}</p><p>2>类选择器</p><p><div class="dclass">内容</div> <p class="dclass">内容</p></p><p>匿名类选择器</p><p>.dclass{</p><p>color:red;</p><p>}</p><p>有名字的类选择器</p><p>div.dclass{</p><p>color:blue;</p><p>}</p><p>3>ID选择器</p><p>注意：ID属性值为唯一的</p><p><div id="did">内容</div></p><p>#did{</p><p>color:red;</p><p>}</p><p>4>分组选择器</p><p>将多个选择器用逗号隔开分成一组div,.cl,#d1,p{</p><p>color:blue;</p><p>}</p><!--/p5--><!--p6--><p>5>派生选择器</p><p>子元素选择器：p>strong{color:red}</p><p>后代元素选择器：p strong{color:red}</p><p>选择器优先级：</p><p>ID选择器(有名字的ID选择器>匿名的ID选择器)></p><p>类选择器(有名字的类选择器>匿名的类选择器)></p><p>派生选择器>元素选择器</p><p>注意：操作同一个目标元素加载样式,相同的选择器需要考虑就近原则,</p><p>不同的选择器不需要考虑就近原则,需要考虑选择器优先级</p><p>6>伪劣(伪类)选择器</p><p>伪类选择器用于设置同一个元素在不同状态下的样式</p><p>:link 向未被访问的超链接添加样式</p><p>:visited 向已被访问的超链接添加样式</p><p>:active 向被激活的元素添加样式(左键按下去没有松开)</p><p>:hover 当鼠标悬浮至元素上面时添加样式</p><p>:focus 当元素获取焦点时添加样式</p><p>4)CSS声明</p><p>1>盒子模型(box model)</p><p>作用：元素边框和其内容间距以及与其他元素边框之间的间距(用于布局)</p><p>padding:内边距</p><p>padding:30px;上下左右间距30px(以上左为准)</p><p>padding:10px 20px;上下左右</p><p>padding: 1px 2px 3px 4px;上右下左(顺时针)</p><p>padding-left/right/top/buttom:10px;</p><p>盒子最终宽和高：内边距(padding)+宽(width)和高(height)</p><p>margin:外边距</p><p>margin:0 auto;//水平方向居中</p><p>2>边框border</p><p>border:宽度值样式值颜色值;</p><p>border:1px solid red;</p><p>border-width:1px;</p><p>border-style:double;</p><p>border-color:red;</p><p>border-left/right/top/buttom:1px solid red;</p><p>border-left-width:1px;</p><p>border-left-style:double;</p><p>border-left-color:red;</p><p>3>宽和高(尺寸相关)</p><!--/p6--><!--p7--><p>width,height</p><p>样式尺寸单位：</p><p>px像素(相对单位)</p><p>pt磅(绝对单位)</p><p>%百分比</p><p>in英寸</p><p>cm厘米</p><p>mm毫米</p><p>overflow声明</p><p>overflow:visible/hidden/</p><p>scroll(不管是否溢出都会出现滚动条)/</p><p>auto(只有溢出才会出现滚动条)</p><p>样式颜色取值：</p><p>a.英文颜色单词</p><p>red,blue,green...</p><p>b.十六进制表示颜色</p><p>#000000</p><p>#FFFFFF</p><p>#fff(简写)</p><p>c.rgb值</p><p>rgb(0,0,0)</p><p>rgb(255,255,255)</p><p>rgb(0%,0%,0%)</p><p>rgb(100%,100%,100%)</p><p>4>背景设置</p><p>参照day02/背景设置.html</p><p>5>文本设置</p><p>参照day02/文本设置.html</p><p>6>表格设置</p><p>参照day02/表格设置.html</p><p>7>浮动</p><p>参照day02/浮动.html</p><p>8>列表</p><p>参照day02/列表.html(重点导航栏)</p><p>9>显示方式display</p><p>参照day02/显示方式.html</p><p>10>定位(布局)position1.JavaScript概述</p><p>1>什么是JavaScript?</p><p>JavaScript是一种网页编程技术,用来向HTML页面添加交互行为JavaScript还是一种基于对象和事件驱动的解释性脚本语言,具有JAVA和C语言类似的语法</p><p>直接嵌入到HTML页面中</p><p>浏览器解释执行代码,不进行预编译</p><p>2>JavaScript的特点</p><p>a.可以使用任何文本编辑工具编写,只需要浏览器就可以执行程序</p><p>b.解释执行：事先不进行编译,逐行执行代码</p><p>c.基于对象：内置大量现成对象</p><!--/p7--><!--p8--><p>适用的场景：</p><p>--客户端数据计算</p><p>--客户端表单的合法性验证</p><p>--浏览器事件的触发</p><p>--网页特殊显示效果制作</p><p>--Ajax(异步请求)</p><p>3>第一个JavaScript程序</p><p>1>事件定义方式</p><p>在定义事件时直接写入JS脚本</p><p>2>嵌入方式</p><p>在页面上嵌入<script></script>标签</p><p>标签中放置JS代码</p><p>3>文件调用方式</p><p>将JS代码写入一个单独的文件,并保存为.js后缀</p><p>外部文件不能包含<script>标签</p><p>HTML页面中<head>标签中引入外部文件(.js文件)</p><p>2.JavaScript基本语法</p><p>1>编写JS代码</p><p>由Unicode字符集编写</p><p>注释：</p><p>单行://</p><p>多行:/* */</p><p>语句：</p><p>表达式,关键字,运算符组成</p><p>大小写敏感</p><p>使用分号或者换行结束</p><p>2>常量,标识符,关键字</p><p>常量：直接在程序中出现的数据值</p><p>标识符：</p><p>不能以数字开头的字母,数字,下划线,美元符组成</p><p>常用于表示函数,变量等的名称</p><p>关键字：function,if,break...</p><p>3>变量</p><p>var 变量名;//声明一个变量</p><p>a.变量声明</p><p>使用关键字var声明变量</p><p>b.变量初始化</p><p>使用= 赋值</p><p>var a = 1;//数值类型</p><p>a = '1';//字符串类型</p><p>var b;</p><p>没有初始化的变量则自动取值undefined(未定义)</p><p>4>数据类型</p><p>a.基本类型</p><p>Number:数值</p><p>表示整型或浮点型数值</p><p>number对应的封装类(包装类)Number</p><p>Number.MAX_VALUE最大值</p><p>Number.MIN_VALUE最小值</p><p>String:字符串</p><!--/p8--><!--p9--><p>string属于基本类型,没有char类型</p><p>string对应的包装类String</p><p>Boolean:布尔</p><p>取值true/false</p><p>b.特殊类型</p><p>Null:空</p><p>null在程序中代表"无值"或"无对象"</p><p>可以通过赋值null来清空内容</p><p>Undefined:未定义</p><p>定义一个变量,没有初始化值,就取值undefined</p><p>c.复杂类型</p><p>Array:数组</p><p>Object:对象</p><p>5>数据类型转换</p><p>a.隐式转换</p><p>JS是松散型的程序语言,变量在声明时不需要指定数据类型,</p><p>变量的值是有类型的,不同类型的数据在计算中会自动转换</p><p>字符串+ 数字：数字转换成字符串</p><p>数字+ 布尔值：true=1,false=0</p><p>字符串+ 布尔值：布尔值转换为字符串</p><p>布尔值+ 布尔值：true=1,false=0</p><p>b.显示转换</p><p>toString():全部数据类型均可以转换为字符串</p><p>parseInt():转换为整数,强转失败返回NaN</p><p>(不是一个数字not a number)</p><p>parseFloat():转换为浮点数,强转失败返回NaN</p><p>(不是一个数字not a number)</p><p>typeof():查询当前数据类型,返回number,string,object,</p><p>undefined,function,boolean...</p><p>例如：typeof('123')-->stirng</p><p>var a;</p><p>typeof(a)-->undefined</p><p>isNaN():判断当前数据是不是不是一个数字</p><p>true表示不是一个数字</p><p>false表示是一个数字</p><p>6>运算符</p><p>数学运算符：+,-,*,/,%</p><p>var a=1;</p><p>a++;//1</p><p>++a;//3</p><p>a--;//3</p><p>--a;//1</p><p>比较运算符：</p><p>>,>=,<,<=,==,!=,===</p><!--/p9--><!--p10--><p>===全等:数据类型和数据内容都相等</p><p>if(1=='1'){//true</p><p>}</p><p>if(1==='1'){//false</p><p>}</p><p>if(1===1){//true</p><p>}</p><p>逻辑运算符:</p><p>||或</p><p>&&并且(与)</p><p>!非</p><p>三元(三目)表达式:</p><p>表达式1?表达式2:表达式3</p><p>var a = '';</p><p>if(a!=null||a!=''||a!=undefined)//不推荐</p><p>if(a)//推荐</p><p>表达式值布尔值</p><p>0 false</p><p>'' false</p><p>null false</p><p>undefined false</p><p>NaN false</p><p>'1' true</p><p>2 true</p><p>"非空"的值true</p><p>3.JS对象概述</p><p>JS包含很多的对象：</p><p>内置对象,外部对象,自定义对象</p><p>对象中有属性和方法</p><p>对象.属性</p><p>对象.方法()</p><p>内置对象:</p><p>1)String对象</p><p>创建字符串对象有两种方式：</p><p>var str = 'hello world';</p><p>var str2 = new String("Hello World");</p><p>String对象的属性：length长度</p><p>String对象的方法：</p><p>参照day03/字符串对象.html</p><p>2)Number对象</p><p>常用方法：</p><p>toFixed(num):转换成字符串,四舍五入保留小数num 位,</p><!--/p10--><!--p11--><p>num取值0~20</p><p>例如：</p><p>var dataNum = 23.568;</p><p>var dataStr = dataNum.toFixed(2);//23.57</p><p>3)Array对象</p><p>创建数组对象：</p><p>第一种方式：var arry = new Array();</p><p>第二种方式：var ary = [];</p><p>数组的长度是可以变化的</p><p>参照day03/数组对象.html</p><p>4)Math对象</p><p>直接就可以使用</p><p>Math.属性/方法</p><p>参照day03/Math对象.html</p><p>1.外部对象</p><p>1)BOM(Browser Object Model)浏览器对象模型,用来访问和操作</p><p>浏览器窗口</p><p>window对象</p><p>document文档对象</p><p>history浏览器历史记录对象</p><p>location窗口地址对象</p><p>window对象常用的方法：</p><p>alert(str)对话框</p><p>confirm(str)确认框,点击确定返回true,其他返回false</p><p>print()打印当前窗口信息</p><p>open()打开新的窗口</p><p>prompt()显示提示用户输入的对话框</p><p>周期性定时器：</p><p>window.setInterVal(fn,time);</p><p>详细参照定时器.html</p><p>一次性定时器：</p><p>window.setTimeOut(fn,time);</p><p>详细参照一次性定时器.html</p><p>/*获取当前窗口的地址</p><p>* 设置属性值,达到刷新效果</p><p>*/</p><p>//window.location.href=window.location.href;</p><p>/*刷新页面</p><p>*/</p><p>window.location.reload();</p><p>2)DOM(Document Object Model)文档对象模型</p><p>用来访问和操作节点树(文档树)</p><p>删除节点,新增节点,修改节点信息,修改属性,删除属性,添加属性添加文本内容,清空文本内容等等</p><p>查询节点：</p><p>1>document.getElementById();</p><!--/p11--><!--p12--><p>通过元素中ID属性值查询元素</p><p>忽略整个文档结构</p><p>找不到返回null</p><p>2>通过层次查询</p><p>无法忽略整个文档结构</p><p>parentNode:查询父节点</p><p>childNodes:查询子节点</p><p>previousSibling:查询前一个兄弟节点</p><p>previousElementSibling:查询前一个兄弟元素</p><p>nextSibling:查询下一个兄弟节点</p><p>firstChild:查询第一个子节点</p><p>lastChild:查询最后一个子节点</p><p>3>通过标签名称</p><p>document.getElementsByTagName();</p><p>返回一个数组</p><p>如果找不到,返回长度等于0的数组</p><p>4>通过class属性获取元素</p><p>document.getElementsByClassName();</p><p>同上</p><p>5>通过name属性获取元素</p><p>document.getElementsByName();</p><p>同上</p><p>节点类型：</p><p>nodename:节点名称</p><p>元素节点和属性节点：标签名和属性名</p><p>文本节点：#text</p><p>文档节点：#document</p><p>注释节点：#comment</p><p>nodeType:节点类型</p><p>元素节点：1</p><p>属性节点：2</p><p>文本节点：3</p><p>注释节点：8</p><p>文档节点：9</p><p>nodeValue:节点内容</p><p>属性值,null,文本内容,注释内容</p><p>设置节点文本内容：</p><p>innerText:设置或获取开始标签和结束标签内的文本</p><p>innerHtml:设置和获取开始标签和结束标签内的HTML</p><!--/p12--><!--rset--><h2>HTML+CSS标签属性大全</h2><p>HTML CSS标签属性大全 a卷标, 属性名称, 简介 <! - - …- -> 批注 1、跑马灯 <marquee>…</marquee>普通卷动 <marquee behavior=slide>…</marquee>滑动 <marquee behavior=scroll>…</marquee>预设卷动 <marquee behavior=alternate>…</marquee>来回卷动 <marquee direction=down>…</marquee>向下卷动 <marquee direction=up>…</marquee>向上卷动 <marquee direction=right></marquee>向右卷动 <marquee direction=left></marquee>向左卷动 <marquee loop=2>…</marquee>卷动次数 <marquee width=180>…</marquee>设定宽度 <marquee height=30>…</marquee>设定高度 <marquee bgcolor=FF0000>…</marquee>设定背景颜色 <marquee scrollamount=30>…</marquee>设定卷动距离 <marquee scrolldelay=300>…</marquee>设定卷动时间 2、字体效果 <h1>…</h1>标题字(最大) <h6>…</h6>标题字(最小) <b>…</b>粗体字 <strong>…</strong>粗体字(强调) <i>…</i>斜体字 <em>…</em>斜体字(强调) <dfn>…</dfn>斜体字(表示定义) <u>…</u>底线 <ins>…</ins>底线(表示插入文字) <strike>…</strike>横线 <s>…</s>删除线 <del>…</del>删除线(表示删除) <kbd>…</kbd>键盘文字 <tt>…</tt> 打字体 <xmp>…</xmp>固定宽度字体(在文件中空白、换行、定位功能有效) <plaintext>…</plaintext>固定宽度字体(不执行标记符号) <listing>…</listing> 固定宽度小字体 <font color=00ff00>…</font>字体颜色 <font size=1>…</font>最小字体 <font style =font-size:100 px>…</font>无限增大 3、区断标记 <hr>水平线 <hr size=9>水平线(设定大小) <hr width=80%>水平线(设定宽度) <hr color=ff0000>水平线(设定颜色) <br>(换行) <nobr>…</nobr>水域(不换行)</p><h2>html-css</h2><p>HTML结构 <html>...</html>包含整个HTML文档。 <head>...</head>包含HTML文档的标题。 <title>... 指明文档的标题，用于内。...包含HTML文档的正文。 ... 包含一个段落；段落间隔一行。
分行。
水平标尺线。
... 一级标题。
... 二级标题。
... 三级标题。
... 四级标题。
... 五级标题。
... 六级标题。 HTML链接
... 使用href可创建指向另一个文档或锚点的链接。 属性 href="address"要链接的文档或锚点的地址。target="_blank"在新浏览器窗口中打开链接的页面，但该属性不符合XHTML的要求，可以使用javascript来避开这种限制。 HTML文本的对齐和格式化
... 强调(通常是斜体)。
... 更重的强调(通常是粗体)。
... 粗体文本。
... 斜体文本。
... 打字机(等宽)字体。
... 预格式化的文本(原来的分行和空格都将被保留---这些分行的空格通常以等宽字体显示)。
... 比正常字体稍大的文本。
...比正常字体稍小的文本。... 下标。 ... 上标。 ...
要要格式化的文本区域。 属性 style="text-align:alignment"将文本居中对齐、左对齐或右对齐(也可用于、、和等)。 s tyle="font-family:typeface"文本的字体名称。（同上） style="font-size:size"字体大小。 style="color:color"修改文本的颜色。 ... 有序(带编号的)列表。 属性style=list-style-type:numtype" 用于标记列表的编号类型，可能的值包括：decimal(十进制数字)、lower-roman(小写罗马数字)、lower-alpha(小写alpha数字)、upper-alpha(大写alpha数字)、以及none(无) 无序(带项目符号的)列表。 属性 style="list-style-tyle:bullettype" 用于标记列表项的项目符号类型。可能的值包括disc、circle、square和none。 ... 用于或的列表项。 属性 style="list-style-type:type" 标记列表的编号或项目符号。可能的值包括disc、circle、square、decimal、lower-roman、upper-roman、lower-alpha、 upper-alpha和none。 ... 定义列表。 ... 定义项，作为定义列表的一部分。... 与定义项对应的定义。也是定义列表的一部分。 HTML文本链接 ... 通过href属性，创建指向另一个文档 或锚点的链接；通过name属性，创建 可被链接的锚点 属性 href="addres s"要链接的文档或锚点的地址 id="name"锚点在这个文档中的名称 HTML图像 Web基础题(html+css) 一、不定项选择题（每题2分，共66分） 1.参看以下的HTML代码:
表格 对以上代码，以下描述正确的是（） A、该网页内容的第一行显示“表格” B、1和2的表格在同一列 C、1和2的表格在同一行 D、1和3的表格在同一列 2.以下的HTML代码片段中： …… 文具 铅笔 圆珠笔 水笔 …… 以下哪些是正确的判断（） A、铅笔一定位于首行中的第一列 B、圆珠笔一定位于首列中的第一行 C、文具应位于首列首行[行列顺序号以tr、td里内容为准] D、水笔与圆珠笔在不同的行3.根据以下的HTML代码片段：
正确的显示结果是（） A、页面中会有一个默认的表格标题，显示出“月度报表” B、第一个单元格的背景色是红色 C、第二个单元格的的背景色为绿色 D、“月份”显示为粗体 4.根据以下的HTML代码片段： hello!Nice to meet you! this is the default display of an h1 element 以下描述不正确的是（） A、第一个h1设置了特定的属性 B、第二个h1用了系统默认的属性 C、“hello!Nice to meet you!”的字体颜色是浅绿色 D、“this is the default display of an h1 element”的字体大小为30pt 5.根据以下的HTML代码： h1{color:limegreen;font-family:arial} 可以知道（） A、此段代码是一个类选择器 B、选择器的名称是color C、{ }部分是对h1这个选择器的样式说明 D、limegreen 和font-family都是值 6.已知services.html与text.html在同一服务器上，但不在同一文件夹中。假如文档 services.html在文件夹information中，proposals段落在文档services.html中。现要求在text.html文档中编写一个超链接，链接到文档services.html的proposals段落。下面语句正确的是（）html+css 1.万维网(www)和w3c组织 WWW是环球信息网的缩写,英文全称为World Wide Web，中文名字为"万维网",常简称为Web。 万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构,又称W3C理事会(就是我们常说的w3c组织). W3C组织是对网络标准制定的一个非赢利组织，像HTML、XHTML、CSS、XML的标准就是由W3C来定制。 w3c的官网: https://www.360docs.net/doc/4717264760.html,/ 网站中有w3c组织推出的各种的技术的标准的使用及其开发教程. 2.什么是HTML HTML 是用来描述网页的一种语言(开发网页) HTML 指的是超文本标记语言(Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言(markup language) 标记语言是一套标记标签(markup tag)例如:
等等 HTML 使用标记标签来描述网页 HTML属于web开发中前端技术的一种: HTML + CSS + JavaScript + Ajax + (JQeury)等等 3.什么是网页 HTML 文档= 网页 HTML 文档描述网页 HTML 文档包含HTML 标签和纯文本 HTML 文档也被称为网页 通常我们看到的网页，都是以htm 或html 后缀结尾的文件，俗称HTML 文件。不同的后缀，分别代表不同类型的网页文件，例如以ASP 、PHP 、JSP 等等。 不同后缀名的网页中都是由HTML的标签语言+其他语言或标签组成的 例如: .html结尾的网页文件内容中全部是html标签 .jsp结尾的网页文件内容中一般是由html标签+java代码组成 .php结尾的网页文件内容中一般是由html标签+php代码组成《HTML5+CSS3网站设计基础教程》_教学大纲 《HTML5+CSS3网站设计基础教程》课程教学大纲 （课程英文名称） 课程编号：201601210011 学分：5学分 学时：76学时（其中：讲课学时：47 一、课程的性质与目标 《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路 课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限 于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。 课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例 （项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为 目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。 开发工具：DreamweaverCS6 第一章初识HTML5
第二章HTML5页面元素及属性
第四章CSS3选择器
e g o o d f o 背景与图片不透明度的设置 √ 设置背景图像平铺√ 设置背景图像的位置√ 设置背景图像固定√设置背景图像的大小√设置背景的显示区域√设置背景图像的裁剪区域√设置多重背景图像√背景复合属性√线性渐变√径向渐变√重复渐变 √ 第七章表单的应用
Html+css基础教程 H t m l+c s s基础教程 (适合新手) 在这里我把h t m l和c s s放在一起了，适合新手和在学习的人当成笔记用。希望对大家有所帮助。 HTML是网页主要的组成部分，基本上一个网页都是由HTML语言组成的，所以要学习网站怎样建设，必须从网页的基本语言学起。 一、HTML的组成结构 HTML分为单标识语句和双标识语句。 <标识>内容如：搜狐 标识中存在标识属性用来定义各标识属性的值。 中心内容 二、HTML全局结构 1、头部。（标题栏）只要你学过英语，你应该知道头怎么用英文写吧！yes，HEAD就是了；所以，头部的HTML写法就是
头部的内容，简单不，大家注意一下，这两个非常相似，只是后一个比前一个多了“/”符号。类似这样的以后会经常用到。 2、眼睛。（标题内容）就好像人的眼睛一样，它是心灵的窗口，而一个网页的眼睛应该就是它的页面的标题了，标题怎么说呢？title,yes！大家知道眼睛是长在头上的，所以啦:标题 这些应放在和之间。也就是 标题 3、身体。（主体）身体是网页最主要的部分了，因为前面讲的都不是页面所显现出来的，而大家所看到的页面页就是他的身体部分了（当然它的TITLE可以在浏览器的最左上角可以看到），身体----BODY，他的写法也就是：页面内容 最后，别忘了把这些部分组成一体----网页，所以咱们就用把他们给包起来。 咱们来大体看看网页的结构： 标题 页面内容 在进入主体内容标识讲解之前我想给大家介绍下标识中的常用属性，如： 1、内容 leftMargin、topMargin表示：设置页面离外框的左边距和上边距的距离为像素值，默认为1。marginwidth、 marginheight表示：设置页面文字同页面边缘的间距为像素值，默认为1。 注marginwidth、 marginheight还可以用于表格、框架等中。实验一HTML、CSS网页制作实验 实验一HTML、CSS网页制作实验 一、做出网页1.html，效果如下图所示： 要求如下： 1、诗的题目格式为红色、加粗、居中显示。 2、作者格式为红色、斜体、居右显示。 3、诗的内容字体格式从上到下分别是
，诗的第一行和第三行内容为蓝色字体。 二、做出网页2.html，效果如下图所示。 要求如下： 1、图像加边框。 2、图像相对于文字左对齐。 三、做出网页3.html，效果如下图所示： 要求如下： 文字颜色正常是#3c3c3c、白色背景，鼠标经过时变为#FF8400、#EDEEF0色背景。 四、请做出网页4.html，效果如下图所示。 五、请做出以下网页，效果如下图所示，保存为5.html： 六、请做出网页6.html，效果如下图所示： 要求如下：
1、使用内嵌式引入CSS样式表。 2、使用类选择器定义元素。 （1）通过控制不同的类，分别为第一个字母“G”设置为蓝色、加粗、60px 字体； 第二个字母“o”设置为红色、加粗、60px字体； 第三个字母“o”设置为黄色、加粗、60px字体； 第四个字母“g”设置为蓝色、加粗、60px字体。 （2）剩余字母“le”按默认样式输出。 七、请做出网页7.html，效果如下图所示。 要求如下： 1、设置所有文本为宋体、12像素、绿色字体，“春季”字体颜色设为红色。 2、设置标题“春天”为16像素、红色、加粗、居中、上划线的效果。 3、设置文本首行缩进2个字符。 八、请做出网页8.html，效果如下图所示： 要求如下： 1、设置所有文本为微软雅黑、14像素、黑色字体。 2、新浪”、“新浪网”为红色字体，“博客首页”为蓝色字体，网址及日期为绿色字体。 3、设置标题为16像素、左对齐、下划线的效果。 4、设置文本“-百度快照-评价”为灰色、下划线的效果。
网页设计基础Div+CSS布局入门教程 网页设计基础：Div+CSS布局入门教程 在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML 基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图：
根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 以下为引用的内容： DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/
│├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 接下来我们在桌面新建一个文件夹，命名为“DIV+CS S布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容： 以下为引用的内容：
无标题文档 [color=#aaaaaa][/color]
[color=#aaaaaa][/color]
[color=#aaaaaa][/color]
HTML+CSS基础知识点 HTML+CSS笔记 1.学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。 （1）HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 （2）CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 （3）JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。 2.添加样式如：
