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>

<head>



</head>

<body>



</body>

</html>

html标签

1.<!DOCTYPE>指定版本：带X的是w3发布的，其他的都是各个公司发布的

<!DOCTYPE html>声明为html5文档

2.<title>指定网页标题

<title>标题</title>

3.乱码问题

1>指定html文档格式为utf-8

2><head>



×<meta http-equiv="content-type" content="text/html;charset=utf-8"></meta>



√<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="data: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>