HTML学习笔记
文章目录
- 1.系统结构
-
- 1.1 B/S架构
-
- 1.1.1 优点
- 1.1.2 缺点
- 1.1.3 常见代表
- 1.2 C/S架构
-
- 1.2.1 缺点
- 1.2.2 优点
- 1.2.3 常见代表
- 2.HTML
-
- 2.1 概念
- 2.2 开发
- 2.3 运行
- 2.4 第一个HTML
- 2.5 基本标签
-
- 2.5.1 段落标记
- 2.5.2 标题字
- 2.5.3 换行标记
- 2.5.4 横线，独目标记
- 2.5.5 预留格式
- 2.5.6 删除字、插入字、粗体字、斜体字
- 2.5.7 右上角、右下角加字
- 2.5.8 字体标签
- 2.6 实体符号
- 2.7 表格
-
- 2.7.1 基本表格
- 2.7.2 单元格合并
- 2.7.3 th标签
- 2.7.4 thead、tbody、tfoot
- 2.8 背景颜色和背景图片
- 2.9 图片
- 2.10 超链接
-
- 2.10.1 基础
- 2.10.2 超链接的作用
- 2.11 列表
-
- 2.11.1无序列表
- 2.11.2 有序列表
- 2.12 表单
-
- 2.12.1 前提了解
- 2.12.2 实例演练：做一个简单的用户登录页面
- 2.12.3 用户注册的表单
- 2.12.4 file控件
- 2.12.5 hidden控件
- 2.12.6 readonly和disabled
- 2.12.7 maxlength
- 2.13 HTML中元素的id属性
- 2.14 div和span
-
- 2.14.1 作用
1.系统结构
1.1 B/S架构
Browser / Server（浏览器/服务器的交互形式）
Browser支持的语言：HTML CSS JavaScript
Server后端有很多语言：C、C++、Java、Python
1.1.1 优点
升级方便，只升级服务器代码即可
1.1.2 缺点
速度慢、体验不好、界面不炫酷
1.1.3 常见代表
京东、百度、天猫
企业内部的解决方案都是采用B/S架构的系统，因为企业内部办公需要的一些系统不需要炫酷和特别好的用户体验，只要能做数据的增删改查即可。并且企业内部更加注重维护的成本。
1.2 C/S架构
1.2.1 缺点
升级麻烦，维护成本高
1.2.2 优点
速度快、体验好、界面炫酷。（娱乐性的系统多是C/S架构的。）
1.2.3 常见代表
QQ、微信、支付宝
2.HTML
2.1 概念
HTML：Hyper Text Markup Language（超文本标记语言）
由大量标签组成，每一个标签都有开始标签和结束标签。
<标签1><标签2><标签3 属性名1=”属性值“ 属性名2=”属性值“> </标签3> </标签2></标签1>2.2 开发
使用普通的文本编辑器就行，创建的文件扩展名是 .html或者 .htm
HTML也有专业的开发工具：DreamWeaver、HBuider
2.3 运行
运行直接使用浏览器打开HTML文件就行
2.4 第一个HTML
<html> <head> <title>网页标题</title> </head> <body> 网页的主体内容，欢迎学习HTML！ </body></html>2.5 基本标签
2.5.1 段落标记
<p>段落1</p>2.5.2 标题字
<h1>一级标题<h1><h2>二级标题<h2><h3>三级标题<h3><h4>四级标题<h4><h5>五级标题<h5><h6>六级标题<h6>2.5.3 换行标记
Hello<br>World网页展示效果：
Hello
World
2.5.4 横线，独目标记
<hr color="red" width="50%">网页展示效果：
2.5.5 预留格式
<pre>Hello!</pre>网页展示效果：
Hello!
2.5.6 删除字、插入字、粗体字、斜体字
<del>删除字</del><ins>插入字</ins><b>粗体字</b><i>斜体字</i>网页展示效果：
删除字
插入字
粗体字
斜体字
2.5.7 右上角、右下角加字
10<sup>2</sup>10<sub>2</sub>网页效果展示：
102
102
2.5.8 字体标签
<font color="red" size="5">字体标签</font>网页效果展示：
字体标签
2.6 实体符号
2.7 表格
2.7.1 基本表格
<table align="center" border="1px" width="60%" height="150px"> <tr> <td>a</td> <td>b</td> </tr> <tr> <td>c</td> <td>d</td> </tr> </table>2.7.2 单元格合并
<table> <tr> <td>a</td> <td rowspan="2">b</td> </tr> <tr> <td>c</td> <!--d --> </tr></table><table> <tr> <!-- a --> <td colspan="2">b</td> </tr> <tr> <td>c</td><td>d</td> </tr></table>2.7.3 th标签
th标签和单元格标签一样，多的是加粗和居中。在实际的使用中，一般来说一张表的第一个
2.7.4 thead、tbody、tfoot
这三个标签可有可无，这样做会让我们的结构更加清晰，也方便后期 JS代码的编写。
2.8 背景颜色和背景图片
<html><head><meta charset="utf-8"><title>背景颜色和背景图片</title></head><body bgcolor="black" background="imagine/6d1ffde61ff84984a225945dd3383da0.jpg"></body></html>2.9 图片
<html><head><meta charset="utf-8"><title>图片</title></head><body><img src="imagine/001.jpg" width="100px" title="这是张图片" alt="图片信息丢失"/></body></html>2.10 超链接
2.10.1 基础
<html><head><meta charset="utf-8"><title>超链接</title></head><body><a href="https://www.baidu.com">百度</a> <a href="https://www.baidu.com/"><img src="imagine/002.png" width="120px"> target="_self"</a> </body></html>2.10.2 超链接的作用
1、通过超链接可以从浏览器向服务器发送请求。
2、浏览器向服务器发送数据（请求：request）
3、服务器向浏览器返回数据（相应：response）
B/S系统的结构每一个操作都会对应一个响应。不管是在浏览器输入URL还是点击超链接本质上都是向服务器发送请求。相对而言，超链接更加方便。
2.11 列表
2.11.1无序列表
<ul type="disc"><li>北京<ul><li>海淀区 <ul><li>DEMO</li> </ul> </li><li>朝阳区</li></ul></li></ul>网页展示效果：
- 北京
- 海淀区
- DEMO
- 朝阳区
- 海淀区
2.11.2 有序列表
<ol type="1"><li>水果<ol><li>苹果</li><li>桃子</li></ol></li><li>蔬菜<ol><li>西红柿</li><li>土豆</li></ol></li></ol>网页展示效果：
- 水果
- 苹果
- 桃子
- 蔬菜
- 西红柿
- 土豆
2.12 表单
2.12.1 前提了解
- 表单可用于收集用户信息，用户填写表单，点击提交按钮后，将信息交给服务器。
- 表单的语法：表单
- 网页中可以有多个表单
<form action="http://192.168.111.3:8000/oa/save" method="method"><input type="" value="普通按钮"/><input type="submit" value="提交按钮"/></form><!--表单中还有一个标签表示下拉菜单option标签表示菜单内的选项下拉列表有一个属性multiple。multiple=“multiple”表示支持多选，size设置显示条目数量。 河南省河北省湖北省湖南省-->下拉列表多选展示
河南省
河北省
湖北省
湖南省
2.12.2 实例演练：做一个简单的用户登录页面
<form action="http://localhost:8080/jd/login"><table><tralign="center"><td>用户名</td><td><input type="text" name="username" /></td></tr><tralign="center"><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>网页展示效果：
用户名 密码
2.12.3 用户注册的表单
<html><head><meta charset="utf-8"><title>用户注册的表单</title></head><body><form action="http://localhost:8080/jd/register">用户名<input type="text" name="username"/><br>密码 <input type="password" name="userpwd" /><br>确认密码<input type="password"/><br>性别<input type="radio" name="gender" value="1" />男 <input type="radio" name="gender" value="0" checked/>女 <br>兴趣爱好<input type="checkbox" name="interest" value="smoke"/>抽烟<input type="checkbox" name="interest" value="drink" checked/>喝酒<input type="checkbox" name="interest" value="fireHair" checked/>烫头<br>学历 <select name="grade"> <option value="gz">高中</option><option value="dz">大专</option><option value="bk" selected>本科</option> <option value="ss">硕士</option></select><br>简介 <textarea rows="10" cols="60" name="introduce"></textarea><br><input type="submit" value="注册" /><input type="reset" value="清空" /> </form><a href="http://localhost:8080/oa/save?username=zhangsan&password=111">提交</a></body></html>2.12.4 file控件
<input type="file" />2.12.5 hidden控件
<input type="hidden" name="userid" value="111"/>隐藏域，网页上看不到，但是表单提交的时候数据会自动提交给服务器。
2.12.6 readonly和disabled
<form action="http://localhost:8080/taobao/save">用户代码<input type="text" name="usercode" value="110" readonly /><br>用户姓名<input type="text" name="username" value="zhangsan" disabled /><br><input type="submit" value="提交数据" /></form>2.12.7 maxlength
<input type="text" maxlength="10">2.13 HTML中元素的id属性
<form id="1"> <input type="text" id="2"></form>- 在HTML中，任何一个元素都有一个唯一标识（id）
- 表单在提交时跟id没有关系
- JavaScript可以对html文档中的任意节点（元素）进行增删改查操作，id就是为了方便我们查找节点
- HTML文档是一棵树，树上有很多节点，每个节点都有唯一的id。JavaScript主要就是为了操作这颗dom树。
2.14 div和span
2.14.1 作用
div和span都可以成为图层，其目的是为了更i灵活的布局。图层就是一个一个的盒子，div嵌套div就是盒子套盒子。
最早的网页都是使用table进行布局，但是table不灵活。现代的网页开发中div布局使用最u都，几乎很少使用table进行布局。
div和span都可以定位，只要定下其左上角的xy坐标即可。div和span的区别就是：div独占一行，而span不行。
