【前端基础】8.HTML编写规则和语义化写法

最新推荐文章于 2024-07-23 12:36:06 发布

menghen113

最新推荐文章于 2024-07-23 12:36:06 发布

阅读量120

点赞数 1

分类专栏：前端学习文章标签：前端 html

本文链接：https://blog.csdn.net/menghen113/article/details/126122957

版权

前端学习专栏收录该内容

26 篇文章 2 订阅

订阅专栏

视频

一，基本结构

块级元素
在页面以块的形式展现
出现在新的一行
占全部的宽度
例：<div> <h1>-<h6> <p>
内联元素
通常在块级元素内
不会导致文本换行
只占必要的部分宽度
例：<a> <img> <em> <strong>

二，windows系统下使用Visoal Studio Code编辑html页面快捷键与基本语法

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Course For Beginner</title>
    </head>
    <body>
    
        <!-- ctrl+/ 快捷键注释 -->
        <!--alt+shift+下箭头快捷键复制--> 
        <h1>Heading One</h1>
        <h2>Heading One</h2>
        <h3>Heading One</h3>
        <h4>Heading One</h4>
        <h5>Heading One</h5>
        <h6>Heading One</h6>
       
        <!--lorem数字 获取数字长度的一段话-->
        <p>Lorem ipsum dolor, sit amet consectetur 
            adipisicing elit. Veritatis, modi!</p>
        <p>Lorem ipsum dolor,<strong> sit amet consectetur </strong>adipisicing elit.<em> Odio, voluptatibus?</em> Accusamus expedita quasi laboriosam velit,<a href="https://google.com" target="_blank"> eum</a> obcaecati nam nulla quisquam recusandae voluptatum, pariatur adipisci? Voluptas molestias voluptatibus a quaerat praesentium cupiditate iusto voluptates accusamus, suscipit mollitia autem magnam perferendis corporis vitae nemo incidunt esse aliquam atque voluptatum harum dolor expedita dolorem velit! Harum, quas. Fugit, ex? Ipsum autem, officiis dolores odio corrupti deserunt illo facilis vero corporis, explicabo eos? Provident vel at alias ratione iste ullam consequatur architecto, officiis, fugiat tempora beatae, hic dolore! Sapiente cum in, nobis unde at rem aperiam sunt quis aliquam eos vel quos? Esse, sapiente!
        </p>
        
        <!-- List -->
        <ul>
            <li>List Item1</li>
            <li>List Item1</li>
            <li>List Item1</li>
            <li>List Item1</li>
        </ul>
        <ol>
            <li>List Item1</li>
            <li>List Item1</li>
            <li>List Item1</li>
            <li>List Item1</li>
        </ol>
        
        <!-- Table -->
        <table>
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>last Name</th>
                    <th>Age</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Leanard</td>
                    <td>Chan</td>
                    <td>99</td>
                    <td>abc@abc.com</td>
                </tr>
                <tr>
                    <td>Leanard</td>
                    <td>Chan</td>
                    <td>99</td>
                    <td>abc@abc.com</td>
                </tr>
                <tr>
                    <td>Leanard</td>
                    <td>Chan</td>
                    <td>99</td>
                    <td>abc@abc.com</td>
                </tr>
            </tbody>
        </table>

        <br>
        <hr>
        <br>

        <!-- form -->
        <form action="form.js" method="POST">
            <div>
                <label>First Name</label>
                <input type="text" name="fistname" 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" name="email" placeholder="Enter Email">
            </div>
            <input type="submit" name="submit" value="Submit">
        </form>
        <br>

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

        <!-- image -->
        <img style="width: 100vw" src="./img/tup.webp" alt="Not found">
        
        <!-- quote -->
        <blockquote>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aliquid sunt soluta itaque nihil iusto voluptatibus dignissimos quibusdam laborum tempore sapiente non facere maiores, id, earum similique voluptatem magnam ducimus!</blockquote>
          
        <p><abbr title="Massachusetts Institute of Technology">MIT</abbr> is a prestigious collage</p>

        <p><cite>MIT is a prestigious collage</cite> by DasAuto</p>

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