5513人加入学习
(22人评价)
Web前端第一季(HTML)

制作完成于2018年5月25日

价格 免费

段落标签<br/>:换行操作

水平线标签<hr/>

标题标签<h1-6>:加粗,独占一行,h1最大,h6最小

<p>:浏览器会自动在使用p标签的前后添加空行


[展开全文]

表格:< table >

  行:<tr>     列:<td> </td>

                                         </tr>

   <table   border="1px">:

 

[展开全文]

 <table width="500px"  宽度为500像素

    align=“lift/right/center”对齐

    bgcolor=“  ”

    cellspacing=""  单元格与边框间距

  

   

 

 

[展开全文]
<!DOCTYPE html>
<html>
<head>
	<title>我是标题</title>
	<meta ="Content-Type" content="text/html;charset=utf-8"/>
	<!-- utf-8 gbk gb2312 -->
</head>
<body>

<table border="10px">

<tr> <!-- table row  table data -->
	<td>我是内容</td>
	<td>我是内容</td>
	<td>我是内容</td>
</tr>

<tr>
	<td>我是内容</td>
	<td>我是内容</td>
	<td>我是内容</td>
</tr>

<tr>
	<td>我是内容</td>
	<td>我是内容</td>
	<td>我是内容</td>
</tr>

</table>

</body>
</html>

 

[展开全文]

html语法不区分大小写,规范是要求xiao'xie

[展开全文]
<!DOCTYPE html>
<html>
<head>
	<title>我是标题</title>
	<meta ="Content-Type" content="text/html;charset=utf-8"/>
	<!-- utf-8 gbk gb2312 -->
</head>
<body>

<table border="10px" width="500px" height="400px" align="center" bgcolor="#f0f0f0" cellspacing="10px" cellpadding="10px"> <!-- align="center","right,"left" bgcolor="red","#f0f0f0" -->

<tr> <!-- table row  table data -->
	<td>我是内容</td>
	<td>我是内容</td>
	<td>我是内容</td>
</tr>

<tr>
	<td>我是内容</td>
	<td>我是内容</td>
	<td>我是内容</td>
</tr>

<tr>
	<td>我是内容</td>
	<td>我是内容</td>
	<td>我是内容</td>
</tr>

</table>

</body>
</html>

 

[展开全文]

html的格式是通过标签来控制,不然全都堆积在yi'xing

[展开全文]
<!DOCTYPE html>
<html>
<head>
	<title>我是标题</title>
	<meta ="Content-Type" content="text/html;charset=utf-8"/>
	<!-- utf-8 gbk gb2312 -->
</head>
<body>

<table border="10px" width="500px" height="400px" align="center" bgcolor="#f0f0f0" cellspacing="10px" cellpadding="10px"> <!-- align="center","right,"left" bgcolor="red","#f0f0f0" -->

<tr height="200px" align="right" valign="bottom" bgcolor="#FFDAB9"> <!-- table row  table data -->
	<td width="200px" height="50px" bgcolor="#FFC0CB" align="left">我是内容</td>
	<td>我是内容</td>
	<td>我是内容</td>
</tr>

<tr>
	<td>我是内容</td>
	<td>我是内容</td>
	<td>我是内容</td>
</tr>

<tr>
	<td>我是内容</td>
	<td>我是内容</td>
	<td>我是内容</td>
</tr>

</table>

</body>
</html>


<!-- 
<tr align="right" valign="bottom" bgcolor="#FFDAB9">
	<td width="200px" height="50px">我是内容</td>
	<td>我是内容</td>
	<td>我是内容</td>
</tr>
 -->

 

[展开全文]

font标签是靠属性去控制字体的yang'shi

[展开全文]
<!DOCTYPE html>
<html>
<head>
	<title>我是标题</title>
	<meta ="Content-Type" content="text/html;charset=utf-8"/>
	<!-- utf-8 gbk gb2312 -->
</head>
<body>
<!-- col=column -->
<table border="1" width="500px" align="center" height="200px">

<tr>
	<td colspan="3">内容</td><td>内容</td><td>内容</td>
</tr>

<tr>
	<td rowspan="2">内容</td><td>内容</td><td>内容</td><td colspan="2" rowspan="2">内容</td>
</tr>

<tr>
	<td>内容</td><td>内容</td>
</tr>

<tr>
	<td colspan="2">内容</td><td>内容</td><td>内容</td><td>内容</td>
</tr>

</table>

</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<html>
<head>
	<title>我是标题</title>
	<meta ="Content-Type" content="text/html;charset=utf-8"/>
	<!-- utf-8 gbk gb2312 -->
</head>
<body>

<table border="1px" align="center" width="500px" height="300px">
<tr align="center" valign="center">
	<td rowspan="2">商品</td><td colspan="2">上月</td><td colspan="2">本月</td>
</tr>
<tr align="center" valign="center">
	<td>销量</td><td>销售额</td><td>销量</td><td>销售额</td>
</tr>
<tr align="center" valign="center">
	<td>手机</td><td>100</td><td>500</td><td>200</td><td>400</td>
</tr>
<tr align="center" valign="center">
	<td>笔记本</td><td>200</td><td>450</td><td>45</td><td>700</td>
</tr>
</tr>
<tr align="center" valign="center">
	<td>合计</td><td>300</td><td>950</td><td>245</td><td>1100</td>
</tr>
</table>

</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<html>
<head>
	<title>我是标题</title>
	<meta ="Content-Type" content="text/html;charset=utf-8"/>
	<!-- utf-8 gbk gb2312 -->
</head>
<body>

<table border="1px" align="center" width="80%" height="500px">
<tr align="center" valign="center">
	<td rowspan="2" width="300px" height="300px">商品
	<table border="1px" width="50%" height="50%" align="center"><tr><td>1</td><td>2</td></tr> <tr><td>1</td><td>2</td></tr></table>
	</td><td colspan="2">上月</td><td colspan="2">本月</td>
</tr>
<tr align="center" valign="center">
	<td>销量</td><td>销售额</td><td>销量</td><td>销售额</td>
</tr>
<tr align="center" valign="center">
	<td>手机</td><td>100</td><td>500</td><td>200</td><td>400</td>
</tr>
<tr align="center" valign="center">
	<td>笔记本</td><td>200</td><td>450</td><td>45</td><td>700</td>
</tr>
</tr>
<tr align="center" valign="center">
	<td>合计</td><td>300</td><td>950</td><td>245</td><td>1100</td>
</tr>
</table>

</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<html>
<head>
	<title>我是标题</title>
	<meta ="Content-Type" content="text/html;charset=utf-8"/>
	<!-- utf-8 gbk gb2312 -->
</head>
<body>

<table border="1px" align="center" width="80%" height="500px">
<!-- th=table head 加粗,居中 -->
<caption>销售统计表</caption>
</tr>
<tr>
	<th>商品</th><th>销量</th><th>销售额</th><th>销量</th><th>销售额</th>
</tr>
<tr>
	<td>手机</td><td>100</td><td>500</td><td>200</td><td>400</td>
</tr>
<tr>
	<th>笔记本</th><td>200</td><td>450</td><td>45</td><td>700</td>
</tr>
</tr>
<tr>
	<td>合计</td><td>300</td><td>950</td><td>245</td><td>1100</td>
</tr>
</table>

</body>
</html>

 

[展开全文]
<!DOCTYPE html>
<html>
<head>
	<title>我是标题</title>
	<meta ="Content-Type" content="text/html;charset=utf-8"/>
	<!-- utf-8 gbk gb2312 -->
</head>
<body>

<table width="100%">
<tr bgcolor="#242424" height="70px" cellspacing="0" cellpadding="0">
	<td>
		<table width="100%" height=100%><tr height="100%" align="center">
		<td width="100px"><Img src="Img/logo.png" height="50px" /></td>
		<td width="70px"><font  size="2" color="#DDDDDD">首页</font></td>
		<td width="70px"><font  size="2" color="#DDDDDD">全部课程</font></td>
		<td width="70px"><font  size="2" color="#DDDDDD">Unity</font></td>
		<td width="70px"><font  size="2" color="#DDDDDD">Unreal</font></td>
		<td width="70px"><font  size="2" color="#DDDDDD">关于我们</font></td>
		<td></td><td></td><td></td>
		</tr></table>
	</td>
</tr>
<tr>
	<td>2</td>
</tr>
<tr>
	<td>3</td>
</tr>
<tr>
	<td>4</td>
</tr>
<tr>
	<td>5</td>
</tr>
</table>

</body>
</html>

 

[展开全文]

HTML CSS Js

HTML是什么?
百度百科:https://baike.baidu.com/item/HTML/97049
总结:“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
超文本标记语言。HTML是用来开发网页的。(网页后缀 html,htm)html是标记语言不是编程语言。

超文本:超级文本,比文本更加牛逼,可以更加丰富的呈现文字信息。
标记:也叫做标签,这个是html里面的一个基本语法,所有的结构都是通过标记来控制的。

为什么学习HTML?
HTML网页开发在JavaEE开发中的承担的部分。(网页设计师+JavaEE工程师)
在团队中会有专门的人,做网页开发,那我们为什么还需要学习HTML?虽然我们不需要能够开发精美的网页,因为我们需要拿到人家开发好的网页,并且能看到人家的网页代码,后后续的开发,所以我们需要掌握HTML和其他网页前端的知识。

本课程的适用对象?
网页零基础入门课程
Web前端工程师
JavaEE工程师
PHP Web工程师
Python Web工程师
.net Web工程师

[展开全文]
<!DOCTYPE html>
<html>
<head>
	<title>我是标题</title>
	<meta ="Content-Type" content="text/html;charset=utf-8"/>
	<!-- utf-8 gbk gb2312 -->
</head>
<body>

<table width="100%">
<tr bgcolor="#242424" height="70px" cellspacing="0" cellpadding="0">
	<td>
		<table width="100%" height=100%><tr height="100%" align="center">
		<td width="100px"><Img src="Img/logo.png" height="50px" /></td>
		<td width="70px"><font  size="2" color="#DDDDDD">首页</font></td>
		<td width="70px"><font  size="2" color="#DDDDDD">全部课程</font></td>
		<td width="70px"><font  size="2" color="#DDDDDD">Unity</font></td>
		<td width="70px"><font  size="2" color="#DDDDDD">Unreal</font></td>
		<td width="70px"><font  size="2" color="#DDDDDD">关于我们</font></td>
		<td></td>
		<td width="70px"><font  size="2" color="#DDDDDD">登录</font></td>
		<td width="70px"><font  size="2" color="#DDDDDD">注册</font></td>
		</tr></table>
	</td>
</tr>
<tr>
	<td>
	<table width="1000px" align="center"><tr><td><font  size="2">首页&nbsp;&nbsp;/&nbsp;&nbsp;JavaEE&nbsp;&nbsp;/&nbsp;&nbsp;Java编程学习第四季&nbsp;&nbsp;/&nbsp;&nbsp;默认教学计划</font></td></tr></table>
	</td>
</tr>
<tr>
	<td>3</td>
</tr>
<tr>
	<td>4</td>
</tr>
<tr height="200px" bgcolor="#000000" align="center">
	<td>
	<font  size="2" color="#DDDDDD">课程存档</font><br/><br/>
	<font  size="2" color="#DDDDDD">课程内容版权均归 SiKi学院 所有 京ICP备16046985号</font>
	</td>
</tr>
</table>

</body>
</html>

 

[展开全文]

<html>
<head>
    <title>我是标题</title>
<body>
Hello world!
1,html语法不区分大小写  //小写
2,又开始,必须有结束
3,单个标记

<hr />
<hr />
</body>
</html>

[展开全文]