前端开发入门2：HTML属性、块元素与行内元素、HTML表单

无心修ღ沉淀好跑路

于 2024-11-04 16:21:45 发布

阅读量201

点赞数 8

CC 4.0 BY-SA版权

文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/qq_53093911/article/details/143485777

HTML属性

属性在HTML中起到非常重要的作用，它们用于定义元素的行为和外观，以及与其他元素的关系。

基本语法：<开始标签属性名=“属性值”>

每个HTML元素可以具有不同的属性

属性名称不区分大小写，属性值对大小写敏感

查找网站：HTML 属性 | 菜鸟教程

适用于大多数HTML元素的属性：

class：为HTML元素定义一个或者多个类名

id：定义元素唯一的id

style：规定元素的行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML属性</title>
</head>
<body>
    <a href="">这是一个超链接</a>
    <br>
    <a href="" target="_blank">这是第二个超链接</a>
    <hr>
    <img src="" alt="">
    <img src="" alt="该图片无法显示">
    <img src="https://cn.bing.com/images/search?view=detailV2&ccid=x2swRF08&id=18F1C654510EE3132904ADC2E2BD1DC9A595852A&thid=OIP.x2swRF08WIU0nmiAl49kugAAAA&mediaurl=https%3a%2f%2fbce.bdstatic.com%2fportal%2fimg%2fcustomer%2fcase%2fcsdn%2flogo_c76b3044.png&exph=170&expw=380&q=csdn%e5%ae%98%e7%bd%91&simid=608012575114751925&FORM=IRPRST&ck=7183590F83D25ED08C74C142EF50592A&selectedIndex=0&itb=1" alt="" width="100" height="100">
</body>
</html>

HTML 区块-块元素与行内元素

块元素：块级元素通常用于组织和布局页面的主要结构和内容，例如段落、标题、列表、表格等。它们用于创建页面的主要部分，将内容分隔成逻辑块。

块级元素通常会从新行开始，并占据整行的宽度，因此它们会在页面上呈现为一块独立的内容块。

块级元素可以包含其他块级元素和行内元素。

常见的块级元素包括<div> <p> <h1>~<h6> <ul> <ol> <li> <table> <form> 等。

行内元素：行内元素通常用于添加文本样式或者为文本中的一部分应用样式。它们可以在文本中插入小的元素，例如超链接、强调文本等。

行内元素通常在同一行内呈现，不会独占一行。

它们只占据其内容所需的宽度，而不是整行的宽度。

行内元素不能包含块级元素，但可以包含其他行内元素。

常见的行内元素包括<span> <a> <strong> <em> <img> <br> <input>等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML区块</title>
</head>
<body>
    <div class="nav">
        <a href="#">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
        <a href="#">链接4</a>
        <a href="#">链接5</a>
    </div>

    <div class="content">
        <h1>文章标题</h1>
        <p>文章内容</p>
        <p>文章内容</p>
        <p>文章内容</p>
        <p>文章内容</p>
        <p>文章内容</p>
    </div>

    <span>这是第一个span标签</span>
    <span>这是第二个span标签</span>
    <span>这是第三个span标签</span>
    <hr>
    <span>链接点击这里<a href="#">链接</a></span>
</body>

</html>

HTML表单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 表单</title>
</head>
<body>
    
    <form action="">
        <label>用户名：</label>
        <input type="text" id="usename" placeholder="请输入用户名"><br><br>
        <lable for="pwd">密码：</lable>
        <input type="password" id="pwd" placeholder="请输入用户名"><br><br>

        <label for="">性别：</label>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <input type="radio" name="gender">其他  <br><br>

        <label>爱好：</label>
        <input type="checkbox" name="hobby">
        <input type="checkbox" name="hobby">唱歌
        <input type="checkbox" name="hobby">跳舞
        <input type="checkbox" name="hobby">RAP
        <input type="checkbox" name="hobby">篮球  <br><br>

        <input type="submit" value="上传">


    </form>

    <form action="#"></form> //需要后端API//
</body>
</html>