一.HTML

1.初识HTML：

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

• 超文本:文字、图片、音频、视频、动画

• 决定网页的结构和内容

• 1993-6、HTML2.0-HTML4.1(1999-12-24)、XHTML1.1(2001-1-26)-XHTML2.0、HTML5（2013-5-6）

• H5使用网页动态渲染图形、图标、图像和动画，不需安装插件使用网页播放视频。

1.1 优势：H5+CSS3 、H5才形成一套标准

• 知名浏览器厂商对HTML5支持
• 市场需要
• 跨平台

1.2 W3C标准

• 概述：World Wide Web Consortium(万维网联盟)
• 1994年成立，Web技术领域最权威和具有影响力的国际中立性技术标准机构
• http://www.w3c.org/开源
• http://www.chinaw3c.org/

1.3 W3C标准包括

• 结构化标准语言（HTML、XML）

• 表现标准语言CSS

• 行为标准（DOM（文档对象模型）、ECMScript6）

1.4 网页的基本信息

• DOCTYPE：文档类型声明 –告诉浏览器使用什么规范

• 《title》标签：描述性标签，描述网站的信息、关键字搜索

• 标签用了做SEO(搜索引擎优化)

  <meta charset="UTF-8">
  <meta name="keywords" content="java,linux,web">
  <meta name="description" content="学习">
  

2.网页的基本标签

• 头部标签、主体
• 自闭合标签：一个标签
• 成对标签：分别叫“开放标签”和“闭合标签”

2.1 标题标签

• 成对标签：
  

  –

  字体由大到小

2.2 段落标签

• 成对标签：

  间距＞换行标签

2.3 换行标签:自闭合标签

2.4 水平线标签:自闭合标签

2.5 字体样式标签

• 粗体：<‘strong>粗体
• 斜体：<’em>斜体

2.6 注释和特殊符号

• 多行注释：

• <!--
  1
  2
  3
  -->
  

• 空格:&’nbsp;

• 大于号：&’gt;

• 小于号：&’lt;

• 版权：&‘copy; ©

• 记忆：&字母弹出面板显示的特殊符号提示

3.图像，超链接，网页布局

3.1 常见的图像格式

• JPG、GIF、PNG、BMP（位图）前三者在网页中用的比较多

• <img src="E:\zkNote\集合体系结构.png" alt="集合" title="集合说明" width="20px" height="20px">
  alt--图像替代文字
  title--鼠标悬停提示文字
  

  <!--
     相对地址:图片相对于本html面的地址
     ../ --上一级目录
     绝对地址:相对于盘符的地址
  -->
  

3.2 超链接标签

<a href="https://www.baidu.com" title="百度一下" target="_blank">百度</a>
href --地址
target --链接打开窗口位置：_self/_blank

<!--标签嵌套、图片超链接-->
<a href="https://www.baidu.com" title="百度一下" target="_blank">
    <img src="../resource/image/1.png" alt="集合" title="集合说明" width="50px" height="50px">
</a>

3.3 锚链接：做书签定位

<!--
1.需要一个锚标记name="top"
2.跳转到标记
-->
<a name="top">顶部</a>
<a href="#top">回到顶部</a>
<br>
<a name="down">down</a>

另一个页面中的链接
<a href="demo01.html#down">跳转到1页面</a>

3.4 功能性链接

<!--功能性链接
1.邮件链接：mailto
2.QQ链接：QQ推广
-->
<a href="mailto:1322330916@qq.com">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2331034673&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:2331034673:53" alt="点击领取资源" title="点击领取资源"/>
</a>

3.5 行内元素和块元素

• 块元素：无论内容多少，改元素独占一行（p、h1-h6）
• 行内元素：内容撑开的宽度，左右都是行内元素的可以排在一行(span,a、strong、em…）

3.6 页面结构分析：开源框架使用

3.7 iframe内联框架：网页套另一个网页

<!--src引用页面地址、name框架标识名---a标签跳转页面_self、锚点-->
<iframe src="demo01.html" frameborder="0" name="页面1">页面</iframe>

网站嵌入网站使用较多。。
<iframe src="" frameborder="0" name="page1" width="100%" height="100%" scrolling="1">页面</iframe>
<a href="demo01.html" target="page1">点击页面1</a>

4.列表，表格，媒体元素

4.1 列表：信息资源组的一种展示形式，可以是学校结构化和条理化，并以列表的样式显示出来，以便浏览这快速的回去相应的信息

4.2 分类

• 无序列表

  <ol><!--order list-->
      <li>java</li>
      <li>linux</li>
  </ol>
  

• 有序列表

<ul><!--无序列表-->!--unorder list-->
    <li>num</li>
    <li>int</li>
</ul>

• 定义列表

<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
    <dt>科目</dt>
    <dd>java</dd>
    <dd>hash</dd>
</dl>
<dl>
    <dt>地址</dt>
    <dd>北京</dd>
    <dd>广东</dd>
</dl>

4.3 表格：简单通用，结构稳定

• 基本结构：单元格

• 行

• 列

• 跨行

• 跨列

• <!--表格table
  行 tr rows
  列 td
  -->
  <table border="1" cellpadding="0">
      <tr>
          <!--colspan跨列-->
          <td colspan="3" align="center">1-1</td>
      </tr>
      <tr>
          <!--rowspan跨行-->
          <td rowspan="2">2-1</td>
          <td>2-2</td>
          <td>2-3</td>
      </tr>
      <tr>
          <td>3-2</td>
          <td>3-3</td>
      </tr>
  </table>
  

4.4 媒体元素

<!--
视频：video
音频：audio
autoplay:自动播放
controls：控制条
-->
<video src="../resource/video/1.mp4" autoplay controls ></video>
<br>
<audio src="../resource/autio/1.mp3"  controls autoplay muted></audio>

5.表单及表单应用：所有的表单上传元素都需要个name，以键值对的形式提交

5.1 表单：注意其提交input形式的按钮

<!--
action:提交位置
method：提交方式
get：明文，不安全，高效
post:提交大文件
-->
<form action="demo01.html" method="get">
    <p>name:<input type="text" name="username"></p>
    <p>pwd: <input type="password" name="pwd"></p>
    <p>滑块：<input type="range"></p>
    <p>男：<input type="radio" value="boy" name="sex">男
        女：<input type="radio" value="gril" name="sex">女</p>
    <p><input type="submit"><input type="reset"></p>
</form>

5.2 表单元素格式

• input的type为radio/checkbox时，value为默认值，name是组的概念:::checkbox提交时，数据以数组形式提交

<!--按钮
button:普通按钮
image：图片按钮-->
<input type="button" value="点击" name="btn">
<input type="image" src="../resource/image/1.png">
<p><input type="submit"><input type="reset"></p>

<input type="checkbox" value="1" name="ck" checked>1
<input type="checkbox" value="2" name="ck">2
<input type="checkbox" value="3" name="ck">3
<input type="checkbox" value="4" name="ck">4

<select name="gj" id="gj">
    <option value="china">中国</option>
    <option value="USA"selected>美国</option>
    <option value="US">英国</option>
</select>
<br>
<input type="file" name="files">
<input type="button" name="btn" value="提交">
<br>
<textarea name="txt" id="txt" cols="30" rows="10">文本域：</textarea>

6.表单初级验证

6.1 基本的验证表单元素

<!--验证元素-->
<!--邮件-->
邮件:<input type="email" name="email">
<!--数字-->
数字：<input type="number" name="num" max="50" min="10" step="2">
<!--URL-->
URL: <input type="url" name="url">
<input type="range" name="range" max="80" min="10" step="20">
搜索：<input type="search" name="search">

6.2 表单应用

• 隐藏域：hidden值在（属性）
• 只读：readonly（属性）
• 禁用：disabled（属性）
• label：for/id–点击锁定光标

<!--增强鼠标可用性-->
<label for="search">点击锁定光标</label>
搜索：<input type="search" name="search" id="search">

6.3 验证:数据安全，减轻服务器压力（阻止失败提交）

• placeholder:预先提示（用在输入框控件上）
• required：非空判断，属性。（所有选择，输值控件）
• pattern：属性.正则表达式https://www.jb51.net/tools/regexsc.htm

下一篇：前端基础-01-前端基础：CSS总结