HTML学习

HTML学习

1、HTML5的优势

  • 世界知名浏览器厂商对HTML5的支持

  • 微软

  • Google

  • 苹果

  • Opera

  • Mozilla

  • 市场的需求

  • 跨平台

2、W3C标准

W3C

  1. World Wide Web Consortiu(万维网联盟)

  2. 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构

  3. http://www.w3.org/

  4. http://www.chinaw3c.org/

     

W3C标准包括

  1. 结构化标准语言(HTML、XML)

  2. 表现标准语言(css)

  3. 行为标准(DOM、ECMAScript )

 

3、常见IDE

  1. 记事本

  2. Dreamweaver

  3. IDEA

  4. WebStorm

  5. .........

4、HTML基本结构

<body>、</body>等成对的标签，分别叫开放标签和闭合标签单独呈现的标签(空元素)，

如<hr/> ;意为用/来关闭空元素

5、图像标签

常见的图像标签

  1. JPG

  2. GIF

  3. PNG

  4. BMP

........ 

 <img src="path" alt="text" title="text" width="x" height="y" >

例子：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>图像标签</title>
 </head>
 <body>
 <!--img学习
 src: 图片地址(必填)
     相对地址(推荐使用)，绝对地址
     ../   --上一级目录
 ​
 alt: 图片名字(必填)，其他选填
 -->
 <!--src资源找不到就会不显示图片，显示alt-->
 <img src="../resources/image/1.png" alt="没事看看" title="鼠标悬停" width="600" height="300">
 ​
 </body>
 </html>

6、链接标签，重要

 <a href="path" target="目标窗口位置">链接文本或图像</a>

文本超链接

图像超链接

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>链接标签学习</title>
 </head>
 <body>
 <!--使用name作为标记-->
 <a name="top">顶部</a>
 <!--
 href：必填 表示要跳转到哪个页面
 target: 表示窗口在哪个页面打开 _blank：在新窗口打开
                            _self：在自己的网页中打开
 ​
 -->
 ​
 <a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a><br/>
 <hr>
 <a href="https://www.baidu.com" target="_self">点击我跳转到百度</a><br/>
 <a href="https://www.baidu.com">
     <img src="../resources/image/1.png" alt="没事看看" title="点一下就到百度" width="600" height="300">
 </a>
 <!--锚链接
 1.需要一个锚标记
 2.跳转到标记
 #
 -->
 <a href="#top">回到顶部</a>
 <a name="down">down</a>
 <!--功能性链接
 邮件链接：mailto
 qq链接
 -->
 <a href="mailto:3423711913@qq.com">点击联系我</a>
 ​
 <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=3423711913&site=qq&menu=yes">
     <img border="0" src="http://wpa.qq.com/pa?p=2:3423711913:53" alt="发消息请你看小电影" title="发消息请你看小电影"/>
 </a>
 ​
 <a href="2.基本标签.html#shiyang">点击看世阳</a>
 ​
 </body>
 </html>

7、行内元素和块元素

块元素

  1. 无论内容多少，该元素独占一行

  2. (p、h1-h6...)

行内元素

  1. 内容撑开宽度，左右都是行内元素的可以排在一行

  2. (a.strong.em...)

8、列表

什么是列表

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息

列表的分类

无序列表 有序列表 定义列表

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>列表学习</title>
 </head>
 <body>
 <!--有序列表
 应用范围：试卷，问答。。。。。
 -->
 <ol>
     <li>Java</li>
     <li>Python</li>
     <li>Linux</li>
     <li>c++</li>
 </ol>
 <!--无序列表
 应用范围：导航，侧边栏、、、、、、
 -->
 <ul>
     <li>Java</li>
     <li>Python</li>
     <li>Linux</li>
     <li>c++</li>
 </ul>
 <!--自定义列表
 dl：标签
 dt：列表名称
 dd：列表内容
 ​
 公司网站底部
 -->
 <dl>
     <dt>学科</dt>
     <dd>Java</dd>
     <dd>Python</dd>
     <dd>Linux</dd>
     <dd>c++</dd>
 ​
     <dt>位置</dt>
     <dd>上海</dd>
     <dd>广州</dd>
     <dd>深圳</dd>
     <dd>北京</dd>
 </dl>
 </body>
 </html>

9、媒体元素（视频音频）

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>媒体元素学习</title>
 </head>
 <body>
 <!--音频和视频
 src: 资源路径
 ​
 controls: 控制条
 autoplay: 自动播放
 -->
 <video src="../resources/video/视频.mp4" controls autoplay muted></video>
 ​
 <audio src="../resources/audio/音频.mp3" controls autoplay muted></audio>
 </body>
 </html>

10、页面结构分析

元素名描述
header 标题头部区域的内容（(用于页面或页面中的一块区域)
footer 标记脚部区域的内容（(用于整个页面或页面的一块区域)
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用(常用于侧边栏)
nav 导航类辅助内容 
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>页面结构分析</title>
 </head>
 <body>
 ​
 <header>
     <h3>页面头部</h3>
 </header>
 ​
 <section>
     <h3>页面主体</h3>
 </section>
 ​
 <footer>
     <h3>页面脚部</h3>
 </footer>
 ​
 </body>
 </html>

11、iframe内联框架

 <iframe src="path" name="mainFrame" ></liframe>
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>内联框架学习</title>
 </head>
 <body>
 <!--iframe内联框架
 src：地址
 w-h：宽度，高度
 ​
 -->
 <!--https://www.bilibili.com/-->
 <iframe src="" name="B站" frameborder="0" width="1000" height="800"></iframe>
 ​
 <a href="https://www.bilibili.com/" target="_self">点击跳转B站</a>
 ​
 <!--<iframe src="//player.bilibili.com/player.html?aid=81109044&bvid=BV1YJ411a7dy&cid=138807880&page=1"-->
 <!--        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">-->
 <!--</iframe>-->
 ​
 </body>
 </html>

12、表单语法（重要）

1.表单语法

method：规定如何发送表单数据，常用值：get | post

action：表示向何处发送表单数据

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>表单学习</title>
 </head>
 <body>
 <h2>表单注册</h2>
 ​
 <!--表单form
 action: 表单提交的位置，可以是网站也可以是一个请求处理地址
 method: post，get 提交方式
      get方式提交，我们在url中可以看到提交的信息，不安全，高效
      post 方式提交，比较安全，可以传输大文件
 -->
 <form action="1.我的第一个网页.html" method="post">
     <!--文本输入框<input type="text">-->
     <p>用户名：<input type="text" name="username"></p>
     <!--密码输入框<input type="password">-->
     <p>密码：<input type="password" name="pwd"></p>
 ​
     <p>
         <input type="submit" value="提交">
         <input type="reset" value="重置">
     </p>
 </form>
 </body>
 </html>

2.表单元素格式（语法上加单选框）

属性说明
type 指定元素的类型。text、password、checkbox、radio、submit.reset、 file、hidden、image和button，默认为text
name 指定表单元素的名称
value 元素的初始值。type为radio时必须指定一个值
size 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength type为text 或password时，输入的最大字符数
checked type为radio或checkbox时，指定按钮是否是被选中 
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>表单学习</title>
 </head>
 <body>
 <h2>表单注册</h2>
 ​
 <!--表单form
 action: 表单提交的位置，可以是网站也可以是一个请求处理地址
 method: post，get 提交方式
      get方式提交，我们在url中可以看到提交的信息，不安全，高效
      post 方式提交，比较安全，可以传输大文件
 -->
 <form action="1.我的第一个网页.html" method="post">
     <!--文本输入框<input type="text"
     value="为了她努力赚钱"  默认初始值
     maxlength="8"        最大输入数
     size="30"    文本框长度>
     -->
     <p>用户：<input type="text" name="username"></p>
     <!--密码输入框<input type="password">-->
     <p>密码：<input type="password" name="pwd"></p>
 ​
     <!--单选框标签
     input type="radio"  radio: 单选框
     value: 单选框的值
     name: 表示组
     -->
     <p>性别:
         <input type="radio" value="男" name="sex"/>男
         <input type="radio" value="女" name="sex"/>女
     </p>
 ​
     <p>
         <input type="submit" name="Button" value="提交">
         <input type="reset" name="Reset" value="重置">
     </p>
 </form>
 </body>
 </html>

3.表单元素格式（同上加多选框&&按钮）

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>表单学习</title>
 </head>
 <body>
 <h2>表单注册</h2>
 ​
 <!--表单form
 action: 表单提交的位置，可以是网站也可以是一个请求处理地址
 method: post，get 提交方式
      get方式提交，我们在url中可以看到提交的信息，不安全，高效
      post 方式提交，比较安全，可以传输大文件
 -->
 <form action="1.我的第一个网页.html" method="get">
     <!--文本输入框<input type="text"
     value="为了她努力赚钱"  默认初始值
     maxlength="8"        最大输入数
     size="30"    文本框长度>
     -->
     <p>用户：<input type="text" name="username"></p>
     <!--密码输入框<input type="password">-->
     <p>密码：<input type="password" name="pwd"></p>
 ​
     <!--单选框标签
     input type="radio"  radio: 单选框
     value: 单选框的值
     name: 表示组
     checked 默认选中
     -->
     <p>性别:
         <input type="radio" value="男" name="sex" checked/>男
         <input type="radio" value="女" name="sex"/>女
     </p>
 ​
     <!--多选框
     input type="checkbox"
     checked 默认选中
     -->
     <p>爱好:
         <input type="checkbox" value="跑步" name="like" checked>跑步
         <input type="checkbox" value="睡觉" name="like">睡觉
         <input type="checkbox" value="唱歌" name="like">唱歌
         <input type="checkbox" value="打游戏" name="like">打游戏
         <input type="checkbox" value="专一" name="like">专一
     </p>
 ​
     <!--按钮
     input type="button" 普通按钮
     input type="image"  图片按钮
     input type="submit" 提交按钮
     input type="reset"  重置按钮
     -->
     <p>
         <input type="button" name="btn1" value="点击长高">
         <input type="image" name="image1" value="图片跳转" src="../resources/image/1.png">
     </p>
 ​
     <p>
         <input type="submit" name="Button" value="提交">
         <input type="reset" name="Reset" value="重置">
     </p>
 </form>
 </body>
 </html>

13、列表文本域和文件域

 <!--下拉框，列表框
 select name="列表名称"
 option value="国家选项"
 selected 默认显示什么
     -->
     <p>国家:
         <select name="国家">
             <option value="china" selected>中国</option>
             <option value="meiguo">美国</option>
             <option value="ruis">瑞士</option>
             <option value="aosichuilie">澳大利亚</option>
         </select>
     </p>
 ​
     <!--文本域
     cols  行
     rows  列
     -->
     <p>反馈:
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
     </p>
 ​
     <!--文件域
     input type="file" name="files"
     -->
     <p>
         <input type="file" name="files">
         <input type="button" value="上传" name="upload">
     </p>

14、搜索框滑块和简单验证

 <!--邮件验证-->
 <p>邮箱:
     <input type="email" name="email">
 </p>
 <!--url-->
 <p>URL:
     <input type="url" name="随便写">
 </p>
 <!--数字-->
 <p>商品数:
     <input type="number" name="numbers" max="100" min="1" step="1">
 </p>
 <!--滑块
 input type="range"
 step="2"  每次加2
 -->
 <p>音量:
     <input type="range" name="滑块" max="100" min="10" step="2">
 </p>
 <!--搜索框-->
 <p>搜索:
     <input type="search" name="searchs">
 </p>
 ​
 ​
 <p>
     <input type="submit" name="Button" value="提交">
     <input type="reset" name="Reset" value="重置">
 </p>

15、表单的应用

隐藏域 hidden

只读 readonly

禁用 disable

 <!--增强鼠标可用性-->
 <p>
     <label for="dianwo">你点我试试:</label>
     <input type="text" id="dianwo">
 </p>
 ​
 <!--单选框标签
     input type="radio"  radio: 单选框
     value: 单选框的值
     name: 表示组
     checked 默认选中
     value="admin":默认  readonly: 只读，不能改
     disabled: 禁用
     hidden: 隐藏文本框
 -->
  <p>用户：<input type="text" name="username" value="admin" readonly></p>
     <!--密码输入框<input type="password">-->
     <p>密码：<input type="password" name="pwd" hidden value="123456"></p>

16、表单的初级验证

常用方式：

  1. placeholder 提示信息

  2. required 非空判断

  3. pattern 正则表达式

 <!--自定义邮箱
     https://www.jb51.net/tools/regexsc.htm
     -->
     <p>自定义邮箱:
         <input type="text" name="zdymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
 /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
     </p>
 ​
 ​
 ​
 ​
     <p>
         <input type="submit" name="Button" value="提交">
         <input type="reset" name="Reset" value="重置">
     </p>
 
posted @ 2022-06-10 15:58  为了她  阅读(34)  评论(0)  编辑  收藏  举报