1.系统结构
B/S架构( 主流）
Browser/Server(浏览器/服务器的交互形式)
写HTML css JavaScript代码的人叫做web前端开发工程师
缺点：速度慢，体验不好，界面不炫酷
优点：升级方便，只升级服务器端代码即可，维护成本低
eg：京东/百度/淘宝....
C/S架构
Client/Server(客户端/服务端交互)
缺点：升级麻烦，维护成本较高
优点：速度快，体验好，界面炫酷 (娱乐型的系统多数是C/S架构)
eg：游戏..
2.HTML的基本标签
2.1 注释：<!-- -->
2.2 段落标记：<p></p>
2.3 标题标签：<h1~h6></h1~/h6> 对应的标题格式不同
2.4 换行：<br> (又叫独目标签）
2.5 水平线：<hr> </hr> 语法结构松散，有没有""都行
2.6 预留格式：<pre></pre> (保留原有格式)
<!--color和width都是hr标签的属性-->
2.7 粗体字 <b></b>
2.8 斜体字 <i></i>
2.9 插入字 <ins></ins>
2.10 删除字 <del></del>
2.11 右上角加字 10<sup>2</sup>
2.12 右下角加字 10<sub>2</sub>
2.13 字体标签 <font ></font>
<font color="red" size="50"敷演出一段故事来，亦</font>
3.实体符号：
因为大于号，小于号会被默认成标签<a>,所以发明了实体符号
3.1 等于:照常 =
大于号 ：>；
小于号：<；
空格： ；
4.表格
<table></table>表示表格，<tr></tr>表示行，<td></td>表示列
1.<!--border="1px" 设置表格的边框为1像素-->
<table border="1px"><tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>e</td>
<td>h</td>
</tr></table>
宽的百分比按照当前页面宽度算。
<table border="1px" width="50%" height="150px"><tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>e</td>
<td>h</td>
</tr></table>
2.<!--align对齐方式-->(左中右）
可以在表格，行，列上使用
<!--单元格合并-->
先找到哪个要合并，将其中一个删除后在另一个里面添加rowspan，几个合并就填几。
ps：列合并最好删下改上，否则可能出错，行合并删内个都行
列合并：rowspan
<table border="1px" width="50%" height="150px"><tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td rowspan="2">d</td>
</tr>
<tr>
<td>e</td>
</tr></table>
行合并：colspan
3.<!--<th></th>标签也是单元格标签比<td>多了居中和加粗-->
5.thead、tbody。tfoot标签
<!--thead、tbody、tfoot-->（头、体，脚）
他们在table中不是必须的，只是后期便于js代码的编写
<！--meta charset="utf-8"-->这个是告诉浏览器采用哪一种字符集打开当前页面
6.<!--背景色背景图片
bgcolor：设置背景色
background：设置背景图片
以上设置都是对背景设置
-->
7.图片
<!--
1.设置图片宽度和高度时，只设置宽度，高度会等比例缩放
2.img标签就是图片标签
3.src属性是图片的路径
4.width设置宽度，height设置高度
5.title设置鼠标悬停时在图片上显示的信息
6.alt设置当图片加载失败时显示的信息
小技巧，若<h1>???</h1>?为什么也不写时，可以写成<h1 />
8.超链接/热链接
8.1 特点：
<!--<a></a>-->
有下划线
鼠标悬浮显示小手
点击超链接可以跳转页面
8.2<!--href
href:hot references 热引用
href属性后边一定是一个资源的地址
href属性后面的路径可以是绝对路径也可以是相对路径
-->
<body bgcolor="red" background="pages/img/th.jpg">
<img src="pages/img/th.jpg" width="100px" title="我是背景图片" alt="图片不存在"/>
<br><br><br>
<img src="pages/img/th.jpg"/>
<!--文字超链接-->
<a href="https://www.luogu.com.cn/">洛谷</a>
<!--图片超链接-->
<a href="https://www.luogu.com.cn/"><img src="pages/img/Snipaste_2023-07-29_14-21-44.png" alt="图片不存在"></a>
</body>
8.3 <!--target属性-->
控制超链接打开界面
可取值：
—blank：新窗口打开
—self：当前窗口打开
—top：顶端窗口打开（最外围）
—partent：父窗口打开
<!--
8.4 超链接的作用：
通过超链接可以从浏览器向服务器端发送请求
浏览器向服务器发送数据（请求：request）
服务器向浏览器发送数据（响应：response）
B/S结构系统：每一个请求都会对应一个响应
B：请求---->S
S: 响应----->B
用户点击超链接和用户在浏览器地址上直接输入URL，本质上没有区别，都是发送请求，超链接使用更方便
-->
9.列表
有序列表:（同样，无限嵌套，不同的是type按照：1、A、Ⅰ..等等排序）
10
无序列表：（无限嵌套子列表）
在<li>上可以指定前边的符号形状，type：circle、square、disc
10 表单
<!--表单有什么用？
收集用户信息，用户填写表单，提交给服务器
如何画表单？
使用form标签
-->
<!--
重点强调：
表单中有写name属性的，一律提交给服务器。不想提交就不写name
文本框和密码的value不需要指定，因为是input手动输入，
当name没写时，该项不会提交给服务器。
但是当value没有写的时候value的默认值是String=“ ”/空字符串
-->
<!--action里面是服务器的URL
type表示按钮的类型
name表示属性名
value是输入的
PS：感觉应该也是hashmap键值对，不知道是不是。
-->
<form action="http://localhost:8080/jd/login">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="userName"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="userPwd"/></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="登录"/>
<input type="reset" value="清空"/>
</td>
</tr>
</table>
<!--
form表单method属性
get：采用get提交时，信息会出现在浏览器的地址栏上
post：采用post时，信息不在地址栏上出现
区别就是一个显示一个不显示，其他一样
超链接也会提交数据，但是是死的，只能改地址栏
超链接是get请求
-->
<form action="http://localhost:8080/jd/login" method="post">
<table>
<tr>
<td>用户名</td>
<!--1.单行文本框-->
<td><input type="text" name="username"/></td>
</tr>
<tr>
<!--2.单选-->
<td colspan="3">性别
<input type="radio" name="gender" value="1"/>男
<input type="radio" name="gender" value="0"/>女</td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="userpwd"/></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password"/></td>
</tr>
<tr>
<!--3.打勾-->
<td colspan="2">兴趣爱好
<input type="checkbox" name="interest" value="smoke"/>抽烟
<input type="checkbox" name="interest" value="drink"/>喝酒
<input type="checkbox" name="interest" value="perm"/>烫头</td>
</tr>
<tr>
<!--4.select选项菜单
option是菜单选项
selected是默认选项，与之前单选的checked不同
-->
<td colspan="6">学历
<select name="grade">>
<option value="gz">高中</option>
<option value="dz">大专</option>
<option value="bk" selected>本科</option>
<option value="ss">硕士</option>
</select>
</td>
</tr>
<tr>
<!--5.多行文本框-->
<td>简介
<textarea rows="5" cols="10" name="introduce">
</textarea>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="登录"/>
<input type="reset" value="清空"/>
</td>
</tr>
</table>
</form>
6.multiple
7.file控件
8.hidden控件
9.readonly和disabled
10.maxlength
11.HTML中元素的id属性
12.div与span
标签：浏览器,--,标签,HTML,超链接,设置 From： https://www.cnblogs.com/lengbo/p/17580206.html