HTML
1-为什么学习Web前端
Web前端包括 HTML/CSS/JS
静态网页/动态网页
不是编程
JavaEE后端
基本了解
Web前端工程师
JavaEE工程师
PHP Web工程师
Python Web工程师
.net Web工程师
Web前端Html/Css/Js->Web前端工程师
以了解Java基础->JavaEE/Web
2-什么是HTML
超文本标记语言
标记语言不是编程语言
超文本页面可以包含图片,视频,音乐等
HTML/XHTML /HTML5
可以使用记事本/notepad++/sublime/dreamweaver
3-安装工具和学习方法
4-创建第一个网页文件
5-网页的基本结构(标签的基本语法)
<html>
<head>
<title>我是标题</title>
</head>
<body>
Hello world!
1.html语法不区分大小写
2.又开始,必须有结束
3.单个标记
<hr/>
</body>
</html>
body内容全部显示在一行上了
<hr/>下划线
6-设置文档类型和网页编码
添加文档类型
<!DOCTYPE html> 说明所用语法,编译类型
说明文档编码模式/utf-8,gbk,gb2321
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
注释:<!--utf-8 gbk gb2321 -->. 右键快捷键
<!DOCTYPE html>
<html>
<head>
<title>我是标题</title>
<meta http-equiv="Content-Type" content="text/html;charse=utf-8"/>
</head>
<body>
Hello world!
1.html语法不区分大小写
2.又开始,必须有结束
3.单个标记
<hr/>
</body>
</html>
7-段落标签和标题标签
其内文本内容无任何格式,空格没有作用
换行标签:<br/>
标题:<h1></h1>
段落:<p></p>
<!DOCTYPE html>
<html>
<head>
<title>我是标题</title>
<meta http-equiv="Content-Type" content="text/html;charse=utf-8"/>
</head>
<body>
Hello world!<br/>
1.html语法不区分大小写<br/>
2.又开始,必须有结束<br/>
3.单个标记
<hr/>
<!--加粗,独占一行 -->
<h1>《我的奋斗》</h1>
<h2>《我的奋斗》</h2>
<h3>《我的奋斗》</h3>
<h4>《我的奋斗》</h4>
<h5>《我的奋斗》</h5>
大家好HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。 [1]
超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。 [1]
</body>
</html>
8-标签的属性和段落的对齐属性
百度搜索 W3C school 搜索段落 不需要记住标签
属性名,属性值
align:对齐
<p align="left">
<p align="right">
<p align="center">
<p align="justify"> 两端对齐
9-预格式标签和字体标签
预格式标签:<pre></pre> 编辑器是什么样的网页就会呈现什么样
字体标签:<font color="red" size="7" face="幼园>大家好</font> size:1~7 字体在记事本选择字体查看电脑有什么字体
10-修饰标签
加粗: <b> 我 </b>
加粗:<strong>我</strong>
倾斜:<em> hi </em>
上标:2<sup>2</sup>=4
下标:Hi<sub>[1]</sub>
11-html中的特殊符号
工具 测试
W3School HTML教程
HTML实例 可以直接测试
如何显示标签<p> 需要使用实体名称:<; p >;
显示空格: ;
<html>
<head>
<title>特殊符号</title>
</head>
<body>
段落<p>
</body>
</html>
12-显示图片
显示图片标签:<img/>
这个是我的课程<img src="Img/01.jpg" align="top/middle/bottom" width="200px" height="50px/50%"
alt="这个图片是xx"/>。
对齐方式与文字默认底部. 50%相对于网页变化
alt:如果无法显示图片就会用文本代替
13-图片路径中的相对路径和绝对路径
绝对路径:项目都不可以移动
<!DOCTYPE html>
<html>
<head>
<title>绝对路径</title>
<meta http-equiv="Content-Type" content="text/html;character=utf-8"/>
</head>
<body>
This is my course <img src="E:\WebStudent\Java\FirstClass\Img\01.jpg" align="bottom" width="20%" alt="FirstClass"/>
</body>
</html>
相对路径:该网页所在位置
../代表上一级
<!DOCTYPE html>
<html>
<head>
<title>绝对路径</title>
<meta http-equiv="Content-Type" content="text/html;character=utf-8"/>
</head>
<body>
This is my first course <img src="Img\01.jpg" align="bottom" width="20%" alt="FirstClass"/>
This is my second course <img src="..\02.jpg" align="bottom" width="20%" alt="SecondClass"/>
</body>
</html>
14-无序列表和有序列表
无序列表:<ul type="disc/circle/square"> <li></li><li></li><ul>
有序列表:<ol start="10" type="a"> <li></li></ol>
罗马数字 type="I" 大写i 小写罗马数字 小写i
15-自定义列表
<dl><dd></dd></dl>
16-超级链接
可以链接视频,音乐,其他网页
进入到其他网页
<a href="http://www.baidu.com">进入百度</a>
进入到本地网页
<a href="02段落和标题.html">进入段落那个网页</a>
空链接
<a href=#">空链接</a>
文字图片链接:
<a href="http://www.sikiedu.com/my/course/203">beginGo<img src="Img/01.jpg"/></a>
17-超级链接的属性
target="_blank" 打开一个新标签页面
target="_self" 将自身页面重载
title="XXX" 鼠标触碰到显示文字
name="baidu" 锚点 命名
<a href="http://www.baidu.com" target="_blank" title="将进入百度页面" name="baidu">进入百度</a>
<a href="02段落和标题.html" target="_self">进入到段落那个网页</a>
<html>
...
<body>
<a href="#chapter1">第一章</a>
<a href="#chapter2">第二章</a>
<a href="#chapter3">第三章</a>
<a href="#" name="chapter1"><h1>第一章</h1></a>
XXX
<!-- 隐形锚点 -->
<a href="#" name="chapter2"></a><h2>第二章</h2>.
YYY
</body>
</html>
18-超级链接的其他内容
<html>
...
<body>
<a href="#chapter1">第一章</a>
<a href="#chapter2">第二章</a>
<a href="#chapter3">第三章</a>
<a href="#" name="chapter1"><h1>第一章</h1></a>
XXX
<!-- 隐形锚点 -->
<a href="#" name="chapter2"></a><h2>第二章</h2>.
YYY
<!-- 超链接实现跳转页面加定位 -->
<a href="doupo.html#chapter2">《斗破苍穹》第二章</a><br/>
<a href="Img.zip">下载图片</a>. <!--下载文件-->
<a href="mailto:2222222@qq.com">联系我们</a> <!-- 发送图片-->
</body>
</html>
第二章:表格
<DOCTYPE html>
<html>
<head>
<title>XX</title>
</head>
<body>
<table border="10px">
<tr>
<td>XXX</td>
<td>XXX</td>
<td>XXX</td>
</tr>
<tr>
<td>XXX</td>
<td>XXX</td>
<td>XXX</td>
</tr>
</table>
</body>
</html>
1-创建表格
<DOCTYPE html>
<html>
<head>
<title>XX</title>
</head>
<body>
<table border="10px" width="500px" height="400px" align="center" bgcolor="red" cellspacing="10px" cellpadding="10px">
<!-- align="right" "left" cgcolor="#f0f0f0"-->
<tr>
<td>XXX</td>
<td>XXX</td>
<td>XXX</td>
</tr>
<tr>
<td>XXX</td>
<td>XXX</td>
<td>XXX</td>
</tr>
</table>
</body>
</html>
2-表格常用属性
<DOCTYPE html>
<html>
<head>
<title>XX</title>
</head>
<body>
<table border="10px" width="500px" height="400px" align="center" bgcolor="red" cellspacing="10px" cellpadding="10px">
<!-- align="right" "left" cgcolor="#f0f0f0"-->
<tr height="200px" align="right" valign="bottom" bgcolor="#FFDAB9">
<td wight="200px" bgcolor="#FFC0CB" align="left" >XXX</td>
<td>XXX</td>
<td>XXX</td>
</tr>
<tr>
<td>XXX</td>
<td>XXX</td>
<td>XXX</td>
</tr>
</table>
</body>
</html>
3-表格中行和列的常用属性
4-表格中多行多列合并
<DOCTYPE html>
<html>
<head>
<title>XX</title>
</head>
<body>
<!--col=column colspan -->
<table border="1" width="500px" align="center" height="200px">
<tr>
<td colspan="2">XX</td><!--删除后面一个--> <td>XX</td> <td>XX</td> <td>XX</td>
</tr>
<tr>
<td rowspan="2">XX</td> <td>XX</td> <td>XX</td> <td>XX</td> <td>XX</td>
</tr>
<tr>
<!--删除--> <td>XX</td> <td>XX</td> <td colspan="2" rowspan="2">XX</td> <td>XX</td>
</tr>
<tr>
<td>XX</td> <td>XX</td> <td>XX</td>
</tr>
</table>
</body>
</html>
5-销售表格的制作
6-表格的嵌套和高宽的百分比设置方法
7-表格的表头和标题
8-表格布局实战一整体布局控制
9-表格布局实战二控制页头部和页面尾部
10-表格布局实战三控制课程介绍的布局
第三章:表单
1-什么是表单
2-文本和密码输入框
3-文本输入控件的一些属性
4-单选按钮
5-多选按钮
6-提交按钮、重置按钮和普通按钮
7-图片提交按钮和隐藏控件
8-下拉列表
9-文本域完成大段文本的输入
10-表单属性
11-文件上传
第4章:框架Frame
1-使用框架切分网页
2-框架的多种切分方法
3-使用框架实现后台管理系统的布局
4-总结
108