Java学习-13 HTML与HTML5常用标签

最新推荐文章于 2021-03-06 16:41:32 发布

deemo_hui

最新推荐文章于 2021-03-06 16:41:32 发布

阅读量379

点赞数

分类专栏：学习笔记文章标签： html5

本文链接：https://blog.csdn.net/deemo_hui/article/details/108181034

版权

学习笔记专栏收录该内容

22 篇文章 1 订阅

订阅专栏

Java学习-13 HTML与HTML5常用标签

1、HTML简介

1.1 HTML是什么？

HTML 是 HyperText Mark-up Language 的⾸字母简写，意思是超文本标记语言
HTML不是一种编程语言，而是一种标记语⾔
超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成
⽤这种语言制作的文件保存的是一个文本文件，文件的扩展名为 .html 或者 .htm
html文档也叫 Web页面，其实就是一个网页，html文件用编辑器打开显示的是文本，可以⽤文本的方式编辑它
如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页

1.2 HTML的版本发展历史

在这里插入图片描述

1.3 HTML⽂文档类型的设定

HTML在不同版本下文档类型的设定，即 <!Doctype > 对应的属性值。
(1) HTML , 对应早期的 HTML4.0.1, 其基本结构如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
  </head>
  
  <body>
  </body>
</html>

(2) XHTML ，其基本结构如下：

<!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" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
  </head>
  
  <body>
  </body>
</html>

(3) HTML5 ，其基本格式如下:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
    			content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  
  <body>
  </body>
</html>

2. HTML基础语法

2.1 HTML基本结构

HTML文件的扩展名为 .html 或者 .htm
HTML文本的结构包括“头”部分（head）、和“主体”部分（body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容
HTML是由：标签和内容构成, 每个HTML页面都有两部分构成(head头和body体)，其最外层是 … 标签包裹
HTML标签（标记）的语法是由 < 和 > 括起来。
HTML标签有两种：双标签： <标签名>…</标签名> 和单标签： <标签名 />
HTML标签中还可以添加属性： <标签名属性名1=“值1” 属性名2=“值2” 属性名n=“值n”>…</标签名>
HTML标签规范：标签名小写、属性使用双引号、标签要闭合。规范不遵守浏览器不会报错，会尽量解析，大不了不显示效果 ^_ 。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <!-- 此处可以写各种页头属性设置、CSS样式和JavaScript脚本等... -->
  </head>
  <body>
  	网页显示内容
  </body>
</html>

2.2 HTML注释

html文档代码中可以插入注释，注释是对代码的说明和解释

<!-- 这就是唯一的一种HTML注释了 -->

2.3 HTML中HEAD头部设置

head标签作用于网页的头部，它的内容不会在正文中显示出来，主要完成对当前页面的各种设置
在head中常包含如下子标签：

标签	描述	示例
`<title>`	定义了文档的标题	网页标题: `<title>`本网页标题`</title>`
`<base>`	定义了页面链接标签的默认链接地址	`<base href="http://www.****.com/" target="_blank">`
`<link>`	定义了一个文档和外部资源之间的关系	导入CSS文件`<link type="text/css" rel="stylesheet" href="**.css"/>`
`<meta>`	定义了HTML文档中的元数据	设置网页编码、关键字、描述`<meta charset="utf-8"/>` `<meta name="Keywords" content="关键字"/>` `<meta name="Description" content="简介、描述" />`
`<script>`	定义了客户端的脚本文件	`<script >JavaScript脚本程序</script>`
`<style>`	定义了HTML文档的样式文件	`<style type="text/css">嵌入css样式代码</style>`

具体示例例如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <meta name="Keywords" content="关键字" />
    <meta name="Description" content="简介、描述" />
    <link type="text/css" rel="stylesheet" href="**.css"/>
    <style type="text/css">
    嵌入css样式代码
    </style>
    <script >
    JavaScript脚本程序
    </script>
  </head>
  
  <body>
  	<h3>网页显示内容</h3>
  </body>
</html>

3. HTML文本标签

常用文本标签如下：

<hn>...</hn> 其中n为1–6的值。标题标签（加粗、独立行）
<i>...</i> 斜体
<em>...</em> 强调斜体
<b>...</b> 加粗
<strong>...</strong> 强调加粗
<cite></cite> 作品的标题（引用）
<sub>...</sub> 下标 <sup>...</sup> 上标
<del>...</del> 删除线

示例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>文本标题示例</title>
  </head>
  
  <body>
    <h3>HTML标签实例--文本标签</h3>
    
    <h1>h1标题</h1>
    <h2>h2标题</h2>
    <h3>h3标题</h3>
    <h4>h4标题</h4>
    <h5>h5标题</h5>
    <h6>h6标题</h6>
    
    <i>i: 斜体标签</i> <br/>
    <em>em: 强调斜体标签</em> <br/>
    <b>b: 加粗标签</b><br/><br/>
    
    <strong>strong: 强调加粗标签</strong><br/>
    <del>del: 删除线</del><br/>
    <u>u: 下划线</u> <br/><br/>
    
    水分子：H<sub>2</sub>O <br/>
    4<sup>2</sup>=16
  </body>
</html>

运行效果如下：
在这里插入图片描述

HTML 中有用的字符实体
注释：实体名称对大小写敏感！

在这里插入图片描述

4. HTML格式化标签

常见格式化标签如下：

<br/> 换行
<p>...</p> 换段
<hr /> 水平分割线
列表：
- <ul>...</ul> 无序列表
- <ol>...</ol> 有序列表其中 type类型值：A ，a， I， i， 1 。start属性表示起始值
- <li>...</li> 列表项
  - <dl>...</dl> 自定义列表
  - <dt>...</dt> 自定义列表头
  - <dd>...</dd> 自定义列表内容
<div>...</div> 常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化
<span>...</span> 常用于包含的文本，您可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。

示例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>HTML标签实例--格式化标签</title>
  </head>
  
  <body>
    <h3>HTML介绍</h3>
    <p>超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的⼀个应用。HTML 不
    是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。</p>
    <p>“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。<br/>
    超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提
    供关于网页的信息，“主体”部分提供网页的具体内容。</p>
    
    <hr/>
    <!-- 列表标签 -->
    你的爱好：
    <ul>
      <li>看书</li>
      <li>上网</li>
      <li>爬山</li>
      <li>唱歌</li>
    </ul>
    
    <ol type="a">
      <li>看书</li>
      <li>上网</li>
      <li>爬山</li>
      <li>唱歌</li>
    </ol>
    
    <dl>
      <dt>问：HTML?</dt>
      <dd>答：超⽂本标记语言</dd>
      <dt>问：HTML?</dt>
      <dd>答：超文本标记语言</dd>
      <dt>问：HTML?</dt>
      <dd>答：超文本标记语言</dd>
    </dl>
    
    <div>aaa</div>
    <div>bbb</div>
    <span>aaaa</span><span>bbbb</span>
    
  </body>
</html>

运行效果如下：
在这里插入图片描述

5. HTML图像标签

在HTML网页中插入一张图片，使用img标签，他是一个单标签：
其中img标签中常用属性如下：
- src：图片名及url地址
- alt: 图片加载失败时的提示信息
- title：文字提示属性
- width：图片宽度
- height：图片高度
- border：边框线粗细

理解绝对路径和相对路径:
绝对路径：

绝对路径就是你的主页上的文件或目录在硬盘上真正的路径，(URL和物理路径)
例如：
- C:\xyz\test.txt 代表了test.txt文件的绝对路径。
- http://www.sun.com/index.htm也代表了一个URL绝对路径。

相对路径：

相对与某个基准目录的路径。包含Web的相对路径（HTML中的相对目录），
例如：
在Web开发中，"/"代表Web应用的根目录。
和物理路径的相对表示，
- 例如："./" 代表当前目录,
- "…/"代表上级目录。这种类似的表示，也是属于相对路径。

示例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <h3>HTML标签实例--图片标签</h3>
    <img src="./images/a.jpg" title="图片" width="300" />
    <img src="./images/add.jpg" alt="二⽉兰花图片" width="300" />
    <img src="./images/a.jpg" width="280" border="2" />
  </body>
</html>

6. HTML超链接标签

超级链接标签a：

格式： <a href="链接目标url地址">显示文字</a>
a标签的属性：
- href: 必须，指的是链接跳转地址
- target: 表示链接的打开方式：
  - _blank 新窗口
  - _parent 父窗口
  - _self 本窗口（默认）
  - _top 顶级窗口
  - framename 窗口名
  - title：文字提示属性（详情）
锚点链接：
- 定义一个锚点： <a id="a1"></a> 以前使用的是 <a name="a1"></a>
- 使用锚点： <a href="#a1">跳到a1处</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>HTML实例-超级链接a标签</h1>

    <!-- 锚点链接 -->
    <a href="#mv1">美女1</a><br/><br/>
    <a href="#mv2">美女2</a><br/><br/><br/><br/>

    <!-- 普通超级链接 -->
    <a href="https://www.baidu.com" title="百度链接">百度1</a> <br/>
    <a href="https://www.baidu.com" target="_blank">百度2</a>  <br/><br/>
    <a href="./c.html" target="_blank">图片标签实例</a>  <br/><br/>

    
    <a id="mv1"></a>
    <h4>美女图片1</h4>
    <img src="./images/11.jpg" width="100%"/><br/><br/>

    <a id="mv2"></a>
    <h4>美女图片2</h4>
    <img src="./images/22.jpg" width="100%"/><br/><br/>

</body>
</html>

7. HTML表格标签

表格中的标签：
在这里插入图片描述

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>HTML实例--表格标签</h1>

    <table border="1" width="500" cellspacing="0" cellpadding="4">
        <caption><h2>学生信息表</h2></caption>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>班级</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1001</td>
                <td>张三</td>
                <td>20</td>
                <td rowspan="2" align="center" valign="top">t201班</td>
            </tr>
            <tr>
                <td>1002</td>
                <td>李四</td>
                <td>22</td>
                <!--<td>t201班</td>-->
            </tr>
            <tr>
                <td>1003</td>
                <td>王五</td>
                <td>25</td>
                <td>t200班</td>
            </tr>
            <tr>
                <td>1004</td>
                <td>赵六</td>
                <td colspan="2" align="center">21</td>
                <!--<td>t202班</td>-->
            </tr>
        </tbody>
    </table>
</body>
</html>

8. HTML表单标签

(1) <form>...</form> 表单标签
form标签常用属性：
*action属性:提交的目标地址(URL)
*method属性:提交方式:get(默认)和post
get方式是URL地址栏可见,长度受限制(IE2k ⽕火狐8k),相对不安全.
post方式是URL地址不可见,长度不受限制,相对安全.
enctype:提交类型
target: 在何处打开目标 URL。
name:属性为表单起个名字.在HTML5中使用 id 代替。
(2) <input> 表单项标签input定义输入字段，用户可在其中输入数据。在 HTML 5 中，type 属性有很多新的值。

具体在下面有详解：
如：<input type="text" name="username">
*type属性:表示表单项的类型:值如下:
text:单行文本框
password:密码输入框
checkbox:多选框 注意要提供value值
radio:单选框 注意要提供value值
file:文件上传选择框
button:普通按钮
submit:提交按钮
image:图片提交按钮
reset:重置按钮, 还原到开始(第一次打开时)的效果
hidden:主表单隐藏域,要是和表单一块提交的信息,但是不需要用户修改
email 用于应该包含 e-mail 地址的输入域
url 用于应该包含 URL 地址的输入域
number 用于应该包含数值的输入域。
max 规定允许的最大值
min 规定允许的最小值
step 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value 规定默认值
range 用于应该包含一定范围内数字值的输入域，显示为滑动条
max 规定允许的最大值
min 规定允许的最小值
step 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value 规定默认值
日期选择器 Date pickers
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）
search 用于搜索域，比如站点搜索或 Google 搜索
color 颜色选择
*name属性: 表单项名,用于存储内容值的
*value属性: 输入的值(默认指定值)
*placeholder: 预期值的简短的提示信息
size属性: 输入框的宽度值
maxlength属性: 输入框的输入内容的最大长度
readonly属性: 对输入框只读属性
*disabled属性: 禁用属性
*checked属性: 对选择框指定默认选项
accesskey属性: 指定快捷键(不常用) (IE:alt+键 火狐:alt+shift+键)
tabindex属性: 通过数字指定tab键的切换顺序(不常用)
src和alt是为图片按钮设置的
注意：reset重置按钮是将表单数据恢复到第一次打开时的状态，并不是清空
image图片按钮，默认具有提交表单功能。

(3) <select>...</select> 标签创建下拉列表。

name属性:定义名称,用于存储下拉值的
size：定义菜单中可见项目的数目，html5不支持
disabled 当该属性为 true 时，会禁用该菜单。
multiple 多选
<option>... </option> 下拉选择项标签,用于嵌入到<select>标签中使用的;
*value属性:下拉项的值
*selected属性:默认下拉指定项.

(4) <textarea>...</textarea> 多行的文本输入区域

name :定义名称,用于存储文本区域中的值。
cols ：规定文本区内可见的列数。
rows ：规定文本区内可见的行数。
disabled： 是否禁用
readonly： 只读
...
默认值是在两个标签之间

(5) <button>...</button> 标签定义按钮。
您可以在 button 元素中放置内容，比如文档或图像。这是该元素与由 input 元素创建的按钮的不同之处。

(6) <fieldset> --fieldset 元素可将表单内的相关元素分组。
disabled属性：定义 fieldset 是否可见。
form属性：定义该 fieldset 所属的一个或多个表单。

(7) <legend></legend> – 标签为 <fieldset> 、 <figure> 以及 <details> 元素定义标题。

<form>
  <fieldset>
  <legend>个⼈人信息：</legend>
  姓名：<input type="text" /><br/>
  年年龄：<input type="text" /><br/>
  </fieldset>
  <br/><br/>
  
  <fieldset>
  <legend>健康信息：</legend>
  身⾼高：<input type="text" /><br/>
  体重：<input type="text" /><br/>
  </fieldset>
</form>

(8) <optgroup> html5标签-- <optgroup> 标签定义选项组。此元素允许您组合选项

城市：
<select name="city">
  <optgroup label="河北北省">
    <option>⽯石家庄</option>
    <option>保定</option>
    <option>廊坊</option>
  </optgroup>
  <optgroup label="河南省">
    <option>郑州</option>
    <option>安阳</option>
    <option>周⼝口</option>
  </optgroup>
</select>

(9) <datalist> html5标签-- <datalist> 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。

<form action="demo_form.php" method="get">
  搜索：
  <input type="search" list="namelist" name="keywords"/>
    <datalist id="namelist">
      <option value="zhangsan">
      <option value="zhangsanfeng">
      <option value="zhangwuji">
      <option value="lisi">
      <option value="lixiaolong">
    </datalist>
</form>

9. HTML框架标签

属性：src：规定在 iframe 中显示的文档的 URL
name：规定 iframe 的名称
height：规定 iframe 的高度。
width：定义 iframe 的宽度。
frameborder：规定是否显示框架周围的边框。
例如：<iframe src="1.html" name="myframe" width="700" height="500"></iframe>

10. HTML5标签

10.1 新增布局标签：

在这里插入图片描述

10.2 新增的input type属性值：

这些新增的类型，更加细化的限定了输入内容，如果输入格式不对，在提交的时候会自动给出相应提示
更多新增type 参考 w3school网站
在这里插入图片描述

10.3 新增的input 属性

在这里插入图片描述

10.4 多媒体标签

标签	描述
`<embed>`	定义内嵌对象。HTML4 中不赞成，HTML5 中允许。
`<object>`	定义内嵌对象。
`<param>`	定义对象的参数。
`<audio>New`	定义了声音内容
`<video>New`	定义一个视频或者影片
`<source>New`	定义了media元素的多媒体资源(`<video>` 和 `<audio>`)
`<track>New`	规定media元素的字幕文件或其他包含文本的文件 (`<video>` 和`<audio>`)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>HTML多媒体标签</h1>

    <audio src="./images/beidahuang.mp3" controls="controls">
        你的浏览器不支持audio音频标签
    </audio>
    <br/>
    <audio controls>
        <source src="./images/beidahuang.mp3" type="audio/mpeg" />
        你的浏览器不支持audio音频标签
    </audio>
    <br/><br/>
    <video src="./images/fun.mp4" controls="controls" width="400" height="400">
        你的浏览器不支持video视频标签
    </video>
    <br/><br/>
    <video controls="controls" width="400" poster="./images/11.jpg" height="400">
        <source src="./images/fun.mp4" type="video/mp4" />
        你的浏览器不支持video视频标签
    </video>

    <br/><br/>

    <embed src="./images/haowan.swf" width="300" height="300" />

</body>
</html>

11.小试牛刀

学习了HTML之后，当然要上手操作两把，做一个简单的视频播放网站，所有视频以图片列表的形式显示，当用户点击图片，可以在页面下方播放对应的视频。
简单代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影播放器</title>
</head>
<body>
    
    <a href="./videos/17张牌你能秒我？.mp4" target="播放器">
        <img src="./images/1.jpg" alt="17张牌你能秒我？" width="19%" height="200">
    </a>

    <a href="./videos/最 强 法 海.mp4" target="播放器">
        <img src="./images/2.jpg" alt="最强法海" width="19%" height="200">
    </a>

    <a href="./videos/逮虾户.mp4" target="播放器">
        <img src="./images/3.jpg" alt="逮虾户" width="19%" height="200">
    </a>

    <a href="./videos/火影.mp4" target="播放器">
        <img src="./images/4.jpg" alt="火影" width="19%" height="200">
    </a>

    <a href="./videos/敢 杀 我 的 马？.mp4" target="播放器">
        <img src="./images/5.jpg" alt="敢杀我的马？" width="19%" height="200">
    </a>
    <br/>

    <br/>
    <br/>
    <iframe src="./videos/17张牌你能秒我？.mp4" name = "播放器" frameborder="2" width="100%" height="500"></iframe>

</body>
</html>

嗯，非常丑陋，等我学完css就来给你化化妆。

deemo_hui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
7
评论
Java学习-13 HTML与HTML5常用标签

Java学习-13 HTML与HTML5常用标签1、HTML简介1.1 HTML是什么？HTML 是 HyperText Mark-up Language 的⾸字母简写，意思是超文本标记语言HTML不是一种编程语言，而是一种标记语⾔超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成⽤这种语言制作的文件保存的是一个文本文件，文件的扩展名为 .html 或者 .htmhtml文档也叫 Web页面，其实就是一个网页，html文件用编辑器打开显示的是文本
复制链接

扫一扫

专栏目录