HTML-超文本标记语言

最新推荐文章于 2022-07-20 11:30:55 发布

foreveryyyyyyy

最新推荐文章于 2022-07-20 11:30:55 发布

阅读量421

点赞数

分类专栏： html 文章标签： java ee html java web

本文链接：https://blog.csdn.net/sliencr/article/details/73235184

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

引言
后面的部分开始介绍有关javaEE方面的只是点，下面先从javaweb开始，首先介绍的是html。
HTML入门
引入
软件结构分类：
C-S结构（Client - Server 客户端-服务器端）
典型应用：
飞秋、QQ
特点：
1）必须安装特定的客户端程序
2）服务器软件升级，客户端的软件同步升级！
B-S结构（Broswer-Server 浏览器-服务器端）
典型应用：
163网站，华育官网，游戏官网。。。
特点：
1）不需要特定的客户（只需要浏览器软件）
2）服务器软件升级，浏览器客户端不需要升级！
网站
服务器端的软件都是基于bs结构的，这个软件俗称叫“网站”。网站是由网页组成。一个网页就是由html页面组成。
html是一门网页制作的语言。
html语言
html是第一门网页制作语言，最简单的一门语言。hyperText Markup Language 超文本标记语言。html语言由标记组成。学习html语言，掌握一些常用的标记即可！
下面所介绍的一些相关标签，我用代码的形式展现出来
基本标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--注释
头标签，在页面不会显示-->
<title>我是一个标题</title>
<meta name="passwaord" content="java学习"/>
</head>
<body>
我是一个大学生
</body>
</html>

在浏览器页面显示
这里写图片描述
文本标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本标签</title>
</head>
<body>
<h1 align="center">我是第1个标题</h1>
<h2 align="center">我是第2个标题</h2>
<h3 align="center">我是第3个标题</h3>
<h4 align="center">我是第4个标题</h4>
<h5 align="center">我是第5个标题</h5>
<h6 align="center">我是第6个标题</h6>
<hr color="#33CCCC" />
<!--        标签规定粗体文本(b)
            将文本以斜体显示(i)
            将文本以下划线显示(u)-->
<b>我是b标签</b>
<i>我是i标签</i>
<u>我是u标签</u>
<hr color="#FF6666" />
<p>我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落</p>
<!--段落缩进(blockquote)(主要用于解释或者强调)-->
<blockquote>我是blockquote标签，用来解释说明</blockquote><hr />
<!--上下标(sup和sub)(一般用于公式)y=x2  H2O  CaCo3-->
y=x<sup>2</sup><br/>
h<sub>2</sub>o<br/>
caco<sub>3</sub>
<hr color="#00CC66"/>
<!--原样输出-->
<pre>
            好雨知时节，当春乃发生。
            随风潜入夜，润物细无声。
            野径云俱黑，江船火独明。
            晓看红湿处，花重锦官城。
</pre><hr color="#33FF66" />
<marquee behavior="alternate" bgcolor="#00CC00" direction="left">薛之谦</marquee>
<marquee behavior="scroll" bgcolor="#999933" direction="right">薛之谦</marquee>
<marquee behavior="slide" bgcolor="#996600" direction="down">薛之谦</marquee>
<hr color="#000000" />
<!--bgsound:
            src:需要播放的音乐路径  
            loop=-1(无限循环)  
            autostart="true"自动播放
            我的电脑没有音乐文件，不多做演示
            -->
<ol type="1">
<!--有序列表-->
<li>薛之谦</li>
<li>黄晓明</li>
<li>方大同</li>
</ol>
<ul type="disc">
<!--无序列表-->
<li>薛之谦</li>
<li>黄晓明</li>
<li>方大同</li>
</ul>
<hr color="#000000"/>
<dl>
<dt>财务总监</dt>
<dd>财务员1</dd>
<dd>财务员2</dd>
<dd>财务员3</dd>
</dl>
<hr/>
<select>
<option>上海</option>
<option>广东</option>
<option>北京</option>
</select>
<hr/>
<span>我是sapn标签</span>
<div>我是div标签</div>
</body>
</html>

相关结果如下：
这里写图片描述
超链接标签：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超链接</title>
</head>
<body>
<!--超链接 ：默认的协议为file://-->
<a name="top"></a>
<a href="1-结构标签.html">超链接</a>
<a href="http://www.baidu.com">百度</a>
<a href="#content">第一章节</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="content"></a>
第一章节超链接第一章节超链接第一章节超链接第一章节超链接第一章节超链接第一章节超链接第一章节超链接第一章节超链接第一章节超链接第一章节超链接第一章节超链接
第一章节超链接第一章节超链接第一章节超链接第一章节超链接第一章节超链接第一章节超链接第一章节超链接第一章节超链接第一章节超链接第一章节超链接第一章节超链接
<a href="#top">回到顶部</a>
</body>
</html>

结果如下：
这里写图片描述
图像标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片标签</title>
</head>

<body>
<img src="../../../../../Pictures/Saved Pictures/20160429033347460.jpg" alt="薛之谦" width="300" height="300" border="0" usemap="#Map"  title="薛之谦"/>
<map name="Map" id="Map">
  <area shape="rect" coords="127,25,203,106" href="2-文本标签.html" target="_blank" />
  <area shape="circle" coords="239,205,52" href="1-结构标签.html" target="_blank" />
</map>
</body>
</html>

相关结果：
这里写图片描述
从图片中可以看到，其中另打开的两个页面是通过图片上面的热点打开的。
转义字符

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>转义标签</title>
</head>
<body>
<h1>转义标签</h1>
&lt;h1&gt;转义标签&lt;/h1&gt;<br/>
&amp;
<hr/>
java&nbsp;&nbsp;&nbsp;开发<br/>
<hr/>
王老吉<sup>&copy;</sup><br/>
王老吉<sup>&reg;</sup>
</body>
</html>

这里写图片描述
表格标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格标签</title>
</head>

<body>
<table border="1" height="300" align="center" width="400">
<caption><h1>学科成绩表</h1></caption>
<tr align="center">
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
</tr>
<tr align="center">
<td>张三</td>
<td>88</td>
<td>77</td>
<td>78</td>
</tr>
<tr align="center">
<td>李四</td>
<td>88</td>
<td>90</td>
<td>78</td>
</tr>
<tr align="center">
<td>王五</td>
<td>88</td>
<td>77</td>
<td>88</td>
</tr>
<tr align="center">
<td colspan="3">平均分</td>
<td>80</td>
</tr>
</table>
</body>
</html>

结果如下：
这里写图片描述
表单标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<!--
            <form>   就是一个表单
                <input type="text">  单行输入域
                <input type="password"/>  密码输入域
                <input type="radio"/> 单选按钮
                <input type="checkbox"/> 多选按钮
                <select/>  下拉选项
                <input type="hidden"/>   隐藏域。特点：不会显示到html页面上，但可以携带数据。 
                <input type="file"/>  文件选择器
                <textarea></textarea>  多行输入域
                <input type="submit"/>  提交按钮
                <input type="button"/> 普通按钮
                <input type="reset"/> 重置按钮 
注意：
form表单里面有两个属性需要大家注意：
action="表单需要提交到哪个路径"
method=get/post

如果是get方式提交file:///C:/Users/Administrator/Desktop/8.form表单.html?username=jack&password=jack
之前的url路径?username=jack&password=jack,如果是get方式提交的话，我们的提交参数会被绑定在url路径中

如果post方式提交：我们的所有的提交参数会被封装在请求体中
-->
<body>
<form action="5.转义字符.html" method="post">
用户名:<input type="text" value="请输入用户名" name="username"/><br />
密码:<input type="password" name="password"/><br />
性别:<input type="radio" name="gender" value="男"/>男<input type="radio" name="gender" value="女"/>女<br />
兴趣爱好:<input type="checkbox" name="hobby" value="篮球"/>篮球<input type="checkbox" name="hobby" value="足球"/>足球<input type="checkbox" name="hobby"  value="乒乓球"/>乒乓球<br />
学历:
<select name="xueli">
<option value="benke">本科</option>
<option value="shuoshi">硕士</option>
<option value="boshi">博士</option>
</select><br />
<input type="hidden" /><br />
上传一张你的靓照:<input type="file" name="file"/><br />
请简单做一个自我介绍：<textarea rows="5" cols="10"></textarea><br />
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
</form>
</body>
</html>

结果如下：
这里写图片描述
frameset 框架集

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>frameset框架集</title>
</head>
<frameset rows="20%,80%">
<frame  src="top.html"/>
<frameset cols="20%,*">
<frame src="left1.html" />
<frame src="选课.html" name="body"></frameset>
</frameset><noframes></noframes>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<h1 align="center">选课系统</h1>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<a href="选课.html" target="body">1.大一选课</a> <br />
<a href="选课.html" target="body">2.大二选课</a> <br />
<a href="选课.html" target="body">3.大三选课</a> <br />
<a href="选课.html" target="body">4.大四选课</a> <br />
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
欢迎上课
</body>
</html>