标签：-- 标签元素表单学习 HTML 页面

HTML

Hyper Text Markup Language（超文本标记语言）

超文本：文字、图片、音频、视频等

网页查看HTML代码：右击审查元素

HTML5+CSS3

HTML5完全取代了flash

HTML5的优势

所有浏览器的支持
市场的需求
跨平台

W3C标准

World Wide Web Consortium（万维网联盟）//可以了解一下IEE

http://www.w3.org/

http://www.chinaw3c.org

W3C标准包括

结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）

常见IDE

记事本
Dreamweaver
IDEA
WebStorm

实例：用IDEA创建一个HTML

网页的基本信息

DOCTYPE声明：告诉浏览器，我们要用什么规范
title：网页标题
meta：描述性标签，描述网站的一些信息（平时能搜到网页就因为meta标签，keywords，description）

一般用来做SEO

HTML基础

HTML的注释

网页基本标签

标题标签

h1+tab键

[<h1>...</h1>]

 <!--标题标签 -->
 <h1>一级标签</h1>>
 <h2>二级标签</h2>>
 <h3>三级标签</h3>>
 <h4>四级标签</h4>>
 <h5>五级标签</h5>>
 <h6>六级标签</h6>>

段落标签

[<p></p>]

快捷键p+tab键

 <!--段落标签，快捷键p+tab键-->
 <p>吃一口 吃一口</p>
 <p>小狗 小狗 </p>

换行标签

 <!--换行标签-->
 mint mint<br/>
 baekhyun<br/>

水平线标签

[<hr>]

一般建议加上自闭合，也就是/

 <!--水平线标签-->
 <hr/>

字体样式标签

粗体：<strong>

斜体：<em>

 <!--字体样式标签：粗体，斜体-->
 <strong>BAEKHYUN</strong>
 <em>小狗</em>

注释和特殊符号

注释： 快捷键：ctrl+/

特殊符号记忆方式：&内容;

 <!--特殊符号-->
 空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
 大于号：&gt;
 小于号：&lt;
 版权符：&copy;

图像标签

常见的图像格式

JPG
GIF
PNG
BMP位图

 <!--img学习
 src：图片地址（必填）
 相对地址:用../表示回到上一级目录，再根据具体目录依次下找
 绝对路径：从盘开始写
 alt：图片加载失败时显示的文字（必填）
 title：鼠标悬停于图片上时会显示出的文字-->
 <img src="../resources/image/1.jpg" alt="bbh" title="悬停文字·" width="800" height="500">

alt

链接标签

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

target常用值：self和blank

快捷键：a+tab键

超链接

 <!--链接标签学习：
 a标签
 href：表示跳转到的页面（必填）
 target：表示窗口在哪里打开
         _blank：在新页面打开
         _self：默认，当前页面直接刷新出来-->
 <a href="1、我的第一个网页.html" target="_blank">点击我跳转到页面一</a>
 <br/>
 <a href="https://www.baidu.com/">点击我跳转到百度</a>
 <br/>

图片超链接

 <!--图片超链接，把文字直接换成图片-->
 <a href="1、我的第一个网页.html">
     <img src="../resources/image/1.jpg" alt="bbh" title="悬停文字·" width="800" height="500">
 </a>

锚链接

在前面设置一个锚点，后面通过“#+锚点”跳转至锚点所在

 <!--使用name作为标记-->
 <a name="top">顶部</a>
 
 ......
 
 <!--锚链接：
 1、需要一个标记
 2、跳转到标记
 用#来表示
 -->
 
 <a href="#top">回到页面顶部</a>

功能性链接

邮件链接

 <!--功能性链接
 邮件链接：mailto-->
 
 <a href="mailto:[email protected]">点击联系我</a>

行内元素和块元素

行内元素

在一行之内内容撑开宽度，左右都是行内元素的可以排在一行
ex：a标签、strong标签、em标签

块元素

无论内容多少，该元素独占一行
ex：p标签、h1标签

列表标签

有序列表

ol内包li

 <!--有序列表order list
 应用范围：试卷、问答-->
 <ol>
     <li>Java</li>
     <li>Python</li>
     <li>C#</li>
     <li>运维</li>
 </ol>

无序列表

ul内包li

 <!--无序列表
 应用范围：导航、侧边栏-->
 <ul>
     <li>Java</li>
     <li>Python</li>
     <li>C#</li>
     <li>运维</li>
 </ul>

自定义列表

dl内包dt和dd

 <!--自定义列表
 dl：标签
 dt：列表名称
 dd：列表内容
 应用范围：公司网站底部-->
 <dl>
     <dt>学科</dt>
 
     <dd>Java</dd>
     <dd>Python</dd>
     <dd>C#</dd>
     <dd>运维</dd>
 </dl>

表格标签

 <!--表格table
 行标签：tr
 列标签：td
 跨列的实现：colspan
 跨行的实现：rowspan
 -->
 <table border="1px">
     <tr>
         <td colspan="4">1-1</td>
     </tr>
     <tr>
         <td rowspan="2">2-1</td>
         <td>2-2</td>
         <td>2-3</td>
         <td>2-4</td>
     </tr>
     <tr>
         <td>3-1</td>
         <td>3-2</td>
         <td>3-3</td>
     </tr>
 </table>

视频和音频

视频元素

video标签

音频元素

audio标签

 <!--视频和音频
 src：资源路径
 controls：控制条，让其可在网页内显现播放
 autoplay：自动播放-->
 <video src="../resources/video/" controls autoplay></video>
 
 <audio src="../resources/audio/" controls autoplay></audio>

页面结构分析

元素名	描述
header	标题头部区域的内容（用于在页面或页面中的一块区域）
footer	标题脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用语侧边栏）
nav	导航类辅助内容

 <header>
     <h2>网页头部</h2>
 </header>
 
 <section>
     <h2>网页主体</h2>
 </section>
 
 <footer>
     <h2>网页脚部</h2>
 </footer>

iframe内联框架

一个网站中嵌套另一个网站

iframe src="引用页面地址” name=“框架标识名”></iframe

 <!--iframe内联框架
 src：地址
 w-h：宽度高度
 与链接标签共用时，a标签的target中可以加入iframe的name
 -->
 <iframe src="1、我的第一个网页.html" name="hello" frameborder="0" width="200" height="500"></iframe>
 <a href="6、表格标签.html" target="hello">点击跳转</a>

表单语法

form标签

form method="规定如何发送表单数据，常用get或post" action="表示向何处发送表单数据"

基本元素

post和get

 <!--表单form
 action:表单提交的位置,可以是网站,也可以是一个请求处理地址
 method：post、get，提交方式
 get方式：提交可以在url中看到提交的账号密码信息，不安全但高效
 post方式：比较安全，可以传输大文件
 form内用p标签成段
 表单的东西都可以用input来实现
 -->
 
 <form action="1、我的第一个网页.html" method="post">
 <!--输入文本框  type：输入类型  name：文本框的名字-->
 <p>名字：<input type="text" name="username"></p>
 <!--输入密码框 -->
 <p>密码：<input type="password" name="pwd"></p>
 
 <p>
 <!--提交-->
     <input type="submit">
 <!--重置-->
     <input type="reset">
 </p>
 
 </form>

审查元素可查看相关信息

文本框和单选框

表单元素格式

属性	说明
type	指定元素类型。text、password、checkbox单选框、radio多选框、submit按钮、reset重置按钮、file、hidden隐藏、image、button，默认为text
name	指定表单元素的名称（Java程序读取读的就是name属性）
value	元素的初始值。type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位（CSS中会重点讲解）
maxlength	type为text或password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否被选中

 <!--输入文本框  type：输入类型  name：文本框的名字-->
 <!--value="mint"    默认的初始值，进入后文本框直接显示
     maxlength="8"   最长可写几个字符
     size="30"       文本框的长度-->
 <p>名字：<input type="text" name="username" ></p>
 <!--输入密码框 -->
 <p>密码：<input type="password" name="pwd"></p>
 
 <!--radio如果不在同一组，就不能达成单选框的目的，所以要用相同的name属性，表示这是一个组的
     value：单选框的值，可选项都有什么
     name：表示组-->
 <p>性别：
     <input type="radio" value="girl" name="sex"/>女
     <input type="radio" value="boy" name="sex"/>男
 </p>

按钮和多选框

 <!--多选框-->
     <p>爱好：
         <input type="checkbox" value="sleep" name="hobby">睡觉
         <input type="checkbox" value="code" name="hobby">敲代码
         <input type="checkbox" value="sing" name="hobby">唱歌
         <input type="checkbox" value="eat" name="hobby">吃饭
     </p>
 
 <!--按钮
     name：按钮名
     value：按钮上显示的文字-->
     <p>按钮：
         <input type="button" name="btn1" value="点击变长">
         <!--图片按钮，图片形成的按钮可以用来提交-->
         <input type="image" src="../resources/image/1.jpg">
     </p>
 
 <!--提交-->
     <input type="submit">
 <!--重置-->
     <input type="reset" value="清空表单">

列表框文本域和文件域

并非使用input标签

     <!--下拉框，
         checked表示默认提前选中-->
     <p>国家：
         <select name="列表名称" >
             <option value="china">中国</option>
             <option value="switzerland">瑞士</option>
             <option value="finland" selected>芬兰</option>
             <option value="usa">美国</option>
         </select>
     </p>
     <!--文本域
     cols：列数
     rows：行数-->
     <p>反馈：
         <textarea name="textarea" id="" cols="50" rows="10">文本内容</textarea>
     </p>
     
     <!--文件域
     input标签的file-->
     <p>
         <input type="file" name="files">
         <input type="button" value="上传" name="upload">
     </p>

各类验证，滑块和搜索框

用到input标签

 <!--邮箱验证-->
     <p>邮箱：
         <input type="email" name="email">
     </p>
 <!--URL-->
     <p>URL:
         <input type="url" name="url">
     </p>
 <!--数字验证
 max：最大值
 min：最小值
 step：步长，数字一次增长或减小的范围-->
     <p>数字：
         <input type="number" name="num" max="100" min="0" step="10">
     </p>
 <!--滑块-->
     <p>音量：
         <input type="range" name="voice" min="0" max="100" step="10">
     </p>
 <!--搜索框：框末尾有一个叉号-->
     <p>搜索：
         <input type="search" name="search">
     </p>

表单的应用

只读

readonly

禁用

disabled

隐藏域

hidden

增强鼠标可用性

 <!--增强鼠标可用性
 for后面接一个指向的id
 label标签作用：使鼠标点击标签文字就能选中那个框-->
     <p>
     <label for="mark">点一下</label>
     <input type="text" id="mark">
     </p>

表单的初级验证

为什么要进行表单验证：

保证数据的安全性，检验出一些比较基本的错误，减轻后端的压力

常用方式

placeholder：在框内显示出提示信息

placeholder="请输入用户名"

required：元素不能为空，必须要填写

没有等于的内容，直接使用

pattern：运用输入的正则表达式进行判断

标签：--,标签,元素,表单,学习,HTML,页面
From： https://www.cnblogs.com/Squashmint/p/17701844.html

HTML学习