html入门整理 | 青训营笔记

40 阅读1分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天

前言

文档 深入学习 HTML: HyperText Markup Language | MDN
参考教程:为初学者准备的:HTML 速成_哔哩哔哩_bilibili

开始前的准备

浏览器

  • Google Chrome
  • Mozilla Firefox
  • Safari
  • Edge

编辑器

  • Visual Studio Code
  • Sublime Text
  • Atom.io

codepen.io 即时编辑代码平台 | 菜鸟教程 | 码上掘金

什么是HTML

HyperText Markup Language (超文本标记语言)
不是编程语言
告诉浏览器如何构造网页

逐步认识组成

developer.mozilla.org/en-US/docs/…
image.pngimage.png
主要构成
image.png
——解释文档类型,html5

块级元素与内联元素 Inline Block level element

块级元素

  • 在页面以块的形式展现
  • 出现在新的一行
  • 占全部宽度

div h1-h6 p 块 标题 段落

内联元素

  • 通常在块级元素内
  • 不会导致文本换行
  • 只占必要的部分宽度

超链接 图片 斜体 粗体

属性 attribute

developer.mozilla.org/en-US/docs/… 全局属性
developer.mozilla.org/en-US/docs/… 特定属性
写在起始标签

基础标签

列表 ul ol li

<!-- Lists -->
        <!-- unorder list -->
        <ul>
            <li>List Item 1</li>
            <li>List Item 2</li>
            <li>List Item 3</li>
            <li>List Item 4</li>
            <li>List Item 5</li>
            <li>List Item 6</li>
        </ul>


        <!-- order list -->
        <ol>
            <li>List Item 1</li>
            <li>List Item 2</li>
            <li>List Item 3</li>
            <li>List Item 4</li>
            <li>List Item 5</li>
            <li>List Item 6</li>
        </ol>

表格 table thead tr th tbody tr td

<!-- Table -->
        <table>
            <thead>
                <!-- table row -->
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Age</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <!-- table data -->
                    <td>Louis</td>
                    <td>wxl</td>
                    <td>22</td>
                    <td>louis_wxl@outlook.com</td>
                </tr>
                <tr>
                    <!-- table data -->
                    <td>Louis</td>
                    <td>wxl</td>
                    <td>22</td>
                    <td>louis_wxl@outlook.com</td>
                </tr>
                <tr>
                    <!-- table data -->
                    <td>Louis</td>
                    <td>wxl</td>
                    <td>22</td>
                    <td>louis_wxl@outlook.com</td>
                </tr>
            </tbody>
        </table>

表单 form

<!-- Forms -->
        <form action="form.js" method="post">
            <div>
                <label>First name</label>
                <input type="text" name="firstname" placeholder="Enter First Name">
            </div>
            <div>
                <label>Last Name</label>
                <input type="text" name="lastname" placeholder="Enter Last Name">
            </div>
            <div>
                <label>Email</label>
                <input type="email" placeholder="Enter Email">
            </div>
            <input type="submit" name="submit" value="Submit">
        </form>

按键 button

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

图片 img

<!-- Image -->
        <img style="width: auto;" src="img/img.jpg" alt="This is a img tag">
        <!-- 文件夹img下图片 通过style调整大小 alt为找不到该图时显示的内容 -->

引言 blockquote

<!-- Quotion -->
        <blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse adipisci autem placeat modi a ab tempore optio veniam. Numquam odio rerum magnam libero eius id ut, itaque quia dolore.</blockquote>

缩写说明 abbr

<p><abbr title="Central South University (CSU) is situated in Changsha, a famous historical and cultural city in Hunan, China, and covers an area of 2,760,000 m2, with its campuses distributed on the east and west of Xiangjiang River. Backed by the majestic Yuelu Mountain and facing the grand Xiangjiang River, CSU has pleasing scenery and is ideal for study and research.">CSU</title></abbr> is a good collage</p>

引用说明 cite

<p><cite>CSU is a good collage</cite> by xxx</p>

进阶提高 查阅文档

文档

TIps 快捷技巧Tips 快捷技巧

VSCode

CTRL + ? -快捷注释
shift + alt + 方向键 -快速复制
alt + 方向键 -调整位置
alt + b - 默认浏览器打开