HTML（基础语法到表格）

1.系统结构：B/S架构：Browser / Server (浏览器/服务器的交互形式)Browser支持哪些语言：HTML CSS JavaScript写HTNL CSS JavaScript代码的这波人叫做：WEB前端开发工程师。前端页面上的图片需要UI设计师来完成s是服务端Server，Server端的语言很多：C C++ java pythonB/S架构的系统有什...

wenshao007

294人浏览 · 2020-02-20 19:15:58

wenshao007 · 2020-02-20 19:15:58 发布

1.系统结构：
B/S架构：
Browser / Server (浏览器/服务器的交互形式)

	Browser支持哪些语言：HTML CSS JavaScript

	写HTNL CSS JavaScript代码的这波人叫做：WEB前端开发工程师。
	前端页面上的图片需要UI设计师来完成
	s是服务端Server，Server端的语言很多：C C++ java python

B/S架构的系统有什么优点 和缺点
优点：升级方便，只升级服务端代码即可

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

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

B/S架构的系统有哪些代表？
	京东
	百度
	天猫
	... 	

	页游和端游的区别
C/S架构 就是要下载客户端
	Client / Server  (客户端/服务端的交互形式)
	缺点：升级麻烦，维护成本较高。
	优点：速度快，体验好，界面炫酷。（娱乐性的系统多数是C/S架构的）  需要写客户端，升级则需要重新														   下客户端

dreamweaver：网页开发工具（网页制作三剑客）

2.什么是HTML？怎么开发HTML？怎么运行HTML?
HTML:Hyper Text Markup Language (超文本标记语言)
由大量的标签组成，每一个标签都有开始标签和结束标签。

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

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

*HTM开发的时候使用普通的文本编辑器就行了，创建的文件扩展名是.html或者.htm
HTML也有专业的开发工具，例如：DreamWeaver、HBuilder...

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

3.HTML是谁制定的？
W3C:世界万维网联盟
W3C制定了HTML的规范，每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码
HTML最新的规范为html5.0，简称H5.但是现在学习html4.0
主要是链接HTML的基础

W3C定制了许多协议：
https,http协议，XML

wschool:可以查询一些开发帮助，开发中需要用的东西

第一个HTML程序

<!--
	1.这是HTML的注释
	2.可以多行注释
	3.html不区分大小写
-->

以下为HTML语法格式
<!doctype html>   //有这一句代表执行html5.0规则，没有代表html4.0
<!--根-->
<html>
	<！--头-->
	<head>
		<!--网页标题显示在左上角-->
		<title>网页标题</title>        //如果是包含的关系，必须要有缩进
	</head>
	<!--体-->
	<body>
	欢迎学习HTML
	</body>
</html>

html 的基本标签

<!doctype html>
<html>
	<head>
		<title> HTML基本标签</title>
	</head>
	<body>
		<!--段落标记--> 
		<p>sdsdasdasdasdasd</p>
		<p>adsadasdasdasdaasdasdasdasdasdasd</p>  //这样在<p></p>之间会自成一段

		<!--标题字：是HTML预留的格式，word中的标题字一样-->
		<h1>标题1</h1>
		<h2>标题2</h2>
		<h3>标题3</h3>
		<h4>标题4</h4>
		<h5>标题5</h5>   //这个会跟word文档中一样，出现不同级的标题  在<h1></h1>之间是一级标题


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

		<!--加一个横线-->
		<hr>
		<!--color和width是hr标签的属性-->
		<hr color = "red" width = "50%">
		<hr color = red width = '50%'>  //在给标签赋值的时候，打双引号，单引号都行，比较松散


		<!--预留格式-->

		<pre>
			for(int i=5;i<10;i++)
			{
				System.out.println(i);
			}
		</pre>						//预留格式标签，在<pre></pre>之间的格式不会改变
		


		<!--下面几个标签作为了解-->
		<del>删除字</del>
		<ins>插入字</ins>
		<b>粗体字</b>
		<i>斜体字</i>

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

实体符号
大于>
小于<

因为< >这两个符号和html一些符号冲突
所以实体符是规避这种冲突的所以等号’=‘不冲突没有实体符号

空格也会冲突，所以一个空格也要实体符号来表示：

<!doctype html>
<html>
	<head>
		<title>实体符号</title>
	</head>	
	<body>
	<!--加小于号,想输出a<b>c-->
	<!--&lt; 是实体符，代表小于，&gt;也是实体符，代表大于-->
	b&lt;a&gt;c
	
	<!--空格的实体符,表示ab之间有5个空格-->
	a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b


	</body>
</html>

html 表格

<!doctype html>
<html>
	<head>
		<title>表格</title>
	</head>
	<body>
	<!--最大的属性为表格table,次之的是tr 代表一行，td代表行里面的格子-->
		<table border = "1px" width = "60%" align = "center">		<!--boder="1px" 设置表格的边框为1像素宽度-->
							<!--width="30px" 设置表格的边框的宽度为1像素宽度-->
							<!--width="60%" 设置表格的边框的宽度占浏览器窗口的百分之60，会同比例改变-->
							<!--height="150px" 设置表格的边框的高度为1像素宽度-->
			<br><br><br>可以不断换行

			<tr align = "center"> <!--align表示对齐方式-->
				<td>no</td>
				<td>name</td>
				<td>date</td> //这样代表了这行里面加了三个格子
			</tr>  //这样代表 新建了一个表格的行
			<tr>
				<td>1</td>
   				<td>w</td>
  				<td>21</td>
			</tr>
			<tr>
				<td>2</td>
       		     <td>h</td>
      			<td>23</td>   //这样就建立了一个三行三列的表格，但是同时要注意到在有包含关系的需								要缩进
			</tr>
		</table>
	</body>


</html>

表格单元格合并以及 th标签

<!doctype html>
<html>
	<head>
		<title>表格单元格的合并以及th标签</title>
	</head>
	<body>
		<table border = "1px" width = "50%" height = "50%">
			<tr>
				<th>天</th>
				<th>地</th>
				<th>人</th>		<!--th标签也是单元格标签，和td标签相比起来只是多了居中加粗的									功能 -->
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td rowspan = "2">3</td>
			</tr>				<!--要想合并两个格，要用到rowspan这个属性，还要删掉其中一个个格子，而且都是删下面的格子，rowspan后面跟合并格子的数量-->
			<!--row是上下两行合并-->
			<tr>
				<td>a</td>
				<td>b</td>
				//<td>c</td>   <!--想要合并3 和c 两个格,则要删掉其中一格，这里删除c这格-->
			</tr>
			<!--下面是删除左右两列-->
			<!--用col没有左右要求-->
			<tr>
				<td colspan = "2">x1</td>
			//	删除<td>x2</td>  <!--想要合并x1 x2左右两列的话，选择左右两列任一个删除，并在另一列写colspan 并在后加合并格子的数量-->
				<td>x3/td>
			</tr>
			
		</table>
	</body>
</html>

操作表格的三个标签 thead、tbody、tfoot标签
这个不是必须的，只是这样做方便后期js代码的编写

<html>
	<head>
		<title> </title>
	</head>
	<body>
		<thead>
			<tr>
				<td></td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td></td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td></td>
			</tr>
		</tfoot>             将一个表的分为头，体，脚三大部分，方便与管理
	
	</body>
</html>