html基础

天堂的魔鬼( ˙-˙ )

于 2024-08-16 21:35:57 发布

阅读量268

点赞数 6

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_58432692/article/details/141270269

版权

最近开始学前端技术，陆续更新一些html、css、js的笔记，供同样为初学者的小伙伴入门。

推荐使用vscode并安装插件，教程B站有很多，可以自己搜一下。

新建.html文档，输入英文！然后按回车，即可看到自动生成的最基本的框架，head是头部，内容暂时不用管，只要知道title里是网站上方名字，在body里使用标记语言编程即可。以下是基础知识示例，可以自己运行一下，看一下效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html学习</title>
</head>
<body>
    <!-- 标题标签 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    
    <!-- 段落标签 -->
    <p>这是一个段落</p>
    
    <!-- 换行标签 -->
    <br>
    
    <!-- 分割线标签 -->
    <hr>
    
    <!-- 文本格式化标签 -->
    <b>加粗</b> <strong>加粗</strong>
    <u>下划线</u> <ins>下划线</ins>
    <i>倾斜</i> <em>倾斜</em>
    <s>删除线</s> <del>删除线</del>
    <hr>

    <!-- 图片标签 -->
    <img src="#" alt="替换文本，图像显示失败时显示" title="提示文本，鼠标放到图片上，显示的提示文字">
    <hr>

    <!-- 音频标签 -->
    <audio src="#" controls autoplay loop>控件 自动播放 循环播放</audio>
    <hr>

    <!-- 视频标签 -->
    <video src="#" controls autoplay muted loop>控件 静音状态下自动播放 循环播放</video>
    <hr>

    <!-- 路径 -->
    同级./(可省略)  下级/  上级../
    Windows 环境中绝对路径为 \（反斜杠）
    <hr>

    <!-- 超链接标签 -->
    <a href="#" target="">target:链接页面的打开方式,_self当前页面打开（默认值）,_blank 新窗口打开</a>
    <hr>

    <!-- 列表标签 -->
    <ul>
        <li>无序列表列表项1</li>
        <li>列表项2</li>
    </ul>

    <ol>
        <li>有序列表列表项1</li>
        <li>列表项2</li>
    </ol>

    <dl>
        <dt>自定义列表名词1</dt>
        <dd>名词1解释1</dd>
        <dd>名词1解释2</dd>
    </dl>
    <hr>

    <!-- 表格标签 -->
    <table width="400px" height="200px" align="center" border="1" cellpadding="10" cellspacing="5">
        <!-- 头部区域 -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评价</th>
            </tr>
        </thead>
        <!-- 主体区域 -->
        <tbody>
            <tr>
                <td>张三</td>
                <!-- 合并单元格 -->
                <td rowspan="2">100</td>
                <td>nice</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>nice</td>
            </tr>
        </tbody>
        <!-- 脚部区域 -->
        <tfoot>
            <tr>
                <td>总结</td>
                <!-- 合并单元格 -->
                <td colspan="2">nice</td>
            </tr>
        </tfoot>
    </table>
    <hr>

    <!-- 表单标签 -->
    <form action="url地址" method="提交方式" name="表单域名称">
        <!-- input系列标签 -->
        姓名：<input type="text" placeholder="蔡徐坤">
        <br>
        密码：<input type="password" placeholder="jntm">
        <br>
        性别：<label><input type="radio" name="sex" checked>男</label>
            <input type="radio" name="sex" id="women"><label for="women">女</label>
        <br>
        爱好：<input type="checkbox" checked>唱
            <input type="checkbox">跳
            <input type="checkbox">rap
            <input type="checkbox">篮球
        <br>
        文件：<input type="file" multiple>
        <br>
        <input type="submit" value="点此提交">
        <input type="reset">
        <input type="button" value="按钮">
        <br>

        <!-- button按钮标签 -->
        <button type="submit">提交</button>
        <br>

        <!-- select下拉菜单标签 -->
        <select>
            <option>选项1</option>
            <option selected>选项2</option>
            <option>选项3</option>
        </select>
        <br>

        <!-- textarea文本域标签 -->
        <textarea rows="3" cols="20">文本内容</textarea>
        <br>

        <!-- label标签 -->
        年龄：<label><input type="radio" name="age">0-18</label>
        <input type="radio" name="age" id="adult" checked><label for="adult">18+</label>
    </form>
    <hr>

    <!-- 无语义布局标签 -->
    <div>div区块</div>
    <span>span跨度</span>

    <!-- 有语义布局标签（移动端使用） -->
    <header>header头部</header>
    <nav>nav导航</nav>
    <footer>footer脚部</footer>
    <aside>aside侧栏</aside>
    <section>section区块</section>
    <article>article文章</article>
    <hr>

    <!-- 字符实体 -->
    空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格

    <!-- 内联框架 -->
    <iframe src="https://www.bilibili.com/" width="70%" height="500px"></iframe>
</body>
</html>

天堂的魔鬼( ˙-˙ )

关注

6
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html基础

新建.html文档，输入英文！然后按回车，即可看到自动生成的最基本的框架，head是头部，内容暂时不用管，只要知道title里是网站上方名字，在body里使用标记语言编程即可。以下是基础知识示例，可以自己运行一下，看一下效果。最近开始学前端技术，陆续更新一些html、css、js的笔记，供同样为初学者的小伙伴入门。推荐使用vscode并安装插件，教程B站有很多，可以自己搜一下。
复制链接

扫一扫