以下为快速入门部分
点击查看代码
-- 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 原代码 显示结果 描述
-- < < 小于号或显示标记
-- > ; > 大于号或显示标记
-- & & 可用于显示其它特殊字符
-- " " 引号
-- ® R 已注册
-- © C 版权
-- ™ .TM 商标
-- 不断行的空白
--
图片、音频、视频标签
点击查看代码
-- 图片、音频、视频标签
-- 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>
--