HTML入门

清木

已于 2023-06-25 15:55:47 修改

阅读量62

点赞数 1

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

于 2023-06-13 20:30:48 首次发布

本文链接：https://blog.csdn.net/weixin_58545784/article/details/131194699

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.HTML快速入门

1.1概述

HTML（HyperText Markup Language）：超文本标记语言

超文本：是一种可以显示在电脑显示器或电子设备上的文本，现时超文本普遍以电子文档的方式存在，其中的文字包含有可以链接到其他字段或者文档的超链接，允许从当前阅读位置直接切换到超链接所指向的文字。

标记：也就是标签。可以使用一系列的标签，将网络上的文档格式统一，使分散的资源连接为一个整体

1.2HTML的组成

HTML页面是由一系列的元素（Element）组成的，而元素是通过标签创建出来的

标签

一般HTML中的标签可分为两大类：

围堵标签：有开始标签和结束标签。如 <html> </html>

自闭和标签：开始标签和结束标签在一起。如 <br/>

属性

HTML的围堵标签可以拥有属性。属性可以让HTML元素拥有更多的信息，属性只能加在开始标签中，通常都是以“属性=值”的键值对形式出现

1.3入门案例

在浏览器上显示一串文字

步骤：

在web目录中新建一个HTML文件

在<body>标签中写入一个<h1>标签，并写上想在浏览器上出现的文字

在<h1>中添加属性align并赋值为center，目的是让内容居中

通过浏览器打开查看效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 align="center">
    第一个HTML案例
</h1>
</body>
</html>

效果演示

2.HTML基本语法

2.1注释

跟许多语言一样，HTML也有注释，用来解释说明且注释不会被浏览器解析

格式

2.2标题标签--<h1></h1> to <h6></h6>

每一个标签里的内容自成一行，字体大小逐级递减，并且HTML中最小只有六级标题

如图所示

代码

效果

在HTML中只存在1到6级标题

2.3换行标签--<br>

在HTML中，对输入的文本进行Enter回车，并不会起到换行效果，而是使用<br>自闭和标签实现换行

代码

效果

2.4图片标签--<img></img>

在浏览器中展示图片

属性：src—指定展示图片文件的位置，可以使用全路径或相对路径

相对路径：以 “.” 开头的路径；“./”代表当前目录，“../”表示上一级目录

width—设置图片的宽度，单位一般为px或百分之几

2.5列表标签

有序列表ol：属性type：改变排序的样式；start：n 从n开始排序

无序列表nl：属性type

2.6表格标签

table：定义表格

width：宽度
border：边框
cellpadding：定义内容和单元格的距离
cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
bgcolor：背景色
align：对齐方式

tr：定义行

bgcolor：背景色
align：对齐方式

td：定义单元格

colspan：合并列
rowspan：合并行

th：定义表头单元格

<caption>：表格标题
<thead>：表示表格的头部分
<tbody>：表示表格的体部分
<tfoot>：表示表格的脚部分

2.7特殊字符在HTML里的实现

注意：实体名称对大小写敏感

2.8表单标签

用于采集用户输入的数据，并和服务器进行交互

属性：

action：指定提交数据的URL

method：指定提交方式，常见的有两种--get、--post。

get：请求参数会在地址栏中显示，会封装到请求行中

请求参数大小有限制

不太安全

post：请求参数不会在地址栏中显示，会封装到请求体中

请求参数大小没有限制

较为安全

2.8.1表单项标签

①<input>：可以通过type属性值，改变元素展示的样式

type属性：

text：文本输入框

password：密码输入框（输入的信息会以“*”展示在页面上）

radio：单选框

1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。

                2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值

                3. checked属性：可以指定默认值

checkbox：复选框

                1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值

                2. checked属性，可以指定默认值

        file：文件选择框

        按钮：
                submit：提交按钮。可以提交表单
                button：普通按钮
                image：图片提交按钮，也可以提交表单
                        src属性指定图片的路径

placeholder属性：指定输入框的提示信息，当输入框的内容发生变化时，会自动清空提示信息

label：指定输入项的文字描述信息
        label的for属性一般会和 input 的 id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。

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

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

②select下拉列表

子元素：option，指定列表项

省份：<select name="province">
            <option value="">--请选择--</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3" selected>陕西</option>
         </select><br>

③textarea：文本域

cols：指定列数，每一行有多少个字符
rows：默认多少行（如果超出设定值，会自动扩容）

练习

案例：编写一个注册页面

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>

    <!--定义表单 form-->
    <form action="#" method="post">
        <table border="1" align="center" width="500">
            <tr>
                <td><label for="username">用户名</label></td>
                <td><input type="text" name="username" id="username"></td>
            </tr>

            <tr>
                <td><label for="password">密码</label></td>
                <td><input type="password" name="password" id="password"></td>
            </tr>

            <tr>
                <td><label for="email">Email</label></td>
                <td><input type="email" name="email" id="email"></td>
            </tr>

            <tr>
                <td><label for="name">姓名</label></td>
                <td><input type="text" name="name" id="name"></td>
            </tr>

            <tr>
                <td><label for="tel">手机号</label></td>
                <td><input type="text" name="tel" id="tel"></td>
            </tr>

            <tr>
                <td><label>性别</label></td>
                <td><input type="radio" name="gender" value="male"> 男
                    <input type="radio" name="gender" value="female"> 女
                </td>
            </tr>

            <tr>
                <td><label for="birthday">出生日期</label></td>
                <td><input type="date" name="birthday" id="birthday"></td>
            </tr>

            <tr>
                <td><label for="checkcode">验证码</label></td>
                <td><input type="text" name="checkcode" id="checkcode">
                    <img src="../../image/verify_code.jpg">
                </td>
            </tr>


            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册"></td>
            </tr>
        </table>


    </form>

</body>
</html>

效果如下图所示：