【java学习之路】（javaWeb篇）001.HTML

最新推荐文章于 2024-09-29 23:41:25 发布

染沁半世苍凉

最新推荐文章于 2024-09-29 23:41:25 发布

阅读量189

点赞数

分类专栏： java学习之路文章标签： html java 前端

本文链接：https://blog.csdn.net/qq_24254611/article/details/122849038

版权

java学习之路专栏收录该内容

60 篇文章 6 订阅

订阅专栏

HTML

HTML简介

概述:HTML（HeyperText MarkUp Language）全称称之为超文本标记语言，它是世界上最简单的语言，

在开发的时候我们只需要进行页面布局（利用标签:element）

注意：超文本标记语言（HTML）又称之为web(开发)，它诞生(1993~2019)这门语言大大小小经历过变化有五次，最近一次2014称之为HTML5（超文本标记语言第五次重大变化）

体验HTML编程

体验心得：HTML标记语言开发的程序的时候，利用就是标签（element）进行布局页面。

标签组成如下：

<标签名字> 文本内容 </标签名字>

标签学习（element）

概述：HTML（超文本标记语言）,它的页面（静态页面）是由标签组成，最重要的一部分就是块元素；

很明显一个特征：独占一行

常用块元素

静态页面骨架

<!DOCTYPE html> //这是超文本标记语言第五次重大变化文档声明方式
<html lang="en"> 
<head>
    <meta charset="UTF-8" />  //chartset:设置字符集  UTF-8（简称万国编码）
    <title>Document</title>
</head>
<body>

</body>
</html>

HTML标签是整个网页根元素（进行页面布局的其他元素：都是嵌套在HTML标签里面作为子元素）
HTML标签右侧有一个lang属性（前端当中管这种写法叫做属性），属性值en(英文简写：代表的是英文下开发)

常用标签—块元素

概述：在web开发中块元素非常常用：块(block)元素是独占一行,在页面中是由上到下进行排列。

常用块元素有很多：h1~h6(标题)、div、p、ul、li…等等

注意：在书写学习这些标签（块元素），一定要注意在body标签内部进行书写.

标签小技巧：打出标签名（ctr + E）标签自动补齐；

运行方式：鼠标右键+赋值路径（在浏览器中运行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>我是人生当中第一12ABC个静态页面</title>
</head>
<body>
    <p>我也是一个块元素--独占一行(一个段落)</p>
    <p>我也是一个块元素--独占一行(一个段落)</p>
    <p>我也是一个块元素--独占一行(一个段落)</p>
    <p>我也是一个块元素--独占一行(一个段落)</p>
    <p>我也是一个块元素--独占一行(一个段落)</p>
    <h1>我代表的是网页中一级标题</h1>
    <h2>我代表的是网页中二级标题</h2>
    <h3>我代表的是网页中三级标题</h3>
    <h4>我代表的是网页中四级标题</h4>
    <h5>我代表的是网页中五级标题</h5>
    <h6>我代表的是网页中六级级标题</h6>
<div>我也是一个块元素-----经常会用到（布局用到）</div>
 <div>
      <h3>我是三级标题---作为div子元素</h3>
 </div>
</body>
</html>

h1_{h6：一级标题}六级标题（字体越来越小样子）
标签可以复用（多次使用）、标签可以嵌套使用

常用块元素—列表系列

概述：列表（也是块元素）有两个：无序列表ul 、有序列表ol，这两个块元素用来显示列表，而且li标签经常作为他们子元素一起使用；

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">  <!--设置字符集 uft-8:支持各类语言-->
    <title>第一个静态页面</title>
</head>
<body>
    <!--无序列表-->
    <ul>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>打豆豆</li>

    </ul>

    <ol>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>打豆豆</li>
    </ol>
</body>
</html>

行内元素

注意：在web领域中标签（双闭合标签）、单闭合标签

概述:前端开发当中行内元素（内联元素）：常见的行内元素有如下几个：span、img、a

行内元素特征：不是独占一行，从左到右进行排列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.sina.com">新浪</a>
    <a href="http://www.taobao.com">淘宝</a>
    <span>我是行内元素</span>
    <img src="xiaomao.jpg" alt="默认文字">
</body>
</html>

a标签href属性是用来设置超链接的地址属性
img标签的src属性是用来设置显示图片路径的（图片名称）图片没有情况下默认显示文字

address用来生成地图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
     <!-- address:块元素独占一行 -->
     <address>
           <iframe width="204" height="613" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://j.map.baidu.com/s/5BcIFb"></iframe>
     </address>
</body>
</html>

表单元素

概述：前端中比较重要标签：标元素（表单元素经常用来收集用户输入信息），将用户输入信息提交给服务器。

表单元素即为input标签（单闭合标签），这个标签经常集合form标签一起使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <form>
         <!-- 表单元素即为input标签 -->
         <p>
             用户名:  <input type="text" />
         </p>
         <p>
             密&nbsp;&nbsp;码: <input type="password" />
         </p>
         <p>
             日历:<input type="date" />
         </p>
         <p>
             你喜欢的颜色: <input type="color" />
         </p>
         <p>
             你的身高: <input type="range" >
         </p>
         <p>
             你喜欢的食物
             <input type="checkbox" />烤鸭
             <input type="checkbox" />烤鸭
             <input type="checkbox" />烤鸭
             <input type="checkbox" />烤鸭
             <input type="checkbox" />烤鸭
         </p>
         <p>
             你喜欢那个国家？
             <input type="radio" name="A"/>中国
             <input type="radio" name="A"/>韩国
             <input type="radio" name="A"/>日本
             <input type="radio" name="A"/>美国
         </p>
         <p>
             <input type="submit" />
         </p>
    </form>
</body>
</html>

音频标签

概述：如果你想在网页中显示音频我们利用audio标签显示音频。Web领域中音频audio标签，只能播放下面三种音频格式。（行内元素）

mp3、ogg、wav格式

MP3:音频格式

MP3是一种音频压缩技术，其全称是动态影像专家压缩标准音频层面3（Moving Picture Experts Group Audio Layer III），简称为MP3。它被设计用来大幅度地降低音频数据量。利用 MPEG Audio Layer 3 的技术，将音乐以1:10 甚至 1:12 的压缩率，压缩成容量较小的文件，而对于大多数用户来说重放的音质与最初的不压缩音频相比没有明显的下降。它是在1991年由位于德国埃尔朗根的研究组织Fraunhofer-Gesellschaft的一组工程师发明和标准化的。用MP3形式存储的音乐就叫作MP3音乐，能播放MP3音乐的机器就叫作MP3播放器。

Ogg:音频格式

Ogg全称是OGGVobis(oggVorbis)是一种音频压缩格式，类似于MP3等的音乐格式。Ogg是完全免费、开放和没有专利限制的。OggVorbis文件的扩展名是".ogg"。Ogg文件格式可以不断地进行大小和音质的改良，而不影响旧有的编码器或播放器。

wav:音频格式

WAV是最常见的声音文件格式之一，是微软公司专门为Windows开发的一种标准数字音频文件，该文件能记录各种单声道或立体声的声音信息，并能保证声音不失真。但WAV文件有一个致命的缺点，就是它所占用的磁盘空间太大（每分钟的音乐大约需要12兆磁盘空间）。它符合资源互换文件格式（RIFF）规范，用于保存Windows平台的音频信息资源，被Windows平台及其应用程序所广泛支持。Wave格式支持MSADPCM、CCITT A律、CCITT μ律和其他压缩算法，支持多种音频位数、采样频率和声道，是PC机上最为流行的声音文件格式；但其文件尺寸较大，多用于存储简短的声音片段。

我们可以利用audio标签播放音频（mp3、ogg、wav）
视频利用的是video标签(用法和上面音频几乎一模一样的)

视频标签

video视频标签也是支持三种格式：

mp4、ogg、webm

mp4:

MP4是一套用于音频、视频信息的压缩编码标准，由国际标准化组织（ISO）和国际电工委员会（IEC）下属的“动态图像专家组”（Moving Picture Experts Group，即MPEG）制定，第一版在1998年10月通过，第二版在1999年12月通过。MPEG-4格式的主要用途在于网上流、光盘、语音发送（视频电话），以及电视广播。

WebM：

aidu.com/item/音频/1197465)、视频信息的压缩编码标准，由国际标准化组织（ISO）和国际电工委员会（IEC）下属的“动态图像专家组”（Moving Picture Experts Group，即MPEG）制定，第一版在1998年10月通过，第二版在1999年12月通过。MPEG-4格式的主要用途在于网上流、光盘、语音发送（视频电话），以及电视广播。

WebM：

webM由Google提出，是一个开放、免费的媒体文件格式。WebM 影片格式其实是以 Matroska（即 MKV）容器格式为基础开发的新容器格式，里面包括了VP8影片轨和 Ogg Vorbis 音轨，其中Google将其拥有的VP8视频编码技术以类似BSD授权开源，Ogg Vorbis 本来就是开放格式。 WebM标准的网络视频更加偏向于开源并且是基于HTML5标准的，WebM 项目旨在为对每个人都开放的网络开发高质量、开放的视频格式，其重点是解决视频服务这一核心的网络用户体验。Google 说 WebM 的格式相当有效率，应该可以在 netbook、tablet、手持式装置等上面顺畅地使用。