前端html基础

最新推荐文章于 2024-09-08 21:36:12 发布

施眠呢

最新推荐文章于 2024-09-08 21:36:12 发布

阅读量56

点赞数

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

本文链接：https://blog.csdn.net/somehow0827/article/details/129281970

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

html：

一：
超文本标记语言；
不是编程语言；
告诉浏览器如何构建网页。

<!DOCTYPE html>    解释文档类型

<head>       
(放一些不被渲染在页![请添加图片描述](https://img-blog.csdnimg.cn/b47d4ac3208a4ae2859385a378f7c055.png)
面主体的东西，比如网页基本信息)

</head>

<body>
(放一些想渲染在网页中给用户看到的主体内容）
</body>

基本练习：
请添加图片描述
效果：

二：

块级元素：

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

内联元素：

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

（属性一般写在起始标签）

<a href="     " >  </a>      （超链接）

后面一些基础懒得截图做笔记了，自己在vs里面过了一遍：

<!DOCTYPE html>
<html>
    <head>
        <title>
            你好
        </title>
    </head>
    <body>
        <!--标题-->
        <h1>heading one</h1>
        <h2>heading 2</h2>
        <h3>heading 3</h3>
        <h4>heading 4</h4>
        <h5>heading 5</h5>
        <h6>heading 6</h6>

        <!--段落加超链接-->
        <p>这是一段文字</p>
        <p>Lorem ipsum dolor <strong> amet </strong> adipisicing elit. Beatae, amet.</p>     
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, exercitationem unde pariatur suscipit ullam praesentium, accusamus <a href="https://www.bilibili.com/?spm_id_from=333.33.b_62696c692d6865616465722d6d.1" target="_blank">b站</a> temporibus tenetur, perferendis officiis labore ut. Ex, pariatur cumque maxime magnam architecto veniam commodi!</p>


        <!--图像-->
        <p>这是一张图像<img src="D:\前端\html\img\QQ图片20211104190709.jpg" alt="加载中" width="100" height="70"></p>
        <p>这是一张图像<img src="https://www.w3school.com.cn/i/eg_mouse.jpg" alt="加载中" width="100" height="70" align="left"><p>
        <br>

        

        <!--有序列表和无序列表-->
        <ul>                     
            <li>List Item 1</li>
            <li>List Item 2</li>
            <li>List Item 3</li>
            <li>List Item 4</li>
        </ul>
        
        <ol>
            <li>List Item 1</li>
            <li>List Item 2</li>
            <li>List Item 3</li>
            <li>List Item 4</li>
        </ol>



        <!--表格(表头和表尾)-->
        <table>
            <thead>
                <tr>
                    <th>name</th>
                    <th>age</th>
                    <th>color</th>
                    <th>math</th>
                    <th>hobby</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>小伟</td>
                    <td>21</td>
                    <td>red</td>
                    <td>1</td>
                    <td>games</td>
                </tr>
                <tr>
                    <td>小美</td>
                    <td>20</td>
                    <td>yellow</td>
                    <td>2</td>
                    <td>games</td>
                </tr>
            </tbody>
        </table>
<br>
<br>
        <!--表单-->

        <form action="form.js">
            <label>firstname</label>
            <input type="text" name="firstname" placeholder="Enter firstname" value="right" ><br>
            
            <label>lastname</label>
            <input type="text" name="lastname" placeholder="Enter lastname" value="wrong"><br>
            
            <label>email</label>
            <input type="text" name="email" placeholder="email" value="12345"><br>

            <input type="submit" value="submit">
        </form>
<br>
        <button>这是一个按钮</button>

    <!--引用-->
    <blockquote>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi harum obcaecati iste enim atque beatae excepturi, velit pariatur temporibus quod ab cum, possimus officiis porro soluta quae. Nihil, quisquam consequatur.
    </blockquote><br>

    <!--注释-->
    <p><abbr title="ChenLeYi">CLY</abbr> is a good girl</p>


    </body>
</html>