WebBasic

来源：互联网发布：福利彩票不能网络购买编辑：程序博客网时间：2024/06/10 23:26

WebBasic

1.web应用体系

课程大纲

1.web基础：做网页2.结构：    a.html        勾勒网页结构及内容    b.css        美化网页    c.JavaScript<重点>        呈现动态数据和效果3.JavaScript:    --Java程序员使用JS实现页面的业务逻辑    --美工做出静态页面(html+css)

设备

Chrome、thinkpadX、thinkpadT、mac

web三要素和http

![](http://i.imgur.com/otvX8lK.jpg)

2.html

html(HyperText Markup Language)1.html与xml    1）XML可扩展标记语言(传输或存储数据)    a.标签、属性可扩展，元素间的嵌套关系可扩展    b.标签        双标签：<标签名></标签名>        单标签：<标签名/>        关系：<标签名/> == <标签名>内容为空</标签名>    c.属性        定义在开始标签,属性名无序不重复,属性名="属性值"    d.元素        <标签名 属性名="属性值">内容</标签名>    2）HTML超文本标记语言(显示数据)    a.语法固定        标签，属性，元素嵌套关系固定    b.html基本结构        <!-- html是唯一的根 -->        <html>            <head>                <!-- 设置文档标题，编码，引入的资源 -->            </head>            <body>                <!-- 页面上显示的内容 -->            </body>        </html>

html标签

1.<!DOCTYPE>指定版本：带X的是w3发布的，其他的都是各个公司发布的<!DOCTYPE html>声明为html5文档2.<title>指定网页标题    <title>标题</title>3.乱码问题    1>指定html文档格式为utf-8    2><head>        <!-- html4标准 -->        ×<meta http-equiv="content-type" content="text/html;charset=utf-8"></meta>        <!-- html5标准 -->        √<meta charset="utf-8"/>      </head>文本处理4.标题元素<h#>...</h#>  #=1,2,3,4,5,65.段落元素<p></p>6.列表有序列表<ol>、无序列表<ul>、列表项<li><!-- 有序列表 --><ol>    <li>AA省</li>    <li>BB省</li></ol><!-- 无序列表 --><ul>    <li>AA市</li>    <li>BB市</li></ul><!-- 列表嵌套 --><ol>    <li>        AA省        <ul>            <li>AA市</li>        </ul>    </li>    <li>BB省</li>    <li>CC省</li></ol>  7.div(块级标签)1)块级元素<p>、<div>、<h#>2)行内元素<span>、<a><div></div>多用于确定网页结构8.行内元素1)<span></span>你好<span style="">你好</span>你好加粗:<strong></strong>、<b></b>斜体:<i></i>、<em></em>下划线:<u></u>删除线:<del></del>2)空格折叠内容内多个空格当作一个空格处理<br/>换行![行内元素](http://i.imgur.com/VmEjjlK.jpg)9.图片标签相对路径与绝对路径<img src="image's path" width="宽" height="高">10.超链接元素<a href="链接http://www.baidu.com" target="打开方式:_blank/_self">文本</a>锚点:    <a name="top"></a>    <a href="#top">去顶部</a> === <a href="#">去顶部</a>11.表格<table border="像素:1px" width height align:对齐 cellpadding:单元格与内容间距 cellspacing:单元格间距>    <tr align/valign:对齐>        <td align/valign/width/height/colspan跨行/rowspan跨列></td>    </tr></table>表分组:目的是为了方便组内元素设置样式和编程(JS)<table>    <thead><!-- 标题行 -->        <tr>            <td></td>        </tr>    </thead>    <tbody><!-- 数据行 -->        <tr>            <td></td>        </tr>    </tbody>    <tfoot><!-- 结尾行(总计) -->        <tr>            <td></td>        </tr>               </tfoot></table>

继续学习

http://www.w3school.com.cn/

0 0