首页 > 其他分享> > HTML学习笔记

HTML学习笔记

2021-09-24 23:02:25 作者：互联网

HTML学习笔记

在撰写MD文档时，了解到Typora支持HTML语言。在平常的MD文档写作时，用到过一些简单的HTML语句。一时心血来潮，于是想系统的学习了解一番，在B站找到了一支不错的入门视频，视频链接已放至文末。本文代码是按照B站视频码出来的。

软件准备

1、VScode

https://code.visualstudio.com/Download#

请使用上方的链接下载VScode安装程序，下载时选择System Installer 版本。否则会出问题，时间太久忘记是因为啥问题了。

2、VS code 安装emmet扩展

HTML语言的特点

超文本标记语言(Hyper Text Markup language, HTML)
不是编程语言(不提供逻辑运算)
告诉浏览器如何构造网页

视频中用到的一些快捷键

alt+shift+向下方向键 快速复制当前行代码
ctrl+shift+i 打开浏览器开发者工具
ctrl+? 注释快捷键
shift+alt+F 快速格式文档，整理凌乱的代码
VScode代码自动换行

文件 => 首选项 => 设置 => 编辑器 => 找到word wrap，（滚动鼠标或直接搜索wrap关键字即可），找到之后设置为ON就可以了

视频中的练习代码

<!DOCTYPE html>
<html>

<head>
    <title>htmltest designed by Mike</title>
</head>

<body>
    <!-- 标题headings-->
    <h1>beginning</h1>
    <h2>beginning</h2>
    <h3>beginning</h3>
    <h4>beginning</h4>
    <h5>beginning</h5>

    <!-- Paragraph -->
    <p>Lorem <strong>ipsum dolor</strong> sit amet consectetur adipisicing elit. Modi rem tempora velit quae omnis,
        asperiores dignissimos temporibus <a href="http://baidu.com" target="blank">aliquam</a> nesciunt ex, quia
        placeat assumenda quisquam eius rerum fugiat perferendis voluptatem magni sequi libero! Ullam distinctio ex
        quis, molestiae eaque quas? Sint <em>facilis qui consectetur</em> ducimus error distinctio, porro placeat
        maiores facere amet saepe recusandae voluptas nostrum animi eum fuga, dicta quisquam perferendis expedita.
        Perspiciatis dolorum ducimus amet at minima a asperiores nesciunt totam, adipisci cumque odio, beatae natus fuga
        tenetur aliquid quo accusantium temporibus corporis earum. Aliquid sequi esse temporibus, perferendis pariatur
        delectus distinctio ducimus dolor praesentium illum assumenda doloremque? Officia!</p>

    <!-- Lists -->
    <ul>
        <li>to do list 1</li>
        <li>to do list 2</li>
        <li>to do list 3</li>
        <li>to do list 4</li>
        <li>to do list 5</li>
    </ul>
    <ol>
        <li>to do 1</li>
        <li>to do 2</li>
        <li>to do 3</li>
        <li>to do 4</li>
    </ol>

    <!-- Table -->
    <table>
        <thead>
            <tr>
                <th>name</th>
                <th>age</th>
                <th>phone</th>
                <th>address</th>
            </tr>
        </thead>
        <tbody>
            <td>Mike</td>
            <td>6</td>
            <td>911</td>
            <td>earth</td>
        </tbody>
    </table>
    <br>
    <hr>
    <br>
    <!-- Forms -->
    <form action="form.js" method="POST">
        <div>
            <label>First Name</label>
            <input type="text" name="first name" placeholder="enter">
        </div>
        <div>
            <label>First Name</label>
            <input type="text" name="first name" placeholder="enter name">
        </div>
        <div>
            <label>First Name</label>
            <input type="email" name="email" placeholder="enter email">
        </div>
        <input type="submit" name="submit" value="Submit">
    </form>
    <br>

    <!-- Button -->
    <button>This is button</button>
    <br>

    <!-- Image -->
    <img style="width: 8vw" src="pic.jpg" alt="">

    <!-- Quotation -->
    <blockquote>一键三联</blockquote>


    <p><abbr title="HyperText Markup Language">HTML</abbr>是超文本标记语言</p>

    <p><cite>HTML是超文本标记语言</cite> by 菜鸟教程</p>


    <div style="margin-top:500px"></div>
</body>

</html>

模仿预览

在这里插入图片描述

本文参考链接

https://www.cnblogs.com/chaoyueqi/p/11170858.html
https://www.bilibili.com/video/BV1vs411M7aT?spm_id_from=333.1007.top_right_bar_window_history.content.click

视频中的参考链接

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes

https://developer.mozilla.org/en-US/docs/Web/HTML

标签：do,视频,list,笔记,学习,HTML,https,beginning
来源： https://blog.csdn.net/qq_50632468/article/details/120464457