WEB01_HTML

最新推荐文章于 2022-03-23 14:36:29 发布

秋予暮

最新推荐文章于 2022-03-23 14:36:29 发布

阅读量285

点赞数 1

分类专栏： Web Java

本文链接：https://blog.csdn.net/qq_41439534/article/details/99701813

版权

Java 同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

Web

26 篇文章 0 订阅

订阅专栏

一.HTML介绍

1.什么是HTML
HTML的英文全称是Hyper Text Markup Language，即超文本标记语言，它是Internet上用于编写网页的主要标记语言。
超文本：比普通文本功能更加强大，页面内可以包含图片、链接等非文字内容。
标记语言：使用标签的方法将需要的内容包括起来，使用一组标签对内容进行描述的一门语言，它不是编程语言。
2.HTML能干什么
HTML用于编写网页。平时上网通过浏览器我们看到的大部分页面都是由html编写的。在浏览器访问网页时，可以通过“右键/查看源代码”看到具体的html代码。
网页内容包含：HTML代码、CSS代码、JavaScript代码等内容。
●HTML代码：用于展示需要显示的数据
●CSS代码：使显示的数据更好看
●JavaScript代码：使整个页面显示的数据具有动画效果
网页根据内容是否改变分为：静态页面、动态页面
●静态页面：编写之后在浏览器不再改变的网页。HTML就是用于编写静态页面的
●动态页面：会根据不同的情况展示不同的内容。
3.HTML语言特点
●HTML文件不需要编译，直接使用浏览器阅读即可
●HTML文件的扩展名是*.html或*.htm
●HTML结构都是由标签组成

标签名预先定义好的，我们只需要了解其功能即可
标签名不区分大小写
通常情况下标签由开始标签和结束标签组成。例如：<a></a>
如果没有结束标签，建议以/结尾。例如：<img />

●HTML结构包括两部分：头head和体body

二.HTML基本结构

1.语法和规范

所有的 html 文件后缀名都是以.html 或者.htm 结尾的，建议使用.html 结尾。
整个 html 文件分别由头部分<head></head>和体部分<body></body>组成
Html 标签都是由开始标签和结束标签组成。
Html 标签忽略大小写的，建议大家使用小写。

2.基本结构
一个完整的HTML文件由各种元素与标记组成，包括标题、段落、表格、文本和超链接等。下面是一个HTML文件的基本结构。

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

3.编写HTML页面
编写HTML页面有两者常用的方法：一种是利用操作系统自带的记事本编写；另一种是利用可视化网页制作软件（如DreamWeaver）编写，或者使用集成开发环境（IDE）Eclipse、HBuilder等编写。
4.常用HTML标记格式
简单划分为以下四种格式：

<标记语言>：单一型，无设置值。例如：<br>
<标记名称属性=“属性值”>：单一型，有设置值。例如：<hr color="red">
<标记名称>…</标记名称>：对称型：无设置值。例如：<title>...</title>
<标记名称属性=“属性值”>…</标记名称>：对称型，有设置值。例如：<body bgcolor="red">...</body>

4.HTML 相关标签的学习
1）标题标签
标题标签使用<hn></hn>,n 从 1 到 6 逐渐变小。超过 6 的按 6 的进行显示特点：加粗加黑显示，单独占用一行。与其它行有一定的行间距。
h1一级标题代表重中之重，一般运用于网站标题或者头条新闻上。
h2二级标题主要出现在页面的主体内容的文章标题和栏目标题上。
h3三级标题一般出现在页面的边侧栏上。
页面层级关系不能太深，所有h4、h5和h6一般出现较少。
2）段落标签
在HTML中，使用p标记实现一个新段落，语法格式如下：

<p>段落的内容</p>

p标记中有一个属性align能够设置段落中文字的对齐方式

<p align="参数值">段落文字</p>

参数值：right，left(默认)，center
换行：<br />
3）滚动标签
在HTML中，可以使用marquee标记让文字滚动，该标记有滚动方向、（direction）、滚动方式（behavior）、滚动次数（loop）、滚动速度（scrollamount）、滚动延迟（scrolldelay）、背景颜色（bgcolor）、宽度和高度等常用属性。语法格式如下：

<marquee direction="滚动方向" behavior="滚动方式">滚动的文字</marquee>

其中，direction的值有up、down、left（默认）、right
behavior的值有scroll（循环滚动）、slide（只滚动一次）、alternate（来回交替滚动）
loop值为整数
scrollamount值为文字每次移动长度，以像素为单位
scrolldelay的单位为毫秒
4）字体标签
字体标签使用<font></font> 必须结合其属性才能具备一定的样式效果。
设置颜色：color(可以是英文单词也可以是十六进制)
设置字体：face(那些字体必须是你本机已经有的)
设置大小的：size (从 1 到 7 逐渐变大，超过 7 的部分按照 7 来显示)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体标签</title>
	</head>
	<body>
		<!--
        	字体标签
        	<font></font>
        	color设置字体颜色
        	size设置字体大小 1-7变大
        	face设置字体
        -->
		<font color="red" size="1">Hello</font>
		<font color="red" size="2">Hello</font>
		<font color="red" size="3">Hello</font>
		<font color="red" size="4">Hello</font>
		<font color="red" size="5">Hello</font>
		<font color="red" size="6">Hello</font>
		<font color="red" size="7">Hello</font>
		<font color="red" size="100" face="楷体">Hello</font>
	</body>
</html>

5）水平线标签
水平线标签：<hr />

<hr color="水平线颜色" />

6）列表标签
（1）有序列表标记ol。有序列表中的项目采用数字或英文字母开头，通常个项目直接是由先后顺序的。格式如下：
有序列表：<ol></ol>

<ol>
	<li>列表项</li>
	<li>列表项</li>
	...
</ol>

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>有序标签</title>
	</head>
	<body>
		<!--
        	<ol type="以1/a/A/i/I开头排序" start="" reversed="reversed">
				<li></li>
			</ol>
        -->
        <ol type="1">
        	<li>阿里</li>
      		<li>腾讯</li>
        	<li>百度</li>
        </ol>
        
	</body>
</html>

属性：type 有 5 个取值 start 起始位置，reverse：倒序
（2）无序列表标记ul。ul用于设置无序列表，在每个列表项目文字之前，以项目符号作为每条列表项的前缀，各个列表没有级别之分。格式如下：

<ul>
	<li>列表项</li>
	<li>列表项</li>
	...
</ul>

例如：

<html>
	<head>
		<meta charset="UTF-8">
		<title>无序列表</title>
	</head>
	<body>
		<!--
       		<ul type="前方标记">无序标签</ul>
        -->
		<ul type="circle">
			<li>阿里</li>
			<li>腾讯</li>
			<li>百度</li>
		</ul>
	</body>
</html>

无序列表的项目符号默认情况下是●，而通过type属性可以改变无序列表的项目符号，避免项目符号的单调。type 有 3 个取值 disc实心圆、square方块、circle空心圆。
6）格式化标签
斜体：<i>
粗体：<b>

7）图像与多媒体标签
HTML图像是通过img标记插入的。img标记有多个属性，其中src是必需的，它指定要插入图像文件的位置与名称，语法格式如下：

<img src="图像文件的路径及名称"/>

src:
绝对路径：带有盘符的
相对路径：

如果是同级，直接写文件名称或者./文件名称
如果是上一级：…/文件名称(如果是多层，那么多写几个…/)
如果是下一级：写目录名称/文件名称

width:设置图片的宽度
height：设置图片的高度
alt：当图片无法正常显示的时候给出的提示信息。

!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片标签</title>
	</head>
	<body>
		<!--
        	图片标签
        	<img src="图片路径" width="图片宽度像素点" height="高度像素点" alt="无法显示图片后的显示"/>
        -->
		<img src="../../img/logo2.png" width="150px" height="30px" alt="logo图片"/>
	</body>
</html>

在网页中可以使用bgsound标记给网页添加背景音乐，格式如下：

<bgsound src="音乐文件的路径及名称" loop="播放次数">

在网页中可以使用embed标记将多媒体文件（如flash动画、mp3音乐、ASF视频等）添加到网页中，格式如下：

<embed src="多媒体文件的路径及名称" width="播放器的宽度" height="播放器的高度"></embed>

8）超链接标签
超链接的作用是建立一个位置到另一个位置的链接。利用超链接不仅可以进行网页间的访问，还可以使网页链接到其他相关的媒体文件上。
超链接标记a是一个非常重要的标记，它可以成对的出现在文档的任何位置，格式如下：

<a href=”链路路径” target=”目标窗口的打开方式”>链接内容</a>

其中链接内容可以是文字内容，也可以是一张图片。
target属性值可以为_self、_blank、_top以及_parent，_self是默认值。
_blank表示目标页面会在一个新的空白窗口中打开；
_top表示目标页面会在顶层框架中打开；
_parent表示目标页面会在当前框架的上一层打开。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>超链接标签</title>
	</head>
	<body>
		<!--
        <a href="" target=""></a>
		href:指定跳转的位置
		target：指定跳转页面显示的位置(取值：_self 、_blank) 本页或新开页面
        -->
        <a href="http:www.baidu.com" target="_blank">点击跳转百度</a>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网站链接显示页面</title>
	</head>
	<body>
		<ul>
			<li><a href="http://www.taobao.com" target="_blank">阿里</a></li>
			<li><a href="http://www.qq.com">腾讯</a></li>
			<li><a href="http://www.baidu.com" target="_self">百度</a></li>
		</ul>
		<a href="http://www.taobao.com"><img src="../img/1.jpg"/></a>
	</body>
</html>

9）表格标签
一个表格由行、列和单元格构成，可以有多行，每行可以有多个单元格。创建表格要以<table>标记开始，以</table>标记结束，格式如下：

<table>
  <tr>
     <td>单元格中内容</td> 
     <td>单元格中内容</td> 
  </tr>
  <tr>
     <td>单元格中内容</td> 
     <td>单元格中内容</td> 
  </tr>
 </table>

Table 属性：
边框：border
宽度：width
高度：height
背景颜色：bgcolor
边框与边框的空白：cellspacing
边框与内容的空白：cellpadding
居中显示：align
在一个表格中包含几组<tr></tr>标记，就表示该表格有几行，在一行中有几组<td></td>标记，就表示该行有几个单元格。
在制作表格时，可能需要某个单元格占据多列或多行：
colspan 单元格可跨列的列数
rowspan 单元格可跨行的行数
格式如下：

<td colspan="跨的列数">
<td rowspan="跨的行数">

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格标签</title>
	</head>
	<body>
		<!--
        	<table border="边框" 
        		width="表格宽度" 
        		height="表格长度" 
        		align="表格位置" 
        		bgcolor="背景颜色" 
        		cellpadding="边框与内容的间距"
        		 cellspacing="设置边框与边框的间距">
					<tr>行
						<td></td>列
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
					</tr>
					<tr>
						<td></td>
					</tr>
				</table>
				
        -->
		<table border="1px" width="450px" height="150" align="center" bgcolor="coral" cellpadding="0px" cellspacing="0px">
			<!--
            	也可以设置每行的高度 背景颜色等
            -->
			<tr height="100px" bgcolor="aqua">
				<td>11</td>
				<td>12</td>
				<td>13</td>
			</tr>
			<tr>
				<td>21</td>
				<td>22</td>
				<td>23</td>
			</tr>
			<tr>
				<td>31</td>
				<td>32</td>
				<td>33</td>
			</tr>
		</table>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格跨行跨列操作</title>
	</head>
	<body>
		<!--
        	跨行：rowspan
			跨列：colspan
		
        -->
		<table border="1px" width="500px" height="200px" align="center" cellpadding="0px" cellspacing="0px">
			<tr>
				<td colspan="2" align="center"></td>
				
				<td>13</td>
				<td>14</td>
			</tr>
			<tr>
				<td>21</td>
				<td colspan="2" rowspan="2" align="center">
					<table border="1px" align="center" width="100%" height="100%">
						<tr>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td></td>
						</tr>
					</table>
				</td>
				
				<td>24</td>
			</tr>
			<tr>
				<td>31</td>
				
				<td rowspan="2" align="center">34</td>
			</tr>
			<tr>
				<td>41</td>
				<td>42</td>
				<td>43</td>
			
			</tr>
		</table>
	</body>
</html>

10）框架集结构标签
框架标签：<frameset>标签，是多个窗口页面整合在一起的一个集合，每一个页面都是单独文档，需使用子标签<frame>来确定页面的位置。<frameset>通过列和行来确定整体布局，使用cols确定列数，使用rows确定行数。多个<frameset>可以嵌套使用。
●<frameset>和<body>不能共存
●cols:进行左右切割划分，可以切割为任一块。(参数的值相加=100%，其中有一块可以使用表示)
●rows: 进行上下切割划分，可以切割为任一块。(参数的值相加=100%，其中有一块可以使用表示)
●一旦划分区域之后，我们需要对具体的区域进行内容的填充，此时需要使用 <frame></frame>标签
框架子标签<frame></frame>用于设置框架集中的一个页面
src:指定该区域显示的文件(路径)
name:它通常会结合超链接的 target 属性使用，来定义最终的显示位置
noresize：框架分割先不能移动
target：确定需要显示的页面在何处显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网站后台系统显示页面</title>
	</head>
	<frameset rows="20%,*">
		<frame src="top.html" />
		<frameset cols="20%,*">
			<frame src="left.html" />
			<frame name="right" />
		</frameset>
	</frameset>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<font color="red" size="7">欢迎进入后台管理系统</font>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="right.html" target="right">会员管理</a><br />
		<a href="#">品牌管理</a><br />
		<a href="#">商品管理</a><br />
		<a href="#">分类管理</a><br />
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		所有用户信息
	</body>
</html>

在这里插入图片描述 11）表单标签
表单是将用户输入的信息封装提交给服务器，实现与用户的交互。表单是用form标记定义的，它类似一个容器，表单对象必须放在表单中才有效。
格式如下：

<form action="表单的处理程序" method="提交方式">
...
	input 元素
...
</form>

action,整个表单提交到服务器的地址(可以是一个页面，也可以是一个后台 java 代码)
method,表单提交的方式(get/post/delete……等 7 种)
get：默认值
　提交的数据追加在请求路径上。例如：/1.html?username=root&　　　　　　password=root.数据格式为k/v 追加的是使用?连接，之后每一对数据使用&连　接。
　因为请求路径长度有限所以get请求提交的数据有限。
post：
　提交的数据不在请求路径上追加
　提交的数据大小不显示
name属性给表单命名。表单名称可以控制表单与后台程序之间的关系
enctype属性用于指定表单信息提交的编码方式
（1）输入域标签
<input>标签用于获得用户的输入信息，type属性不同，输入类型不同。
type属性：

text：文本框，单行的输入字段，用户可在其中输入文本，默认宽度为20个字符
password：密码框，密码字段，该字段的字符以黑圆显示
radio：单选框，表示一组互斥选项按钮中的一个，当一个按钮被选中，之前选中的按钮就变为非选中的
submit：提交按钮，提交按钮会把表单数据发送到服务器，一般不写name属性，否则将“提交”两个字提交到服务器
checkbok：复选框
file：文件上传组件，提供“浏览”按下可以选择需要上传的文件
hidden：隐藏字段，数据会发送给服务器，但浏览器不显示
reset：重置按钮，将表单恢复到默认值
image：图形提交按钮，通过src给按钮设置图片
button：普通按钮，常与JavaScript结合使用

name：元素名，如果需要表单数据提交到服务器，必须提供name属性值，服务器通过属性值获取提交的数据
value属性：设置input标签的默认值
size：大小
checked属性：单选框或复选框被选中 true选中，false不选中
readonly：是否只读
disabled：是否可用
maxlegth：允许输入的最大长度

文本框与密码框

<input type=”text”  name=”提交到服务端必须指定的属性，其值可以任意，建议见文知意” size=”指定输入框的宽度” maxlenght=”指定输入内容的长度 ” readonly=”设置为只读 ” placehoder=”输入内容的提示信息 ”/> 
<input type=”password” name=”提交到服务端必须指定的属性，其值可以任意，建议见文知意” />

单选与复选框

<input type=”radio” name=”单选按钮的名称” value=”单选按钮的值” checked=”默认选中”/>
<input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女" />女<br />

<input type=”checkbox” name=”复选框的名称” value=”复选框的值” checked=”默认选中” /> 
<input type="checkbox" name="hobby" value="钓鱼" />钓鱼
<input type="checkbox" name="hobby" value="游戏" />游戏
<input type="checkbox" name="hobby" value="游泳" />游泳<br />

按钮
提交按钮：用户单击提交按钮时，可以实现表单内容的提交

<input type=”submit” value=”按钮的值” name="按钮的名称"/>

重置按钮：将表单恢复到初始状态

<input type=”reset” value=”按钮的值” name="按钮的名称"/>

普通按钮：主要是配合脚本语言JavaScript进行表单的处理

<input type=”button”value=”按钮的值” name="按钮的名称"/>

文件域
经常需要实现上传照片或文件的功能，需要用到文件域

<input type=”file” name=”文件域的名称”/>

使用文件域上传文件时，一定不要忘记设置form表单信息提交的编码方式为
enctype=“multipart/form-data”

（2）下拉列表标签
<select>下拉列表，可以进行单选或多选，需要使用子标签<option>指定列表项
name属性：发送给服务器的名称，一般用于分组
multiple属性：不写默认单选，取值为"multiple"表示多选
size属性：多选时，可见选项的数目
<option>子标签
selected:勾选当前列表项
value：发送给服务器的选项值
格式如下：

<select name=””>  
	<option value=”” selected=””>北京</option>
	<option>上海</option>
 </select>

<select name="province">
				<option>请选择</option>
				<option value="北京">北京</option>
				<option value="上海">上海</option>
				<option value="广州">广州</option>
			</select><br />

（3）文本区
<textarea>文本域。用来输入多行文本
格式如下：

<textarea name=”文本区名称” cols="列数" rows="行数"></textarea>

简单实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单标签属性介绍</title>
	</head>
	<body>
		<!--form表单中操作
			type决定类型
			action提交的目标
			method提交的方式 get/post
		-->
		<form action="#" method="get">
			隐藏字段：<input type="hidden" name="id" value="" /><br />
			<!--value设置初始值一般不用
				size设置输入框的宽度
				maxlength最大输入数
				readonly只读状态
				placeholder提示
				name一般用于分类
				required设置必须填写
			-->
			用户名：<input type="text" name="usename" value="zhangsan" size="40px" maxlength="6" readonly="readonly" placeholder="请输入用户名" required="required"/><br />
			密码：<input type="password" name="password" required="required"/><br />
			
			确认密码：<input type="password" name="repassword" required="required"/><br />
			<!--
			单选框radio	
			value 值
			checked默认选择的
			-->
			性别：<input type="radio" name="sex" value="男" checked="checked"/>男
			<input type="radio" name="sex" value="女" />女<br />
			<!--多选框checkbox-->
			爱好：<input type="checkbox" name="hobby" value="钓鱼" />钓鱼
			<input type="checkbox" name="hobby" value="游戏" />游戏
			<input type="checkbox" name="hobby" value="游泳" />游泳<br />
			头像：<input type="file"name="file" /><br />
			<!--下拉列表select
				option选择
				checked默认选择
			-->
			籍贯：<select name="province">
				<option>请选择</option>
				<option value="北京">北京</option>
				<option value="上海">上海</option>
				<option value="广州">广州</option>
			</select><br />
			<!--文本框-->
			自我介绍：<textarea name="zwjs"></textarea><br />
			<!--提交按钮
				value按钮的名字
			-->
			提交按钮：<input type="submit" value="注册" /><br />
			<!--普通按钮-->
			普通按钮：<input type="button" value="注册" /><br />
			<!--重置按钮-->
			重置按钮：<input type="reset" />
		</form>
	</body>

秋予暮

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB01_HTML

一.HTML介绍1.什么是HTMLHTML的英文全称是Hyper Text Markup Language，即超文本标记语言，它是Internet上用于编写网页的主要标记语言。超文本：比普通文本功能更加强大，页面内可以包含图片、链接等非文字内容。标记语言：使用标签的方法将需要的内容包括起来，使用一组标签对内容进行描述的一门语言，它不是编程语言。2.HTML能干什么HTML用于编写网页...
复制链接

扫一扫

专栏目录