前端基础 01、HTML5 入门

1. 初识 HTML

  • HyperTextMarkupLanguage（超文本标记语言）
    • 超文本包括：文字、图片、音频、视频、动画。
  • HTML5的优势
    • 世界知名浏览器厂商对HTML5的支持
    • 市场的需求
    • 跨平台
  • W3C标准
    • W3C
    • W3C标准包括
      • 结构化标准语言(HTML、XML)
      • 表现标准语言(CSS)
      • 行为标准语言(DOM、ECMAScript)
  • 常见IDE
    • 记事本
    • Dreamweaver
    • IDEA
    • WebStorm
    • ……
  • < body >、< /body>等成对的标签，分别叫做 开放标签和 闭合标签。
  • 单独呈现的标签（空元素），如< hr/ >，意为用/来关闭空元素。
  • html注释：< !–注释内容–>
<!--DOCTYPE：告诉浏览器使用什么规范（默认是html）-->
<!DOCTYPE html>
<!--语言 zh中文 en英文-->
<html lang="en">
<!-- head 标签代表网页头部-->
<head>
    <!-- meta 描述性标签，表示用来描述网站的一些信息-->
    <!-- 一般用来做 SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="HTML5,关键字">
    <meta name="description" content="学前端Html5">
    <!--网站标题-->
    <title>我的第一个网页</title>
</head>
<!-- body代表主体-->
<body>
Hello HTML5!
</body>
</html>

2. 网页基本标签

  • 标题标签
  • 段落标签
  • 换行标签
  • 水平线标签
  • 字体样式标签
  • 注释和特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>
<!--标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p>p换行1</p>
<p>p换行2</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
换行1 <br/>
换行2 <br/>
<!--换行标签比较紧凑，段落标签有明显段间距-->
<!--粗体 斜体-->
<h1>字体样式标签</h1>
粗体:<strong>I am CSS. </strong><br/>
斜体:<em>HTML5 and CSS3 </em><br/>
<!--特殊符号-->
空格:1&nbsp;2&nbsp;&nbsp;3&nbsp;&nbsp;&nbsp;4<br/>
空格:1 2 3 4<br/>
大于号:&gt;<br/>
小于号:&lt;<br/>
版权符号:&copy;<br/>
<!--特殊符号记忆：'&'开头;结尾，只要在idea中&敲出后就有提示-->
</body>
</html>

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

  • 图像标签
<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：在图片加载失败的时候，就会用文字代替
    title：鼠标悬停在图片上时，所显示的名字
    width height：图片的高和宽
-->
<img src="../resources/image/01.jpg" alt="风景图片" title="悬停文字" width="200" height="200">
</body>
</html>
  • 链接标签
    • href： 必填，表示要跳转到那个页面；
    • target：表示窗口在哪里打开；
      • _blank：在新标签中打开；
      • _self： 在自己的网页中打开；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!-- a 标签
    href：跳转页面的地址
    a 标签内文字：即显示的文字
    可以把图片放在a标签内，点击图片跳转网页
    target：表示在哪打开新网页
            _self：当前标签打开
            _blank：新的页面中打开
-->
<a href="https://www.baidu.com" target="_blank" title="悬停文字">点击跳转百度</a>
<br/>
<!-- 图片链接-->
<a href="003.图像标签.html">
    <img src="../resources/image/01.jpg" alt="风景图片" title="悬停文字" width="200" height="200">
</a>
<!--锚链接
    1.需要一个标记锚
    2.跳转到标记
    #页面内跳转
-->
<a name="top"></a>

<br/>
<!--可以在网址后添加#号跳到对应网站的对应位置-->
<a href="https://www.baidu.com#down">百度底部</a> <br/>
<!--功能性链接
    邮箱链接：mailto
    qq链接
-->
<a href="mailto:xxxxx@qq.com">点击联系我</a>
<a target="_blank"
   href="http://wpa.qq.com/msgrd?v=xxx&uin=&site=qq&menu=yes"/>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=888888&site=qq&menu=yes">
    <img src="http://wpa.qq.com/pa?p=2:88888888:52" alt="有事您Q我" title="有事您Q我"/>
</a>
<img src="../resources/image/01.jpg" alt="风景图片" title="悬停文字" width="200" height="2000">
<a href="#top">回到顶部</a>
</body>
</html>
  • 行内元素和块元素

    • 块元素：无论内容多少，该元素独占一行。

      <p></p><hr/> <h1>...<h6>

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

      <a><strong><em>

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

1. 列表

什么是列表

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

列表的分类

  • 无序列表
  • 有序列表
  • 自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--
    有序列表
    应用范围:试卷,问答……
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>前端</li>
    <li>运维</li>
    <li>C/C++</li>
    <li>Android</li>
</ol>
<hr/>
<!--
    无序列表
    应用范围:导航,侧边栏……
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>前端</li>
    <li>运维</li>
    <li>C/C++</li>
    <li>Android</li>
</ul>
<hr/>
<!--
    自定义列表
    dl:标签
    dt:列表名称
    dd:列表内容
    应用：网站底部
-->
<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>前端</dd>
    <dd>运维</dd>
    <dd>C/C++</dd>
    <dd>Android</dd>
</dl>
</body>
</html>
2. 表格

为什么使用表格：

  • 简单通用
  • 结构稳定

表格的基本结构：

  • 单元格
  • 行
  • 列
  • 跨行
  • 跨列
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--
    表格：table
    行：tr
    列：td
    跨列：colspan
    跨行：rowspan
    跨行或跨列后，需要将多余的行、列删除
-->
<table border="1px">
    <tr><!--colspan 跨列-->
        <td colspan="4">1-1</td>
    </tr>
    <tr><!--rowspan 跨行-->
        <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>
</body>
</html>
3. 媒体元素

视频和音频

  • 视频：video
  • 音频：audio
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>媒体元素的学习</title>
</head>
<body>
<!--
    视频
    src：资源路径
    controls：控制面板
    autoplay：自动播放
-->
<video src="../resources/video/002.mp4" controls autoplay width="300"></video>
<!--音频-->
<audio src="../resources/video/001.mp3" controls autoplay></audio>
</body>
</html>

页面结构

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

iframe 内联框架

  • ifram 标签，必须要有 src 属性即引用页面的地址。
  • 给标签加上 name 属性后，可以做 a 标签的 target 属性，即在内联窗口中打开链接。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe 内联框架</title>
</head>
<body>
<!--
  iframe 内联框架
  src：地址
  w-h：宽度、高度
  name：框架标识名
-->
<iframe src="地址"></iframe>
<hr/>
<iframe src="" name="mainFrame" width="300px" height="300"></iframe>
<!--通过 target 将链接内容载入到 iframe 内联框架-->
<a href="001.第一个网页.html" target="mainFrame">点击跳转</a>
</body>
</html>

5. 表单及表单应用

标签 说明
input 大部分表单元素对应的标签有 text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text，可以提交用户名、密码等
select 下拉选择框
textarea 文本域
  • from 标签，action 属性，为所提交的目的地址，method 选择提交方式，可以选择使用 post 或者 get 方式提交。
    • get 效率高，但在 url 中可以看到提交的内容，不安全，不能提交大文件；
    • post 比较安全，且可以提交大文件。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!--
    form表单
    action：表单提交的动作，可以是交给一个网址，也可以是交给一个请求处理地址
    method：post / get 请求方式
        get方式提交：我们可以在 url 中看到我们提交的信息，不安全，高效
        post：比较安全，可以传输大文件
-->
<form action="001.第一个网页.html" method="post">
    <!--文本输入框:input type="text" -->
    <p>名字：<input type="text" name="username"></p>
    <!--密码框:input type="pwd" -->
    <p>密码：<input type="password" name="password"></p>
    <p>
        <input type="submit">   <!--提交-->
        <input type="reset">    <!--重置-->
    </p>
</form>
</body>
</html>
  • get 方式提交

文本框和单选框

属性 说明
type 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text。
name 指定表单元素的名称（提交时所对应的 key）。
value 元素的初始值，radio 必须提供。
size 指定表单元素的初始宽度。当 type 为 text 或者 password 时，以字符为单位；其他 type 以像素为单位。
maxlength type 为 text 或者 password 时，输入的最大字符数。
check type 为 radio 或者 checkbox 时，指定按钮是否被选中。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!--
    form 表单
    action：表单提交的动作，可以是交给一个网址，也可以是交给一个请求处理地址
    method：post / get 请求方式
        get 方式提交：我们可以在ur1中看到我们提交的信息，不安全，高效
        post：比较安全，可以传输大文件
-->
<form action="001.第一个网页.html" method="post">
    <!--
        文本输入框：input type="text"
        value="前端"：默认初始值
        maxlength="8"：最长能写几个字符
        size="30"：文本框的长度
    -->
    <p>名字：<input type="text" name="username" value="name" maxlength="8" size="20"></p>
    <!--
        密码框：input type="password"
    -->
    <p>密码：<input type="password" name="password"></p>
    <!--
        单选框标签：input type="radio"
        value：单选框的值
        name：表示组
    -->
    <p>性别:
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>
    <p>
        <input type="submit">   <!--提交-->
        <input type="reset">    <!--重置-->
    </p>
</form>
</body>
</html>

按钮和多选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!--
    form 表单
    action：表单提交的动作，可以是交给一个网址，也可以是交给一个请求处理地址
    method：post / get 请求方式
        get 方式提交：我们可以在ur1中看到我们提交的信息，不安全，高效
        post：比较安全，可以传输大文件
-->
<form action="001.第一个网页.html" method="get">
    <!--
        文本输入框：input type="text"
        value="前端"：默认初始值
        maxlength="8"：最长能写几个字符
        size="30"：文本框的长度
    -->
    <p>名字：<input type="text" name="username" value="name" maxlength="8" size="20"></p>
    <!--
        密码框：input type="password"
    -->
    <p>密码：<input type="password" name="password"></p>
    <!--
        单选框标签：input type="radio"
        value：单选框的值
        name：表示组
    -->
    <p>性别:
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>
    <!--
       多选框:input type="checkbox"
   -->
    <p>爱好:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>
    <!--
        按钮:
        input type="button"：普通按钮
        input type="image"：图像按钮（可以提交页面）
        input type="submit"：提交按钮
        input type="reset"：重置按钮
    -->
    <p>
        <input type="button" name="btn" value="按钮测试">
        <input type="image" src="../resources/image/01.jpg" width="200px" height="200px">
    </p>
    <p>
        <input type="submit">   <!--提交-->
        <input type="reset" value="清空表单">    <!--重置-->
    </p>
</form>
</body>
</html>

列表文本框和文件域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!--
    form 表单
    action：表单提交的动作，可以是交给一个网址，也可以是交给一个请求处理地址
    method：post / get 请求方式
        get 方式提交：我们可以在ur1中看到我们提交的信息，不安全，高效
        post：比较安全，可以传输大文件
-->
<form action="001.第一个网页.html" method="get">
    <!--
        文本输入框：input type="text"
        value="前端"：默认初始值
        maxlength="8"：最长能写几个字符
        size="30"：文本框的长度
    -->
    <p>名字：<input type="text" name="username" value="name" maxlength="8" size="20"></p>
    <!--
        密码框：input type="password"
    -->
    <p>密码：<input type="password" name="password"></p>
    <!--
        单选框标签：input type="radio"
        value：单选框的值
        name：表示组
        checked：默认选择
    -->
    <p>性别:
        <input type="radio" value="boy" name="sex" checked>男
        <input type="radio" value="girl" name="sex">女
    </p>
    <!--
       多选框：input type="checkbox"
       checked：默认选择
    -->
    <p>爱好:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>
    <!--
        按钮:
        input type="button"：普通按钮
        input type="image"：图像按钮（可以提交页面）
        input type="submit"：提交按钮
        input type="reset"：重置按钮
    -->
    <p>
        <input type="button" name="btn" value="按钮测试">
<!--        <input type="image" src="../resources/image/01.jpg" width="200px" height="200px">-->
    </p>
    <!--
       下拉框,列表框
       selected：默认选择
    -->
    <p>国家:
        <select name="列表名称">
            <option value="China" selected>中国</option>
            <option value="USA">美国</option>
            <option value="Russia">俄罗斯</option>
            <option value="UK">英国</option>
            <option value="France">法国</option>
        </select>
    </p>
    <!--
        文本域
        textarea name="textarea"
        cols="40"：列
        rows="10"：行
    -->
    <p>反馈:
        <textarea name="textarea" cols="40" rows="10">文本内容</textarea>
    </p>
    <!--
        文件域
        input type="file"
        name="files"
    -->
    <p>
        <input type="file" name="files">
        <input type="button" name="upload" value="上传">
    </p>
    <p>
        <input type="submit">   <!--提交-->
        <input type="reset" value="清空表单">    <!--重置-->
    </p>
</form>
</body>
</html>

搜索框滑块和简单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!--
    form 表单
    action：表单提交的动作，可以是交给一个网址，也可以是交给一个请求处理地址
    method：post / get 请求方式
        get 方式提交：我们可以在ur1中看到我们提交的信息，不安全，高效
        post：比较安全，可以传输大文件
-->
<form action="001.第一个网页.html" method="get">
    <!--
        文本输入框：input type="text"
        value="前端"：默认初始值
        maxlength="8"：最长能写几个字符
        size="30"：文本框的长度
    -->
    <p>名字：<input type="text" name="username" value="name" maxlength="8" size="20"></p>
    <!--
        密码框：input type="password"
    -->
    <p>密码：<input type="password" name="password"></p>
    <!--
        单选框标签：input type="radio"
        value：单选框的值
        name：表示组
        checked：默认选择
    -->
    <p>性别:
        <input type="radio" value="boy" name="sex" checked>男
        <input type="radio" value="girl" name="sex">女
    </p>
    <!--
       多选框：input type="checkbox"
       checked：默认选择
    -->
    <p>爱好:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>
    <!--
        按钮:
        input type="button"：普通按钮
        input type="image"：图像按钮（可以提交页面）
        input type="submit"：提交按钮
        input type="reset"：重置按钮
    -->
    <p>
        <input type="button" name="btn" value="按钮测试">
        <!--        <input type="image" src="../resources/image/01.jpg" width="200px" height="200px">-->
    </p>
    <!--
       下拉框,列表框
       selected：默认选择
    -->
    <p>国家:
        <select name="列表名称">
            <option value="China" selected>中国</option>
            <option value="USA">美国</option>
            <option value="Russia">俄罗斯</option>
            <option value="UK">英国</option>
            <option value="France">法国</option>
        </select>
    </p>
    <!--
        文本域
        textarea name="textarea"
        cols="40"：列
        rows="10"：行
    -->
    <p>反馈:
        <textarea name="textarea" cols="40" rows="10">文本内容</textarea>
    </p>
    <!--
        文件域
        input type="file"
        name="files"
    -->
    <p>
        <input type="file" name="files">
        <input type="button" name="upload" value="上传">
    </p>
    <!--
       type="email"：（邮件）会简单验证是否是邮箱地址
       type="url"：（url）会简单验证是否是网络地址
       type="number"：（number）数字验证
       type="range"：滑块
       type="search"：搜索
   -->
    <p>
        邮箱：<input type="email" name="email">
        url：<input type="url">
    </p>
    <!--
        数字验证
        max：最大数量
        min：最小数量
        step（步长）：每次点击增加或减少的数量
    -->
    <p>
        商品数量：<input type="number" name="数量" max="100" min="1" step="1">
    </p>
    <!--滑块-->
    <p>
        音量：<input type="range" min="0" max="100" name="voice" step="2">
    </p>
    <!--搜索框-->
    <p>
        搜索：<input type="search">
    </p>
    <p>
        <input type="submit">   <!--提交-->
        <input type="reset" value="清空表单">    <!--重置-->
    </p>
</form>
</body>
</html>

表单的应用

属性 说明
readonly 只读，不可更改
disable 禁用
hidden 隐藏，虽然不可见但是会提交
id 标识符，可以配合 label 的 for 属性，增加鼠标的可用性
placehoder text 文字域等输入框内的提示信息
required 不能为空
patten 正则表达式验证 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!--
    form 表单
    action：表单提交的动作，可以是交给一个网址，也可以是交给一个请求处理地址
    method：post / get 请求方式
        get 方式提交：我们可以在ur1中看到我们提交的信息，不安全，高效
        post：比较安全，可以传输大文件
-->
<form action="001.第一个网页.html" method="get">
    <!--
        文本输入框：input type="text"
        value="前端"：默认初始值
        maxlength="8"：最长能写几个字符
        size="30"：文本框的长度
        readonly：设置只读（不能修改内容）
        hidden：隐藏
        disabled：禁用
    -->
    <p>名字：<input type="text" name="username" value="name" maxlength="8" size="20" readonly></p>
    <!--
        密码框：input type="password"
    -->
    <p>密码：<input type="password" name="password" hidden value="123456"></p>
    <!--
        单选框标签：input type="radio"
        value：单选框的值
        name：表示组
        checked：默认选择
    -->
    <p>性别:
        <input type="radio" value="boy" name="sex" checked>男
        <input type="radio" value="girl" name="sex" disabled>女
    </p>
    <!--
       多选框：input type="checkbox"
       checked：默认选择
    -->
    <p>爱好:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>
    <!--
        按钮:
        input type="button"：普通按钮
        input type="image"：图像按钮（可以提交页面）
        input type="submit"：提交按钮
        input type="reset"：重置按钮
    -->
    <p>
        <input type="button" name="btn" value="按钮测试">
        <!--        <input type="image" src="../resources/image/01.jpg" width="200px" height="200px">-->
    </p>
    <!--
       下拉框,列表框
       selected：默认选择
    -->
    <p>国家:
        <select name="列表名称">
            <option value="China" selected>中国</option>
            <option value="USA">美国</option>
            <option value="Russia">俄罗斯</option>
            <option value="UK">英国</option>
            <option value="France">法国</option>
        </select>
    </p>
    <!--
        文本域
        textarea name="textarea"
        cols="40"：列
        rows="10"：行
    -->
    <p>反馈:
        <textarea name="textarea" cols="40" rows="10">文本内容</textarea>
    </p>
    <!--
        文件域
        input type="file"
        name="files"
    -->
    <p>
        <input type="file" name="files">
        <input type="button" name="upload" value="上传">
    </p>
    <!--
       type="email"：（邮件）会简单验证是否是邮箱地址
       type="url"：（url）会简单验证是否是网络地址
       type="number"：（number）数字验证
       type="range"：滑块
       type="search"：搜索
   -->
    <p>
        邮箱：<input type="email" name="email">
        url：<input type="url">
    </p>
    <!--
        数字验证
        max：最大数量
        min：最小数量
        step（步长）：每次点击增加或减少的数量
    -->
    <p>
        商品数量：<input type="number" name="数量" max="100" min="1" step="1">
    </p>
    <!--滑块-->
    <p>
        音量：<input type="range" min="0" max="100" name="voice" step="2">
    </p>
    <!--搜索框-->
    <p>
        搜索：<input type="search">
    </p>
    <!--增强鼠标可用性-->
    <p>
        <label for="mark">点击标签可选择文本框：</label>
        <input type="text" id="mark">
    </p>
    <p>
        <input type="submit" disabled>   <!--提交-->
        <input type="reset" value="清空表单">    <!--重置-->
    </p>
</form>
</body>
</html>

6. 表单初级验证

  • 常用方式
    • placeholder：提示信息
    • required：非空判断
    • pattern：正则表达式
<!--正则表达式-->
<p>自定义邮箱:
    <input type="text" name="myEmail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>

7. HTML5 总结

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,193评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,306评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,130评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,110评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,118评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,085评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,007评论 3赞 417
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,844评论 0赞 273
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,283评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,508评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,395评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,985评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,630评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,797评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,653评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,553评论 2赞 352

推荐阅读更多精彩内容