HTML快速入门

已于 2024-04-14 15:14:09 修改
阅读量983 收藏 23
点赞数 35
分类专栏： html 文章标签： html 前端
于 2024-04-13 20:11:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46702681/article/details/137723221
版权

HTML简介

HTML（超文本标记语言）是一种用于创建网页和Web应用程序的标记语言。它由一系列标签组成，每个标签通过尖括号来定义，并用于标记文本、图像、链接和其他内容。HTML标签描述了网页中的信息结构和布局，并定义了文本的样式和格式。

HTML是一种基于标记的语言，它使用标签来表示文档的各个部分。标签由一对尖括号包围，通常以开始标签和结束标签的形式出现。开始标签表示一个元素的开始，而结束标签表示一个元素的结束。标签之间可以包含文本内容或其他标签，用于嵌套和组织内容。

HTML标签具有一些属性，属性用于提供有关元素的附加信息。属性以名称-值对的形式出现，并包含在开始标签中。属性可以用于指定元素的样式、链接目标、图像地址等。

通过使用HTML标签和属性，开发人员可以创建包含文本、图像、链接、表格、表单等各种内容的网页。HTML还支持使用CSS（层叠样式表）来定义和控制网页的外观和样式，以及使用JavaScript来添加交互性和动态效果。

HTML是互联网的基础，几乎所有的网页和Web应用程序都使用HTML进行开发。它是学习Web开发的重要基础知识，对于理解和创建网页具有重要意义。

-----------------------------------------------------------------------------------------------------------

HTML快速入门

下面我们来看看该如何使用

如何才能敲出如图的内容呢？

1.新建文本文件，后缀名改为 .html

2.编写 HTML 结构标签

<HTML>   定义 HTML 文档
<head>     定义关于文档的信息
<title>       定义文档的标题
<body>     定义文档的主体
3.在<body>中定义文字

<html>
	<head>
	    <title></title>	
    </head>
    <body>
    </body>
</html>

在HTML中，<title>标签用于定义网页的标题。<body> 标签用于定义 HTML 文档的主体，其中包含了所有要显示在浏览器窗口中的内容，包括文本、图像、列表、表格等。

 我们还可以给字上点颜色

<html>
	<head>
	    <title>html快速入门</title>	
    </head>
    <body>
	<font color="red">努力努力再努力</font>
    </body>
</html>

显示结果如下 

-----------------------------------------------------------------------------------------------------------------------------

基础标签

<h1>- <h6>            定义标题，h1最大，h6最小
<font>                    定义文本的字体、字体尺寸、字体颜色
<b>                        定义粗体文本
<i>                         定义斜体文本
<U>                       定义文本下划线
<center>                定义文本居中
<p>                        定义段落
<br>                       定义换行
<hr>                       定义水平线

<h1>- <h6>   定义标题，h1最大，h6最小 


<font>  定义文本的字体、字体尺寸、字体颜色 

face控制字体，size控制大小，color控制颜色

<b><i><u>标签  <b>定义粗体文本     <i>定义斜体文本   <u>定义文本下划线

<br>定义换行

在<br>的位置就换行了 

<center> 文本居中 

可以看到内容被显示在了中间 

 <p>定义片段

如果想显示下面这段文字的话

如果直接将这段文字输入进去的话，显示出来的是👇面这样的

 就是一句话，并没有分段，那这时我们就需要<p>标签了

 浏览器中显示如下

<br>换行

<hr>  定义水平线

直接加个<hr>就有水平线了

图片音频视频标签

<img>                定义图片
<audio>             定义音频
<video>             定义视频

img:定义图片

  • src:规定显示图像的 URL(统一资源定位符)
  • height:定义图像的高度
  • width:定义图像的宽度

audio:定义音频。支持的音频格式:MP3、WAV、OGG

  • src:规定音频的 URL
  • controls:显示播放控件

video:定义视频。支持的音频格式:MP4,WebM、OGG

  • src:规定视频的 URL
  • controls:显示播放控件

img 定义图片

这样图片就显示出来了，还可以调整图片的高度和宽度

<img src="图片路径" width=" 宽度"  height="高度">

 

尺寸单位：px 像素（上面的数字就是用的像素单位）

                  百分比（我们来看下面的演示）

可以看到我将宽度改为了50%，其实就是占整个浏览器显示部分的一半

audio:定义音频。支持的音频格式:MP3、WAV、OGG

<audio src="音频的路径" controls="controls"></audio>

 controls="controls"可以直接省略的打一个controls就可以了，html也可以识别

video:定义视频。支持的音频格式:MP4,WebM、OGG

<video src="视频的路径" controls></video>

视频的大小可以通过width和height来修改

 下面我们来说一下路径的问题

如果在同一目录下的话可以直接写

但如果是同一目录下另一个包的话，就应该像下图所示在前面加上文件名。./是可以省略的，表示上一级

 如果html与jpg在平级不同包下的话，就得如下所示。../表示上一级的上一级的test下的jpg文件

超链接标签

<a>  定义超链接，用于链接到另一个资源

  • href:指定访问资源的URL
  • target:指定打开资源的方式

                self:默认值，在当前页面打开

                blank:在空白页面打开

 点击之后即可跳转

加个target="black"之后，就会打开另外一个空白页面打开

列表标签 

<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项

  • 有序列表

1、吃饭                                                                              

2、敲代码                                                        

3、睡觉                                                                                                                              

  <ol> 

        <li>吃饭</li>

        <li>敲代码</li>

        <li>睡觉</li>

  </ol>

 

  • 无序列表

  • 吃饭                                                                              
  • 敲代码                                                        
  • 睡觉     

  <ul> 

        <li>吃饭</li>

        <li>敲代码</li>

        <li>睡觉</li>

  </ul>

表格标签 

<table>        定义表格
<tr>              定义行
<td>             定义单元格
<th>             定义表头单元格

  • table:定义表格

                border:规定表格边框的宽度

                width :规定表格的宽度
                cellspacing:规定单元格之间的空白

  • tr:定义行

                align:定义表格行的内容对齐方式

  • td:定义单元格

                rowspan:规定单元格可横跨的行数

                colspan:规定单元格可横跨的列数

 

如果想要完成这样的表格该如何实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1" cellspacing="0" width="500">
  <tr align="center">
    <th>序号</th>
    <th>品牌logo</th>
    <th>品牌名称</th>
    <th>企业名称</th>
  </tr>
  <tr align="center">
    <td>010</td>
    <td><img src="jpg/三只松鼠.png" width="60" height="50"></td>
    <td>三只松鼠</td>
    <td>三只松鼠</td>
  </tr>
  <tr align="center">
    <td>009</td>
    <td><img src="jpg/优衣库.png" width="60" height="50"></td>
    <td>优衣库</td>
    <td>优衣库</td>
  </tr>
  <tr align="center">
    <td>008</td>
    <td><img src="jpg/小米.png" width="60" height="50"></td>
    <td>小米</td>
    <td>小米科技有限公司</td>
  </tr>
</table>

</body>
</html>

 colspan:规定单元格可横跨的列数

 rowspan:规定单元格可横跨的行数

下面我们来做个小练习

实现课程表

 大家可以自己先试一试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1" cellspacing="0" width="500"><!--规定表格边框的宽度,规定单元格之间的空白,规定表格的宽度-->
  <tr>
    <th colspan="2"></th><!--规定单元格可横跨的列数-->
    <th>星期一</th>
    <th>星期二</th>
    <th>星期三</th>
    <th>星期四</th>
    <th>星期五</th>
  </tr>
  <tr>
    <td rowspan="4">上午</td><!--规定单元格可横跨的行数-->
    <td>早自习</td>
    <td>英语</td>
    <td>语文</td>
    <td>英语</td>
    <td>语文</td>
    <td>英语</td>
  </tr>
  <tr>
    <td>第1节</td>
    <td>数学</td>
    <td>数学</td>
    <td>数学</td>
    <td>数学</td>
    <td>数学</td>
  </tr>
  <tr>
    <td>第2节</td>
    <td>物理</td>
    <td>物理</td>
    <td>物理</td>
    <td>物理</td>
    <td>物理</td>
  </tr>
  <tr>
    <td>第3节</td>
    <td>化学</td>
    <td>化学</td>
    <td>化学</td>
    <td>化学</td>
    <td>化学</td>
  </tr>
  <tr>
    <td colspan="7" align="center">午休</td><!--规定单元格可横跨的列数-->
  </tr>
  <tr>
    <td rowspan="3">下午</td><!--规定单元格可横跨的行数-->
    <td>第4节</td>
    <td>生物</td>
    <td>生物</td>
    <td>生物</td>
    <td>生物</td>
    <td>生物</td>
  </tr>
  <tr>
    <td>第5节</td>
    <td>英语</td>
    <td>英语</td>
    <td>英语</td>
    <td>英语</td>
    <td>英语</td>
  </tr>
  <tr>
    <td>第6节</td>
    <td>语文</td>
    <td>语文</td>
    <td>语文</td>
    <td>语文</td>
    <td>语文</td>
  </tr>

</table>

</body>
</html>

显示出来就是我们想要的结果

 

布局标签

<div>        定义 HTML 文档中的一个区域部分，经常与 CSS 一起使用，用来布局网页
<span>      用于组合行内元素。 

 可以看到div占满了一整行，span只占了所写区域

表单标签

  • 表单:在网页中主要负责数据采集功能，使用<form>标签定义表单
  • 表单项(元素):不同类型的 input 元素、下拉列表、文本域等

<form>             定义表单
<input>             定义表单项，通过type属性控制输入形式
<label>             为表单项定义标注
<select>           定义下拉列表
<option>           定义下拉列表的列表项
<textarea>        定义文本域

  •  form:定义表单

                1、action:规定当提交表单时向何处发送表单数据，URL
                2、 method :规定用于发送表单数据的方式
                                （1）get:浏览器会将数据直接附在表单的 action URL之后。大小有限制
                                （2）post:浏览器会将数据放到http请求消息体中。大小无限制

 form:
        action:指定表单数据提交的URL
                *表单项数据要想被提交，则必须指定其name属性

        method:指定表单提交的方式
                1.get:默认值
                        请求参数会拼接在URL后边
                        url的长度有限制 4KB

                2.post:
                        请求参数会在http请求协议的请求体中                
                        请求参数无限制的

 表单项标签

<input>:表单项，通过type属性控制输入形式

<select>:定义下拉列表

<option>定义列表项
<textarea>:文本域  

type的取值

text                   默认值。定义单行的输入字段
password         定义密码字段
radio                定义单选按钮
checkbox        定义复选框
file                   定义文件上传按钮
hidden             定义隐藏的输入字段 

submit        定义提交按钮，提交按钮会把表单数据发送到服务器
reset          定义重置按钮，重置按钮会清除表单中的所有数据
button        定义可点击按钮

test，password 

  用label标签可以完成点击用户名跟密码，自动跳转到框框里

  radio

但是选择还有一个缺点，就是男女可以同时选中 

只需要给他们俩取一个相同的名字，就会互斥


可以在加个label标签，可以使用户的体验更好

checkbox

 file

reset，button

重置按钮一点击，上面写的数据就都被清空了

 select，option标签

textarea标签

 cols控制文本框的行，rows控制文本框的列

 -----------------------------------------------------------------------------------------------------------

好的，这一期就到这里啦，我们下期再见！继续努力努力再努力！！！

 

努力敲代码的小火龙
关注
  • 35
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
【Python爬虫必备—＞Scrapy框架快速入门篇——上】
孤寒者的博客
08-09 56万+
【Python爬虫必备—＞Scrapy框架快速入门篇——上】
HTML零基础入门教程（详细）
ZONGXP的博客
10-22 21万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
HTML入门（详细）
qq_63525426的博客
05-03 1万+
HTML（全称为“超文本标记语言”）是一种用于创建Web页面的标记语言。它是Web开发的基础，允许开发者定义页面的结构、内容和样式。HTML使用一些标记或“标签”来描述文本和媒体内容的结构和格式，这些标签可以指示网页浏览器如何显示内容，包括标题、段落、列表、超链接、图像、音频、视频等等。HTML还可以与其他Web技术（如CSS和JavaScript）结合使用，以实现更复杂和交互性的Web应用程序。这篇文章只是介绍HTML的基础标签的使用。
cmake快速入门
热门推荐
不忘初心
09-12 22万+
简介 cmake是kitware公司以及一些开源开发者在开发几个工具套件(VTK)的过程中所产生的衍生品。后来经过发展，最终形成体系，在2001年成为一个独立的开放源代码项目。其官方网站是www.cmake.org，可以通过访问官方网站来获得更多关于cmake的信息，而且目前官方的英文文档比以前有了很大的改进，可以作为实践中的参考手册。 下载和安装以及使用：https://fukun.org/archives/0421949.html 一、为何要使用项目构建工具？ ......
快速入门HTML和CSS
m0_54129816的博客
03-12 1740
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言这里只是讲一些我自己学习网页制作后认为可以快速掌握的学习方法和小技巧。因为不可能一篇本章就可以把HTML讲的非常清楚明白。感兴趣的可以向下看一看。一、HTML和CSS是什么？二、清楚要重点学什么说回来网页制作这块，我认为重点学习的话是css和javaScript，html的元素常用的会用后，拿过来知道几个结构我觉得差不多了，css才是能让你的网页焕然一新的工具。另外为什么说javascript也是重点？因为学到最后每个人做出来.
Webpack 快速入门
SolidCocoi的博客
06-30 1708
快速入门 Webpack，体验 js 打包过程
BootStrap快速入门
康世行
02-07 2783
概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 2. 响应式布局。 * 同一套页面可以兼容不同分辨率的设备。 目录 快速入门： 环境设置： ...
Vue快速入门
ccz80的博客
07-12 2804
Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定双向数据绑定 2. 在JS代码区域，创建Vue核心对象，进行数据绑定 3. 编写视图 在HTML里面 4.完整代码 （简单入门小例子） 2.v-model: 双向数据绑定 3.v-on： 事件响应 5.v-for 完整演示代码： 三、Vue生命周期 mounted 加载完成自动
ArkTS快速入门
m0_56308072的博客
12-08 3557
ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript（简称TS）基本语法风格的基础上，对TS的动态类型特性施加更严格的约束，引入静态类型。同时，提供了声明式UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用。简而言之，ArkTS是华为官方推荐的HarmonyOS开发的主力语言，它是华为自己开发的语言。由于HarmonyOS3.0之后就不再支持Java开发了，因此我们要在鸿蒙系统上开发app，就需要学习这门语言。
Cesium快速入门
【cacrle】的博客
01-23 2299
现有的gis开发方向较流行的是webgis开发，其中Cesium是一款开源的WebGIS库，主要用于实时地球和空间数据的可视化和分析。它提供了丰富的地图显示和数据可视化功能，并能实现三维可视化开发。Cesium适用于地球科学研究、军事情报分析、航空航天领域以及虚拟现实应用等方面。本文是基于Cesium教程进行实践操作后的总结，以使新手能快速入门Cesium。
html快速入门
10-26
快速学习html，快速入门，适合生手学习
css html快速入门
04-16
css html快速入门的教材，非常适用于初学者。
html基础文档快速入门
02-04
html基础文档快速入门
HTML快速入门多实例
10-26
非常全面的HTML自学教程，有很多实例。
html+css快速入门教程.pdf
06-25
nodeing课堂的资料 html+css个人觉得还不错，总结了经典的知识，满满的干货
破解ReadOnly: 如何在HTML中灵活处理不可编辑字段
m0_57021623的博客
05-16 661
对于服务器端处理关键字段，如价格或折扣率，最佳实践是在服务器端重新计算这些值或从可信源（例如数据库）验证这些值，以确保数据的完整性和正确性。是HTML中用于表单输入字段的一个属性，它的目的是阻止用户修改输入字段的值，但允许用户提交表单时包含这些值。方法来修改页面元素的属性，提供了更多的灵活性和控制能力，特别是在处理那些通过HTML属性强制施加的限制时。，通常有其背后的理由，比如保护数据的完整性。对于一些关键字段，如价格、折扣率等，服务器端可以在每次处理前都重新计算或验证这些数据，而不是依赖前端提交的值。
前端基础入门三大核心之HTML篇 —— 深入解析从URL请求到页面加载的艺术
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 329
前端技术的博大精深，远不止于此。从HTML的简单解析到复杂的SPA应用，每一步都蕴含着开发者对极致体验的追求。本文旨在为你铺就一条坚实的基础之路，鼓励你不断深入学习，探索新技术，实践新理念。前端的世界日新月异，保持好奇心，勇于实践，你将在这条道路上走得更远。最后，我们期待你在评论区分享你的学习心得、实战经验或是对未来前端发展的独到见解，让我们一起推动Web技术的车轮滚滚向前。欢迎来到我的博客，很高兴能够在这里和您见面！
JavaWeb-01：HTML,CSS,JavaScript,DOM的理解
博客
05-17 140
HTML,CSS,JavaScript,DOM的理解
零基础HTML教程(34)--HTML综合实例
程序员大阳
05-18 672
DOCTYPE html > < html > < head > < meta charset = " utf-8 " > < title > 生平简介 </ title > </ head > < body > <!-- 头部 --> < header > < h1 > 苏轼网 </ h1 > </ header > <!
html两小时快速入门
09-09
对于HTML的快速入门，我可以为您提供一些基本的指导和资料。首先，HTML是用于创建网页的标记语言。下面是一个简单的HTML代码示例，它创建了一个最基本的网页： ```html <!DOCTYPE html> <html> 我的第一个网页 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

努力敲代码的小火龙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值