HTML
1. 系统结构
-
B/S架构：
Browser/Server(浏览器/服务器的交互形式)
Browser支持哪些语言：HTML CSS JavaScript
Server支持的语言：C C++ Java Python…
B/S架构的系统有什么优点和缺点？
- 优点：升级方便，只升级服务端代码即可。
- 缺点：速度慢，体验不好，界面不炫酷
-
C/S架构：
Client/Server(客户端/服务器端的交互形式)
- 缺点：升级麻烦，维护成本高
- 优点：速度快，体验好，界面炫酷（娱乐型的系统多数是C/S架构的）
2. 什么是HTML？怎么开发HTML？怎么运行HTML？
-
HTML：Hyper Text Markup Language(超文本标记语言)
-
由大量的标签组成，每一个标签都有开始标签和结束标签
<标签> <标签> <标签 属性名="属性值" 属性名="属性值"> </标签> </标签> </标签>
-
-
HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm。当前HTML也有专业的开发工具，如：DreamWeaver、HBuilder…
-
直接采用浏览器打开HTML文件就是运行
3. HTML是谁制定的？
- W3c：世界万维网联盟。
- W3c制定了HTML的规范，每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。
- HTML规范目前最高的版本是：HTML5.0，简称H5。
- 我们这里学习HTML4.0，主要是学习一下HTML的基础用法
4. 基本标签
- 段落标记：
<p> </p> - 标题字：
<h1></h1>(最多到h6，无h7…) - 换行标记：
<br/>(独目标记) - 横线标记：
<hr/>(独目标记) - 预留格式：
<pre></pre>里面内容是什么格式，展示出来就是什么格式 - 删除字：
<del></del> - 插入字：
<ins></ins> - 粗体字：
<b></b> - 斜体字：
<i></i> - 右上角：
<sup></sup>- 102 ==
10<sup>2</sup>
- 102 ==
- 右下角：
<sub></sub> - 字体标签：
<font> </font>
5. 实体符号
- 特点：以&开始，以;结束。
<是小于号 >是大于号 是空格
6. 表格
-
格式：
<table align="center" border="1px" width="300px" height="200px"> <tr align="center"> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td align="center">5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> -
tr表示表格行，td表示单元格，table是整个表格。
-
table的align 属性规定表格相对于周围元素的对齐方式
-
tr的 align 属性规定表格行中的内容的水平对齐方式。
-
tr的valign 属性规定表格行中的内容的垂直对齐方式。
-
td的align 属性规定单元格中内容的水平对齐方式。
-
td的valign属性规定单元格中内容的垂直对齐方式。
-
表格单元格合并：
有行合并和列合并两种：
- 行：
rowspan属性删除下面的单元格 - 列：
colspan属性 对删除哪个没要求
<table border="1px"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td colspan="2">4</td> <!-- <td>5</td> --> <td rowspan="2">6</td> </tr> <tr> <td>7</td> <td>8</td> <!-- <td>9</td> --> </tr> </table> - 行：
-
补：用th替换td可以直接实现单元格内容的居中跟加粗。
-
表格可以划分为三部分，便于后期JS管理控制😄
-
用
<thead></thead> <tbody></tbody> <tfoot></tfoot> -
格式：
<table border="1px"> <!--头--> <thead> <tr> <th>员工编号</th> <th>员工名称</th> <th>员工部门</th> </tr> </thead> <!--体--> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td colspan="2">4</td> <!-- <td>5</td> --> <td rowspan="2">6</td> </tr> <tr> <td>7</td> <td>8</td> <!-- <td>9</td> --> </tr> </tbody> <!--脚--> <tfoot> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </tfoot> </table>
-
7. 背景颜色和背景图片
- bgcolor属性：用于设置背景颜色
- background属性：用于设置背景图片
- 背景图片一旦设置，背景色就被背景图片覆盖住了。
8. 图片标签img
<!--
1. 设置图片宽高时，只设置宽度，高度会进行等比例缩放。同样，只设高度的时候，宽度也会等比例缩放。
2. img标签就是图片标签
3. src属性就是图片路径
4. width设置宽度，height设置高度
5. title设置鼠标悬停时显示的信息
6. alt设置图片加载失败时显示的提示信息
-->
<img src="img/Five.jpg" title="这是一张图片" width="300px" alt="图片加载失败"/>
- 两种写法：
<img /><img></img>
9. 超链接或热链接
- 特点：
- 鼠标摸上去有小手状
- 文本内容自带下划线(可以去掉)
- 属性：
- href：hot references 热引用。控制点击该超链接后的跳转。其属性值是一个资源的地址。
- target：设置跳转到的页面会在哪个窗口打开。拥有四个属性值：
- _blank：新窗口
- _self：当前窗口(默认值)
- _top：顶级窗口
- _parent：父窗口
- 作用：从浏览器向服务器发送请求
- 浏览器向服务器发送数据(request)
- 服务器向浏览器发送数据(response)
10. 列表
-
无序列表
<ul></ul> -
有序列表
<ol></ol> -
列表子项
<li></li> -
例子：
<!-- 有序列表 --> <ol type="1"> <li>水果 <ol type="I"> <li>苹果</li> <li>香蕉</li> </ol> </li> <li>蔬菜 <ol> <li>胡萝卜</li> <li>白菜</li> </ol> </li> <li>海鲜 <ol> <li>虾</li> <li>鱼</li> </ol> </li> </ol> <!-- 无序列表 --> <ul> <li>车牌号 <ul type="square"> <li>粤A5978</li> <li>粤A5955</li> <li>粤A5944</li> </ul> </li> <li>姓名 <ul> <li>张三</li> <li>李四</li> <li>王五</li> </ul> </li> <li>住址 <ul> <li>北京</li> <li>广东</li> <li>上海</li> </ul> </li> </ul>
11. 表单
-
作用：收集用户信息。表单展现之后，用户填写表单，点击提交按钮提交数据给服务器。
-
如何画一个表单？
- 使用form标签画表单
-
一个网页中可以有多个表单form
-
表单最终是要提交数据给服务器，form标签有一个action属性，这个属性用来指定服务器的地址：
- action属性用来指定数据提交给哪个服务器
- action属性和超链接的href属性一样，都可以向服务器发送请求(request)
-
表单中的提交数据按钮用input，其type一定要设置为submit才具有提交表单的能力。
-
以下这个例子的表单跟超链接没太大区别，都是跳转到百度
<form action="http://www.baidu.com"> <input type="submit" value="百度"/> </form>但实际上表单跟超链接具有一个本质区别，就是表单在给服务器发送请求的时候会将表单中用户输入的数据一并带过去，而超链接不可以。另外表单提交数据的方式可以使用method属性指定，默认为get。
-
下面来一个form表单提交数据的小例子
<form action="http://localhost:8080/moyan"> <table> <tr> <td>用户名：</td> <td><input type="text" name="username" /></td> </tr> <tr> <td>密码：</td> <td><input type="password"/></td> </tr> <tr align="center"> <td colspan="2"> <input type="submit" value="登录"/> <input type="reset" value="清空" /> </td> </tr> </table> </form>输入好之后点击submit，发现网页地址变成了http://localhost:8080/moyan?username=eeee，我们可以发现，在提交表单向服务器发请求的时候将用户名输入框中的内容一并带过去了，但是为什么密码输入框中的内容没有被带过去，这是因为密码输入框input没有设置name属性，设置name属性的内容才会在提交表单向服务器发送请求的时候带过去。
-
表单提交数据的格式：action?name=value(&name=value&name=value…)。这是W3C的HTTP协议中规定的。
-
用户注册表单小栗子
<form action="http://www.baidu.com"> <table> <tr> <td>用户名：</td> <td><input type="text" name="username"/></td> </tr> <tr> <td>密码：</td> <td><input type="password" name="psw"/></td> </tr> <tr> <td>确认密码：</td> <td><input type="password"/></td> </tr> <tr> <td>性别：</td> <td> <input type="radio" value="1" name="sex" checked/>男 <input type="radio" value="0" name="sex"/>女 </td> </tr> <tr> <td>兴趣爱好：</td> <td> <input type="checkbox" value="eat" name="interest" checked/>吃 <input type="checkbox" value="drink" name="interest"/>喝 <input type="checkbox" value="play" name="interest"/>玩 </td> </tr> <tr> <td>学历：</td> <td> <select> <option name="xueli" value="benke">本科</option> <option name="xueli" value="dazhaun" selected>大专</option> <option name="xueli" value="yanjiusheng">研究生</option> </select> </td> </tr> <tr> <td>简历：</td> <td> <!-- textarea没有value属性，用户输入什么就传什么 --> <textarea name="jianli"></textarea> </td> </tr> <tr> <td><input type="submit" value="提交"/></td> <td><input type="reset" value="清除"/></td> </tr> </table> </form>随便填之后请求的url就变为
https://www.baidu.com/?username=moyan&psw=pws&sex=1&interest=eat&interest=drink&interest=play&jianli=%E5%91%83%E5%91%83%E5%91%83。注意：要学会用form表单的method去设置请求方式，一般像密码这类保密信息不要用get请求，要用post请求。
-
file控件：
<input type="file"/>（记得写name属性） -
隐藏域控件：
<input type="hidden"/>,网页上看不到，但是想要提交给服务器的一些数据。(记得写name属性) -
readonly和disabled属性
- 共同点：都是用户不可修改的
- 不同点：readonly的输入框设置了name属性会将value提交给服务器，而disabled的就算设置了name属性也不会将value提交给服务器。
<form action="htttp://www.baidu.com"> 用户代码：<input type="text" value="1111" name="usercode" readonly/> 注册日期：<input type="text" value="2021/08/07" name="registerdate" disabled/> <input type="submit" /> </form> -
input框的maxlength属性是设置最多输几个字符
12. 下拉列表
<!-- size是设置显示的条目数量，支持多选后按住ctrl即可多选 -->
<select multiple="multiple" size="3">
<option>北京</option>
<option>山东</option>
<option>广州</option>
<option>上海</option>
<option>江苏</option>
<option>浙江</option>
</select>
效果：
北京 山东 广州 上海 江苏 浙江- multiple是开启多选的意思。
13. id属性
- 在HTML文档中，任何元素(节点)都有id属性，id属性是该节点的唯一标识，所以在同一个HTML文档中id值不能重复。
- 注意：表单提交数据的时候只与name有关，与id无关。
- id有什么用？
- 方便JavaScript获取节点。
- HTML文档是一颗树(DOM（document)树),树上有很多节点，每一个节点都有唯一的id。(JavaScript主要就是对这颗树进行增删改)
14. div和span
-
都可以称为“图层”(图层的作用是为了保证页面可以灵活的布局)
-
最早的网页是采用table进行布局的，但是table不灵活，太死板。
现代的网页开发中div布局使用最多，几乎很少使用table进行布局了。
-
区别：
- div独自占用一行(默认情况下)
- span不会独自占用一行
15. iframe
-
用于在网页中显示网页，一般用于网页的拼接，跟Java功能抽象的思想差不多。
-
小栗子：
main.html <table width="1024" height="600" border="1"> <tr> <td colspan="2" height="10%"> <iframe src="head.html" width="100%" height="100%"></iframe> </td> </tr> <tr> <td width="30%"> <iframe src="left.html" width="100%" height="100%"></iframe> </td> <td><iframe name="right" src="right.html" width="100%" height="100%"></iframe></td> </tr> <tr> <td colspan="2" height="10%"> <iframe src="foot.html" width="100%" height="100%"></iframe> </td> </tr> </table> left.html <ul> <li>学生管理 <ul> <!-- target=right指定新页面在name为right的地方打开 --> <li><a href="addStudent.html" target="right">添加学生</a></li> <li><a href="findStudent.html" target="right">查看学生</a></li> </ul> </li> <li>班级 <ul> <li>添加班级</li> <li>查看班级</li> </ul> </li> <li>课程 <ul> <li>添加课程</li> <li>查看课程</li> </ul> </li> </ul> addStudent.html <table> <tr> <th>添加学生</th> </tr> <tr> <td>学生姓名：</td> <td><input type="text"></td> </tr> <tr> <td><input type="submit" value="添加"></td> <td><input type="reset" value="清空"></td> </tr> </table> findStudent.html <table> <tr> <th>查找学生</th> </tr> <tr> <td>学生姓名：</td> <td><input type="text"></td> </tr> <tr> <td><input type="submit" value="查找"></td> <td><input type="reset" value="清空"></td> </tr> </table> head.html logo foot.html 版权 right.html 欢迎来到本页面！注意target=right的效果！
知识点
-
html是标签语言，css是样式语言，JavaScript才可以说是编程语言。
-
html代码第一行有
<!DOCTYPE html>就代表是HTML5语法，去掉的话就表示HTML4.0。 -
html语法松散，不区分大小写。
-
HTML注释：
<!--注释的内容--> -
<meta charset='xxx'>是告诉浏览器用什么字符集打开当前页面 -
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"> 好的keywords更有利于被搜索引擎搜到(seo职业就是专门干这事的)
扫一扫
185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
