前端——HTML

1.前端三门技术

学习Web前端技术需要掌握三门基本技术:HTMLCSSJavaScript

  • HTML:HTML是网页内容的载体。内容就是网页制作者放在页面上想要用户浏览的信息,可以包含文件、图片、视频等
  • CSS:CSS样式是表现,就像网页的外衣比字体、颜色变化等
  • JavaScript:JavaScript用来实现网页上的特效效果。比如鼠标滑过弹出下拉菜单、鼠标滑过北京颜色改变等

使用工具:HBuilder

首先来写一个简单的HTML代码:

<html>
	<body>
		<h1>My First Heading</h1>
		<p>My first paragraph</p>
	</body>
</html>

在这里插入图片描述
通过如上可以发现,HTML是网页内容的具体载体。接下来我们写一个CSS代码:

<html>
	<head>
		<meta charset="utf-8">
		<style type = "text/css">
			body {color:red}
			h1 {color:#00ff00}
			p.ex {color:rgb(0,0,225)}
		</style>
	</head>
	<body>
		<h1>My First Heading</h1>
		<p>My First Paragraph.在body选择器中定义了本页面的默认文本颜色。</p>
		<p class = "ex">该段落定义了class = "ex",使得段落中的文本是蓝色的。</p>
	</body>
</html>

在这里插入图片描述
第一个JavaScript代码如下:

<html>
	<body>
		
		<script type = "text/javascript">
			document.write("Hello my first JavaScript code!")
		</script>
		
	</body>
</html>

在这里插入图片描述

2.HTML标签(上)

2.1.HTML简介

2.1.1.HTML简介

HTML是由于创建网页的语言。我们通过使用HTML标记标签创建HTML文档来创建网页。HTML代表超文本标记语言,它具有标记标签的集合。
HTML标签是由尖括号括起来的词,如<html>、<body>,标签通常成对出现,例如<html>和</html>。
一对中的第一个标签是开始标签,第二个是结束标签,我们也可以称之为起始标签闭合标签

2.1.2.HTML元素

I like <code>web</code> and CSS.

起始标签是<code>,结束标签是</code>。标签之间是元素内容,即web,标签和内容一起形成代码元素

  • 元素告诉浏览器您的内容。元素的效果应用于元素内容,每个HTML标签都有不同的特定的含义
  • 元素名称不区分大小写。HTML标签不区分大小写,浏览器会识别<code>和<CODE>,甚至能识别<CoDe>,<H1>和<h1>是一样的,但是建议小写
  • HTML定义了在HTML文档中实现各种角色的不同类型元素

2.1.3.HTML文件结构

一个HTML文件是有自己的固定结构的

<html>
	<head>...</head>
	<body>...</body>
</html>

代码讲解:

  • <html></html>成为根标签,所有的网页标签都在<html></html>中
  • <head></head>标签由于定义文档的头部,它是所有头部元素的容器。头部元素有<title>、<script>、<style>、<link>、<meta>等
  • 在<body>和</body>标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来

2.1.4.HTML注释

HTML注释:代码注释不仅能方便程序员回忆代码用途明晰思路,也可以让其他人快速读懂你的代码,方便合作开发,语法如下:

<!--注释内容-->

2.1.5.HTML语义化

语义化:通俗的说就是明白每个标签的用途(在什么情况下使用这个标签合适),你如网页的文章标题就得用标题标签。
语义化的作用

  • 更容易被搜索引擎收录
  • 更容易让屏幕阅读器读出内容

2.1.6.HTML文档类型

\<!DOCTYPE>

作用:帮助浏览器正确地显示页面

Web世界存在许多不同的文档,只要了解文档类型,浏览器才能正确地显示文档。HTML也有许多不同的版本,只有明白页面中使用的确切的HTML版本,浏览器才能完全正确地显示出HTML页面,这就是<!DOCTYPE>的用处。它不是HTML标签,而是为浏览器提供一种信息。注意:

  • 必须放在HTML文档的第一行
  • 声明不是HTML标签

常用声明如下:

  • HTML 5:
<!DOCTYPE html>
  • HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
  • XHTML 1.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML乱码解决:当页面出现乱码时,在在<head></head>标签之间添加:“\<meta charset="utf-8">

2.2.HTML文本标签

2.2.1.段落标签<p>

如果想在网页上显示文章,这是便需要<p>标签了,把文章的段落放到<p>标签中,语法如下:

  • <p>段落文本</p>
  • 浏览器会自动地在段落前后添加空行
  • 不要忘记结束标签,即使忘记结束标签,大多数浏览器也会正确的将HTML显示出来,但是还是不推荐忘记结束标签
    使用文本标签示例代码如下:
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<p>这是段落一</p>
		<p>这是段落二</p>
		<p>这是段落三</p>
	</body>
</html>

在这里插入图片描述
!!!注意:

  • 按照规范,不允许省略结束标签,防止出现意想不到的结果或错误
  • 对于HTML,无法通过在HTML代码中添加额外的空格或换行改变输出结果,当页面显示时,浏览器会移除源代码中多余的空格和空行,所有连续的空格或空行都会被算作一个空格,示例如下:
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		春眠不觉晓
		    处处闻啼鸟
		    
		    夜来风雨声
		     花落知多少
	</body>
</html>

在这里插入图片描述

2.2.2.标题标签<hx>

在HTML文档中,标题(Heading)很重要,标题是通过<h1>到<h6>等标签进行定义的,\<h1>定义最大标题,\<h6>定义最小标题,观察各级标签:

<html>
	<body>
		<h1>Heading 1</h1>
		<h2>Heading 2</h2>
		<h3>Heading 3</h3>
		<h4>Heading 4</h4>
		<h5>Heading 5</h5>
		<h6>Heading 6</h6>
	</body>
</html>

在这里插入图片描述
!!!注意

  • 浏览器会自动的在标签后添加空行
  • 默认情况下,HTML会自动的在块级元素前后添加一个额外的空行,比如段落、标题元素前后
  • 确保将HTML heading标签只用于标题,不仅仅是为了产生粗体或大号的文本而使用标题,应该将h1作为最主标题,其后依次类推

2.2.3.强调标签<em>、<strong>

有了段落标签和标题,现在如果想在一段话中特别强调某几个字,这时可以使用\<em>和\<strong>标签,但是而二者在强调的语气上存在区别:

  • <em>:表示强调在浏览器中用斜体表示
  • <strong>:表示更强烈的强调在浏览器中用加粗表示

使用标签范例:

<html>
	<head>
		<meta charset = "utf-8">
	</head>
	<body>
		<em>em标签</em>
		<strong>strong标签</strong>
	</body>
</html>

在这里插入图片描述
<em>、<strong>和<span>的区别:

  • <em>和<strong>标签是为了强调一段话中的关键字时使用,他们的语义是强调
  • <span>标签是没有语义的,它的作用就是为了设置单独的样式用的,把一段话圈起来,然后用css样式

2.2.4.引用标签<q>、<blockquote>

2.2.4.1.短引用

  • <q>用于短引用
  • 语法:\<q>引用文本\</q>
  • 浏览器通常会为<q>元素包围""
  • 这里的<q>标签真正关键地不是它默认给元素包围双引号,如果仅仅是如此完全可以手动从键盘输入,真正关键的是他的语义:引入别人的话

使用范例:

<html>
	<head>
		<meta charset = "utf-8">
	</head>
	<body>
		<!--浏览器通常会在q元素周围包围引号-->
		<p>以下为文本引用<q>引用文本</q></p>
	</body>
</html>

在这里插入图片描述

2.2.4.2.长引用

  • <blockquote>用于长引用
  • 语法:\<blockquote>引用文本\</blockquote>
  • 浏览器对\<blockquote>标签的解析是缩进样式
<html>
	<head>
		<meta charset = "utf-8">
	</head>
	<body>
		<p>以下为百度百科对于JavaScript的定义 <blockquote>JavaScript是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。</blockquote></p>
	</body>
</html>

在这里插入图片描述

2.2.5.换行标签与分割线标签

2.2.5.1.换行标签

如果希望不产生一个新的段落的情况下进行换行,请使用\<br/>标签,<br/>标签作用相当于world文档中的回车,使用范例如下:

<html>
	<head>
		<meta charset = "utf-8">
	</head>
	<body>
		<p>
			To break<br/>lines<br/>in a
		</p>
	</body>
</html>

在这里插入图片描述
!!!注意:是<br>还是<br/>?
这二者很相似,但是在XHTML、XML以及未来的HTML版本中,不允许使用没有结束标签(闭合标签)的HTML元素,即使使用<br>在所有浏览器中都没有显示问题,但是使用\<br/>是更长远的保障

2.2.5.2.分割线标签

\<hr/>标签和\<br>标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。使用范例如下:

<html>
	<head>
		<meta charset = "utf-8">
	</head>
	<body>
		<p>
			Java从<br/>入门
			<hr/>
			到精通
		</p>
	</body>
</html>

在这里插入图片描述
\<hr/>标签在浏览器的默认样式线条比较粗,颜色为灰色,可能会觉得不够美观,在学习CSS后可以对其进行修改。

2.2.6.特殊字符

  • 空格:&nbsp;
  • 注意:“;”必不可少
<html>
	<head>
		<meta charset = "utf-8">
	</head>
	<body>
		<p>
			春眠不觉晓<br/>
			&nbsp;&nbsp;处处闻啼鸟<br/>
		</p>
	</body>
</html>

在这里插入图片描述
其他特殊字符:

属性 显示结果 描述
® ® 已注册
© © 版权
&trade 商标
<html>
	<head>
		<meta charset = "utf-8">
	</head>
	<body>
		<p>
			注册:&reg;<br/>
			版权:&copy;<br/>
			商标:&trade;<br/>
		</p>
	</body>
</html>

在这里插入图片描述

2.3.address标签

  • address标签,为网页加入地址信息
  • 语法:\<address>地址信息\</address>
  • 在浏览器显示样式为斜体,如果不喜欢斜体 -,可以在后续学习中对其进行修改
<html>
	<head>
		<meta charset = "utf-8">
	</head>
	<body>
		<address>陕西省西安市XX区XX号</address>
	</body>
</html>

在这里插入图片描述

2.4.code标签

  • 在介绍语言技术的网站中,避免不了在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用\<code>标签了
  • 语法:\<code>代码语言\</code>
<html>
	<body>
		<code>var i = i + 3000</code>
	</body>
</html>

在这里插入图片描述
在文章中一般如果要插入多行代码时不能使用<code>标签,如果是多行代码,可以使用<pre>标签

  • \<pre>标签的主要作用预格式化的文本,被包围在pre元素中的文本通常会保留空格和换行符,如果用以前的方法,回车需要输入<br/>标签,空格需要输入 
  • <pre>标签不只是为显示计算机的源代码时用的,在你需要在网页中预显示格式时可以用它,只是<pre>标签的一个常见应用就是用来展示计算机的源代码
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<pre>
			// 以下为Java代码
			int x = 0;
			int y = 1;
			int z = x+y;
		</pre>
	</body>
</html>

在这里插入图片描述

3.HTML标签(下)

3.1.HTML列表标签

HTML支持:

  • 无序列表
  • 有序列表
  • 定义列表

3.1.1.无序列表

  • 无序列表是一个项目的列表,此列项目使用粗体圆点(小黑圆圈)进行标记
  • 无序列表始于\<ul>标签,每个列表项始于\<li>
  • 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<ul>
			<li>你是谁</li>
			<li>我是王者峡谷最靓的仔</li>
			<li>hahahahaha</li>
		</ul>
	</body>
</html>

在这里插入图片描述

3.1.2.有序列表

  • 有序列表是一个项目的列表,此列项目使用数字进行标记
  • 无序列表始于\<ol>标签,每个列表项始于\<li>
  • 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<ol>
			<li>你是谁</li>
			<li>我是王者峡谷最靓的仔</li>
			<li>hahahahaha</li>
		</ol>
	</body>
</html>

在这里插入图片描述

3.1.3.定义列表

  • 自定义列表不仅仅是一列项目,而是项目及其注释的集合
  • 自定义列表以\<dl>标签开始,每个自定义列表项以\<dt>开始,每个自定义列表项的具体内容定义以\<dd>开始
  • 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<dl>
			<dt>你是谁</dt>
			<dd>我是王者峡谷最靓的仔</dd>
			<dd>hahahaha</dd>
			<dt>你到底是谁</dt>
			<dd>我真的只是个靓仔</dd>
			<dd>hahahahaha</dd>
		</dl>
	</body>
</html>

在这里插入图片描述

3.2.HTML块

  • 可以通过\<div>\<span>将HTML元素组合起来
  • 大多数HTML元素被定义成块级元素或内联元素
  • 块级元素:block level element
  • 内联元素:inline element

3.2.1.块级元素

块级元素在浏览器显示时,通常会以新行来开始和结束,比如:<h1>、<p>、<ul>、<table>

3.3.2.内联元素

内联元素在浏览器显示时,通常不会以新行开始和结束,比如:<b>、<td>、<a>、<ing>

3.2.3.<div>元素

  • 定义:<div>可定义文档中的分区或节,<div>标签可以把文档分割成独立的、不同的部分,它可以用作严格的组织工具,并且不使用任何格式与其关联,如果用id或class来标记<div>,那么改标签的作用会变得更加有效
  • 用法:<div>是一个块级元素,这意味着它的内容自动地开始一个新行,实际上,换行是<div>固有的唯一格式表现。可以通过<div>的class或id应用额外的样式,不必为每一个<div>都加上class或id,虽然 这样做也有一定的好处。
  • 可以对同一个<div>元素应用class或id属性,但是更常见的情况是只应用其中一种,这二者的主要差异是:class用于元素组(类似的元素,或者可以理解为某一类元素),而id用于表示单独的唯一元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>Java课程</h1>
		<p>SE、前端、EE</p>
		...
		
		<div class = "JavaSE">
			<h2>SE</h2>
			<p>多线程、内存划分等等</p>
		...
		</div>
		
		<div class = "JavaEE">
			<h2>EE</h2>
			<p>Spring、SpringBoot等等</p>
		...
		</div>
		
		...
	</body>
</html>

在这里插入图片描述
div 为⽂文档添加了了额外的结构,由于这些 div 属于同⼀类元素,所以可以使⽤用 class=“JavaSE” 对这些 div 进行标识,这么做不不仅为 div 添加了合适的语义,而且便于进⼀步使⽤样式对 div 进行格式化

3.2.4.<span>元素

  • HTML<span> 元素是内联元素,可用作文本的容器。<span>元素也没有特定的含义,当与 CSS 一同使用时, 元素可用于为部分文本设置样式属性
  • <span>标签用来组合文档中的行内元素
  • 注释:span 没有固定的格式表现,当对它应用了样式时,它才会产生视觉上的变化
  • 如果不对 span 应用样式,那么span 元素中的文本与其他文本不会有任何视觉上的差异
  • 可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式
  • 可以对同一个\ 元素应⽤ class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是:class ⽤用于元素组(类似的元素,或者可以理理解为某一类元素),⽽而 id ⽤用于标识单独的唯一的元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<p><span>some text.</span>some other text.</p>
	</body>
</html>

在这里插入图片描述
如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会有任何视觉上的差异。尽管如此,上例中的 span 元素仍然为p元素增加了了额外的结构

3.3.HTML表格

3.3.1.HTML表格

  • 表格由\<table>标签来定义,每个表格内有若干行,由\<tr>标签定义,每行被划分为若按个单元格,由\<td>标签划分
  • 字母td表示表格数据(table data),即数据单元内容,数据单元格可以包括文本、图片、列表、表单、水平线、表格等
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<table border = "1">
			<tr>
				<td>row 1,cell 1</td>
				<td>row 1,cell 2</td>
			</tr>
			<tr>
				<td>row 2,cell 1</td>
				<td>row 2,cell 2</td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述

3.3.2.表格和边框属性

如果不定义边框属性(border属性),表格将不显示边框。不带表框显示表格示例如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<tr>
			<td>Row 1,cell 1</td>
			<td>Row 2,cell 2</td>
		</tr>
		<table>
		</table>
	</body>
</html>

在这里插入图片描述

3.3.3.表格的表头

表格的表头使用\<th>标签进行定义,大多数浏览器会把表头显示为粗体居中的文本,示例如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<table border = "1">
			<tr>
				<th>Heading</th>
				<th>Another Heading</th>
			</tr>
			<tr>
				<td>row 1,cell 1</td>
				<td>row 1,cell 2</td>
			</tr>
			<tr>
				<td>row 2,cell 1</td>
				<td>row 2,cell 2</td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述

3.3.4.表中的空单元格

在一些浏览器中,没有内容的表格单元显示地不太好,如果某个单元格是空的,没有内容,浏览器可能无法显示出这个单元格的边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<table border = "1">
			<tr>
				<td>row 1,cell 1</td>
				<td>row 1,cell 2</td>
			</tr>
			<tr>
				<td></td>
				<td>row 2,cell 2</td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述
!!!注意:如上显示出了空的单元格的边框,但有的浏览器按照如上无法显示出边框,为了避免这种情况,在空单元格中添加一个空格占位符就可以显示出边框,示例代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<table border = "1">
			<tr>
				<td>row 1,cell 1</td>
				<td>row 1,cell 2</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>row 2,cell 2</td>
			</tr>
		</table>
	</body>
</html>

3.3.5.带有标题的表格

  • caption元素定义表格标题
  • caption标签必须紧随table标签之后,只能对每个表格定义一个标签
  • 通常定义的标题会被居中于表格之中
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<table border = "1">
			<caption>我的标题</caption>
			<tr>
				<td>100</td>
				<td>200</td>
				<td>300</td>
			</tr>
			<tr>
				<td>400</td>
				<td>500</td>
				<td>600</td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述

3.4.HTML链接

HTML使用超级链接与网络上的另一个文档相连,几乎可以在所有的网页中找到链接,点击链接可以从一个页面跳转到另一个界面。

3.4.1.HTML超链接

  • 链接可以是一个字、一个词或者一组词,也可以是一张图片,你可以点击这些内容来跳转到相应文档或者当前文档的某个部分
  • 把鼠标指针移动到网页中的某个链接上时,箭头会变成一只小手
  • 我们通过<a>标签在HTML网页中创建连接
  • 有两种使用<a>标签的方式:
    通过href属性,创建指向另一个文档的连接
    通过使用name属性,创建文档内的书签

3.4.2.链接语法

href属性规定链接目标开始标签和结束标签之间的文字被称作超级链接来显示,示例如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<a href = "https://blog.csdn.net/LiLiLiLaLa/article/details/89340476">HTML博客</a>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述
!!!注意:“链接文本”不必一定是文本,图片或其他HTML元素都可以成为链接。

3.4.3.HTML链接——target属性

使用target属性你可以定义被链接的文档在何处显示,新的窗口打开示例如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<a href = "https://blog.csdn.net/LiLiLiLaLa/article/details/89340476" target="_blank">HTML博客</a>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

3.4.4.HTML链接——name属性

  • name属性规定锚(anchor)的名称
  • 可以使用name属性创建HTML页面中的书签,书签不会以任何特殊形式显示,它对读者是不可见得
  • 当使用命名锚(named anchors)时,我们可以直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了
  • 命名锚的语法:<a name = "label">锚(显示在页面上的文字)</a>
    锚的名字任意,只要你喜欢
    可以使用id属性代替name属性,命名锚同样有效

name属性使用范例如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<a name = "tips">锚点(书签点)</a>
		<p>
			中新社记者走访拥有重庆多所重点高中的沙坪坝区发现,临近考场附近的宾馆房间早在10天前就已订满。除了
快捷酒店和普通宾馆,五星级酒店也加入了高考房的销售。
		</p>
		
		<p>
			“高考期间的入住率能赶上旺季的节假日。”沙坪坝一家星级酒店前台工作人员告诉记者,除了每年都会推出的高考房,今年他们还推出了“高考套餐”:包含两晚八餐的食宿服务,同时配备专车接送考生。
		</p>
		
		<p>
			高考期间,进口营养保健品也受到家⻓长追捧。药店里,抗疲劳、健脑等进口保健品被摆放在显眼的货架上。据售货员介绍,这些保健品单盒价格约为300至1000元人民币不等。虽然不便宜,但在高考前半月,好几种保健品卖到脱销。
		</p>
		
		<a href = "#tips">跳转到锚点</a>
	</body>
</html>

在这里插入图片描述
还可以在其他页面中创建指向该锚的链接,如下代码中,我们将#符号和锚名称添加到URL的末端,就可以直接链接到tips这个锚名了,示例如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

3.5.HTML图像

3.5.1.图像标签和源属性

  • 在HTML中,图片由<ing>标签定义
  • <ing>标签是空标签,意思是说,它只包含属性,并没有闭合标签
  • 要在页面上显示图像,你只需要使用源属性(src),src指“source”,源属性的值是图像的URL地址
  • 定义图像的语法:<img src = "url" />
  • URL 指存储图像的位置。如果名为 "room.jpg " 的图像位于 https://abc.com 的 picture目录中,那么其 URL 为 https://abc/picture/room.jpg
  • 浏览器将图片显示在文档中图片标签出现的地方,如果将图像标签置于两个段落中间,那么浏览器会先显示第一个段落,然后显示图片,再显示第二段

3.5.2.替换文本属性(alt属性)

alt属性用来为图像定义一串预备的可替换的文本,替换文本属性的值是用户定义的,在浏览器无法载入图像时,替换文本告诉读者他们失去的信息,此时浏览器将显示这个替换的文本而不是图像,为页面的图像都添加上替换文本是个好习惯,这样有助于很好显示信息,并且对于那些使用纯文本浏览器的人来说十分有用,使用alt属性范例:

<img src="boat.gif" alt="Big Boat">

3.5.3.背景图片

  • gif和jpg图片均可以作为HTML背景
  • body标签的background属性设置背景图片
  • 如果图片小于页面,图片会进行重复
<body background="我是一张图片.jpg">
<h3>别看我看背景</h3>
</body>

3.6.HTML表单

3.6.1.HTML表单

HTML表单用于搜集不同类型的用户输入

3.6.1.1.<form>元素

语法:

<form>
	.
	form element
	.
</form>

HTML表单包含表单元素,表单元素指的是不同类型的input元素、复选框、单选按钮、提交按钮等等

3.6.1.2.<input>元素

  • <input>元素是最重要的表单元素
  • \<input>元素有很多形态,对应不同的type属性

常用属性如下:

类型 描述
text 定义常规文本输入
radio 定义单选按钮输入(选择多个选择之一)
submit 定义提交按钮(提交表单)
  • 文本输入:<input type = “text”>定义用于文本输入的单行输入字段,文本字段的默认宽度是20字符
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<form>
			userName:<br>
			<input type = "text" name = "userName"><br>
			passWord:<br>
			<input type = "text" name = "userName"><br>
			passWord:<br>
			<!--type = "password"输入的时候会变成小黑点,安全-->
			<input type = "password" name = "userName">
		</form>
	</body>
</html>

在这里插入图片描述

  • 单行输入:<input type = “radio”>定义单选按钮,单选按钮允许用户在有限数量的选项中选择其中之一
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<form>
			<p>请选择性别</p>
			<input type = "radio" name = "sex" value = "男" checked>男
			<br>
			<input type = "radio" name = "sex" value = "女">女
		</form>
	</body>
</html>

在这里插入图片描述

  • 提交按钮:<input type = “submit”>定义用于向表单处理程序(form-handler)提交表单的按钮,表单处理程序通常是包含用来处理输入数据的脚本的服务器页面,表单处理程序在表单的action属性中指定
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<form action = "http://www.w3school.com.cn//demo/demo_form.asp">
			First name:<br>
			<input type = "text" name = "firstname" value = "liu"><br>
			Last name:<br>
			<input type = "text" name = "lastname" value = "yiyi">
			<br>
			<input type = "submit" value = "Submit">
		</form>
	</body>
</html>

在这里插入图片描述

  • Action属性定义在提交表单时执行的动作,向服务器提交表单的通常做法是使用提交按钮,通常表单会被提交到web服务器上的网页,如果省略action属性,则action会被设置为当前页面,在上面的例子中,就指定了某个服务器脚本来处理被提交表单:
<form action="http://www.w3school.com.cn//demo/demo_form.asp">
  • Method属性规定在提交表单时所用的HTTP方法(GET或POST)
<form action="http://www.w3school.com.cn//demo/demo_form.asp" method="GET">
<form action="http://www.w3school.com.cn//demo/demo_form.asp" method="POST">
  • Name属性,如果要正确地被提交,每个输入字段必须设置一个name属性,下面的代码只会提交一个字段
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<form action="/demo/demo_form.asp">
			First name:<br>
			<input type="text" value="liu">
			<br>
			Last name:<br>
			<input type="text" name="lastName" value="yiming">
			<br>
			<input type="submit" value="Submit">
		</form>
	</body>
</html>
  • \<filedest>元素组合表单中的相关数据,<legend>元素为<fieldset>元素定义标题
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<form action="http://www.w3school.com.cn//demo/demo_form.asp">
			<fieldset>
				<legend>Personal information:</legend>
				First name:<br>
				<input type="text" name="firstname" value="liu">
				<br>
				Last name:<br>
				<input type="text" name="lastName" value="yiming">
				<br>
				<input type="submit" value="Submit">
		</form>
	</body>
</html>

在这里插入图片描述

  • HTML Form属性整合
属性 描述
accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)
action 规定向何处提交表单(URL)
autocomplete 规定浏览器应该自动完成表单(默认:开启)
encttype 规定被提交数据的编码(默认:url-encoded)
method 规定在提交表单时所用的HTTP方法(默认:GET)
name 规定识别表单的名称(对于DOM使用:document.forms.name
novalidate 规定浏览器不验证表单
target 规定action属性中地址的目标(默认:_self)

3.6.2.表单元素

3.6.2.1.<select>元素(下拉列表)

<select>元素定义下拉列表,<option>元素定义待选择的选项,列表通常会把首个选项显示为备选选项,可以通过添加<select>属性来添加预定义选项,示例如下:

<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<form action="/demo/demo_form.asp">
			<select name="cars">
				<option value="Benz>奔驰</option>
				<option value="BMW">宝⻢马</option>
				<option value="Audi" selected>奥迪</option>
				<option value="Ford">福特</option>
			</select>
			<br>
			<input type="submit">
		</form>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

3.6.2.2.<textarea>元素

\<textarea>元素定义多行输入文本(文本域)

<html>
	<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<form>
			<textarea name = "massage" rows = "accesskey="10" cols = "autofocus="30">
				The cat was playing in the garden.
			</textarea>
		</form>
	</body>
</html>
</html>

在这里插入图片描述

3.6.2.3.<button>元素

<button>元素定义可点击的按钮

<html>
	<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<form>
			<button type = "button" onclick = "alter('Hello world!')">点我</botton>
		</form>
	</body>
</html>
</html>

在这里插入图片描述

3.6.2.4.HTML5新增<datalist>元素

\<datalist>元素为\<input>元素规定预定义选项列表,用户会在他们输入数据时看到预定义下拉列表,<input>元素的list属性必须引用<datalist>元素的id属性

<html>
	<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<form action = "action_page.php">
			<input list = "care">
			<datalist id = "care">
				<option value = "邹大炮">
				<option value = "邹二狗">
				<option value = "邹三炮">
				<option value = "邹小鸡">
			</datalist>
			<input type = "submit">		</form>
	</body>
</html>
</html>

在这里插入图片描述

3.6.3.HTML输入类型

3.6.3.1.checkbox定义复选框

<input type = "checkbox">定义复选框,复选框允许用户在有限数量的选项中选择零个或多个选项

<html>
	<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<form action="http://www.w3school.com.cn/demo/demo_form.asp">
			<input type="checkbox" name="vehicle" value="Bike">I have a bike
				<br>
				<input type="checkbox" name="vehicle" value="Car">I have a car
					<br><br>
					<input type="submit">
		</form>
	</body>
</html>
</html>

在这里插入图片描述

3.6.3.2.HTML新增的number输入

<input type="number"> 用于应该包含数字值的输入字段,您能够对数字做出限制,根据浏览器的支持,限制可应用到输入字段

<html>
<html>
	<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<p>
			根据浏览器支持:<br>
			数值约束会应用到输入字段中。
		</p>
		<form action="/demo/demo_form.asp">
			数量(1 到 5 ):
			<input type="number" name="quantity" min="1" max="5">
			<input type="submit">
		</form>
	</body>
</html>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.6.3.3.HTML新增的date输入

<input type="date"> 用于应该包含日期的输入字段,根据浏览器支持,日期选择器会出现在输入字段中,还可以向输入添加限制。

<html>
	<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<form action="/demo/demo_form.asp">
			请输入 2020-01-01 之前的日期:<br>
			<input type="date" name="bday" max="2020-01-01"><br><br>
			请输入 2000-01-01 之后的日期:<br>
			<input type="date" name="bday" min="2000-01-02"><br><br>
			<input type="submit">
		</form>
	</body>
</html>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.6.3.4.HTML新增的color输入

<input type="color"> 用于应该包含颜色的输入字段,根据浏览器支持,颜色选择器会出现在输入字段中。

<html>
	<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<form action="action_page.php">
			Select your favorite color:
			<input type="color" name="favcolor" value="#ff0000">
			<input type="submit">
		</form>
	</body>
</html>
</html>

在这里插入图片描述

3.6.3.5.HTML新增的email输入

<input type="email"> 用于应该包含电子邮件地址的输入字段,根据浏览器支持,能够在被提交时自动对电子邮件地址进行验证,某些手机会识别email类型,并在键盘增加 “.com” 以匹配电子邮件输入。

<html>
	<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<form action="/demo/demo_form.asp">
			E-mail:
			<input type="email" name="email">
			<input type="submit"
		</form>
	</body>
</html>
</html>

在这里插入图片描述

3.6.4.HTML输入属性

3.6.4.1.value属性

value属性规定输入字段的初始值

<html>
	<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<form action="">
			First name:<br>
			<input type="text" name="firstname" value="tim">
			<br>
			Last name:<br>
			<input type="text" name="lastname">
		</form>
	</body>
</html>
</html>

在这里插入图片描述

3.6.4.2.readonly属性

readonly属性规定输入字段为只读(不能修改)

<html>
	<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<form action="">
			First name:<br>
			<input type="text" name="firstname" value ="yuisama" readonly>
			<br>
			Last name:<br>
			<input type="text" name="lastname">
		</form>
	</body>
</html>
</html>

在这里插入图片描述

3.6.4.3.disabled属性

disabled 属性规定输入字段是禁用的,被禁用的元素是不可用和不可点击的,也不会被提交

<html>
	<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<form action="">
			First name:<br>
			<input type="text" name="firstname" value ="yuisama" disabled>
			<br>
			Last name:<br>
			<input type="text" name="lastname">
		</form>
	</body>
</html>
</html>

在这里插入图片描述

3.6.4.4.maxlength属性

maxlength 属性规定输入字段允许的最大长度

<html>
	<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<form action="">
			First name:<br>
			<input type="text" name="firstname" maxlength="2">
			<br>
			Last name:<br>
			<input type="text" name="lastname">
		</form>
	</body>
</html>
</html>

在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页