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:tianshusera@163.com">点击联系我</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：运用输入的正则表达式进行判断

526互联

HTML学习

HTML

HTML5的优势

W3C标准

常见IDE

网页的基本信息

HTML基础

HTML的 注释

网页基本标签

图像标签

常见的图像格式

标签

链接标签

超链接

图片超链接

锚链接

功能性链接

行内元素和块元素

行内元素

块元素

列表标签

有序列表

无序列表

自定义列表

表格标签

视频和音频

视频元素

音频元素

页面结构分析

iframe内联框架

表单语法

基本元素

文本框和单选框

按钮和多选框

列表框文本域和文件域

各类验证，滑块和搜索框

表单的应用

只读

禁用

隐藏域

增强鼠标可用性

表单的初级验证

常用方式

HTML的注释