HTML编程知识

Tiger-9986

已于 2024-04-18 09:46:03 修改

阅读量870

点赞数 14

文章标签： javascript html5

于 2024-04-13 08:15:00 首次发布

本文链接：https://blog.csdn.net/m0_65888394/article/details/137686878

版权

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它是构建和设计网页及网上应用的基础技术之一，与CSS（层叠样式表）和JavaScript一起，构成了万维网的三大核心技术。

1. HTML的基本结构

一个基本的HTML文档包含以下部分：

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    页面内容
</body>
</html>

<!DOCTYPE html>：文档类型声明，指明了文档遵循的HTML规范。
<html>：根元素，包含了整个HTML文档。
<head>：包含了文档的元数据（metadata），如标题、字符集声明、引用的CSS和JavaScript文件等。
<title>：定义了页面的标题，显示在浏览器的标题栏或标签页上。
<body>：包含了页面的可见内容。

2. 常用HTML标签

标题标签：<h1> 到 <h6>，定义了六级标题。
段落标签：<p>，用于包裹段落文本。
链接标签：<a>，用于创建超链接。
列表标签：<ul>（无序列表）、<ol>（有序列表）、<li>（列表项）。
表格标签：<table>、<tr>（行）、<th>（表头单元格）、<td>（表格单元格）。
表单标签：<form>、<input>、<textarea>、<button>等，用于创建用户输入和数据收集的表单。
图像标签：<img>，用于在页面上显示图片。
媒体标签：<audio>、<video>，用于嵌入音频和视频内容。

3. HTML的属性

HTML标签可以包含属性，属性提供了额外的信息，用于定义标签的行为或外观。例如：

<a href="https://www.example.com" target="_blank">访问示例网站</a>

在这个例子中，<a> 标签有两个属性：href 指定了链接的目标URL，target="_blank" 指定了链接在新窗口中打开。

4. HTML的表单元素

表单是HTML中用于收集用户输入的重要部分。表单元素包括：

<input>：用于创建不同类型的输入字段，如文本输入（type="text"）、密码输入（type="password"）、提交按钮（type="submit"）等。
<textarea>：用于创建多行文本输入控件。
<select>：用于创建下拉选择菜单。
<option>：用于定义下拉菜单中的选项。
<button>：用于创建按钮，可以提交表单或执行其他操作。

5. HTML5的新特性

HTML5是HTML的最新版本，引入了许多新特性和改进：

语义化标签：如<article>、<section>、<nav>、<aside>等，提供了更清晰的文档结构。
多媒体支持：<audio> 和 <video> 标签简化了音频和视频内容的嵌入。
表单控件：新增了多种表单输入类型，如日期、时间、范围、搜索等。
画布（Canvas）：<canvas> 标签允许在网页上绘制图形。
离线应用：通过缓存清单（manifest文件）支持离线应用。
地理定位：navigator.geolocation API 允许获取用户的地理位置信息。

6. HTML的全局属性

HTML5引入了一些全局属性，这些属性可以应用于任何HTML元素：

id：给元素一个唯一的标识。
class：为元素指定一个或多个类名。
style：允许直接在元素上设置内联样式。
title：为元素提供额外的信息，通常以工具提示的形式显示。
data-*：允许我们存储自定义数据。

7. HTML的注释

在HTML中，注释用于添加不会显示在浏览器中的说明性文本。

<!-- 这是一个HTML注释 -->

8. HTML的字符实体

HTML中的特殊字符可以通过字符实体来表示：

<：小于号（<）
>：大于号（>）
&：和号（&）
"：双引号（"）
'：单引号（'）

结语

HTML是构建网页的基础，通过使用各种标签和属性，可以创建出结构化和样式化的网页内容。随着HTML5的推出，HTML的功能得到了极大的扩展，使得开发者能够创建更加丰富和动态的网页应用。掌握HTML是成为前端开发者的第一步，也是构建现代Web应用的重要技能。

代码示例

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


<h1>注册</h1>

<!--表单form
action: 表单提交的位置，可以是网站，也可以是请求处理地址
method： post，get提交方式
    get方式提交：我们可以在url中可以看到我们提交到的信息，不安全，高效
    post：比较安全，传输大文件
-->

<form action="1.我的第一个网页.html" method="get">

<!--    文本输入框:  input type="text"
                value:默认初始值
                maxlength：最长能写几个字符
                size：文本框的长度
                placeholder: 提示信息
                required： 非空判断
                pattern： 正则表达式
-->
    <p>名字： <input type="text" name="username" placeholder="请输入姓名" maxlength="8" size="30" required> </p>

<!--    密码框：   input type="password" -->
    <p>密码： <input type="password" name="pwd" value="23344"></p>

<!--    单选框标签
        input type："radio"
        value: 单选框的值
        name： 表示组
        -->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked/>男
        <input type="radio" value="girl" name="sex" disabled/>女
    </p>
    
<!--    多选框-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby" checked>打游戏
        <input type="checkbox" value="sports" name="hobby">运动
    </p>

<!--    按钮
            input type="button":普通按钮
            input type="image"： 图像按钮
            input type="submit" 提交按钮
            input type="reset" 重置

-->
    <p>按钮：
        <input type="button" name="btn1" value="点击边长">
        <input type="image" src="../resource/image/12.jpg" size="3">
    </p>

<!--    下拉框，列表框-->
    <p>国家
        <select name="列表名称" id="">
            <option value="选项的值">中国</option>
            <option value="选项的值" selected>American</option>
            <option value="选项的值">Engaged</option>
            <option value="选项的值">Japan</option>
            <option value="选项的值">Australian</option>
        </select>
    </p>


<!--    文本域-->
    <p>反馈：
        <textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
    </p>

<!--    文件域
            input type="file" name="files"
            input type="button" value="上传" name="upload"
-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">

    </p>
    
    
<!--    邮件验证-->
    <p>邮箱：
        <input type="email" name="email">
    </p>

    <!--    URL验证-->
    <p>URL：
        <input type="url" name="url">
    </p>


    <!--   数字验证-->
    <p>数字：
        <input type="number" name="num" max="100" min="0" step="10">
    </p>


<!--    滑块-->
    <p>滑块：
        <input type="range"  name="voice" step="2" min="0" max="100">
    </p>


<!--搜索框-->
    <p>搜索框：
        <input type="search">
    </p>

<!--增强鼠标可用性-->
    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>

<!--自定义邮箱-->
    <p>自定义邮箱：
        <input type="text" name="diymail" pattern="" >
    </p>





    <p>
        <input type="submit">
    <input type="reset" value="清空表单">
    </p>

</form>

</body>
</html>

Tiger-9986

关注

14
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
HTML编程知识

HTML是构建网页的基础，通过使用各种标签和属性，可以创建出结构化和样式化的网页内容。随着HTML5的推出，HTML的功能得到了极大的扩展，使得开发者能够创建更加丰富和动态的网页应用。掌握HTML是成为前端开发者的第一步，也是构建现代Web应用的重要技能。
复制链接

扫一扫