139. HTML5

发表于 更新于 分类于

前端

  • HTML：网页基本结构

  • CSS：美化网页

  • JS：使得网页动起来产生交互性行为

初识HTML

什么是HTML

Hyper Text Markup Language(超文本标记语言)

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

W3C标准

w3c： 万维网联盟

标准：

  • 结构化标准语言(HTML、XML)
  • 表现标准语言（css）
  • 行为标准 （DOM、ECMAScript）

基本信息

  • 注释：<!-- 注释 -->
  • <!DOCTYPE html>：告诉浏览器，我们要使用什么规范
  • <html> </html>: 总标签，只有在里面写才有意义
  • head标签：网页头部
  • body标签：网页主体
  • title标签：网页标题
  • meta 标签：描述性标签，用来描述网站的一些信息，可以用来被搜索到；一般用来做 SEO

基本标签

标题标签

1
2
3
4
5
6
<h1>1级标签</h1>
<h2>2级标签</h2>
<h3>3级标签</h3>
<h4>4级标签</h4>
<h5>5级标签</h5>
<h6>6级标签</h6>

段落标签

1
2
3
<p>hello world</p>
<p>hello world2</p>
<p>hello world3</p>

换行标签

即便换行了，也是一个段落

1
2
3
hello world <br/>
hello world2 <br/>
hello world3 <br/>

水平线标签

1
<hr/>

字体样式标签

  • 粗体斜体

    1
    2
    粗体：<strong>Hello html</strong>
    斜体：<em>Hello html</em>

注释和特殊符号

注释

1
<!--注释-->

特殊符号

  • 空格：空 格：空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格

  • 大于号：&gt;

  • 小于号：&lt;

  • 版权符号：&copy;

  • 记忆方式：

    • &字母：可以直接调
    • 百度查（不推荐）

图像标签

常见图像格式

  • JPG
  • GIF
  • PNG
  • BMP：位图
  • ……

嵌入图片

1
2
3
4
5
6
7
8
<!--
src：图片地址（必填）：
        绝对地址：E:\SourceCode\HTMLSpace\learnProject\resources\images\pdx.jpg
        相对路径：../resources/images/pdx.jpg

alt: 图片名字（必填）
-->
<img src="../resources/images/pdx.jpg" alt="Qeuroal" title="悬停文字" width="300" height="480">

链接标签

可以点的东西都是链接

页面间跳转：从一个页面跳转到另一个页面

文本超链接

1
2
3
4
5
6
7
8
<!--a标签
href：必填，表示要跳转到哪个页面
target：表示窗口在哪里打开
    _blank: 在新标签页中打开
    _self：在自己的网页打开
-->
<a href="test1.html" target="_blank">点击我跳转test1</a>
<a href="https://qeuroal.top/" target="_self">点击我跳转到主页</a>

图像超链接

1
2
3
<a href="test1.html">
    <img src="../resources/images/pdx.jpg" alt="Qeuroal" title="点击我跳转test1" width="300" height="480">
</a>

页面内跳转：页面内跳转

锚链接

1
2
3
4
5
6
7
8
9
10
<!--使用name作为标记-->
<a name="top">顶部</a>

<!--锚链接：页面内跳转
1. 需要一个锚标记
2. 跳转到标记
3. #: 通过#跳到标记
-->
<a href="#top">回到顶部</a>
<a href="链接标签.html#down">跳转</a>

功能性连接

邮件链接

1
2
3
4
<!--功能性连接
邮件链接：mailto
-->
<a href="mailto:xxxxx@163.com"></a>

qq链接

1
2
3
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="你好，加我领取资料" title="你好，加我领取资料"/>
</a>

块元素和行内元素

块元素

  • 无论内容多少，该元素独占一行
  • （p 、h1-h6、…）

行内元素

  • 内容撑开宽度，左右都是行内元素的可以排在一行
  • （a、strong、em、…）

列表标签

什么是列表

列表的分类

有序列表

1
2
3
4
5
6
7
8
9
10
<!--有序列表
应用：试卷、问答……
-->
<ol>
    <li>java</li>
    <li>python</li>
    <li>运维</li>
    <li>前端</li>
    <li>c/c++</li>
</ol>

无序列表

1
2
3
4
5
6
7
8
9
10
<!--无序列表
应用：导航、侧边栏……
-->
<ul>
    <li>java</li>
    <li>python</li>
    <li>运维</li>
    <li>前端</li>
    <li>c/c++</li>
</ul>

自定义列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--自定义列表
dl：标签
dt：列表名称
dd：列表选项

应用：公司网站底部
-->
<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>Linux</dd>
    <dd>C</dd>

    <dt>位置</dt>
    <dd>唐山</dd>
    <dd>石家庄</dd>
</dl>

表格标签

为什么使用表格

  • 简单通用
  • 结构稳定

基本结构

  • 单元格
  • 行
  • 列
  • 跨行
  • 跨列

实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!--表格table
行：tr
列：td
-->
<table border="1px">
    <tr>
        <!--colspan 跨列-->
        <td colspan="4">1</td>
        <td>2</td>
        <td>3</td>
        <td>123</td>

    </tr>
    <tr>
        <!--colspan 跨行-->
        <td rowspan="2">4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

媒体元素

视频元素video

1
2
3
4
5
6
<!--视频
src: 资源路径
controls: 控制条
autoplay: 自动播放
-->
<video src="../resources/video/起风了.mp4" controls autoplay></video>

音频元素audio

1
2
<!--音频-->
<audio src="../resources/audio/起风了.mp3" controls autoplay></audio>

页面结构分析

1
2
3
4
5
6
7
8
9
10
11
<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主体</h2>
</section>

<footer>
    <h2>网页脚部</h2>
</footer>

iframe内联框架

1
2
3
4
5
6
7
8
<!--iframe内联框架
src: 地址
frameborder:
w-h：宽度-高度
-->
<iframe src="https://www.baidu.com" name="baidu" frameborder="0" width="1000px" height="800px"></iframe>

<a href="https://qeuroal.top" target="baidu">点击跳转</a>

表单语法

规定

  • input标签 都要有一个name值

表单元素格式

文本输入框

1
2
3
4
5
6
7
8
<!--文本输入框：input type="text"
value="Qeuroal" 默认初始值
maxlength="8" 最长能写几个字符
size="30" 文本框的长度
-->
<p>用户名：<input type="text" placeholder="请输入用户名" name="username" ></p>
<!--密码框：input type="password"-->
<p>密码：<input type="password" placeholder="请输入密码" name="pwd"></p>

单选框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--单选框
input type="radio"
value: 单选框的值
name: 表示组，组一样才能选择一个
-->
<p>性别：
    <input type="radio" value="boy" name="sex" checked/> 男
    <input type="radio" value="girl" name="sex"/> 女
</p>

<p>
    <input type="submit">
    <input type="reset">
</p>

多选框

1
2
3
4
5
6
7
8
9
<!--多选框
input type="checkbox"
-->
<p> 爱好：
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="chat" name="hobby">聊天
    <input type="checkbox" value="code" name="hobby" checked>码代码
    <input type="checkbox" value="game" name="hobby">游戏
</p>

按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--
按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 充值
-->
<p>按钮：
    <input type="button" name="btn1" value="点击变长">
    <input type="image" name="imgBtn1" src="../resources/images/pdx.jpg">
</p>

<p>
    <input type="submit">
    <input type="reset" value="清空表单">
</p>

下拉框（列表框）

1
2
3
4
5
6
7
8
9
10
<!--下拉框，列表框
-->
<p>国家：
    <select name="countries">
        <option value="china">中国</option>
        <option value="eth" selected>瑞士ETH</option>
        <option value="us">美国</option>
        <option value="dg">德国</option>
    </select>
</p>

文本域

1
2
3
<p>反馈 <br>
    <textarea name="textarea"  cols="30" rows="10" placeholder="请输入反馈信息"></textarea>
</p>

文件域

1
2
3
4
<p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
</p>

搜索框及简单验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!--邮件验证-->
<p> 邮箱：
    <input type="email" name="email">
</p>

<!--url-->
<p> url:
    <input type="url" name="url">
</p>

<!--数字验证-->
<p> 数字：
    <input type="number" name="num" max="100" min="0" step="1">
</p>

<!--滑块-->
<p> 音量：
    <input type="range" name="voice" min="0" max="100">
</p>

<!--搜索框-->
<p> 搜索：
    <input type="search" name="search">
</p>

表单的应用

只读 readonly

1
<p>用户名：<input type="text" placeholder="请输入用户名" name="username" value="admin" readonly></p>

禁用 disabled

1
<input type="radio" value="boy" name="sex" checked disabled/> 男

隐藏域 hidden

1
<p>密码：<input type="password" placeholder="请输入密码" name="pwd" hidden></p>

效果

增强鼠标可用性

1
2
3
4
<p>
    <label for="mark">你点我试试</label>
    <input type="text" id="mark">
</p>

表单初级验证

为什么要进行表单验证

  • 减轻服务器的压力
  • 保证数据的安全性

常用方式

  • placeholder :提示信息

    1
    <textarea name="textarea"  cols="30" rows="10" placeholder="请输入反馈信息"></textarea>

  • required：非空判断

    1
    <input type="search" name="search" required>

  • pattern：正则表达式

    • 如何查：常用正则表达式或点击这里

    • 使用：

      1
      2
      3
      4
      <!--自定义邮箱-->
      <p>自定义邮箱
          <input type="email" name="diyMail" pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
      </p>

总结