0
点赞
收藏
分享

微信扫一扫

html概述+基本语法+表格

1、系统结构:   2

1.1 B/S架构:(以后主要走的方向是这个。)

Browser / Server      (浏览器/服务器的交互形式。)

Browser支持哪些语言:HTML CSS JavaScript

写HTML CSS JavaScript代码的这波人职位叫做:WEB前端开发工程师。(Java程序员目前来看也需要会一些前端的东西。)

前端页面上的图片需要UI设计师完成。(PS对java程序员来说没有太高的要求。)

S是服务器端Server,Server端的语言很多:C C++ Java python.....(我们主要是使用Java语言完成服务器端的开发)

1.1.1 B/S架构的系统有什么优点和缺点?   2

优点:升级方便,只升级服务器端代码即可。维护成本低。

缺点:速度慢、体验不好、界面不炫酷


企业内部的解决方案都是采用B/S架构的系统,因为企业内部办公需要的一些系统不需要炫酷,不需要特别好的用户体验,只要能做数据的增删改查即可。并且企业内部更注重维护的成本。

1.1.2 B/S架构的系统有哪些代表?  2

京东

百度

天猫

....

1.2 C/S架构  2

Client / Server     (客户端/服务器端的交互形式。)

1.2.1 优缺点    2

缺点:升级麻烦,维护成本较高。

优点:速度快,体验好,界面炫酷。(娱乐型的系统多数是C/S架构的。)

1.2.2 常见的C/S架构的系统:  2

QQ

微信

支付宝

....

1.3 软件和环境准备   3

看b站老杜html  3

2、什么是HTML?怎么开发HTML?怎么运行HTML? 4

* HTML: Hyper Text Markup Language (超文本标记语言)

由大量的标签组成,每一个标签都有开始标签和结束标签。


<标签>

<标签>

<标签 属性名="属性值" 属性名="属性值">

</标签>

</标签>

超文本: 流媒体、图片、声音、视频....

* HTML开发的时候使用普通的文本编辑器就行,创建的文件扩展名是.html或者.htm

HTML也有专业的开发工具,例如:DreamWeaver、HBuilder.....

* 直接采用浏览器打开HTML文件就是运行。

3、HTML是谁制定的?  3

W3C:世界万维网联盟

W3C制定了HTML的规范,每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。

HTML规范目前最高的版本是:HTML5.0,简称H5.

我们这里学习HTML4.0(主要是学习一下HTML的基础用法。)

W3C制定了很多规范:

HTML/XML/http协议/https协议......

为了方便中国web前端程序员的开发,提供大量的帮助文档。为开发提供方便。

w3school:先出现的,和W3C没有关系

w3cschool:后出现的,和W3C没有关系

4. 第一个html程序   5

代码在  001我的第一个html页面.html

<!--一个html代码有根,有头,有体,并且每一部分都有自己相应的结尾-->
<!--
	这是html的注释
	加上以下代码的第一行(即<!doctype html>)就表示HTML5语法,去掉就表示html4.0
	html不区分大小写,语法松散不严格
-->
<!doctype html>

<html><!--根-->

	<head><!--头-->
		<!--网页的标题,显示再网页的左上角-->
		<title>网页的标题</title>
	</head>

	<body><!--体-->
		网页的主题内容~欢迎学习HTML!
	</body>


</html>  <!--这句写不写都可以,也不区分大小写-->

5. 基本标签  6

段落标记:

段落标记:<p></p>

标题字:

<!--标题字:时html预留的格式,和word中的标题字相同-->

 <h1>标题字</h1>

 <h2>标题字</h2>

 <h3>标题字</h3>

 <h4>标题字</h4>

 <h5>标题字</h5>

换行 <br> ,<br>标签是一个独目标记

水平线(横线)   <hr>  也是独目标记

预留格式  <pre></pre>

<del>删除字</del>

<ins>插入字</ins>

<i>斜体字</i>

右上角加字:   例如  10<sup>2</sup>

右下角加字:例如  10<sub>m</sub>

字体标签  :<font><?font>  例如  <font color="red" size="50"></font>

代码在  002html基本标签

<!--基本标签   6-->
<!doctype html>
<html>
	<head>
	 <title>HTML的基本标签</title>
	</head>
	<body>
		<!--段落标记 <p></p>-->
		<p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花,觉得花落以后埋在土里最干净,说明她对美有独特的见解。她写了葬花词,以花比喻自己,在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话,成为《红楼梦》中一场情人之间解除误会的绝唱。</p><p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花,觉得花落以后埋在土里最干净,说明她对美有独特的见解。她写了葬花词,以花比喻自己,在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话,成为《红楼梦》中一场情人之间解除误会的绝唱。</p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花,觉得花落以后埋在土里最干净,说明她对美有独特的见解。她写了葬花词,以花比喻自己,在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话,成为《红楼梦》中一场情人之间解除误会的绝唱。

		<!--标题字:时html预留的格式,和word中的标题字相同-->
		<h1>标题字</h1>
		<h2>标题字</h2>
		<h3>标题字</h3>
		<h4>标题字</h4>
		<h5>标题字</h5>

		<!--换行 <br> ,<br>标签是一个独目标记-->
		hello,world!
		hello<br>world!

		<!--水平线(横线)也是独目标记-->
		<hr>
		<!--color和width都是hr标签的属性-->
		<hr color = "red" width="50%">   <!-- 还可以设置颜色,宽度-->
		<hr color = 'green' width=30%>   <!--语法很松散的,怎么写都行-->

		<!--预留格式-->
		<pre>
		for(int i=0;i<10;i++){
			System.out.println(i);
		}
		</pre>

		<del>删除字</del>
		<ins>插入字</ins>
		<b>粗体字</b>
		<i>斜体字</i>

		10<sup>2</sup>  <!--右上角加字-->
		10<sub>m</sub>  <!--右下角加字-->
		<font color="red" size="50">字体标签</font>

	</body>
</html>

6. 实体符号  7

实体符号特点是:以&开始,以;结束。&lt; 是小于号   &gt; 是大于号

空格    &nbsp;

大于号   &gt;

小于号   &lt;

代码在  003实体符号

<!--实体符号    7-->
<!doctype html>
<html>
	<head>
		<title> 实体符号 </title>
	</head>
		<body>
		b<a>c <br><!--当我想在网页上显示b<a>c 时,由于<>冲突会被错误解析  <br>时换行-->

		<!-- 实体符号特点是:以&开始,以;结束。< 是小于号   > 是大于号 -->
		b<a>c   <br>

		<!--空格      -->
		abc      def

		</body>
</html>

7. 表格  8

<table></table>代表表格  <tr></tr> 代表行  <td></td>代表单元格

border="1px" 设置表格的边框为1像素宽度。

  width 宽度

  height 高度

例如<table border="1px" width="300px" height="150px">

<!--如果width写百分比形式,则是按照页面等比例缩放--><table border="1px" width="60%" height="150px"> 

代码在  004 表格

<!--表格   8-->
<!doctype html>
<html>
	<head>
		<title> 表格 </title>
	</head>
	<body>

		<br><br><br><br><br><br><br><br><br><br><br><br>  <!--换行-->
		<center><h1>员工信息列表</h1></center>  <!--这里插入标题一形式的一句话-->
		<hr>  <!--横线-->
		
		<!--解释:<table></table>代表表格  <tr></tr> 代表行  <td></td>代表单元格-->
		<!--
			border="1px" 设置表格的边框为1像素宽度。
			width 宽度
			height 高度
			<table border="1px" width="300px" height="150px">
		-->
		<!--画一个三行三列的表格-->
		<table align="center" border="1px" width="60%" height="150px">  <!--如果width写百分比形式,则是按照页面等比例缩放-->
			<!--一行三列-->
			<tr align="center">  <!--align是对齐方式  center是居中-->
				<td>a</td>
				<td>b</td>
				<td>c</td>
			</tr>
			<tr>
				<td>d</td>
				<td>e</td>
				<td>f</td>
			</tr>
			<tr>
				<td>x</td>
				<td>y</td>
				<td align="center">z</td>
			</tr>
		</table>
	<body>
</html>

8. 单元格合并   9-10

注意事项:

1、row合并的时候,删除“下面的”单元格

合并用rowspan ,然后删除下面的单元格 例如我们合并cf单元格,就需要删除f单元格,再c出写rowspan="2"

2、col合并的时候,对删除哪个没有要求。

col合并的时候,对删除哪个没有要求 例如 合并de 我们删除e单元格

3. th标签也是单元格标签,比td标签多的是自动居中和字体加粗

代码在005 表格-单元格合并

<!--单元格合并    9-10 -->
<!doctype html>
<html>
	<head>
		<title> 单元格合并以及th标签 </title>
	</head>
		<body>
			<table border="1px" width="50%">
				<tr>
					<!--
					<td>员工编号</td>
					<td>员工薪资</td>
					<td>部门名称</td>
					-->
					<!--th标签也是单元格标签,比td标签多的是自动居中和字体加粗-->
					<th>员工编号</th>
					<th>员工薪资</th>
					<th>部门名称</th>
				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
				</tr>
				<tr>
					<td>a</td>
					<td>b</td>
					<!--注意事项:
						1、row合并的时候,删除“下面的”单元格
						2、col合并的时候,对删除哪个没有要求。
					-->
					<!--合并用rowspan ,然后删除下面的单元格 例如我们合并cf单元格,就需要删除f单元格,再c出写rowspan="2"-->
					<td rowspan="2">c</td>
				</tr>
				<tr>
					<!--col合并的时候,对删除哪个没有要求 例如 合并de 我们删除e单元格-->
					<td colspan="2">d</td>
					<!--
					<td>e</td>
					-->

					<!--删除f单元格
					<td>f</td>
					这里我们注释掉相当于删除了-->
				</tr>
			</table>

		</body>
</html>

9. thead tbody tfoot   11

thead tbody tfoot 再table中不是必须的只是这样做便于后期的JS代码编写

解释thead tbody tfoot 这三个主要是分割作用没有什么作用 只是为了方便

代码在006 HTML的表格-thead tbody tfoot

<!--thead tbody tfoot    11-->
<!doctype html>
<html>
	<head>
		<title> thead tbody tfoot 再table中不是必须的只是这样做便于后期的JS代码编写 </title>
	</head>
		<body>
			<table border="1px" width="50%">
			<!--解释thead tbody tfoot 这三个主要是分割作用没有什么作用 只是为了方便-->
				<thead><!--头-->
					<tr>
						<th>员工编号</th>
						<th>员工薪资</th>
						<th>部门名称</th>
					</tr>
				</thead>

				<tbody><!--身体-->
					<tr>
						<td>1</td>
						<td>2</td>
						<td>3</td>
					</tr>
					<tr>
						<td>a</td>
						<td>b</td>
						<td>c</td>
					</tr>
				</tbody>

				<tfoot><!--脚-->
					<tr>
					
						<td>d</td>	
						<td>e</td>
						<td>f</td>
						
					</tr>
				</tfoot>
			</table>
		</body>
</html>

html概述+基本语法+表格_html


举报

相关推荐

0 条评论