JavaWeb学习笔记（HTML语言）
知识点总结于崔希凡+王泽(广陵散)的JavaWeb视频教程，侵权请联系删除。
HTML语言
- HTML语言
- HTML简介
- 思维导图
- HTML中的常用标签
- 文字标签和注释标签
- 标题标签、水平线标签和特殊字符
- 列表标签
- 图像标签
- 路径的介绍
- 超链接标签
- 超链接的扩展
- pre标签
- 表格标签（重要的标签）
- 表单标签（重要的标签）
- 表单的提交方式（涉及JavaScript）
- 其它常用标签
- HTML头标签的使用
- 框架标签的使用（学会使用）- HTML5 不支持
HTML语言
HTML简介
- 全称为HyperText Markup Language,译为超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式。比如字体什么颜色，大小等。
- Html就是超文本标记语言的简写，是最基础的网页语言。
- Html是通过标签来定义的语言，代码都是由标签所组成。
HTML的规范（遵循）：
- 一个html文件开始标签和结束的标签 。例如： <html> </html>
- html包含两部分内容：
1,<head>设置相关信息</head>
2,<body>显示在页面上的内容都写在body里面</body> - html的标签有开始标签，也要有结束标签。例如：<head></head>
- html的代码不区分大小写的。
- 有些标签，没有结束标签 ，在标签内结束。例如 换行<br/> 水平线<hr/>
注意：<br>是在以前得写法，那时候没有具体得规范，也可以实现功能。现在规范了标签，加封闭符号。就有了<br/>。虽然说是向下兼容。但是html5中，以及是某些编辑器中，对于没有规范写封闭符号得标签，都做出了错误提示。所以还是建议使用<br/>。
HTML的操作思想（理解）：
- 网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装起来），通过修改标签的属性值实现标签内数据样式的变化。
一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。
HTML的注意事项：
- 多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。
- 想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。
- 属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号（也可以使用单引号）。或公司规定书写规范。
思维导图
HTML中的常用标签
文字标签和注释标签
文字标签：修改文字的样式
- 格式：<font></font>
- 属性：
size： 文字的大小 取值范围 1-7,超出了7，默认还是7
color：文字颜色（两种表示方式）- 英文单词：red green blue black white yellow gray…
- 使用十六进制数表示 #ffffff : RGB
注释标签：
- Java有三种注释
//这是第一种注释
/*这是第二种注释*/
/**这是第三种注释*/ - HTML的注释：
<!-- html的注释 -->
标题标签、水平线标签和特殊字符
标题标签：
- <h1></h1> <h2></h2> <h3></h3> …<h6></h6>
- 从h1到h6，大小是依次变小，同时会自动换行
水平线标签：
- <hr/>
- 属性：
size: 水平线的粗细 取值范围 1-7
color: 颜色 - 示例：<hr size=“5” color=“blue”/>
特殊字符：
- 想要在页面上显示这样的内容 <html>：是网页的开始！
- 需要对特殊字符进行转义：
< ： <
> ：>
空格：
& ： &
列表标签
1.比如想显示这样的效果：
-
公司 - 财务部
- 学工部
- 人事部
- 使用：
<dl></dl>: 表示列表的范围- 在dl里 <dt></dt>：上层内容
- 在dl里 <dd></dd>：下层内容
- 代码：
<dl><dt>传智播客</dt><dd>财务部</dd> <dd>学工部</dd><dd>人事部</dd>
</dl>
2.比如想显示这样的效果：
1.财务部
2.学工部
3.人事部
a. 财务部
b. 学工部
c. 人事部
i. 财务部
ii. 学工部
iii. 人事部
- 使用：
<ol></ol> : 有序列表的范围 - 属性：
type：设置排序方式 1(默认) a i
在ol标签里面输入标签： <li>具体内容</li> - 代码：
<ol type=1><li>财务部</li><li>学工部</li><li>人事部</li>
</ol>
3.比如想显示这样的效果：
●财务部
●学工部
●人事部
- 使用：
<ul></ul> : 表示无序列表的范围 - 属性：
type: 空心圆circle 、实心圆disc 、实心方块square ，默认disc
在ul标签里面输入标签：<li></li> - 代码：
<ul><li>财务部</li><li>学工部</li><li>人事部</li>
</ul>
图像标签
- <img src=“图片的路径”/>
- 属性：
src: 图片的路径
width：图片的宽度
height：图片的高度
alt: 图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容
alt浏览器兼容性很差，有些浏览器下不显示（没有效果）
路径的介绍
- 分类：相对路径和绝对路径
- 绝对路径：绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例如：C:\Program Files (x86) 或 http://www.baidu.com/b.jpg - 相对路径：相对路径就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。使用相对路径可以为我们带来非常多的便利。
- 相对路径有三种书写方式：
1.html文件和图片在一个路径下，可以直接写文件名称；
例如：<img src=“b1.jpg” alt=“这是一个图片”/>
2.图片在html的下层目录
在html文件中，使用img文件夹下面的a.jpg：
– 网页路径：C:\Users\asus\Desktop\0413\day01\code\4.html
– 图片路径：C:\Users\asus\Desktop\0413\day01\code\img\a.jpg
实现：img\a.jpg
3.图片在html文件的上层目录
—网页路径：C:\Users\asus\Desktop\0413\day01\code\4.html
—图片路径：C:\Users\asus\Desktop\0413\day01\c.png
怎么表示上层路径： …/
想要表示上层的上层： …/…/
- 相对路径有三种书写方式：
- 绝对路径：绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
超链接标签
- <a href=“链接到资源的路径”> 显示在页面上的内容 </a>
- 属性：
- href: 链接的资源的地址
- target：设置打开的方式 ，默认是在当前页打开
_blank: 在一个新窗口打开
_self: 在当前页打开 默认
- 当超链接不需要到任何的地址，可以在href里面加#。即：<a href="#">超链接</a>
- 定位资源（锚记链接）
- 如果想要定位资源：定义一个位置，即：<a name=“标记”>标记位置</a>
- 回到这个位置：<a href="#标记">回到标记位置</a>
超链接的扩展
- 当a标签里面访问网络资源时候，必须要加一个协议 http：表示一个网络的公共协议，
如果加上http协议之后，自动识别访问资源是一个网络资源 - 当浏览器里面找到相关协议，首先看这个协议是不是公共协议http。如果不是公共协议，会去本地电脑找支持这个协议的应用程序。
pre标签
在这里引入一个标签<pre>：原样输出
提示：制表符（tab）在 <pre> 标签定义的块当中可以起到应有的作用，每个制表符占据 8 个字符的位置。但是不推荐使用它，因为在不同的浏览器中，Tab 的实现各不相同。在用 <pre> 标签格式化的文档段中使用空格，可以确保文本正确的水平位置。
提示：如果希望使用 <pre> 标签来定义计算机源代码，比如 HTML 源代码，请使用符号实体来表示特殊字符，比如 “<” 代表 “<”，">" 代表 “>”，"&" 代表 “&”。
pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如 <a> 标签）放到 <pre> 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。请看示例：
<pre>
<pre>
<html><head><script type="text/javascript" src="loadxmldoc.js">
</script>
</head><body><script type="text/javascript">xmlDoc=<a href="dom_loadxmldoc.asp">loadXMLDoc</a>("books.xml");document.write("xmlDoc is loaded, ready for use");</script></body></html>
</pre>
</pre>
在上面的代码中，<pre> 标签中的特殊符号被转换为符号实体，比如 “<” 代表 “<”，">" 代表 “>”。另外，请注意蓝色的代码，我们在 <pre> 标签中使用了链接，也就是 <a> 标签。
上面这段代码的显示效果如下：
<pre>
<html><head><script type="text/javascript" src="loadxmldoc.js">
</script>
</head><body><script type="text/javascript">xmlDoc=loadXMLDoc("books.xml");document.write("xmlDoc is loaded, ready for use");</script></body></html>
</pre>
表格标签（重要的标签）
可以对数据进行格式化，使数据显示更加清晰。
<table></table>: 表示表格的范围
- 属性：
- border：规定表格边框的宽度
- bordercolor：表格线的颜色
- cellspacing：规定单元格之间的空白
- width：表格的宽度
- height：表格的高度
示例：<table border=“1” bordercolor=“blue” cellspacing=“0” width=“200” height=“150”>
在<table>标签中的标签：表示行<tr></tr>
- 设置对齐方式 align： left center right
在<tr>标签中的标签：表示列<td></td>
- 设置显示方式 align： left center right
使用<th>也可以表示单元格：表示可以实现居中和加粗
表格的标题：<caption></caption>
合并单元格：
- rowspan：跨行
<td rowspan=“3”>人员信息 - colspan：跨列
<td colspan=“3”>人员信息
- rowspan：跨行
表单标签（重要的标签）
表单标签：<form>
表单标签是最常用的标签，用于与服务器端的交互。属性：
- action： 提交到地址，默认提交到当前的页面
- method: 表单提交方式 （常用的有两种 get和post，默认是get请求）
面试题目： get和post区别
1、get请求地址栏会携带提交的数据，post不会携带（请求体里面，在之后会讲到）
2、get请求安全级别较低，post较高
3、get请求数据大小的限制，post没有限制 - enctype：属性规定在发送到服务器之前应该如何对表单数据进行编码。
值：
application/x-www-form-urlencoded：在发送前编码所有字符（默认）
multipart/form-data：不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
text/plain：空格转换为 “+” 加号，但不对特殊字符编码。
在表单标签内部的输入标签<input>：接收用户输入信息，可以输入内容或者选择内容的部分。
属性：
- type：指定输入标签的类型
示例：
- 普通输入项：<input type=“text”/>
- 密码输入项：<input type=“password”/>
- 单选输入项：<input type=“radio”/>
- 在里面需要属性 name
- name的属性值必须要相同
- 必须有一个value值
- 实现默认选中的属性：checked=“checked”
- 复选输入项：
- 在里面需要属性 name
- name的属性值必须要相同
- 必须有一个value值
- 实现默认选中的属性：checked=“checked”
文件输入项（在上传时候用到）
- <input type=“file”/>
下拉输入项（不在input标签里）
<select name="birth"><option value="1991">1991</option><option value="1992">1992</option><option value="1993">1993</option></select>- 默认选择：selected=“selected”
文本域
- <textarea cols=“10” rows=“10”>
隐藏项（不会显示在页面上，但是存在于html代码里面）
- <input type=“hidden” />
提交按钮
- <input type=“submit” value=“注册”/>
- 示例：
当我们点击注册后，get会将表单里的数据提交到action所指定的地址的URL后面，而且它们之间用“？”号连接，各个变量之间则用“&“连接。
点击注册后：
会发现参数会直接暴露在URL上，但是注意post不会将参数暴露。
使用图片提交：<input type=“image” src=“图片路径”/>
重置按钮：回到输入项的初始状态<input type=“reset”/>
普通按钮：<input type=“button” value=""/>
表单的提交方式（涉及JavaScript）
使用submit提交表单
使用button提交表单
function form1() {//获取formvar form1 = document.getElementById("form1");//设置actionform1.action = "hello.html";//提交form表单form1.submit(); }要点：
1.form对象有submit()方法，用于提交表单（还有个方法reset()用于把表单的所有输入元素重置为它们的默认值）
2.form对象的 action 属性定义了当表单被提交时数据被送往何处使用超链接提交表单
示例：<a href="hello.html?username=123456">使用超链接提交</a>
该方法相当于打开目的地址并携带了参数和值，是提交最直接的体现
其它常用标签
- <b>：加粗
- <s> ：删除线
- <u> ：下划线
- <i> ：斜体
- <pre> ：原样输出
- <sub> : 下标文本 例如：400400
- <sup> : 上标文本 例如：400400
- <p> ：段落标签 比br标签多一行
- <div> ：自动换行
- <span>：在一行显示，该标签被用来组合文档中的行内元素。
span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
HTML头标签的使用
- HTML由两部分组成：head和body
- 在head里面的标签就是头标签
- <title>：指定浏览器的标题。
- <base>：为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。（target 属性）
- <meta>：可提供有关页面的基本信息
示例：
<meta http-equiv=“refresh” content=“3;url=http://www.sina.com.cn” />：模拟一个页面定时刷新的请求，3秒后跳转到新浪
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
http-equiv类似于http的头部协议,他回应浏览器一些有用的信息,以帮助正确和精确地显示网页内容。常用的http-equiv类型有：Content-Type和Content-Lanauage(显示字符集的设定)
content(内容类型)：这个网页的格式是文本的
charset(编码)：这个网页的编码是UTF-8，需要注意的是这个是网页内容的编码,而不是文件本身的 - <link>：定义文档与外部资源的关系。
框架标签的使用（学会使用）- HTML5 不支持
窗口框架的建立(frameset,frame标签)
<frameset>：frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。
rows:按照行进行划分
<frameset rows=“80,*”>：在框架集的中间生成一个 80 像素高的行，并在这行的上边和下边各生成一个相同尺寸的行。
cols:按照列进行划分
<frameset cols=“80,*”>：生成一个宽为固定的 80 像素的列，然后再生成另一个框架列，该列会占据框架集中其余所有的空间
如果点击左边的页面超链接，想让内容显示在右边的页面中，可以设置超链接里面属性 target值设置成右边框架的名称（name）
<frame>：具体显示的页面
- 示例：<frame name=“lower_left” src=“b.html”>
注意：使用框架标签时候，不能写在body里面，使用了框架标签，需要把body去掉
JavaWeb学习笔记（HTML语言）相关推荐
- JavaWeb学习笔记2 —— Web服务器简介
JavaWeb学习笔记2 -- Web服务器简介 参考教程B站狂神https://www.bilibili.com/video/BV12J411M7Sj 相关技术 ASP: 微软:国内最早流行的就是A ...
- B站狂神说JavaWeb学习笔记
JavaWeb学习笔记(根据b站狂神说java编写) 1.基本概念 1.1 前言 静态Web: 提供给所有人看数据不会发生变化! HTML,CSS 动态Web: 有数据交互,登录账号密码,网站访问人数 ...
- JavaWeb学习笔记（5）-B站尚硅谷
文章目录 十四.书城项目第三阶段--优化 (1)页面jsp动态化 (2)抽取页面中相同的内容 A.登录成功的菜单 B.base.css.jQuery标签 C.每个页面的页脚 D.manager模块的菜 ...
- JavaWeb学习笔记（数据库、SQL语句、数据查询语法、完整性约束、编码、备份和恢复数据、多表查询）
数据库.SQL语句.数据查询语法.完整性约束.编码.备份和恢复数据.多表查询 JavaWeb学习笔记 数据库 数据库概念 基本命令 启动和关闭mysql服务器 客户端登录退出mysql SQL语句 S ...
- javaWeb学习笔记1—前端三件套 HTML CSS JavaScript
学习视频地址 javaWeb学习笔记-前端三件套 HTML CSS JavaScript 1.字体标签 2. 字符实体 3.标题标签 4.超链接 5.列表标签 6. img标签 路径 7.表格 8.i ...
- JavaWeb学习笔记（软件系统体系结构、Tomcat、Web应用、HTTP协议）
JavaWeb学习笔记 JavaWeb学习笔记 软件系统体系结构 常见软件系统体系结构C/S.B/S Web资源 Web服务器 Tomcat Tomcat概述 安装.启动.配置Tomcat Web应用 ...
- JavaWeb学习笔记（十）--HttpServletRequest
1. HttpServletRequest简介 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中 2. Ht ...
- JavaWeb学习笔记-目录（待完成）
JavaWeb学习笔记-目录(待完成) 01-基础加强(注解+反射) 02-mysql基础 03-mysql约束 04-mysql多表事务 05-jdbc 06-jdbc连接池JDBCTemplate ...
- nltk和python的关系_NLTK学习笔记(一):语言处理和Python
目录 nltk资料下载 import nltk nltk.download() 其中,download() 参数默认是all,可以在脚本里面加上nltk.download(需要的资料库) 来进行下载 ...
- C语言学习笔记---001C语言的介绍,编译过程原理,工具等
C语言学习笔记---001C语言的介绍,编译过程原理,工具等 创梦技术交流平台:资源下载,技术交流,网络赚钱: 交流qq群:1群:248318056 2群:251572072 技术交流平台:cre.i ...
最新文章
- Opengl-光照-颜色(其实要想做出好看的东西这章最重要了)
- zabbix服务无法启动
- 贾扬清撰文详解Caffe2：从强大的新能力到入门上手教程
- VC常用数据类型使用转换详解
- gcc与g++编译器
- 微信小程序开发简易教程一
- Solr7.2.1环境搭建和配置ik中文分词器
- 项目记事【SpringMVC-1】：后台接收前端传来的JSON，并转成对象
- 为什么程序员赚不了大钱？
- UNIX环境高级编程学习之路
- 大学计算机python基础课件,大学计算机python基础课件2015lecture03.pdf
- android蜂巢效果、环形菜单、Kotlin影视应用、简约时钟、查看导出App、支付宝AR扫码效果等源码
- phpstudy mysql局域网访问_phpstudy 局域网访问
- ps怎么放大图片保持清晰度？
- 笔记本光驱改固态硬盘装系统小记
- 《测绘程序设计实习》实验报告(MFC,C++)
- 微信小程序：图片404错误，更换默认图片
- 超级计算机排行榜历年,历代游戏主机浮点运算能力排行榜 究竟谁才是真正的性能怪兽...
- 一次迭代式开发的研究：一个迭代式项目计划
- 零知识证明笔记The 9th BIU Winter School on Cryptography