这个内容主要是给后端开发工程师看的部分HTML总结，对于前端开发工程师，此内容可作为入门，之后还有深入学习。

文章目录

1.引言
2.基础语法
- 准备工作:
- 语法
- 举例
3.表格
- 语法
- 举例
4.表单
- 语法
- 举例
5. 页面框架&页面嵌入
- 语法
- 举例

1.引言

早期，电脑上主要是各种客户端应用程序（如qq），现在更多的是浏览各个网页，这种架构也从以前的CS（Client/Server , 客户端/服务器）向BS（Browser/Server，浏览器/服务器）方向转变，因此，基于web编程的网页前端技术成为了主流。如下图所示，客户端通过HTTP协议向服务器端请求资源，服务器从数据库中找到响应的资源向客户端做出响应。

前端目前一般使用HTML+CSS+JavaScript的模式：

HTML：决定页面上显示什么内容（如页面上的所有文字信息）
CSS：页面上显示内容的风格（主要用于让显示的内容更加美观）
JavaScript：页面特效

2.基础语法

html语言是解释型语言，不是编译型浏览器是容错的，即使有部分错误，不影响网页的打开，只不过局部内容可能有问题。

准备工作:

创建：首先，通过右击创建记事本，可以创建一个.txt文件，之后把txt后缀改为html
打开：HTML的编辑器有很多，常用的有，如：Dreamweaver、EditPlus、HBuilder、sublime text、Notepad++等，即使没有，用记事本打开也可以写
格式化工具：https://www.sojson.com/jshtml.html

语法

html页面中由一对标签组成：
1. 称之为开始标签
2. 称之为结束标签
html里面的模块
1. head 表示网页的头部信息，有网页名称title，元信息meta：编码charset等
2. body 表示网页的内容
单标签：开始标签和结束标签是同一个，斜杠放在单词后面
br表示换行。br标签是一个单标签。（break）
p 表示段落标签（program）
span 不换行的块标记
img 标签图片标签
1. src属性表示图片文件的路径
2. width和height表示图片的大小
3. alt表示图片的提示
路径的问题：
1. 相对路径
2. 绝对路径
h1~h6 : 标题标签
列表标签:
1. ol 有序列表（order list）
  1. start 表示从*开始
  2. type 显示的类型：A a I i 1(deafult)
2. ul 无序列表（unorder list）
  1. type disc(default) , circle , square
文字特效：
1. u 下划线（underLined）
2. b 粗体（bold）
3. i 斜体（italic）
上下标：
1. 上标 sup
2. 下标 sub
特殊符号（实体）：数字符号，查表：HTML字符实体，不用背
1. 小于号 <
2. 大于等于号 ≥
3. 版权 ©
a 表示超链接
1. href 链接的地址（hypetest reference）
2. target:
  1. _self 在本窗口打开
  2. _blank 在一个新窗口打开
  3. _parent 在父窗口打开
  4. _top 在顶层窗口打开
div 层

举例

<html><head><title>这是我的第一个网页</title><meta charset="UTF-8"></head><body>HELLO WORLD!<br/>你好，HTML！<p>这里是一个段落</p><p>这里是第二个段落</p><img src="D:\sgg2021\0927_javaweb\1109\02.代码\imgs\girl.jpg" width="57" height="73" alt="这里是一张图片"/><h1>标题一</h1><h2>标题一</h2><h3>标题一</h3>武林高手排行榜:<ol type="i" start="3"><li>扫地僧</li><li>萧远山</li><li>慕容博</li></ol>武林大会人员名单：<ul type="circle"><li>乔峰</li><li>阿朱</li><li>马夫人</li></ul>你是<b><i><u>喜欢</u></i></b>是<b>甜</b>月饼还是<i>咸</i><u>月饼</u>？<br/>水分子的化学式： H<sub>2</sub>O <br/>氧气的化学式： O<sup>2</sup><br/>5&lt;1010&gt;55&le;1010&ge;5注册商标 &reg;版权符号 &copy;<span>赵又廷</span>，夺妻之仇。<a href="http://www.baidu.com" target="_self">百度一下</a><br/><ol type="a"><li>大海</li><li>蓝天</li><li>河流</li></ol></body>
</html>

3.表格

语法

表格 table
表头列 th
行 tr （table row）
列 td（table data cell）

table中有如下属性（虽然已经淘汰，但是最好了解一下）

border：表格边框的粗细
width:表格的宽度
cellspacing：单元格间距
cellpadding：单元格填充

tr中有一个属性

align -> center , left , right

td中属性

rowspan : 行合并
colspan : 列合并

举例

<html><head><title>表格标签的学习</title><meta charset="UTF-8"></head><body><table border="1" width="600" cellspacing="0" cellpadding="4"><tr align="center"><th>姓名</th><th>门派</th><th>成名绝技</th><th>内功值</th></tr><tr align="center"><td>乔峰</td><td>丐帮</td><td>少林长拳</td><td>5000</td></tr><tr align="center"><td>虚竹</td><td>灵鹫宫</td><td>北冥神功</td><td>15000</td></tr><tr align="center"><td>扫地僧</td><td>少林寺</td><td>七十二绝技</td><td>未知</td></tr></table><hr/><table border="1" cellspacing="0" cellpadding="4" width="600"><tr><th>名称</th><th>单价</th><th>数量</th><th>小计</th><th>操作</th></tr><tr align="center"><td>苹果</td><td rowspan="2">5</td><td>20</td><td>100</td><td><img src="imgs/del.jpg" width="24" height="24"/></td></tr><tr align="center"><td>菠萝</td><td>15</td><td>45</td><td><img src="imgs/del.jpg" width="24" height="24"/></td></tr><tr align="center"><td>西瓜</td><td>6</td><td>6</td><td>36</td><td><img src="imgs/del.jpg" width="24" height="24"/></td></tr><tr align="center"><td>总计</td><td colspan="4">181</td></tr></table></body>
</html>

4.表单

在浏览器中，有很多需要用户填写的信息通过http传送给服务器保存，例如登入、注册等操作，这些信息表称为表单。

语法

表单 form
input type=“text” 表示文本框，
- name属性必须要指定，否则这个文本框的数据将来是不会发送给服务器的
- value 默认值
input type=“password” 表示密码框
input type=“radio” 表示单选按钮。
- 需要注意的是，name属性值保持一致，这样才会有互斥的效果;
- checked属性设置默认选中的项
input type="checkbox"表示复选框。
- name属性值建议保持一致，这样将来我们服务器端获取值的时候获取的是一个数组
select 表示下拉列表。
- 每一个选项是option，
- value属性是发送给服务器的值
- selected表示默认选中的项
textarea 表示多行文本框（或者称之为文本域）,它的value值就是开始结束标签之间的内容
- input type=“submit” 表示提交按钮
- input type=“reset” 表示重置按钮
- input type=“button” 表示普通按钮

举例

<html><head><title>表单标签的学习</title><meta charset="UTF-8"></head><body><form action="demo04.html" method="post">昵称：<input type="text" value="请输入你的昵称"/><br/>密码：<input type="password" name="pwd"/><br/>性别：<input type="radio" name="gender" value="male"/>男<input type="radio" name="gender" value="female" checked/>女<br/>爱好：<input type="checkbox" name="hobby" value="basketball"/>篮球<input type="checkbox" name="hobby" value="football" checked/>足球<input type="checkbox" name="hobby" value="earth" checked/>地球<br/>星座：<select name="star"><option value="1">白羊座</option><option value="2" selected>金牛座</option><option value="3">双子座</option><option value="4">天蝎座</option><option value="5">天秤座</option></select><br/>备注：<textarea name="remark" rows="4" cols="50"></textarea><br/><input type="submit" value=" 注 册 "/><input type="reset" value="重置"/><input type="button" value="这是一个普通按钮"/></form></body>
</html>

在点注册时，由于是submit提交，所以会通过么中的方法中“post”方法请求demo04.html资源，真实场景一般发送给服务器。通过网络协议，可以查看到提交的表单。

5. 页面框架&页面嵌入

通过页面框架，可将页面进行划分
页面嵌入可嵌入子页面

语法

frameset 表示页面框架，这个标签已经淘汰，了解，不需要掌握
frame表示框架中的具体页面引用

iframe 在一个页面嵌入一个子页面

举例

<html><head></head><frameset rows="20%,*" > <!-- frameborder="no" --><frame src="frames/top.html"/><frameset cols="15%,*"><frame src="frames/left.html"/><frameset rows="80%,*"><frame src="frames/main.html"/><frame src="frames/bottom.html"/></frameset></frameset></frameset>
</html>

<html><head><meta charset="utf-8"></head><body>这里是demo06页面的内容！！<iframe src="frames/top.html"/></body>
</html>

JavaWeb——HTML基础内容总结相关推荐

JavaWeb开发基础：Application的知识点简述
JavaWeb开发基础:Application的知识点简述 Application的概念比较简单,相比cookie(只允许客户端访问),session(一个客户端只能访问特定的session内存),但 ...
JavaWeb开发基础：Cookies/Session学习
JavaWeb开发基础:Cookies学习理解cookie的实现原理: http协议的特性是无连接性,但我们从服务器上那下来网页的内容之后,socket就close掉了,服务器和浏览器不再连接. 所 ...
Javaweb零基础学习（壹）
Javaweb零基础学习(壹) 前言 Web本质是什么下载相关软件常用文本标签前言这里讲一下我自己是如何自习的Javaweb前端,由于集训的时候讲了一下基础知识,所以我这里自学是以项目为主,边 ...
JAVAweb入门基础
1.JAVAweb开发原理 2.web服务器 2.1.技术服务 ASP(微软国内最早流行;在HTML中嵌入了VB的脚本,ASP+Com;在ASp开发中,基本一个页面都有几千行的业务代码,页面及其混乱 ...
初学Oracle的笔记(2)——基础内容(实时更新中..)
续初学Oracle的笔记(1)--基础内容(实时更新中..) 1.oracle中创建一张表,写法与sql server中的一样. SQL> create table Course 2 ( cn ...
浅析精准网络推广的基础内容
网络推广一般能够分为两种方式,其中一种就是根据社交网络进行散播推广,另一种就是根据营销实际效果进行精准推广.这两种都是当下十分具有典型性的关键营销推广方法,前者被称为散播营销推广,而后者被称为精准推广 ...
【转】医疗业务学习笔记--DICOM协议的基础内容！！！！！！！！！！
转自:医疗业务学习笔记--DICOM协议的基础内容 - 知乎本文首发于"雨夜随笔"公众号,欢迎关注. DICOM协议是医疗领域对如何处理.存储.打印和传输医疗图片的一系列标准.D ...
自定义_Excel中的自定义函数（自定义函数的基础内容）
各位朋友,你们好. 最近和网友沟通交流Excel问题,好些问题都没法直接实现,因此用了很多自定义函数,也给头条里的朋友写过几个自定义函数(比如颜色计算的函数.提取不重复内容的函数.汉字转拼音的函数-- ...
时间序列经济python_（13）Python初入坑之时间序列基础内容
本节介绍python的关于时间序列的基础内容. 一.时间序列的基础内容在金融和经济学领域python已经承担起了很多任务,这得益于pandas对于时间序列的良好支持.现在在金融和数据分析的重要性正在 ...

JavaWeb——HTML基础内容总结