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>

效果演示:

 

 

 

 

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

攻防世界---misc---reverseMe

攻防世界---misc---reverseMe

1、这道题是做过最简单的misc题&#xff0c;下载附件是一个图片 2、flag是反的&#xff0c;但是可以自己倒着推也能写出 3、这里推荐使用工具&#xff0c;双击图片&#xff0c;它打开是用的系统自带的软件打开 点击这里最图片编辑 4、接着点击矫正 5、点击这个左右翻转 6、得…
阅读更多...
64位Office API声明语句第119讲

64位Office API声明语句第119讲

跟我学VBA&#xff0c;我这里专注VBA, 授人以渔。我98年开始&#xff0c;从源码接触VBA已经20余年了&#xff0c;随着年龄的增长&#xff0c;越来越觉得有必要把这项技能传递给需要这项技术的职场人员。希望职场和数据打交道的朋友&#xff0c;都来学习VBA,利用VBA,起码可以提高…
阅读更多...
我们如何管理网站权限？这么操作最简单

我们如何管理网站权限？这么操作最简单

网站权限有哪些 在知道如何管理网站权限之前我们先来了解一下网站权限都有哪些。在日常我们使用浏览器的时候网站都会使用你同意的某些权限进行一些操作&#xff0c;下面是总结的一些网站权限&#xff1a; 位置访问权限&#xff1a;控制网站是否可以访问你的地理位置数据。 …
阅读更多...
【MATLAB源码-第220期】基于matlab的Massive-MIMO误码率随着接收天线变化仿真采用ZF均衡和QPSK调制。

【MATLAB源码-第220期】基于matlab的Massive-MIMO误码率随着接收天线变化仿真采用ZF均衡和QPSK调制。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 1. 系统背景与目标 无线通信系统的发展极大地推动了现代通信技术的进步&#xff0c;从移动通信到无线局域网&#xff0c;甚至是物联网&#xff0c;均依赖于无线通信系统的高效和可靠性。在无线通信系统中&#xff0c;核心目…
阅读更多...
详解和实现数据表格中的行数据合并功能

详解和实现数据表格中的行数据合并功能

theme: smartblue 前言 需求场景&#xff1a; 在提供了数据查看和修改的表格视图中(如table、a-table等…)&#xff0c;允许用户自行选择多行数据&#xff0c;依据当前状态进行特定列数据的合并操作。选中的数据将统一显示为选中组的首条数据值。同时&#xff0c;页面会即时反…
阅读更多...
k8s怎么监听资源的变更

k8s怎么监听资源的变更

监听k8s所有的 Deployment 资源 package mainimport ("context""fmt"v1 "k8s.io/api/apps/v1""k8s.io/apimachinery/pkg/util/json""k8s.io/client-go/informers""k8s.io/client-go/kubernetes""k8s.io/cli…
阅读更多...
linux,lseek,append用法

linux,lseek,append用法

打开写的.c文件 内容为 代码 <sys/stat.h> #include <fcntl.h> #include<stdio.h> #include<unistd.h> #include<string.h>//off_t lseek(int fd, off_t offset, int whence); //int open(const char *pathname, int flags); //int open(const …
阅读更多...
一个AI板卡电脑--香橙派 AIpro

一个AI板卡电脑--香橙派 AIpro

本文算是一个开箱测评&#xff0c;主要评估它和一个电脑的距离。 香橙派官网&#xff1a;香橙派(Orange Pi)-Orange Pi官网-香橙派开发板,开源硬件,开源软件,开源芯片,电脑键盘香橙派&#xff08;Orange Pi&#xff09;是深圳市迅龙软件有限公司旗下开源产品品牌;香橙派&#x…
阅读更多...
【触想智能】工业平板电脑在高铁上的应用分析

【触想智能】工业平板电脑在高铁上的应用分析

随着科技的快速发展&#xff0c;平板电脑作为一种新型的电子设备&#xff0c;已经逐渐成为人们日常生活中的必需品。而工业平板电脑则是一种更为专业的平板电脑&#xff0c;可以应用于各种工业领域&#xff0c;如交通、制造业、医疗、金融、人工智能等。 今天&#xff0c;小编为…
阅读更多...
Oracle Hint /*+APPEND*/插入性能总结

Oracle Hint /*+APPEND*/插入性能总结

oracle append用法 Oracle中的APPEND用法主要用于提高数据插入的效率。 基本用法&#xff1a;在使用了APPEND选项后&#xff0c;插入数据会直接加到表的最后面&#xff0c;而不会在表的空闲块中插入数据。这种做法不需要寻找freelist中的free block&#xff0c;从而避免了在…
阅读更多...
推荐一个图片识别的llama3微调版本 清华面壁项目

推荐一个图片识别的llama3微调版本 清华面壁项目

水一篇&#xff1a; MiniCPM-V是面向图文理解的端侧多模态大模型系列。该系列模型接受图像和文本输入&#xff0c;并提供高质量的文本输出。自2024年2月以来&#xff0c;我们共发布了4个版本模型&#xff0c;旨在实现领先的性能和高效的部署&#xff0c;目前该系列最值得关注的…
阅读更多...
36【Aseprite 作图】蒸笼盖——拆解

36【Aseprite 作图】蒸笼盖——拆解

1 蒸笼盖框架 里圈和外圈的形状都是一样的 扶手处&#xff0c;2 1 2 2 2&#xff08;最好都是2&#xff0c;拐角处用1&#xff09; 2 上色 中间的波浪&#xff0c;是2 2 2 上&#xff08;再 2 2 2 下&#xff09; 下方阴影&#xff0c;左边的阴影&#xff0c;右边的阴影颜色…
阅读更多...
【Elasticsearch】es基础入门-02.RestClient操作索引库

【Elasticsearch】es基础入门-02.RestClient操作索引库

RestClient操作索引库 示例&#xff1a; 一.分析数据结构&#xff0c;写索引库 #酒店的mapper PUT /hotel {"mappings": {"properties": {"id":{"type": "keyword"},"name":{"type": "text",…
阅读更多...
p5开发helloworld

p5开发helloworld

注意&#xff0c;执行的时候&#xff0c;后面不用带class的后缀
阅读更多...
速递FineWeb：一个拥有无限潜力的15T Tokens的开源数据集

速递FineWeb：一个拥有无限潜力的15T Tokens的开源数据集

大模型技术论文不断&#xff0c;每个月总会新增上千篇。本专栏精选论文重点解读&#xff0c;主题还是围绕着行业实践和工程量产。若在某个环节出现卡点&#xff0c;可以回到大模型必备腔调或者LLM背后的基础模型新阅读。而最新科技&#xff08;Mamba,xLSTM,KAN&#xff09;则提…
阅读更多...
SuperMap GIS基础产品FAQ集锦(20240603)

SuperMap GIS基础产品FAQ集锦(20240603)

一、SuperMap iDesktopX 问题1&#xff1a;请教一下&#xff0c;桌面把火星坐标系的数据投影转换为4326坐标系数据如何才能没有偏移呢&#xff1f; 11.1.1 【解决办法】可以使用iDesktopX提供的“电子地图坐标转换”插件实现对火星坐标系数据的纠偏。 问题2&#xff1a;请教…
阅读更多...
基于鲲鹏服务器搭建简单的开源论坛系统（LAMP)实践分享

基于鲲鹏服务器搭建简单的开源论坛系统（LAMP)实践分享

LAMPLinux apache mysql( mariadb) PHP 结合利用华为云弹性负载均衡ELB弹性伸缩AS服务 优点&#xff1a; 将访问流量自动分发到多台云服务器&#xff0c;扩展应用系统对外的服务能力&#xff0c;实现更高水平的应用容错&#xff1b; 根据不同的业务、访问需求和预设策略&…
阅读更多...
Kafka之Consumer原理

Kafka之Consumer原理

1. Kafka消息消费流程 kafka的消费流程&#xff0c;首先是producer生产消息经过处理后放入到Broker服务器中&#xff0c;然后进入到内存中&#xff0c;内存再进行刷盘到磁盘中&#xff0c;kafak提供了两种刷盘策略&#xff0c;同步刷盘(flush.message 一次IO刷盘多少消息)和异…
阅读更多...
PTA字符串删除

PTA字符串删除

已知del_str为字符串str中要删除的子串&#xff0c;请结合所学字符串操作实现在str中删除所有del_str子串&#xff0c;并统计del_str在str中出现的次数。 输入格式: 123dufvdfv123dfljvb 123 输出格式: dufvdfvdfljvb #include<stdio.h> #include<string.h> in…
阅读更多...
SSM物流管理系统的设计与实现-计算机毕业设计源码44323

SSM物流管理系统的设计与实现-计算机毕业设计源码44323

摘 要 科技进步的飞速发展引起人们日常生活的巨大变化&#xff0c;电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用。信息时代的到来已成为不可阻挡的时尚潮流&#xff0c;人类发展的历史正进入一个新时代。在现实运用中&#xff0c;应用软件的工作…
阅读更多...
最新文章

Copyright @ 2022~2023