HTML基础知识详解与应用-优快云博客

本文链接：https://blog.youkuaiyun.com/Editplusplusplus/article/details/124653060

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>

【笔记：HTML基础】

文章目录

HTML

1. W3C标准

2. 网页基本信息

3. 网页基本标签

4. 图像标签

5. 链接标签

6.块元素和行内元素

7. 列表标签

8. 表格

9. 媒体元素

10. 页面结构分析

11. iframe内联框架

12. 表单语法

文本框

单选框

多选框

按钮

下拉框

文本域/文件域

验证

搜索框

表单的应用

13. 表单初级验证