JavaWeb学习笔记（HTML语言）

最新推荐文章于 2021-06-20 03:46:45 发布

a820619012

最新推荐文章于 2021-06-20 03:46:45 发布

阅读量321

点赞数 1

分类专栏： JavaWeb基础

原文链接：www.itcast.cn

版权

JavaWeb基础专栏收录该内容

15 篇文章 2 订阅

订阅专栏

知识点总结于崔希凡+王泽(广陵散)的JavaWeb视频教程，侵权请联系删除。

HTML语言

HTML语言

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：文字颜色（两种表示方式）
1. 英文单词：red green blue black white yellow gray…
2. 使用十六进制数表示 #ffffff : RGB

注释标签：

Java有三种注释
//这是第一种注释
/*这是第二种注释*/
/**这是第三种注释*/
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>
&lt;pre&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;loadxmldoc.js&quot;&gt;
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

  &lt;script type=&quot;text/javascript&quot;&gt;
    xmlDoc=<a href="dom_loadxmldoc.asp">loadXMLDoc</a>(&quot;books.xml&quot;);
    document.write(&quot;xmlDoc is loaded, ready for use&quot;);
  &lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;
&lt;/pre&gt;
</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”>人员信息

表单标签（重要的标签）

表单标签：<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() {
	//获取form
	var form1 = document.getElementById("form1");
	//设置action
	form1.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> : 下标文本例如：400₄₀₀
<sup> : 上标文本例如：400⁴⁰⁰
<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”>