HTML最基础的知识和示例

最新推荐文章于 2024-10-18 16:57:05 发布

程序员-小李

最新推荐文章于 2024-10-18 16:57:05 发布

阅读量165

点赞数

分类专栏：前端文章标签： html5 前端

本文链接：https://blog.csdn.net/weixin_44107140/article/details/119386539

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

最近看了些前端的内容，下面对HTML里面常见的标签做下整理

网页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>Document</title>
</head>
<body>
    
</body>
</html>

其中DOCTYPE是告诉网页我们要使用的规范，meta标签定义关于 HTML 文档的元信息。head标签是网页的头部，title标签是标记网页的标题，body标签是标记网页的主体部分。

常用标签

<!-- 标题标签 -->
    <h1>一级标题标签</h1>
    <h2>二级标题标签</h2>
    <h3>三级标题标签</h3>
    <h4>四级标题标签</h4>
    <h5>五级标题标签</h5>
    <h6>六级标题标签</h6>
    
    <!-- 段落标签 -->
    <p>一个人在森林中漫游时，突然遇见了一只饥饿的老虎，
        老虎大吼一声就扑了上来。他立刻用最快的速度逃开，但是老虎紧追不舍，
        他一直跑一直跑，最后被老虎逼到了断崖边
    </p>
    
    <!-- 换行标签 -->
    <p>一个人在森林中漫游时，突然遇见了一只饥饿的老虎，<br>
        老虎大吼一声就扑了上来。他立刻用最快的速度逃开，但是老虎紧追不舍，<br>
        他一直跑一直跑，最后被老虎逼到了断崖边
    </p>

    <!-- 水平线标签 -->
    <hr>
    
    <!-- 字体样式标签 -->
    <strong>粗体文字</strong>
    <em>斜体文字</em>

    <!-- 特殊标记符号 -->
    <!-- 标记空格 -->
    你&nbsp;好
    你好
    <!-- 标记大于，小于号 -->
    &gt;
    &lt;
    <!-- 标记版权 -->
    &copy;

效果：

图像标签：

    <!-- 图像标签：src表示图像资源的路径,alt是图像的替代文字，当网页加载不出图像时，会显示改文字
    title是图像的标题，width是图像的宽度设置，height是图像的高度设置 -->
    <img src="../resources/img/点个赞再走.gif" alt="点个赞再走" title="点个赞再走" width="300px" height="200px">

效果：

链接标签

<!-- target打开方式：_self在当前页面打开，_blank在新页面打开 -->
    <a href="基本标签.html" target="_self">跳转到基本标签页</a>
    <a href="www.baidu.com" target="_self" >跳转百度</a>

    <!-- 锚链接 ，用name设置标记值，href里#加标记值跳转-->
    <a href="" name="top">顶部</a>
    
    <a href="#top">回到顶部</a>
    
    <!-- 功能性标签 -->
    <a href="mailto:1761724207@qq.com">点击联系我</a>

    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

行内元素与块元素

行内元素：内容撑开宽度，左右都是行内元素可以排在一行（如：a,strong,em..标签）
块元素：无论内容多少，该元素都独占一行（如：p,h1-h6...标签）

列表标签

    <!-- 有序列表 -->
    <ol>
        <li>java</li>
        <li>Python</li>
        <li>C++</li>
    </ol>
    <hr>
    <!-- 无序列表 -->
    <ul>
        <li>鬼谷子</li>
        <li>乌合之众</li>
        <li>羊皮卷</li>
    </ul>
    <!-- 自定义列表:标签：dl,列表名：dt,列表内容；dd -->
    <dl>
        <dt>位置</dt>
        <dd>北京</dd>
        <dd>上海</dd>
        <dd>广州</dd>
        <dt>月份</dt>
        <dd>一月</dd>
        <dd>二月</dd>
        <dd>三月</dd>
    </dl>

效果：

表格标签

    <table border="1px">
        <!-- border设置边框的宽度 -->
        <!-- tr：行，td：列 -->
        <!-- colspan跨列 -->
        <!-- rowspan跨行 -->
        <tr>
            <td colspan="3">1-1</td>
            
        </tr>
        <tr>
            <td rowspan="2">2-1</td>
            <td>2-2</td>
            <td>2-3</td>
        </tr>
        <tr>
            
            <td>3-2</td>
            <td>3-3</td>
        </tr>
    </table>

效果：

媒体标签

    <!-- controls:设置视频按键按钮，
        src；资源路径
        autoplay:设置自动播放 -->
    <video src="../resources/video/航空视频1.mp4" controls autoplay></video>
    <audio src="../resources/video/曾经的你 - 许巍.mp3" controls autoplay></audio>

效果：

页面结构

常用表单组件

注册
    <!-- action:表单提交的位置，可以是网站，也可以是一个请求处理地址
    method是提交方式，有get,post,
    get方式提交数据会显示在地址栏，不安全，一般用post提交方式 -->
    <form action="我的第一个 程序.html" method="GET">
        <p>账号：<input name="account" ,type="text"></p>
        <p>密码：
            <input name="pass" type="password">
        </p>

        <!-- 单选框 -->
        <!-- value:选中的值 -->
        <!-- name；组 -->
        <p>
            性别<input type="radio" name="sex" value="boy">男
            <input type="radio" name="sex" id="girl">女
        </p>
        <!-- 复选框 -->
        <p>
            爱好:
            <input type="checkbox" value="sleep" name="hobby">睡觉
            <input type="checkbox" value="read" name="hobby">读书
            <input type="checkbox" value="play" name="hobby">玩耍
            <input type="checkbox" value="travel" name="hobby">旅游
        </p>

        <!-- 按钮 -->
        <input type="button" value="点击反馈">
        <!-- 下拉框
        selected默认选中 -->
        <p>
            <select name="列表名称" id="">
                <option value="1">1</option>
                <option value="2" selected>2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </p>
        <p>反馈
            <!-- 文本域 -->
            
            <textarea name="文本域" id="input" class="form-control" rows="3" required="required"></textarea>
            
        </p>



        <!-- 简单邮箱验证 -->
        <p>邮箱：
            <input type="email">
        </p>
        <p>
            URL：
        <!-- 网址验证 -->
            <input type="url">
        </p>
        <p>
            输入数字：
            <!-- 数字验证 -->
            <input type="number" name="num" max="100" min="0" step="1">
        </p>

        <!-- 滑块 -->
        <p>
            滑块：
            <input type="range" min="10">
        </p>

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

        <!-- 文件域 -->
        <input type="file" name="file" id="">
        <p>    
            <input type="submit" value="提交">
            <input type="reset" value="重重">
        </p>
    </form>

效果：