HTML

最新推荐文章于 2024-05-28 22:57:50 发布

Friendy89

最新推荐文章于 2024-05-28 22:57:50 发布

阅读量853

点赞数 1

分类专栏： Java基础

本文链接：https://blog.csdn.net/Friendy89/article/details/11473865

版权

Java基础专栏收录该内容

20 篇文章 0 订阅

订阅专栏

-------android培训、java培训、期待与您交流！ ----------

HTML:

一，概述

1， Html就是超文本标记语言的简写，是最基础的网页语言。

2， Html是通过标签来定义的语言，代码都是由标签所组成。

3， Html代码不用区分大小写。它是一种非严谨的语言

4， Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。

5，头部分是给Html页面增加一些辅助或者属性信息，它里面的内容会最先加载。

体部分是真正存放页面数据的地方。

标签的使用：

1，多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。

2，想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。

3，属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范。

4，格式：<标签名属性名='属性值'> 数据内容 </标签名>

<标签名属性名='属性值' />

5, 操作思想：

为了操作数据，都需要对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。

标签就相当于一个容器。对容器中的数据进行操作，就是在再不断的改变容器的属性值。

二，常用标签的使用：

1，字体：

1）字体标签：<font>

例如：<font size=5 color=red>文字</font>

注：简单颜色可是直接写对应的英文，复杂颜色用16进制表示，表现形式#FF0000两个数为一组，按红，绿，蓝排列，如：#00FF00表示绿色。建议用工具Adobe Dreamweaver选取。

2）标题标签：<h1><h2>…..<h6>

因为标题是文本中常用的内容，为了方便操作而定义的。其实就是某个字号和粗体的组合。

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
    </head>
    
    <body>
        <font color="#0000FF" size="+4">这是演示文字的</font>
        <hr />
        <h1>这是一级标题</h1>
    </body>
</html>

2，列表标签<dl>：

<dt>：上层项目
<dd>：下层项目
例：
<dl>
	<dt>游戏名称</dt>
		<dd>星际争霸</dd>
		<dd>红色警戒</dd>
	<dt>部门名称</dt>
		<dd>技术部</dd>
		<dd>培训部</dd>
</dl>

列表中项目符号对应的标签

<ol>：数字标签（a A 1 i I）

<ul>：符号标签（○●■）

<li>：具体项目内容标签。此标签只在<ol> <ul>中有效。

通过type属性更改项目符号，如果想做出效果更好的列表，如：黑色圆点用图片表示，就用到CSS。

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>new web project</title>
	</head>
	<body>
		<h1>new web project page</h1>
		<!--HTML的注释：演示列表标签  
		
		列表标签：dl
		
		上层项目：dt
		下层项目：dd:封装的内容是会被缩进的，有自动缩进的效果
		-->
		<dl>
			<dt>上层项目内容</dt>
			<dd>下层项目内容</dd>
			<dd>下层项目内容</dd>
			<dd>下层项目内容</dd>
		</dl>
	</body>
	<hr/>
	<!-- 有序和无序的项目列表
	
	有序：<ol>
	无序：<ul>
	无论有序还是无序，条目的封装用的都是<li>
	它们都有缩进效果
	 -->
	 <ul type="square">
	 	<li>无序项目列表</li>
	 	<li>无序项目列表</li>
	 	<li>无序项目列表</li>
	 	<li>无序项目列表</li>
	 </ul>
	 <ol type="a">
	 	<li>有序项目列表</li>
	 	<li>有序项目列表</li>
	 	<li>有序项目列表</li>
	 	<li>有序项目列表</li>
	 </ol>
</html>

运行结果：

3，图像标签：

1）图像标签：<img>

例：<img src=”1.jpg” align=”middle”height="600" width="600" border=”3” alt=”图片说明文字”/>

align:属性定义图片的排列方式，border用来设置图像的边框。src 连接一个文件

2）图像地图：<map>

应用：当要在图像中选取某一部分作为连接的时候。如：中国地图每个省所对应的区域。

map标签要和img标签联合使用。Href是超连接

<map >

</map>

4，表格

1）表格标签

组成：标题标签：<caption>，给表格提供标题。

表头标签：<th>，一般对表格的第一行或者第一列进行格式化，就是粗体显示。并不常用。

行标签：<tr>

单元格标签：<td>，加载行标签的里面。可以简单理解为，先有行，在行中在加入单元格。

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
		<table border="1" bordercolor="#0000FF" cellpadding="6" cellspacing="0" width="350">
			<caption>表格标题</caption>
			<tr>
				<th>姓名 </th>
				<th>年龄 </th>
			</tr>
			<tr>
				<td>张三  </td>
				<td>25</td>
			</tr>
		</table>	
		<hr />
			<table border="1" bordercolor="#0000FF" cellpadding="6" cellspacing="0" width="350">
			<tr>
				<th colspan="2">个人信息</th>
			</tr>
			<tr>
				<td>张三  </td>
				<td>25</td>
			</tr>
		</table>
		<hr />
			<table border="1" bordercolor="#0000FF" cellpadding="6" cellspacing="0" width="350">
			<tbody><!-- 表格的下一级标签是默认的tbody，不定义也存在 -->
			<tr>
				<th rowspan="2">个人信息</th>
				<td>张三  </td>
			</tr>
			<tr>
				<td>25</td>
			</tr>
			</tbody>
		</table>
	</body>
</html>

运行效果：

5，超链接标签

超链接的作用：连接资源
当有了href属性才有了点击效果，href属性值不同，解析的方式也不一样。
如果在href值中没有指定过任何协议，解析时，是按照默认的协议来解析该值的
默认的协议是file协议

两种用法：

1）超链接<a href=””>

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
		<!-- 
		
		target="_blank":新窗口打开
		"javascript:void(0)" ：点击超链接没有任何效果
		
		 -->
		 <a href="http://www.sina.com.cn" target="_blank">新浪网站</a>
		 <hr />
		 <a href="imgs/2.jpg">美女图片</a>
		 <hr/>
		 <a href="mailto:friendy89@sina.cn">联系方式</a>
		 <a href="javascript:void(0)" οnclick="alert('无链接')" >这是一个超链接</a>
	</body>
</html>

运行效果：

超链接中一些属性：

a:link,a:visited{

text-decoration:none;//代表去掉超链接的下划线

}

a:hover{

color:#ff8800;//代表鼠标放在超链接上，超链接会变颜色

}

取消超链接的默认点击效果可以使用给href设置：javascript：void(0)来完成，如， <a href="javascript:void(0)" οnclick="changeSize('max')">大</a>

2)定位标记<a name=””>

一般在本页面中使用，当网页内容过长，定位标记会比拖动滚动条方便快捷。它可以直接回到标记位置

注：定位标记要和超链接结合使用才有效。

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
	<!-- 
	定位标记
	专业术语：锚
	 -->
		<a name="top">顶部位置</a>
		<hr/>
		<img src="imgs/0.jpg" height="350" width="450" />
		<hr/>
		<a name="certer">中间位置</a>
		<hr/>
		<img src="imgs/1.jpg" height="350" width="450" />
		<a href="#top">回到顶部</a>
		<a href="#certer">回到中间</a>
	</body>
</html>

6，表单（重点）

1）表单标签：

表单标签是最常用的标签，用于与服务器端的交互。

<input>：输入标签：接收用户输入信息。

其中的type属性指定输入标签的类型。总共有一下几种类型：

① 文本框 text。输入的文本信息直接显示在框中。

② 密码框 password。输入的文本以原点或者星号的形式显示。

③ 单选框 radio 如：性别选择。

④ 复选框 checkbox 如：兴趣选择。

⑤ 隐藏字段 hidden 在页面上不显示，但在提交的时候随其他内容一起提交。

⑥ 提交按钮 submit 用于提交表单中的内容。

图像 image 它可以替代submit按钮。

⑦ 重置按钮 reset 将表单中填写的内容设置为初始值。

⑧ 按钮 button 可以为其自定义事件。

⑨ 文件上传 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。

<select>：选择标签提供用户选择内容。如：用户所在的省市。size 属性为显示项目个数。

选择标签 <select>:要将某个属性设置为默认属性，要加上属性 select ，selected="selected"

<option>：子项标签属性 selected 没有属性值，加在子项上，其中一个子项上，子项就变成默认被选项。

<textarea>：多行文本框。如：个人信息描述。

<label>：用于给各元素定义快捷键。

for 属性：指定快捷键作用的表单元素。必须与要作用的表单元素的id值相同。

accesskey 属性：指定快捷键，此快捷键需要和alt键组合使用。

例：

注意：如果向服务端提交表单，表单组件中必须要有 name 和value属性用于给服务端获取数据方便,

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
	<!-- 
	单选框 radio:为了只能选择一个内容，要将单选框中的内容放在同一个分组中。如性别都放在sex中
				如果要默认选择某一个内容，要加上属性checked，checked="checked"
	选择标签 <select>:要将某个属性设置为默认属性，要加上属性 select ，selected="selected"
				
	注意：如果向服务端提交表单，表单组件中必须要有 name 和value属性
		用于给服务端获取数据方便
	 -->
	
		<form>
			输入名称：<input type="text" name="user" value=""/><br/>
			输入密码：<input type="password" name="psw" value=""/><br/>
			选择性别：<input type="radio" name="sex" value="nan"/>男  
			<input type="radio" name="sex" value="nv" checked="checked"/>女  <br/>  <!-- 默认性别选 女 -->
			兴趣爱好：<input type="checkbox" name="player" value="sing"/> 唱歌
					<input type="checkbox" name="player" value="tourism"/> 旅游
					<input type="checkbox" name="player" value="ball"/> 打球
					<input type="checkbox" name="player" value="fitness"/> 健身 <br/>
			选择文件：<input type="file" name="file" /> <br/>
			<!-- 隐藏组件：数据不需要客户端知道，但可以将其提交给服务端 -->
			隐藏组件：<input type="hidden" name="myke" value="myvalue" /> <br/>
			一个按钮：<input type="button" value="有个按钮" οnclick="alert('确定')" /> <br/>
			
			<select name="country">
						<option value="none">--选择国家--</option>
						<option value="USA">美国</option>
						<option value="JP">日本</option>
						<option value="EN">英国</option>
						<option value="CN" selected="selected">中国</option>
					</select>
					<br/>
			自我介绍：<br/>
			<textarea name="text" rows="10" cols="40" ></textarea>
			<br/>
			<input type="reset" value="重新提交" /><input type="submit" value="提交"/>
			
		</form>
		<hr/>
		
	</body>
</html>

运行效果：

2）表单提交

表单提交：

1．先定义form表单中的action属性值，指定表单数据提交的目的地(服务端)。

2．明确提交方式，通过指定method属性值。如果不定义，那么method的值默认是get。

get和post这两种最常用的提交方式的区别：

1．get提交将数据显示在地址栏，对于敏感信息不安全。

post提交不显示在地址栏，对于敏感信息安全

2．地址栏中存放的数据是有限，所以get方式对提交的数据体积有限制。

post可以提交大体积数据。

3．对提交数据的封装方式不同：

get：将提交数据封装到了http消息头的第一行，请求行中。

post：将提交的数据封装到消息头后，在请求数据体中。

注意：通常表单使用post提交，因为编码方便。

对于Tomcat服务器端，默认的解码方式是ISO8859-1,那么中文会出现乱码。

通过post提交，可以使用request.setCharacterEncoding(“GBK”);来解决乱码问题，该方法只对数据体有效。

如果是get提交，request.setCharacterEncoding(“GBK”)该方法对乱码解决不了，必须先进行ISO8859-1编码，然后在进行GBK的解码。这种方式虽然对post提交的乱码也通用，但是麻烦。所以建立表单提交使用post。

-------android培训、java培训、期待与您交流！ ----------

Friendy89

关注

1
点赞
踩
1

收藏

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

-------android培训、java培训、期待与您交流！ ---------- HTML:一，概述 1， Html就是超文本标记语言的简写，是最基础的网页语言。 2， Html是通过标签来定义的语言，代码都是由标签所组成。 3， Html代码不用区分大小写。它是一种非严谨的语言 4， Html代码由开始/html>结束。里面由头部分和体部分两部分
复制链接

扫一扫