HTML常用标签总结

最新推荐文章于 2024-07-24 16:53:23 发布

.徐十三.

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量182

点赞数 2

分类专栏： Web前端基础文章标签： html 前端 css

本文链接：https://blog.csdn.net/apple_51927114/article/details/125530512

版权

Web前端基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

HTML

概念：是最基础的网页开发语句

Hyper Text Markup Language 超文本标记语言
- 超文本：
  - 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
- 标记语言：
  - 标签构成的语言。<标签名称> 如html，xml
  - 标记语言不是编程语言

快速入门

语法

1、html文档后缀名 .html 或者 .htm
2、标签分为
- 围堵标签：有开始标签和结束标签。如<html></html>
- 自闭合标签：开始标签和结束标签在一起。如 <br/>
3、标签可以嵌套
- 需要正确的嵌套，不能你中有我，我中有你
- 错误：<a><b><a/><b/>
- 正确：<a><b><b/><a/>
4、在开始标签中定义属性。属性是由键值对构成，值需要用引号（单双引号都可）引起来。
5、html的标签是不分大小写的（推荐同意为小写）
代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
HelloWorld
</body>
</html>

标签学习

1、文件标签：构成html最基本的标签

html：html文档的根标签
head：头标签。用于指定html文档的一些属性。引入外部的资源
title：标题标签、
body：体标签
<!DOCTYPE html>:html5中定义该文档是html文档

2、文本标签：和文本有关的标签

注释：
<h1> to <h6>:标题标签
- h1~h6字体大小逐级递减
<p>:段落标签
<br>:换行标签
<hr>:展示一条水平线
- 属性：
  - color:颜色
  - width：宽度
  - size：高度
  - align：对齐方式
    - center：居中对齐
    - left：左对齐
    - right：右对齐
<b>:字体加粗
<i>：字体斜体
<font>:字体标签
center：文本居中
- 属性：
  - color:颜色
  - size：字体
  - face：字体
属性定义：
- color:
  1、英文单词：red、green、blue
  2、rgb（值1，值2，值3）：值的范围0~255 如：rgb（0，0，255）blue
  3、#值1#值2#值3：值的范围：00~FF之间。如#FF00FF
- width
  1、数值：width=‘20’，数值的单位，默认是px(像素)
  2、数值%：占比相对父元素的比例

3、图片标签

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
<!--展示一张图片-->
<img src="贝贝.jpg" width="200" alt="贝贝">

<!--
    相对路径：
        * 以.开头的路径
            * ./: 代表当前目录 ./贝贝jpg
            * ../: 代表上一级目录 
-->

</body>
</html>

4、列表标签

有序列表：
- ol：
- li:
代码：

<!-- 有序列表-->
<h4>把大象装进冰箱里</h4>
<ol type="1" start="0">
    <li>打开冰箱门</li>
    <li>把大象放进去</li>
    <li>关上冰箱门</li>
</ol>

无序列表：
- ul:
- li:
代码：

<ul type="disc">
    <li>打开冰箱门</li>
    <li>把大象放进去</li>
    <li>关上冰箱门</li>
</ul>

5、链接标签

a：定义一个超链接
- 属性：
  - href：指定访问资源的URL（统一资源定位符）
  - target：指定打开资源的方式
    - _self:默认值。在当前页面打开
    - _blank：在空白页打开

6、div和span

* div：每一个div占满整行。块级标签
* span：文本信息在一行展示，行内标签 内敛标签

7、语义化标签

定义： html5中为了提高程序的可读性，提供了一些标签。
- < heade r>: 页眉
- < footer >:页脚

8、表格标签

table：定义表格
- width：宽度
- border：边框
- cellpadding：定义内容和单元格的距离
- cellspacing：定义单元格之间的距离。如果指定0，则单元格的线回合为一条
- bgcolor：背景色
- align：对齐方式
tr：定义行
- bgcolor：背景色
- align：对齐方式
td：定义单元格
- colspan：合并列
- rowspan：合并行
th：定义表头单元格
< caption>: 表格标题
< thead>: 表示表格的头部分
< tbody>: 表示表格的体部分
< tfoot>:表示表格的脚部分

9、表单标签

表单：
- 概念：用于采集用户输入的数据的。用于和服务器进行交互。
- form：用于定于表单的。可以定义一个范围，范围代表采集用户数据的范围
  - 属性：
    - action：指定提交数据的URL
    - method：指定提交方式
      - 分类：一共7种，2种比较常见的
      - get:
        1. 请求参数会在地址栏中显示
        2. 请求参数大小是有限制的
        3. 不太安全
      - post:
        1. 请求参数不会再地址栏中显示。会封装再请求体中（HTTP协议）
        2. 请求参数的大小没有限制
        3.较为安全
      - 表单项中的数据要要提交，必须指定其name属性
表单项标签：
- input：可以通过type属性值，改变元素展示的样式
  - type属性：
    - text：文本输入框，默认值
    - password：密码输入框
    - radio：单选框
      - 注意:
        1、一般会给每一个单选框提供value属性，指定其选中后提交的值
        2、checked属性，可以指定默认值
        3、要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样
    - checkbox：复选框
      - 注意：
        1、一般会给每一个单选框提供value属性，指定其被选中后提交的值
        2、checked属性，可以指定默认值
    - file：文件选择框
    - hidden：文件选择框
    - 按钮：
      - submit：提交按钮。可以提交表单
      - button：普通按钮
      - image：图片提交按钮
        src属性指定图片的路径
    - label：指定输入项的文字描述
      - 注意：
        label的for属性一般会和 input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。
    - select：下拉列表
      - 子元素：option，指定列表项
    - textarea：文本域
      - cols：指定列数、每一行有多少个字符
      - rows：默认多少行。

代码

<form action="#" method="post">
        <label for="user-name-label">用户名：</label><input type="text" name="username" placeholder="请输入用户名" id="user-name-label"><br>
        <label for="password-label">密码：</label><input type="password" name="password" placeholder="请输入密码" id="password-label"><br>
        性别：<input type="radio" name="gender" value="male" checked="checked"> 男
             <input type="radio" name="gender" value="famale"> 女<br>
        爱好：<input type="checkbox" name="hobby" value="shopping"> 逛街
             <input type="checkbox" name="hobby" value="Java" checked="checked"> Java
             <input type="checkbox" name="hobby" value="game"> 游戏<br>

        图片: <input type="file" name="file"> <br>

        隐藏域: <input type="hidden" name="id" value="aaa"><br>

        取色器: <input type="color"><br>

        生日：<input type="date" name="birthday"><br>
             <input type="datetime-local" name="birthday"><br>

        邮箱：<input type="email" name="emali"><br>

        年龄：<input type="number" name="age"><br>

        省份：<select name="province">
                <option>--请选择--</option>
                <option>北京</option>
                <option>上海</option>
                <option>河南</option>
             </select>
        <br>
        文本域：
        <textarea name="des" cols="20" rows="5">

        </textarea>
        <br>
        按钮：<input type="submit" value="登录">
            <input type="button" value="一个按钮">
            <input type="image" src="贝贝.jpg" width="50px" height="50px">
        <br>
    </form>

案例——注册列表

效果图：

在这里插入图片描述

实现代码：

<body>

<!--定义表单 form-->
<form action="#" method="post">
    <table border="1" align="center" width="500">
<!--        第一行-->
        <tr>
            <td>
                用户名
            </td>
            <td>
                <input type="text" name="id" placeholder="请输入账号 ">
            </td>
        </tr>
<!--        第二行-->
        <tr>
            <td>
                密码
            </td>
            <td>
                <input type="password" name="password" placeholder="请输入密码">
            </td>
        </tr>
<!--        第三行-->
        <tr>
            <td>
                Email
            </td>

            <td>
                <input type="email" name="email" placeholder="请输入Eamli">
            </td>
        </tr>
<!--        第四行-->
        <tr>
            <td>
                姓名
            </td>
            <td>
                <textarea name="name" role="6" rows="1" placeholder="请输入真实姓名"></textarea>
            </td>
        </tr>
<!--        第五行-->
        <tr>
            <td>
                手机号
            </td>
            <td>
                <input type="number" name="tell_number" placeholder="请输入您的手机号">
            </td>
        </tr>
<!--        第六行-->
        <tr>
            <td>
                性别
            </td>
            <td>
                <input type="radio" name="grender" value="male" checked="checked"> 男
                <input type="radio" name="grender" value="famale"> 女
            </td>
        </tr>
<!--        第七行-->
        <tr>
            <td>
                出生日期
            </td>
            <td>
                <input type="date" name="birthday">
            </td>
        </tr>
<!--        第八行-->
        <tr>
            <td>
                验证码
            </td>
            <td>
                <input type="text" name="check">
                <input type="image" src="check.png">
            </td>
        </tr>
<!--        第九行-->
        <tr align="center">
            <td colspan="2" >
                <input type="submit" value="注册">
            </td>
        </tr>
    </table>

</form>