【笔记：HTML基础】

HTML

1. W3C标准

W3C

• World Wide Web Consortium（万维网联盟）
• 成立于1994年，Web技术领域最权威和具影响力的中立性技术标准机构
• http://www.w3.org/
• http://www.chinaw3c.org/

W3C标准包括

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

2. 网页基本信息

    <!-- DOCTYPE :告诉浏览器，我们要使用什么规范-->

    <!DOCTYPE html>
    <html lang="en">

    <!-- head：代表网页头部 -->

    <head>

        <!-- meta：描述性标签，用来描述网站的一些信息 -->
        <!-- meta一般来做SEO-->
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- title：网页标题 -->
        <title>标题</title>
    </head>

    <!-- body：代表网页主题 -->

    <body>
        Hello World
    </body>

    </html>

3. 网页基本标签

<body>

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


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

    <!-- 段落标签（分段） -->
    <p>一二三四五</p>
    <p>六七八九十</p>
    <p>12345</p>
    <p>678910</p>


    <!-- 换行标签 -->
    <br>一二三四五
    <br>六七八九十
    <br>12345
    <br>678910

    <!-- 粗体、斜体 -->
    <h1>字体样式标签</h1>
    <strong>粗体</strong>
    <em>斜体</em>

    <br>
    <!-- 特殊符号 (&+xx+;) -->
    空 格（直接输入空格，无论多少只显示一个）
    空 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 格(多个空格用 &nbsp; )

    <br>
    &gt;
    <br>
    &lt;
    <br>
    &copy;

</body>

4. 图像标签

<body>
    <!-- img -->
    <img src="../HTML/resource/image/猫猫.jpg" alt="猫猫" title="悬停文字" height="300" width="300">

</body>

5. 链接标签

• 文本超链接
• 图像超链接

<body>

    <a id="top">顶部</a>
    <!-- -a标签：
    href :必填，表示跳转到哪个页面
    target：表示窗口在哪里打开
        _blank: 在新标签内打开
        _self:在自己的网页内打开 -->
    <a href="基本标签.html">点击跳转到基本标签</a>
    
    <a href="https://www.baidu.com">点击跳转到百度</a>
    
    <br>
    <a href="图片标签.html" target="_blank">
        <img src="../HTML/resource/image/猫猫.jpg" alt="猫猫" title="跳转到图片标签" height="300" width="300">
    </a>

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

    <!-- 功能性链接 
    1.邮件链接：mailto-->
    <a href="mailto:123456789@gmail.com" target="_parent">点击发送邮件</a>

</body>
</html>

6.块元素和行内元素

块元素

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

行内元素

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

7. 列表标签

<body>
    <!-- 有序列表 -->
    <ol>
        <li>java</li>
        <li>python</li>
        <li>c/c++</li>
    </ol>

    <hr>
    <!-- 无序列表 -->
    <ul>
        <li>java</li>
        <li>python</li>
        <li>c/c++</li>
    </ul>

    <hr>
    <!-- 自定义列表 -->
    <dl>
        <!-- dt列表名称 -->
        <dt>自定义</dt>

        <dd>java</dd>
        <dd>python</dd>
        <dd>c/c++</dd>
    </dl>

</body>

8. 表格

简单通用、结构稳定

• 基本结构
  • 单元格
  • 行
  • 列
  • 跨行
  • 跨列

<body>

    <!-- 表格table
        表头 th
        行 tr
        列 td 
        border:边框-->
    <table border="1px">
        <th>表格</th>

        <tr>
            <!-- colspan 跨列 -->
            <td colspan="2">1-1</td>
            <td>1-2</td>
        </tr>

        <tr>
            <!-- rowspan 跨行 -->
            <td rowspan="2">2-1</td>
            <td>2-2</td>
            <td>2-3</td>
        </tr>

        <tr>
            <td>3-1</td>
            <td>3-2</td>
        </tr>

    </table>

</body>

9. 媒体元素

视频元素：video

音频元素：audio

<body>
    <!-- 音频、视频 -->
    <!-- 
        src:路径
        controls:控制条
        autoplay:自动播放
     -->
    <video src="" controls autoplay></video>
    <audio src="" controls autoplay></audio>
</body>

10. 页面结构分析

11. iframe内联框架

<body>

    <!-- iframe内联框架 -->
    <!-- 
        src：地址
        w-h：宽度高度
    -->
    <iframe src="" name="myBlog" frameborder="0" width=300" height="300"></iframe>

    <a href="https://blog.youkuaiyun.com/Editplusplusplus?type=blog" target="myBlog">点击跳转到我的博客</a>

</body>

12. 表单语法

<body>

    <h1>注册</h1>

    <!-- 表单form -->
    <!-- 
        action:表单提交的位置，可以是网站、也可以是个请求处理地址
        method:post,get 提交方式
            get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
            post方式提交：比较安全，可传输大文件
    -->
    <form action="列表.html" method="post">

        <!-- 文本输入框 type="text" -->
        <p>名字：<input type="text" name="username"></p>
        <!-- 密码框 type="password" -->
        <p>密码：<input type="password" name="password"></p>

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

    </form>
</body>

表单元素格式

文本框

 <!-- 文本输入框 type="text" -->
<!-- 
value="":默认初始值
maxlength：最长能写几个字符
size：文本框的长度
-->
<p>名字：
    <input type="text" name="username" value="默认初始值" maxlength="8" size="30">
</p>
<!-- 密码框 type="password" -->
<p>
    密码：<input type="password" name="password">
</p>

单选框

<!-- radio 单选框 -->
<!-- 
value:单选框的值
name：组（name一样表示一个组）
-->
<!-- checked：默认选中 -->
<p>性别：
    <input type="radio" value="boy" name="sex" checked>男
    <input type="radio" value="girl" name=sex">女
</p>

多选框

<!-- 多选框 -->
<p>爱好：
    <input type="checkbox" name="hobby" value="sleep">睡觉
    <!-- checked:默认选中 -->
    <input type="checkbox" name="hobby" value="code" checked>写代码
    <input type="checkbox" name="hobby" value="chat">聊天
    <input type="checkbox" name="hobby" value="game">游戏
</p>

按钮

<!-- 按钮 -->
<p>按钮：
    <!-- 普通按钮 -->
    <input type="button" name="button" value="点我点我">
    <!-- 图片按钮 -->
    <input type="image" src="../HTML/resource/image/猫猫.jpg">
</p>

下拉框

<!-- 下拉框 -->
<p>国家：
    <select name="列表名">
        <option value="China">中国</option>
        <option value="Us">美国</option>
        <!-- selected：默认选择 -->
        <option value="Eth" selected>瑞士</option>
        <option value="Indian">印度</option>
    </select>
</p>

文本域/文件域

<!-- 文本域 -->
<p>反馈：
    <textarea name="title" cols="50" rows="10">文本内容</textarea>
</p>

<!-- 文件域 -->
<p>
    <input type="file" name="files">
    <input type="button" name="upload" value="上传">
</p>

验证

• 邮件验证
• url验证
• 数字验证
• 滑块验证

<!-- 验证 -->
<!-- 邮件验证 -->
<p>邮箱：
    <input type="email" name="email">
</p>

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

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

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

搜索框

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

表单的应用

• 隐藏域：hidden
• 只读：readonly
• 禁用：disable

13. 表单初级验证

常用方式：

• placeholder（提示信息）

<p>名字：<input type="text" name="username" placeholder="请输入用户名" maxlength="8" size="30"></p>

• required（非空判断）

<p>名字：<input type="text" name="username" placeholder="请输入用户名" maxlength="8" size="30" required></p>
        <!-- 密码框 type="password" -->
        <p>密码：<input type="password" name="password"></p>

• pattern（正则表达式）

常用正则表达式：https://www.jb51.net/tools/regex.htm

        <p>自定义邮箱：
            <input type="text" name="diymail" pattern="	/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/">
        </p>