时间戳

首页 > 技术文章 > Html学习

Html学习

-SuPer 2021-09-21 16:05 原文

1 W3C标准（万维网联盟）

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

  • 表现标准语言（CSS）

  • 行为标准（DOM、ECMAScript）

2 HTML基本结构

<html>
    <head>
        <title>我的第一个网页</title>  <!--head标签：网页头部-->
    </head>
    <body>
        我的第一个网页    <!--body标签：主体部分-->
    </body>
</html>

注释符：

<!-- -->

3 网页标签

3.1 标题标签

    <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>

3.2 段落标签

    <p>Hello World</p>
    <p>Hello</p>
    <p>World</p>

3.3 换行标签

    Hello World!<br/>
    Hello<br/>
    World<br/>

3.4 水平线标签

    水平线标签<hr/>
    Hello<hr/>
    World<hr/>

3.5 字体样式标签

    <strong>粗体标签</strong><br/>
    <em>斜体标签</em><br/>

3.6 特殊符号

    空格写法：空&nbsp;&nbsp;格<br/>
    小于号：&lt;<br/>

3.7 图像标签

	格式:<img src="path" alt="text" title="text" width="x" height="y"/>
	<!--src:图像地址 alt：图像的替代文字 title：鼠标悬停提示文字-->
	<img src="resources\images\纸飞机.png" alt="纸飞机" title="text" width="x" height="y"/>

3.8 链接标签

3.8.1 网页链接

<body>
    <!--
        a标签
        href：必填，跳转至那个页面
        target：表示窗口在那里打开 （_blank：在新标签中打开）
    -->
    <a href="第一个网页.html">点击跳转页面></a>
    <a href="https://www.baidu.com">点击跳转到百度页面></a>
    <!--也可以点击图片跳转-->
    <a href="第一个网页.html" target="_blank">
        <img src="resources\images\纸飞机.png" alt="纸飞机" title="text" width="x" height="y"/>
    </a>
</body>

3.8.2 锚链接

​ 可用于快速回到顶部或者底部，用作书签目录等等

	<!--使用name作为标记-->
    <a name="top"></a>
    
    
    
    <a href="#top">点击回到顶部</a>

3.8.3 邮件链接

    <!--邮件链接:mailto:-->
    <a href="mailto:1837293264@qq.com">点击联系我</a>

3.9 列表标签

3.9.1 有序列表

<ol>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
    </ol>

3.9.2 无序列表

<ul>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
    </ul>

3.9.3自定义列表

    <!--自定义列表
    dl：标签
    dt：列表名称
    dd：列表内容
    -->
    <dl>
        <dt>课程</dt>

        <dd>数学分析</dd>
        <dd>高等代数</dd>
        <dd>数据结构</dd>

        <dt>省份</dt>
        <dd>广东</dd>
        <dd>北京</dd>
        <dd>上海</dd>
    </dl>

3.10 表格标签

​ 基本结构

  • 单元格

  • 行

  • 列

  • 跨行

  • 跨列

    <body>
    <!--表格table
        行 tr
        列 td
        跨行 rowspan
        跨列 colspon
    -->
    <table border="1px">
        <tr>
            <td colspan="3" align="center">学生成绩</td>
        </tr>

        <tr>
            <td rowspan="2">朱小七</td>
            <td>高等数学</td>
            <td>100</td>
        </tr>

        <tr>
            <td>软件工程</td>
            <td>100</td>
        </tr>

        <tr>
            <td rowspan="2">朱小二</td>
            <td>高等数学</td>
            <td>100</td>
        </tr>

        <tr>
            <td>软件工程</td>
            <td>100</td>
        </tr>
    </table>
</body>

4 行内元素与块元素

​ 行内元素

  • 行内元素可以在一行内排在一起

  • 例如<strong> <em> <a>等等

​ 块元素

  • 无论内容多少，独占一行
  • 例如<p> <h1> <h2>等等

5 媒体元素

​ 视频元素与音频元素：

<body>
    <!--
        音频与视频
        src：资源路径
        controls：控制条
        autoplay：自动播放
    -->
    <!--<video src="resources\video\精彩瞬间.mp4" controls autoplay width="1400px" height="900px"></video>-->
    <audio src="resources\audio\曾经我也想过一了百了.mp3" controls></audio> 
</body>

6 页面结构

元素名 描述
header 标题头部区域的内容（用于页面或页面中的一块区域）
footer 标记脚步区域的内容（用于整个页面或页面中的一块区域）
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用（常用于侧边栏）
nav 导航栏辅助内容 
<body>
    <header>网页头部</header>

    <section>网页主体</section>

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

6.1 内联框架

​ iframe内联框架

<body>
    <!--
        iframe内联
        src：引用页面地址
        name：框架标识名
    -->
    <!--<iframe src="https://www.bilibili.com/video/BV1x4411V75C?p=11&spm_id_from=pageDriver" width="1400px" height="900px"></iframe>-->
    <iframe src="" name="hello" width="1400px" height="900px"></iframe>

    <a href="https://www.bilibili.com/video/BV1x4411V75C?p=11&spm_id_from=pageDriver" target="hello">点击跳转</a>
</body>

6.2 表单

6.2.1 表单元素

属性 说明
type 指定元素的类型。text、password、checkbox等等，默认为txet
name 指定表单元素的名称
value 元素的初始值。type为radio时必须指定一个值
size 指定表单元素的初始宽度
maxlength type为text或password时，输入的最大字符数
checked type为radio或checkbox时，指定按钮是否被选中 
<body>
    <!--
        表单：
        method：规定如何发送表单数据，一般为get/post
        action：表示向何处发送表单数据
    -->
    <form action="表格.html" method="POST">
        
        <!--
            文本输入框：
            input type="text"
            value：默认初始值
            size：文本框的长度
            placeholder：提示
        -->
        <p>名字：<input type="text" name="username" placeholder="请输入用户名"></p>

        <!--
            密码框：
            input type="password"
        -->
        <p>密码：<input type="password" name="pwd"></p>
        
        <!--
            单选框：
            input type="radio"
            value：单选框的值
            name：表示分组
            checked：默认
        -->
        <p>
            性别：
            <input type="radio" value="boy" name="sex" checked/>男
            <input type="radio" value="gril" name="sex"/>女
        </p>
        
        <!--
            多选框：
            input type="checkbox"
        -->
        <p>
            爱好：
            <input type="checkbox" value="sport" name="hobby">运动
            <input type="checkbox" value="game" name="hobby">游戏
            <input type="checkbox" value="dance" name="hobby">跳舞
            <input type="checkbox" value="sing" name="hobby">唱歌
        </p>

        <!--
            按钮：
            input type="button" 普通按钮
            input type="submit" 提交按钮
            input type="reset" 重置按钮
            input type="image" 图片按钮
        -->
        <p>
            <input type="button" name="btn1" value="点击">
            <input type="image" src="../resources\images\纸飞机.png">
        </p>

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

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

        <!--
            url：
            input type="url"
        -->
        <p>
            网址：<input type="url" name="url">
        </p>

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

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

        <!--
            下拉框：
            select name=""
        -->
        <p>
            国家：
            <select name="列表名称">
                <option value="China" checked>中国</option>
                <option value="usa">美国</option>
                <option value="britain">英国</option>
                <option value="France">法国</option>
            </select>
        </p>

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

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

6.2.2 表单应用

  • 隐藏
  • 只读
  • 禁用
<body>
    <form action="表格.html" method="POST">
        <!--
        只读：
        readonly
        -->
        <p>名字：<input type="text" name="username" value="admin" readonly></p>
        
        <!--
            隐藏：
            hidden
        -->
        <p>密码：<input type="password" name="pwd" hidden></p>

        <!--
            禁用：
            disabled
        -->
        <p>
            性别：
            <input type="radio" value="boy" name="sex" checked/>男
            <input type="radio" value="gril" name="sex" disabled/>女
        </p>

        <!--
            增强鼠标使用性，点击文字跳到框
            label for="mark"
        -->
        <p>
            <label for="mark">点击</label>
            <input type="text" id="mark">
        </p>
    </form>
</body>

6.2.3 表单初级验证

  • 提示信息：placeholder

  • 非空判断：required

  • 正则表达式：pattern

    <body>
    <form action="表格.html" method="POST">
        <!--
            placeholder：提示信息
            required：非空判断
        -->
        <p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>
        <p>密码：<input type="password" name="pwd"></p>
        
        <!--
            正则表达式：
            pattern
        -->
        <p>
            自定义邮箱：
            <input type="text" name="diyemail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/">
        </p>

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

推荐阅读