HTML基础语法

最新推荐文章于 2024-09-21 20:10:00 发布

测开小菜鸟

最新推荐文章于 2024-09-21 20:10:00 发布

阅读量497

点赞数

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

本文链接：https://blog.csdn.net/qq_33537936/article/details/122411686

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML基础语法

html 的基本结构
常用的html标签
列表标签
- 无序列表
- 有序列表
表格
表单
表单提交

html 的基本结构

<!DOCTYPE html>
<html>
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>

第一行<!DOCTYPE html>是文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。
<html>...</html>标签是开发人员在告诉浏览器，整个网页是从<head>这里开始的，到<head>结束,也就是html文档的开始和结束标签。
<head>...</head>标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件的。
<body>...</body>标签是编写网页上显示的内容。

常用的html标签

<body>
    <!-- 双标签：成对出现的标签 -->
    <h1>我是第一级标题</h1>
    <h6>我是第六级标题</h6>
    <div>我是一个容器标签，可以包裹其它标签内容</div>
    <p>我是一个段落标签</p>
    <p>我是一个段落标签</p>
    <!-- 单标签：只有一个标签，没有标签内容 -->
    <hr>
    <img src="imgs/logo.png" alt="图片加载失败会显示">
    <br>
    <img src="imgs/logo1.png" alt="">

    <!-- 带有属性标签 -->
    <a href="https://www.baidu.com">百度</a>

    <!-- 标签可以嵌套， 不能交叉嵌套 -->
    <DIV>
        <!-- 错误示例 -->
        <!-- <p>我是一个段落标签</div></p> -->
        <p>我是一个段落标签</p>
    </DIV>

    <!-- HTML不区分大小写，但是推荐大家使用小写 -->

</body>

在这里插入图片描述

列表标签

无序列表

    <ul>
        <li>苹果</li>
        <li>鸭梨</li>
    </ul>

在这里插入图片描述

有序列表

    <!-- 有序列表标签 -->
    <ol>
        <li>第一步</li>
        <li>第二步</li>
    </ol>

在这里插入图片描述

表格

<body>
    <!-- border-collapse: collapse 表示表格的边线进行合并 -->
    <table style="border: 1px solid black; border-collapse: collapse">
        <tr>
            <th style="border: 1px solid black;">姓名</th>
            <th style="border: 1px solid black;">年龄</th>
        </tr>
        <tr>
            <td style="border: 1px solid black;">张三</td>
            <td style="border: 1px solid black;">22</td>
        </tr>
    </table>
</body>

在这里插入图片描述

表单

<body>
    <!-- 把数据提交给web服务器需要使用表单标签：<form> -->
    <form>
        <p>
            <!-- for 根据id名给指定id的标签设置光标 -->
            <label for="name">用户名:</label>
            <input type="text" id="name">
        </p>
        <p>
            <label>密码:</label>
            <input type="password">
        </p>
        <p>
            <label>性别:</label>
            <input type="radio">男
            <input type="radio">女
        </p>
        <p>
            <label>爱好:</label>
            <input type="checkbox">学习
            <input type="checkbox">睡觉
            <input type="checkbox">打游戏
        </p>
        <p>
            <label>玉照:</label>
            <input type="file">
        </p>
        <p>
            <label>个人描述:</label>
            <textarea></textarea>
        </p>
        <p>
            <label>籍贯:</label>
            <select>
                <option>北京</option>
                <option>河北</option>
                <option>深圳</option>
                <option>湖北</option>
            </select>
        </p>
        <p>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
            <input type="button" value="按钮">
        </p>

    </form>
</body>

在这里插入图片描述

表单提交

表单属性设置

<form>标签表示表单标签，定义整体的表单区域

action属性设置表单数据提交地址
method属性设置表单提交的方式，一般有“GET”方式和“POST”方式, 不区分大小写

表单元素属性设置

name属性设置表单元素的名称，该名称是提交数据时的参数名
value属性设置表单元素的值，该值是提交数据时参数名所对应的值

示例代码

<body>
    <!-- 把数据提交给web服务器需要使用表单标签：<form> -->
    <form action="https://www.baidu.com" method="POST">
        <p>
            <!-- for 根据id名给指定id的标签设置光标 -->
            <label for="name">用户名:</label>
            <input type="text" id="name" name="username">
        </p>
        <p>
            <label>密码:</label>
            <input type="password" name="password">
        </p>
        <p>
            <label>性别:</label>
            <input type="radio" name="sex" value="0">男
            <input type="radio" name="sex" value="1">女
        </p>
        <p>
            <label>爱好:</label>
            <input type="checkbox" name="love" value="学习">学习
            <input type="checkbox" name="love" value="睡觉">睡觉
            <input type="checkbox" name="love" value="打游戏">打游戏
        </p>
        <p>
            <label>玉照:</label>
            <input type="file" name="pic">
        </p>
        <p>
            <label>个人描述:</label>
            <textarea name="desc"></textarea>
        </p>
        <p>
            <label>籍贯:</label>
            <select name="position">
                <option value="1">北京</option>
                <option value="2">河北</option>
                <option value="3">深圳</option>
                <option value="4">湖北</option>
            </select>
        </p>
        <p>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
            <input type="button" value="按钮">
        </p>
        <!-- get和post方式提交表单数据都以http协议的方式提交数据给web服务器 -->
    </form>
</body>