web基础--html
WebBasic
1.web应用体系
课程大纲
1.web基础：做网页
2.结构：
a.html
勾勒网页结构及内容
b.css
美化网页
c.JavaScript<重点>
呈现动态数据和效果
3.JavaScript:
--Java程序员使用JS实现页面的业务逻辑
--美工做出静态页面(html+css)
设备
Chrome、thinkpadX、thinkpadT、mac
web三要素和http
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,6
5.段落元素
<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/>换行
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://http://www.w3school.com.cn/
