HTML（基础语法 到表格）
1.系统结构：B/S架构：Browser / Server (浏览器/服务器的交互形式)Browser支持哪些语言：HTML CSS JavaScript写HTNL CSS JavaScript代码的这波人叫做：WEB前端开发工程师。前端页面上的图片需要UI设计师来完成s是服务端Server，Server端的语言很多：C C++ java pythonB/S架构的系统有什...
·
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-->
<!--< 是实体符，代表小于，>也是实体符，代表大于-->
b<a>c
<!--空格的实体符,表示ab之间有5个空格-->
a 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>
CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)