百木园-与人分享，
就是让自己快乐。
当前位置：百木园 > 野生技术 > 正文

HTML入门笔记

2022-03-08 分类：野生技术 阅读(284) 评论(0)

HTML

@author：伏月廿柒

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

W3C标准

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

表现标准语言（CSS）

行为标准（DOM、ECMAScript）

网页基本信息

<!DOCTYPE html>
 <!-- DOCTYPE：告诉浏览器，该页面使用什么规范 -->

<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>Demo01</title>
</head>

<!-- body标签代表网页主体 -->
<body>
    Hello,World!
</body>

</html>

网页基本标签

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <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>Demo02</title>
</head>
<body>

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

    <!-- 段落标签 -->
    <p>第一段  ……</p>
    <p>第二段  ……</p>
    <p>第三段  ……</p>
    <p>第四段  ……</p>

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

    <!-- 换行标签 -->
    第一行  ……<br/>
    第二行  ……<br/>
    第三行  ……<br/>
    第四行  ……<br/>

    <!-- 粗体，斜体 -->
    <h1>字体样式标签</h1>
    粗体：<strong>这是一段文字</strong>
    <br/>
    斜体：<em>这是一段文字</em>
    <br/>

    <!-- 特殊符号 -->
    空    格
    <br/>
    空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
    <br/>
    大于：&gt; 
    <br/>
    小于：&lt;
    <br/>
    版权号：&copy;

</body>
</html>

图像标签

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <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>Demo03</title>
</head>
<body>
     
    <!-- alt：图片名字  title：悬停文字 -->
    <img src=\"../image/1920x1080.jpg\" alt=\"1920x1080.jpg\" title=\"悬停文字\" width=\"300\" height=\"300\">

    <!-- 锚链接
         页面之间跳转标记
    -->
    <p>
        <a href=\"Demo04.html#down\">Demo04_down</a>
    </p>

</body>
</html>

链接标签

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <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>Demo04</title>
</head>
<body>
    
    <!-- name标记 -->
    <p>
        <a name=\"top\">顶部</a>
    </p>

    <!-- a标签 -->
    <!-- href：必填，指定页面地址 -->
    <!-- target：表示窗口在哪里打开 
         _blank：在新窗口打开
         ——self：在本窗口打开
    -->
    <a href=\"Demo01.html\" target=\"_blank\">Demo01</a>
    <br/>
    <a href=\"https://www.baidu.com\" target=\"_self\">百度</a>
    <br/>
    <a href=\"Demo02.html\">
        <img src=\"../image/1920x1080.jpg\" alt=\"1920x1080.jpg\" title=\"Demo02\" width=\"300\" height=\"200\">
    </a>

    <p>
        <img src=\"../image/1920x1080.jpg\" alt=\"1920x1080.jpg\" title=\"Demo02\" width=\"1920\" height=\"1080\">
    </p>

    <p>
        <a name=\"down\">底部</a>
    </p>

    <!-- 锚链接 
         通过#跳转到标记
    -->
    <a href=\"#top\">回到顶部</a>

    <!-- 功能性链接
         邮件链接：mailto
         QQ链接：QQ推广
    -->
    <a href=\"mailto:123456@mail.com\">联系邮箱</a>

</body>
</html>

列表标签

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <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>Demo05</title>
</head>
<body>
    
    <!-- 有序列表 -->
    <ol>
        <li>Java</li>
        <li>Python</li>
        <li>运维</li>
        <li>前端</li>
    </ol>

    <!-- 无序列表 -->
    <!-- 应用范围：导航、侧边栏 -->
    <ul>
        <li>Java</li>
        <li>Python</li>
        <li>运维</li>
        <li>前端</li>
    </ul>

    <!-- 自定义列表 -->
    <!-- 
        dl：标签
        dt：列表名称
        dd：列表内容
     -->
     <!-- 应用范围：网页底部导航 -->
    <dl>
        <dt>学科</dt>

        <dd>Java</dd>
        <dd>Python</dd>
        <dd>C/C++</dd>

        <dt>地区</dt>
        
        <dd>西安</dd>
        <dd>重庆</dd>
        <dd>新疆</dd>
    </dl>

</body>
</html>

表格标签

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <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>Demo06</title>
</head>
<body>
    
    <!-- 表格标签 table -->
    <!-- 
        行  tr
        列  td
     -->
    <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>

视频和音频

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <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>Demo07</title>
</head>
<body>
    
    <!-- 音频和视频 -->
    <!-- 
        src：资源地址
        controls：控制条
        autoplay：自动播放
     -->
    <video src=\"\" controls autoplay></video>

    <audio src=\"\" controls autoplay></audio>

</body>
</html>

页面结构分析

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <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>Demo08</title>
</head>
<body>
    
    <header> 
        <h2>网页头部</h2> 
    </header>

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

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

</body>
</html>

iframe内联框架

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <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>Demo09</title>
</head>
<body>

    <!-- B站示例 -->
    <!-- <iframe src=\"//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11\" 
     scrolling=\"no\" border=\"0\" frameborder=\"no\" framespacing=\"0\" allowfullscreen=\"true\"> 
    </iframe> -->
    
    <!-- iframe 内联框架-->
    <!-- 
        src：地址
        w-h：宽高
     -->
    <iframe src=\"https://www.bilibili.com\" name=\"hello\" frameborder=\"10\" width=\"1000px\" height=\"800px\"></iframe>
    
    <!-- a标签可指定iframe打开页面 -->
    <a href=\"https://www.csdn.net\" target=\"hello\">CSDN</a>

</body>
</html>

表单post和get提交

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <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>Demo10</title>
</head>
<body>
    
    <h1>注册</h1>

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

        <!-- 文本输入框：input type=\"text\" -->
        <!-- 
            value：默认初始值
            maxlength：最大字数长度
            size：文本框长度
            readonly：只读
            hidden：隐藏
            placeholder：提示信息
            required：非空判断
            pattern：正则表达式
         -->
        <p>名字：<input type=\"text\" name=\"username\" maxlength=\"8\" size=\"20\" value=\"admin\" readonly></p>
        <!-- 密码输入框：input type=“password” -->
        <p>密码：<input type=\"password\" name=\"pwd\" placeholder=\"请输入密码\" required 
            pattern=\"/^[a-z0-9_-]{6,18}$/\" ></p>
        <p>验证码：<input type=\"text\" name=\"captcha\" hidden></p>

        <!-- 单选框：input type=\"radio\" -->
        <!-- 
            value：单选框的值
            name：单选框的组
            checked：默认选中
            disabled：禁用，不可选择
         -->
        <p>性别：
            <input type=\"radio\" value=\"boy\" name=\"sex\" checked>男
            <input type=\"radio\" value=\"girl\" name=\"sex\">女
            <input type=\"radio\" value=\"it\" name=\"sex\" disabled>它
        </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\" -->
        <p>按钮：
            <input type=\"button\" name=\"btn1\" value=\"点击\">
            <input type=\"image\" src=\"../image/1920x1080.jpg\" height=\"100\" width=\"200\"> <!-- 提交 -->
        </p>

        <!-- 下拉框，列表框 -->
        <p>下拉框：
            <select name=\"列表名称\">
                <option value=\"选项的值1\">选项1</option>
                <option value=\"选项的值2\">选项2</option>
                <option value=\"选项的值3\" selected>选项3</option>
                <option value=\"选项的值4\">选项4</option>
            </select>
        </p>

        <!-- 文本域 -->
        <!-- 
            cols：列
            rows：行
         -->
        <p>反馈：
            <textarea name=\"textarea\" cols=\"20\" rows=\"10\">文本内容</textarea>
        </p>

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

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

        <!-- URL input type=\"url\" -->
        <p>URL：
            <input type=\"url\" name=\"url\">
        </p>

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

        <!-- 滑块 input type=\"range\" -->
        <p>
            <input type=\"range\" name=\"range\" min=\"0\" max=\"100\" step=\"2\">
        </p>

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

        <!-- 增强鼠标可用性 label -->
        <!-- label 可以指向鼠标位置 -->
        <p>
            <label for=\"mark\">点击</label>
            <input type=\"text\" id=\"mark\">
        </p>
        
        <p>
            <!-- submit 和 image 提交区别，image提交时会附带按钮点击位置的坐标x,y -->
            <input type=\"submit\">  <!-- 提交 -->
            <input type=\"reset\" value=\"清空表单\">  <!-- 重置 -->
        </p>

    </form>

</body>
</html>

来源：https://www.cnblogs.com/by0627/p/15980841.html
本站部分图文来源于网络，如有侵权请联系删除。

未经允许不得转载：百木园 » HTML入门笔记
标签：

相关推荐

  • 暂无文章

热门文章