HTML:认识HTML与基本语法的学习

前言

HTML(超文本标记语言)是用于创建网页的标记语言,由一系列标签组成,定义网页中的元素。由蒂姆·伯纳斯 - 李于1990年代初发明,最初用于科研机构间共享文档,迅速演变为Web开发基础。无论是电商、博客、新闻还是社交平台,都由HTML构建。学习HTML对于成为Web开发者或搭建个人网站都至关重要,它能让您更好地掌握Web开发领域,同时能更好地表达创意。掌握HTML是入门Web开发的关键一步,无论专业还是业余都能受益.

作者建议:学习知识在于深度理解,多动手、多动脑,总能更快地领悟。不要仅仅停留在阅读代码的层面,亲自动手敲打一遍,会带来更丰富的收获。通过实践,我们能够更深入地理解知识,掌握技能,并且在解决问题时更加得心应手。相信自己的能力,坚持不懈地实践,你将会取得更大的进步和成就。让学习成为一种习惯,让动手实践成为你提升的捷径,加油!你是最棒的!

HTML概述

HTML 指的是超文本标记语言 (HyperText Markup Language)

超文本:指的是网页中可以显示的内容(图片,超链接,视频….)

标记语言:标记——>标签(标注) 买东西——> 商品的标签

标记语言中,就是提供了许多的标签,不同的标签有不同的功能,最终运行的时候,由浏览器对标签进行解析,最终呈现出不同标签的样子.

HTML编译器的选择

HbuilderX   ------ >  国内做的一款前端编译器

简介

HbuilderX 是由 DCloud 公司开发的一款强大的 Web 开发工具,它融合了多种功能和特性,旨在提高开发效率和降低开发难度。它支持多平台开发(如 iOS 、 Android 、 Windows 等),具备强大的代码编辑、调试、发布和测试能力。下面将介绍 HbuilderX 的几个独特之处,帮助开发者们更好地理解其价值和优势

HbuilderX优点

1.平台支持
HbuilderX 可在 Windows 、 macOS 和 Linux 等操作系统上运行,为开发者提供了更多的选择和灵活性。
2.多语言支持
HbuilderX 支持多种主流的编程语言,包括 HTML 、 CSS 、 JavaScript 、 TypeScript 等,可以满足不同项目的开发需求。
3.快速开发
HbuilderX 提供了丰富的代码辅助功能,如智能代码提示、代码自动补全、代码片段等,可以大大提高开发效率。
4.集成调试工具
HbuilderX 内置了调试工具,可以方便地进行代码调试和错误定位,减少开发过程中的繁琐步骤。
5.插件生态丰富
HbuilderX 支持第三方插件扩展,可以根据需求安装和使用各种插件,扩展功能和增强开发体验。
6.内置 Web 服务器
HbuilderX 集成了内置的 Web 服务器,可以直接在 IDE 中运行和调试应用,简化开发环境的置。

HbuilderX安装

官方安装:安装跳转

首次安装 

 HTML基本语法

声明

 html4的文档声明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

html5的文档声明

<!DOCTYPE html>

如果不声明解析网页时会产生一些不可预期的行为,所以我们应该避免出现

Head标签(头标签)

头部区域的标签标签为:<title>, <style>, <meta>, <link>, <script>

<title>标签可定义网页的标题

<meta> 标签可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新 频度的描述和关键词。

<meta> 标签位于文档的头部

<meta charset="utf-8" />

标题处添加图标 <link rel="icon" href="ico地址">

 HTML基本语法如下

 标签

HTML中的标记指的就是标签。

HTML使用标记标签来描述网页。

结构:标签内容 闭合标签(有标签内容) 自闭合标签 (无标签内容).

<标签名>标签内容</标签名> ------>闭合标签(有标签内容)(<开始标签> 标签体 </结束标签>)

</标签名>  -------->自闭合标签 (无标签内容)

标签属性

标签属性:标签可以拥有属性。属性进一步说明了该标签的显示或使用

特性:

1.属性的格式 :属性名 = “属性值“

2. 属性的位置: <标签名 属性名 = “属性值“ >xxx</标签名>

3. 添加多个属性: <标签名 属性名 = “属性值“ 属性名 = “属性值“ >xxx </标签名>

常用标签

标题标签 <h1></h1>……..<h6></h6>

标尺线 <hr/>

段落标签 <p></p>

换行标签 <br/>

列表:

   无序列表 <ul> <li></li> </ul> 

   有序列表 <ol> <li> </li> </ol>

超链接: <a> </a>

<a href = “网页地址” target = “_blank”> </a>

target = “_blank” 在新窗口打开网页      target = “_self” 在当前窗口打开网页

图像链接 <img/> 

特殊符号的转义

小于号<&lt版权(C)&copy
大于号>&gt 商标(TM)&trade
空格&nbsp注册商标(R)&9reg

表格

表格的基本构成标签

table标签:表格标签           tr标签:表格中的行

th标签:表格的表头               td标签:表格单元格

表格的基本结构
<table>定义表格<tr>定义表行<th>定义表头</th></tr><tr><td>定义单元格</td></tr></table>

cellspacing cellspacing=“0” 设置单元格与单元格之间的距离

cellpadding cellpadding = “0” 设置单元格内容到边框的距离

align align = “left/center/right” 水平位置

valign valign = “top/middle/bottom” 垂直位置

cospan = “4” 跨多列合并 ---->水平合并

rowspan  = "2"  -----> 垂直合并    

表单

就在一个区域,拥有许多个输入和选择组件

让用户可以输入选择信息,最终将数据提交给服务器

action = "服务器地址"    method = "请求方式"

    input  单行输入框
      type = "text"
      name = "定义名称 名字自定义"   向后端提交的键
      placeholder = "提交信息"
      readonly = "readonly" 只读不能修改 但是可以提交
      disabled = "disabled" 禁用组件不能修改 不能提交
      type = "radio" 单选框
             多个选项的name必须相同才能互斥
             选择行组件必须要给默认的value
        type="checkbox"
        <select name="province"> 下拉选择框
            <option value="100">北京</option> 选项
            <option value="101">陕西</option>
        </select><br /> 
        <textarea name="adress"></textarea><br /> 多行文本框
        :<input type="file" 文本选择框
        type="submit" 提交按钮 触发表单的提交动作
        type="reset"  重置按钮
        type="button" 普通按钮

 实例实现:

	<body><form action="" method="get">账号:<input type="text" name="account" value="" placeholder="请输入账号" /><br />密码:<input type="password" name="password" /><br />性别:<input type="radio" name="gender" value="男" />男<input type="radio" name="gender" value="女" /> 女<br /><input type="checkbox" name="course" value="java"/> java<input type="checkbox" name="course" value="c"/>c <br />籍贯<select name="province"><option value="100">北京</option><option value="101">陕西</option></select><br />地址:<textarea name="adress"></textarea><br />附件:<input type="file" value="保存"/><br /><input type="submit" value="保存"/><input type="reset" /><input type="button" value="登录" onclick="alert(111)"/></form></body>

效果演示:

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/846902.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

力扣1984.数组任选k个数的最小极差

力扣1984.数组任选k个数的最小极差 思路&#xff1a;最终选定的k个数的方案一定可以排序成最大最小放两端的形式 所以将原数组排序 再取k长度的区间 一定能找到与原方案等价的一种方案 class Solution {public:int minimumDifference(vector<int>& nums, int k) {…

2024 年适用于 Mac 的 5 大免费录屏软件

要成为Mac的优秀屏幕录像机&#xff0c;捕获视频的高清质量和易于操作的界面是两个主要重要因素。此外&#xff0c;Mac上的付费屏幕录像机不仅可以输出高质量的屏幕捕获视频。您也可以在免费的视频捕获软件中获得类似的桌面录制服务。因此&#xff0c;如果您不需要以专业的方式…

Python 连接 Access 数据库:深入解析与实用技巧

Python 连接 Access 数据库&#xff1a;深入解析与实用技巧 在数据处理和分析的领域中&#xff0c;Python 凭借其强大的库和框架&#xff0c;成为了众多开发者和数据分析师的首选工具。然而&#xff0c;当涉及到与特定数据库如 Microsoft Access 的连接时&#xff0c;许多用户…

如何把docker里的内容拷贝出来

如何把docker里的内容拷贝出来 要从Docker容器中复制文件或目录出来&#xff0c;可以使用docker cp命令。以下是基本的命令格式和示例&#xff1a; 命令格式&#xff1a; docker cp [OPTIONS] CONTAINER:SRC_PATH DEST_PATH示例&#xff1a; 假设你有一个名为my_container的…

Python定义全局变量:深入剖析与实际应用

Python定义全局变量&#xff1a;深入剖析与实际应用 在Python编程中&#xff0c;全局变量是一个核心概念&#xff0c;它允许我们在函数或方法之外定义变量&#xff0c;并在整个程序范围内进行访问和修改。然而&#xff0c;全局变量的使用并非总是直观或简单的&#xff0c;它涉…

UE5增强输入系统入门

UE4直接在项目设置里设置的轴映射和操作映射在UE5中被标记为废弃&#xff0c;改为使用增强输入系统。 这两天学习了下蓝图和c中增强输入系统的使用&#xff0c;在这里分享一下。 学习使用的模板是第三人称模板(蓝图/c)&#xff0c;代码蓝图都参考的模板。 增强输入系统 UE5…

简单、实用、免费、无广告的图片自由分割工具

一、简介 1、是来自 Github 的一款简单、实用、免费、无广告的图片自由分割工具。它安装包大小在 4.5MB 左右,目前仅支持 Windows 和 Web 平台。 2、基本功能:支持图片自由纵向分割,横向分割,宫格分割,低仿 wps 看图图片分割,分割完成后,打开电脑的下载目录即可查看包含…

python-旋转字符串

问题描述&#xff1a;给定一个字符串&#xff08;以字符串数组的形式&#xff09;和一个偏移量&#xff0c;根据偏移量从左到右地旋转字符数组。 问题示例&#xff1a;输入str”abcdefg”,offset3,输出“efgabcd”。输入str”abcdefg”,offset0,输出“abcdefg”。&#xff08;返…

Python怎么打印:深入探索打印技巧与最佳实践

Python怎么打印&#xff1a;深入探索打印技巧与最佳实践 在Python编程中&#xff0c;打印&#xff08;或输出&#xff09;是一个基础且重要的操作。无论是用于调试、展示结果还是与用户交互&#xff0c;打印都扮演着关键角色。然而&#xff0c;尽管打印看似简单&#xff0c;但…

Python初学者入门:探索编程世界的奇妙之旅

Python初学者入门&#xff1a;探索编程世界的奇妙之旅 在这个信息爆炸的时代&#xff0c;编程技能已经成为一种不可或缺的能力。Python&#xff0c;作为一种简洁、易学的编程语言&#xff0c;成为许多初学者的首选。那么&#xff0c;对于初次接触Python的你&#xff0c;如何开…

clion配置ssh隧道转发 实现远程主机功能

clion配置ssh隧道转发 clion自带的ssh配置只能配置主机和用户名的格式来实现ssh&#xff0c;因此如果需要通过中间设备来访问调试主机的话就无法使用了。 配置ssh隧道的方式有两种&#xff0c;一种是直接配置 ~/.ssh/config 配置文件&#xff0c;一种是使用跳板机工具。clion…

Python热重载调试新利器

你一定遇到过这种情况&#xff1a;Python脚本已经运行&#xff0c;却发现自己忘记打印输出需要记录的信息(比如for循环中打印更多详细信息)。 此时&#xff0c;如若暂停运行的代码&#xff0c;修改补充再重新运行整个代码&#xff0c;尤其对于已经运行数多个小时的模型训练来说…

机械硬盘坏道的文件系统级别的屏蔽方法

从5月中旬无意看到拼夕夕有9.9的320g的小硬盘&#xff0c;于是我就买了几个回来&#xff0c;结果20元老板发给了我7个&#xff01;&#xff01;&#xff01;我个人还是比较惊讶的&#xff0c;难道不值钱到这地步了吗&#xff0c;相当于20元2T硬盘的数据量了&#xff01;我本来打…

生成式 AI——ChatGPT、Dall-E、Midjourney 等算法理念探讨

1.概述 艺术、交流以及我们对现实世界的认知正在迅速地转变。如果我们回顾人类创新的历史&#xff0c;我们可能会认为轮子的发明或电的发现是巨大的飞跃。今天&#xff0c;一场新的革命正在发生——弥合人类创造力和机器计算之间的鸿沟。这正是生成式人工智能。 生成模型正在模…

python替换“${}“占位符为变量,实现读取配置文件

文章目录 背景1、定义正则表达式2、替换变量占位符3、实现功能 背景 使用python编写小工具&#xff0c;有一个配置文件&#xff0c;希望实现类似shell命令的&#xff0c;定义变量并且使用${}或者$来引用。如果有好的建议欢迎讨论。 配置文件示例内容如下: D:\project\test\pr…

K8S为什么弃用Docker:容器生态的演进与未来

引言 Kubernetes&#xff08;K8S&#xff09;自2014年由Google发布以来&#xff0c;已成为容器编排和管理的事实标准。Docker作为容器技术的先驱&#xff0c;曾与Kubernetes紧密合作&#xff0c;提供了容器运行时的基础。然而&#xff0c;随着容器生态的快速发展&#xff0c;K…

IGraph使用实例——线性代数计算(blas)

1 概述 在图论中&#xff0c;BLAS&#xff08;Basic Linear Algebra Subprograms&#xff09;并不直接应用于图论的计算&#xff0c;而是作为一套线性代数计算中通用的基本运算操作函数集合&#xff0c;用于进行向量和矩阵的基本运算。然而&#xff0c;这些基本运算在图论的相…

csrf漏洞与ssrf漏洞

环境&#xff1a;用kali搭建的pikachu靶场 一.CSRF 1.CSRF漏洞简介 跨站请求伪造&#xff08;CSRF&#xff09;漏洞是一种Web应用程序安全漏洞&#xff0c;攻击者通过伪装成受信任用户的请求来执行未经授权的操作。这可能导致用户在不知情的情况下执行某些敏感操作&#xff0…

遥感之特征选择-禁忌搜索算法

各类智能优化算法其主要区别在于算法的运行规则不同&#xff0c;比如常用的遗传算法&#xff0c;其规则就是变异&#xff0c;交叉和选择等&#xff0c;各种不同的变体大多是在框架内的实现细节不同&#xff0c;而本文中的禁忌算法也是如此&#xff0c;其算法框架如下进行介绍。…

Python 语法好乱:深度解析与应对策略

Python 语法好乱&#xff1a;深度解析与应对策略 Python&#xff0c;作为一门简洁明了的编程语言&#xff0c;广受编程初学者的喜爱。然而&#xff0c;随着学习的深入&#xff0c;许多学习者会发现Python的语法似乎并不像初看起来那么简单&#xff0c;甚至有时会感到“好乱”。…