29 HTML --》关于HTML的快速入门与标签

合集 - Javaweb(54)

1.2024/10/16 日日志 --》关于MySQL的中基础操作的整理以及 DQL的初步学习笔记与整理2024-10-16 2.2024/10/17日日志 --》关于MySQL中的约束、多表查询的初步学习笔记与整理2024-10-17 3.2024/10/18日日志 --》关于MySQL中的事务以及JDBC的初步学习笔记与整理2024-10-18 4.2024/10/19日日志--》关于MySQL中 JDBC的API 详解的整理简述2024-10-19 5.2024/10/21 日日志 --》关于Mysql中的数据库连接池简述笔记整理2024-10-21 6.2024/10/22日日志 --》关于Maven的基础学习笔记整理2024-10-22 7.2024/10/23日日志--》关于Maven的基础学习--2 坐标与依赖范围2024-10-23 8.2024/10/24日日志 --》关于Mybatis的学习笔记整理 - 环境与性质以及ResultMap2024-10-24 9.2024/10/25日日志 --》关于使用Mybatis进行增删改查 ---1 查询2024-10-25 10.2024/10/26 日使用Mybatic --》关于Mybatis 进行增删改查 ---2 添加、修改与删除2024-10-26 11.2024/10/28日使用Mybatic --》关于Mybatis 的参数传递与注解开发2024-10-28

12.2024/10/29 HTML --》关于HTML的快速入门与标签2024-10-29

以下为快速入门部分

点击查看代码

-- HTML
-- 什么是 HTML?
-- ·HTML 是一门语言，所有的网页都是用HTML 这门语言编写出来的.
-- ·HTML(HyperText Markup Language):超文本标记语言
-- -->超文本:超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容》
-- -->标记语言:由标签构成的语言
-- ·HTML运行在浏览器上，HTML标签由浏览器来解析
-- ·HTML 标签都是预定义好的。例如:使用<img>展示图片
-- ·W3C 标准:网页主要由三部分组成
-- -->结构:HTML
-- -->表现:CSS
-- -->行为:JavaScript
--
-- 快速入门：
-- 1.新建文本文件，后缀名改为.html
-- 2.编写 HTML 结构标签
-- 3.在<body>中定义文字
-- 
-- <html>
-- <head>
--  <title> </title>
--  </head>
--  <body>
--  
--  </body>
--  </html>
-- 1.HTML 文件以.htm或.html为扩展名
-- 2.HTML 结构标签
-- 标签            描述
-- <HTML>          定义 HTML 文档
-- <head>          定义关于文档的信息
-- <title>         定义文档的标题
-- <body>          定义文档的主体
-- 3.HTML 标签不区分大小写
-- 4.HTML 标签属性值 单双引皆可
-- 5.HTML 语法松散
--

标签分为多种：包括基础标签、图片、音频、视频标签、超链接标签、列表标签、表格标签、布局标签、表单标签与表单项标签

基础标签与转义字符

点击查看代码

-- 基础标签
-- 标签          描述
-- <h1>- <h6>       定义标题，h1最大，h6最小
--   ·<h1>我是标题h1</h1>
--   ·<h2>我是标题h2</h2>
--   ·<h3>我是标题h3</h3>
--   ·<h4>我是标题h4</h4>
--   ·<h5>我是标题h5</h5>
--   ·<h6>我是标题h6</h6>
-- <font>           定义文本的字体、字体尺寸、字体颜色定义粗体文本
--   ·<font face = "楷体" size = "5" color = "#ffc0cb"> 小月光</font>
-- <b>              定义粗体文本
-- <i>              定义斜体文本
-- <u>              定义文本下划线
-- <center>         定义文本居中
-- <p>              定义段落
-- <br>             定义折行
-- <hr>             定义水平线
--
-- <!--
--     html表示颜色:
--         1.英文单词：red,pink,blue...
--         2.rgb(值1,值2,值3):值的取值范围:0~255 rgb(255,0,0)
--         3.#值1值2值3:值的范围:00~FF
-- -->
--
-- 转义字符
-- HTML 原代码          显示结果          描述
-- &lt;                  <                小于号或显示标记
-- &gt ;                 >                大于号或显示标记
-- &amp;                 &                可用于显示其它特殊字符
-- &quot;                "                引号
-- &reg;                 R                已注册
-- &copy;                C                版权
-- &trade;               .TM              商标
-- &nbsp;                                 不断行的空白
--

图片、音频、视频标签

点击查看代码

-- 图片、音频、视频标签
-- img:定义图片
--         ->src:规定显示图像的 URL(统一资源定位符)
-- 				 ->height:定义图像的高度
--         ->width:定义图像的宽度
-- audio:定义音频。支持的音频格式:MP3、WAV、OGG
-- 				 ->src:规定音频的 URL
--         ->controls:显示播放控件
-- video:定义视频。支持的音频格式:MP4,WebM、OGG
--      	 ->src:规定视频的 URL
-- 				 	->controls:显示播放控件
--
--     资源路径：
--         1.绝对路径：完整路径
--         2.相对路径：相对位置关系
--             xxx/html/02-图片音频视频.html
--             xxx/html/a.jpg
--             ->    ./a.jpg & a.jpg
-- 
--             xxx/html/02-图片音频视频.html
--             xxx/html/img/a.jpg
--             ->    ./img/a.jpg
-- 
--             xxx/html/02-图片音频视频.html
--             xxx/img/a.jpg
--             ->    ../img/a.jpg
--     尺寸单位：
--         1.px:像素
--         2.百分比：如20%即占body 20%的某属性
--
-- 例:
-- <!DOCTYPE html>
-- <html lang="en">
-- <head>
--     <meta charset="UTF-8">
--     <title>Title</title>
-- </head>
-- <body>
--     <img src = "Lover.jpg"width="540"height="960">
--     <audio src ="b.mp3"controls = "controls"></audio>
--     <video src ="Mvp.mp4"controls width="540"height="960"></video>
-- 
-- </body>
-- </html>
--

超链接标签

点击查看代码

-- 超链接标签
-- 标签                描述
-- <a>                 定义超链接，用于链接到另一个资源
-- · href:指定访问资源的URL
-- · target:指定打开资源的方式
-- -> _self:默认值，在当前页面打开
-- -> _blank:在空白页面打开
-- 例：
-- <!DOCTYPE html>
-- <html lang="en">
-- <head>
--     <meta charset="UTF-8">
--     <title>Title</title>
-- </head>
-- <body>
-- <a href ="https://www.bilibili.com/" target="_blank">
--   点点我吧
-- </a>
-- </body>
-- </html>
--

列表标签

点击查看代码

-- 列表标签
-- 标签    描述
-- <ol>       定义有序列表
-- <ul>       定义无序列表
-- <li>       定义列表项
-- 
-- ·type设置项目符号
-- ·有序列表(order list)
-- 1.咖啡 2.茶 3.牛奶
-- <ol>
-- <li>咖啡</i>
-- <li>茶</li>
-- <li>牛奶</i>
-- </ol>
--
-- ·无序列表
-- <ul>
-- <li>咖啡</i>
-- <li>茶</li>
-- <li>牛奶</i>
-- </ul>
-- 例子: 参数可修改
-- <!DOCTYPE html>
-- <html lang="en">
-- <head>
--     <meta charset="UTF-8">
--     <title>Title</title>
-- </head>
-- <body>
-- <ol type="A">
--     <li>咖啡</li>
--     <li>茶</li>
--     <li>牛奶</li>
-- </ol>
-- 
-- <ul type="circle">
--     <li>咖啡</li>
--     <li>茶</li>
--     <li>牛奶</li>
-- </ul>
-- 
-- </body>
-- </html>

表格标签

点击查看代码

  -- 表格标签
--
-- 标签      描述
-- <table>      定义表格
-- <tr>         定义行
-- <td>         定义单元格
-- <th>         定义表头单元格
-- 
-- table:定义表格
--    ·border:规定表格边框的宽度
--    ·width :规定表格的宽度
--    ·cellspacing:规定单元格之间的空白
-- tr:定义行
--    ·align:定义表格行的内容对齐方式
-- td:定义单元格
--    ·rowspan:规定单元格可横跨的行数
--    ·colspan:规定单元格可横跨的列数
--
-- 例:
-- <!DOCTYPE html>
-- <html lang="en">
-- <head>
--     <meta charset="UTF-8">
--     <title>Title</title>
-- </head>
-- <body>
-- <table border="1"cellspacing="0"width="500">
--     <tr>
--         <th>序号</th>
--         <th>图片Log</th>
--         <th>图片名称</th>
--         <th>所属</th>
--     </tr>
--     <tr align="center">
--         <td>010</td>
--         <td><img src ="../img/月的枝芽.jpg" width="60"height="50"></td>
--         <td>月的枝芽</td>
--         <td>小月光</td>
--     </tr>
--     <tr align="center">
--         <td>009</td>
--         <td><img src ="../img/小猫老弟.png" width="60"height="50"></td>
--         <td>小猫老弟</td>
--         <td>小月光</td>
--     </tr>
--     <tr align="center">
--         <td>008</td>
--         <td><img src ="../img/公众号图.png" width="60"height="50"></td>
--         <td>公众号图</td>
--         <td>小月光</td>
--     </tr>
-- </table>
-- <br>
-- <hr>
-- <br>
-- <table border="1"cellspacing="0"width="500">
--     <tr>
--         <th colspan="2">图片Log</th>
--         <th>图片名称</th>
--         <th>所属</th>
--     </tr>
--     <tr align="center">
--         <td>010</td>
--         <td><img src ="../img/月的枝芽.jpg" width="60"height="50"></td>
--         <td>月的枝芽</td>
--         <td>小月光</td>
--     </tr>
--     <tr align="center">
--         <td rowspan="2">009</td>
--         <td><img src ="../img/小猫老弟.png" width="60"height="50"></td>
--         <td>小猫老弟</td>
--         <td>小月光</td>
--     </tr>
--     <tr align="center">
--         <td>008</td>
--         <td><img src ="../img/公众号图.png" width="60"height="50"></td>
--         <td>公众号图</td>
--     </tr>
-- 
-- </table>
-- </body>
-- </html>

布局标签

点击查看代码

-- 布局标签
-- 标签     描述
-- <div>      定义 HTML 文档中的一个区域部分，经常与CSS 一起使用，用来布局网页
-- <span>     用于组合行内元素
--
-- 例：
-- <!DOCTYPE html>
-- <html lang="en">
-- <head>
--     <meta charset="UTF-8">
--     <title>布局标签</title>
-- </head>
-- <body>
-- 
-- <div>我是div</div>
-- <div>我是div</div>
-- <span>我是span</span>
-- <span>我是span</span>
-- 
-- </body>
-- </html>
--

表单标签与表单项标签

点击查看代码

-- 表单标签 与 表单项标签
-- 表单:在网页中主要负责数据采集功能，使用<form>标签定义表单
-- 表单项(元素):不同类型的 input 元素、下拉列表、文本域等 
-- 标签      描述
-- <form>       定义表单
-- <input>      定义表单项，通过type属性控制输入形式
-- <label>      为表单项定义标注
-- <select>     定义下拉列表
-- <option>     定义下拉列表的列表项
-- <textarea>   定义文本域
-- form:定义表单
-- action:规定当提交表单时向何处发送表单数据，URL
-- method :规定用于发送表单数据的方式
--   ·get:浏览器会将数据直接附在表单的 action URL之后。大小有限制
--   ·post:浏览器会将数据放到http请求消息体中。大小无限制
-- 例:
-- <!DOCTYPE html>
-- <html lang="en">
-- <head>
--     <meta charset="UTF-8">
--     <title>表单标签</title>
-- </head>
-- <body>
-- 
-- <!--
-- form:
--      action:指定表单数据提交的URL
--         ·表单项数据要想被提交，则必须指定其name属性
--      method:指定表单的提交方式
--         1.get:默认值
--             ·请求参数会拼接到URL后边
--             ·URL的长度有限制 4KB左右
--         2.post:
--             ·请求参数会在http请求协议的请求体中
--             ·请求参数长度无限制
-- -->
-- 
-- <form action = "#"method="post">
--     <input type ="text" name = "username">
--     <input type ="submit">
-- </form>
-- 
-- </body>
-- </html>
--
-- 表单项标签
-- <input>:表单项，通过type属性控制输入形式
-- <select>:定义下拉列表，<option>定义列表项
-- <textarea>:文本域
--
-- type 取值         描述
-- text              默认值。定义单行的输入字段   superbaby
-- password          定义密码字段
-- radio             定义单选按钮                  @男 0女
-- checkbox          定义复选框                    □ 旅游 □ 电影 □  游戏
-- file              定义文件上传按钮              选择文件 未选择任何文件
-- hidden            定义隐藏的输入字段
-- submit            定义提交按钮，提交按钮会把表单数据发送到服务器   提交
-- reset             定义重置按钮，重置按钮会清除表单中的所有数据     重置
-- button            定义可点击按钮                                   按钮
-- 
-- 例：
-- <!DOCTYPE html>
-- <html lang="en">
-- <head>
--     <meta charset="UTF-8">
--     <title>表单项标签</title>
-- </head>
-- <body>
--     <form action="#"method="post">
--         <input type = "hidden" name = "id"value="123">
-- 
-- 
--         <label for = "username">用户名：</label>
--         <input type = "text" name = "username" id = "username"><br>
--         <label for = "password">密码:</label>
--         <input type ="password" name = "password" id = "password"><br>
-- 
--         性别：
--         <input type = "radio"name = "gender"value="1" id = male><label for = "male">男</label>
--         <input type = "radio"name = "gender"value="2" id = female><label for = "female">女</label>
--         <br>
--         爱好：
--         <input type="checkbox"name="hobby"value="1" id="travel"><label for = "travel">旅游</label>
--         <input type="checkbox"name="hobby"value="2" id="movie"><label for = "movie">电影</label>
--         <input type="checkbox"name="hobby"value="3" id="game"><label for = "game">游戏</label>
--         <br>
--         头像：
--         <input type="file"><br>
--         城市：
--         <select name ="city">
--             <option value="beijing">北京</option>
--             <option value="shanghai">上海</option>
--             <option value="guangzhou">广州</option>
--         </select>
--         <br>
--         个人描述：
--         <textarea cols="20" rows = "5" name="desc"></textarea>
--         <br>
-- 
--         <br>
-- 
--         <input type="submit" value="免费注册">
--         <input type = "reset" value="重置">
--         <input type = "button"value="一个普通的按钮">
-- 
-- 
--     </form>
-- 
-- </body>
-- </html>
--