【Web前端入门学习】——HTML

最新推荐文章于 2024-05-18 11:09:56 发布
最新推荐文章于 2024-05-18 11:09:56 发布
阅读量830 收藏 14
点赞数 30
文章标签： 前端 学习 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69260381/article/details/136418721
版权

目录

HTML简介

HTML全称是Hypertext Markup Language超文本标记语言。
HTML的作用： 为网页提供结构，告诉浏览器哪部分是标题，哪些部分是段落，哪些部分是列表等。
HTML如何告诉浏览器哪些部分是标题、段落或列表呢？
HTML通过标签（或者叫元素）来定义文本、图像、链接等等。HTML标签是由尖括号包围的关键字。
HTML标签可以通过属性来提供更多信息，标签通常成对出现 ，包括开始标签和结束标签，拥有开始标签和结束标签的也成为双标签，内容处于这两个标签之间。

双标签：

<p>这是一个段落。</p>   <!--段落标签-->
<hl>这是一个标题。</hl>  <!--一级标题标签-->
<a href="#">这是一个超链接。</a> <!--超链接标签-->

单标签：（没有结束标签）

<input type="text">  <!--input标签-->
<br>  //换行标签
<hr>  //分割线标签

单标签与双标签的区别： 单标签用于没有内容的元素，双标签用于有内容的元素。

HTML文件结构

在这里插入图片描述

使用vscode生成完整的HTML文件结构：
在空白的HTML文档首行输入*!+Tab*，就会得到一个完整的HTML文档结构，名字叫做Document。
如下图所示：
在这里插入图片描述
鼠标右键点击Open with live Server
在这里插入图片描述
使用浏览器打开的界面如下：
在这里插入图片描述
将文档名字改为“HTML 练习”，再次用浏览器打开页面，结果如下：
在这里插入图片描述
此时文件目录的搭建已经基本完成了。

常用文本标签

标题标签

    <h1>一级标题标签</h1>
    <h2>二级标题标签</h2>
    <h3>三级标题标签</h3>
    <h4>四级标题标签</h4>
    <h5>五级标题标签</h5>
    <h6>六级标题标签</h6>

在这里插入图片描述

段落标签

    <p>这是一个段落标签。</p>
    <p>更改字体样式：<b>字体加粗</b></p>
    <p>更改字体样式：<strong>字体加粗</strong></p>
    <p>更改字体样式：<i>斜体</i></p>
    <p>更改字体样式：<u>下划线</u></p>
    <p>更改字体样式：<s>删除线</s></p>

在这里插入图片描述

有序列表和无序列表

无序列表：

<!--无序列表ul-->
    <ul>
        <li>无序列表元素1</li>
        <li>无序列表元素2</li>
        <li>无序列表元素3</li>
    </ul>

有序列表：

    <!--有序列表ol-->
    <ol>
        <li>有序列表元素1</li>
        <li>有序列表元素2</li>
        <li>有序列表元素3</li>
    </ol>

在这里插入图片描述

表格标签

    <!--表格标签-->
    <h1>th--table header</h1>
    <h1>tr--table row</h1>
    <h1>td--table data</h1>
    <table>
        <tr>
            <th>tile 1</th>
            <th>tile 2</th>
            <th>tile 3</th>
        </tr>
        <tr>
            <td>元素1</td>
            <td>元素2</td>
            <td>元素3</td>
        </tr>
        <tr>
            <td>元素11</td>
            <td>元素22</td>
            <td>元素33</td>
        </tr>
        <tr>
            <td>元素12</td>
            <td>元素21</td>
            <td>元素31</td>
        </tr>
    </table>


同时也可以为我们的表格添加边框

<!--表格标签-->
    <h1>th--table header</h1>
    <h1>tr--table row</h1>
    <h1>td--table data</h1>
    <table border="1"> <!--1代表表格宽度,border是table标签的一个属性-->
        <tr>
            <th>tile 1</th>
            <th>tile 2</th>
            <th>tile 3</th>
        </tr>
        <tr>
            <td>元素1</td>
            <td>元素2</td>
            <td>元素3</td>
        </tr>
        <tr>
            <td>元素11</td>
            <td>元素22</td>
            <td>元素33</td>
        </tr>
        <tr>
            <td>元素12</td>
            <td>元素21</td>
            <td>元素31</td>
        </tr>
    </table>

在这里插入图片描述

HTML属性

HTML属性用于定义元素的行为和外观，以及与其他元素的关系。
基本语法：

<开始标签 属性名=“属性值”>

每个HTML元素可以具体不同的属性。

    <p id="describe" class="section">这是一个段落标签。</p>
    <a href="https://www.baidu.com">这是一个超链接标签。</a>

属性名称不区分大小写，属性值对大小写敏感。

    <img src="example.jpg" alt="">
    <img SRC="example.jpg" alt="">
    <img src="EXAMPLE.JPG" alt="">
    <!--前两者相同，后两者完全不一样-->

a标签—超链接标签

    <a href="https://www.baidu.com">这是第一个段落标签。</a>
    <br><!--换行标签-->
    <a href="https://www.baidu.com" target="_blank">这是第二个段落标签。</a>
    <hr><!--水平分割线-->

target属性——决定链接的打开方式。
target属性有四个属性值：
_blank:表示链接在新的窗口或者标签页中打开。
_self:是一个默认值，表示链接在当前窗口或者标签页中打开。
_parent:表示链接会在父窗口和父框架中打开。
_top:表示链接会在顶层窗口或顶层框架中打开。

图片标签

    <img src="logo.png.jpeg" alt="">

也可以直接粘贴图片的链接。
alt后面的值可以不留白，如果图片无法显示，那么在alt的值输入该图片无法显示，结果如下：
在这里插入图片描述
img内还可以设置图片的高度和宽度

    <img src="logo.png.jpeg" alt="" width="100" height="100">

在这里插入图片描述

HTML区块

有些元素在浏览器中是独占一行的，而其他元素不能和这个元素位于同一行。
独占一行是指在浏览器中独占一行而不是在vscode代码文件中独占一行。根据元素的表现形式分为行内元素和块元素。

块元素与行内元素

块级元素：通常用于组织和布局页面的主要结构和内容，例如段落、标题、列表、表格。他们用于创建页面的主要部分。将内容分隔成逻辑块。

1、块级元素通常会从新行开始，并占据整行的宽度。因此他们会在页面上呈现为一块独立的内容块。
2、块元素可以包含其他块级元素和行内元素。
3、常见的块级元素：
<div> <p> <h1>到<h6> <ul> <ol> <li> <table> <form>等

行内元素： 通常用于添加文本样式或为文本中的一部分应用样式。他们可以在文本中插入小的元素，例如超链接、强调文本等。

1、行内元素通常在同一行内呈现，不会独占一行。
2、他们只占据其内容所需的宽度，而不是整行的宽度。
3、 行内元素不能包含块级元素，但可以包含其他行内元素。
4、常见的行内元素包括：
<span> <a> <strong> <em> <img> <br> <input>等

div标签： div标签是一个块级标签，通常用于创建一个可以包含其他元素的容器块，也可以说是创建一个页面的布局结构。
span标签： 用于内联样式化文本，给文本的一部分应用样式或者标记。

在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML区块</title>
</head>
<body>
    <div class="nav">
        <a href="#">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
        <a href="#">链接4</a>
        <a href="#">链接5</a>
    </div>
    <div class="content"></div>
    <h1>文章标题</h1>
    <p>文章内容</p>
    <p>文章内容</p>
    <p>文章内容</p>
    <p>文章内容</p>
    <span>这是一个span标签。</span>
    <span>这是一个span标签。</span>
    <span>这是一个span标签。</span>
    <span>这是一个span标签。</span>
</body>
</html>

在这里插入图片描述

HTML表单

form标签： form标签是表单中的容器。如果要创建一个表单，那么只需要将表单中的所有元素必须包含在form标签内部。
input标签： type属性
type属性默认值text，会默认出现文本框

    <form>
        <input type="text">
    </form>

在这里插入图片描述
type属性placeholder，作用是可以在文本框中填写一些你想要让他显示的字。

    <form>
        <input type="text" placeholder="请输入内容">
    </form>

在这里插入图片描述
在这里插入图片描述
type属性value，规定了填写的值，而placeholder只是在文本框中给一个提示。

    <form>
        <input type="text" placeholder="请输入内容"><br><br>
        <input type="text" value="请输入内容">
    </form>

在这里插入图片描述
在form表单中，有专门为input做标记的标签label，仅限于与input对应使用。
单选框：

    <form>
        <label>用户名</label>
        <input type="text" placeholder="请输入内容"><br><br>
        <label>密码</label>
        <input type="text" value="请输入内容"><br><br>
        <label for="">性别</label>
        <input type="radio">男
        <input type="radio">女
        <input type="radio">其他
    </form>

在这里插入图片描述
实现单选只需要在input内部加name属性。

    <form>
        <label>用户名</label>
        <input type="text" placeholder="请输入内容"><br><br>
        <label>密码</label>
        <input type="text" value="请输入内容"><br><br>
        <label for="">性别</label>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <input

在这里插入图片描述

label标签在创建时会自动添加一个for属性，for属性可以把label标签绑定到input元素。

多选框：
多选对应的type属性值是checkbox。

    <form>
        <label>用户名</label>
        <input type="text" placeholder="请输入用户名"><br><br>
        <label for="pwd">密码</label>
        <input type="password" id="pwd" value="请输入密码"><br><br>
        <label>性别</label>
        <input type="radio" name="gender"> 男
        <input type="radio" name="gender"> 女
        <input type="radio" name="gemder"> 其他
        <label>爱好</label>
        <input type="checkbox" name="hobby">唱歌
        <input type="checkbox" name="hobby">跳舞
        <input type="checkbox" name="hobby">RAP
        <input type="checkbox" name="hobby">弹琴<br><br>

        
    </form>

在这里插入图片描述

    <form>
        <label>用户名</label>
        <input type="text" placeholder="请输入用户名"><br><br>
        <label for="pwd">密码</label>
        <input type="password" id="pwd" value="请输入密码"><br><br>
        <label>性别</label>
        <input type="radio" name="gender"> 男
        <input type="radio" name="gender"> 女
        <input type="radio" name="gemder"> 其他
        <label>爱好</label>
        <input type="checkbox" name="hobby">唱歌
        <input type="checkbox" name="hobby">跳舞
        <input type="checkbox" name="hobby">RAP
        <input type="checkbox" name="hobby">弹琴<br><br>
        <input type="submit">
        
    </form>
    <form action="#"></form>

在这里插入图片描述

Mikk-
关注
  • 30
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf
06-10
《Web前端设计基础——HTML5、CSS3、JavaScript》张树明版前十章课后习题答案
web前端开发基础——在网页中使用表格
热门推荐
陈沫尘的博客
10-19 1万+
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录前言一、如何插入表格1.关于表格1.二、使用步骤1.引入库2.读入数据总结 前言 本篇主要解释了如何在web中建立表格设置表格的大小，单元格宽高、背景色以及表格内字体的大小 提示：以下是本篇文章正文内容，下面案例可供参考 一、如何插入表格 由于关于web网页制作的软件多种多样
Web前端开发入门学习分享
weixin_44059661的博客
12-22 526
Web前端开发入门学习知识分享，希望对于学习Web前端的小伙伴有所帮助，当然如果你也学习Web前端建议按照以上步骤进行学习，尤其是自学Web前端的新手在学习过程中难免会遇到一些问题，遇到问题不要气馁，可以通过请教或查阅的方式进行解决，解决后其实并没有想象中的那么难。
Web前端的入门到出家————HTML相关基础
weixin_45818084的博客
12-08 430
Web前端的入门到出家————HTML相关基础
学习随笔——前端入门知识——2020.11.5
weixin_43402353的博客
11-05 756
学习随笔——前端入门知识——2020.11.5 Web标准可以分为3个方面：结构标准语言（HTML,XHTML,XML），表现标准语言（主要包括CSS）和行为标准（主要包括文档对象模型，浏览器对象模型，ECMAScript） HTML超文本标记语言，用于描述超文本中内容的显示方式 XML是一种扩展性标识语言，设计的目的是对HTML的扩充，现在一般用于描述，注释 XHTML是基于XML的标识语言，在HTML4.0的基础上，用XML规则对其进行扩展建立起来的，他是HTML向XML的过渡，但HTML5之后被淘汰
web前端基础入门教程HTML+CSS+JavaScript
BYGFJ的博客
11-19 1374
每一个学习前端的人对于前端三剑客《html+css+JavaScript》都不会陌生，可以说这是前端的世界，就没有前端解决不了的，而在前端的世界里就没有javascript实现不了的。 关于JavaScript有一句话：凡是可以用javascript来写的应用，最终都会用javascript，javascript可运行在所有的主要平台上，也可以运行在每一个主流操作的服务器上。现如今我们在网站写任何一个主要功能的时候都需要有懂够用JavaScript写前端的开发人员。 下面我们就来了解下这三门技术都有什么
web前端基础——CSS入门
01-20
web前端基础——CSS入门 1.css的引入方式 内部样式： 直接在style里面写 内联样式： 外部样式表 2.css选择器 id选择器： #id名{} Hello World! #para1 { text-align:center; color:red; } ID属性不要以...
Web前端开发技术——HTML、CSS、JavaScript
07-15
本书紧密结合互联网行业发展对Web前端开发工程师岗位的技术与能力的需求，详细介绍了HTML、CSS、DIV、JavaScript、DOM与BOM几大组成部分的基本语法和关键应用。内容编排结构合理，由浅入深、循序渐进地引导读者快速...
Delphi+Web前端开发教程基于TMS+WEB+Core框架.pdf
04-18
《Delphi Web前端开发教程——基于TMS WEB Core框架》PDF本教程适合对使用Delphi TMS WEB Core 创建 Web 应用程序感兴趣的初学者和高级开发人员。学习本教程只需要免费的 Delphi 社区版以及 TMS WEB Core 的试用版就...
2020Web前端的学习之路，以及反省自身的不足之处。
01-08
先说“骨”——HTML。HTML,翻译过来就是超文本标记语言，而不是江湖上的HOW TO ML。方向不能搞错了，我们整的东西可是老少咸宜的。HTML学习最重要的标签的学习，div、h1-h6、p、ul-li、strong、图片、字体等，什么...
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 665
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1106
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
s_sos0的博客
05-14 494
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
解决 SpringBoot 的 Date、LocalDateTime 变成时间戳和数组的问题，创建自定义对象消息转换器
最新发布
shijialeya
05-18 377
解决 SpringBoot 的 Date、LocalDateTime 变成时间戳和数组的问题，创建自定义对象消息转换器进行数据格式化。
综合性练习-验证码
cj13106811623的博客
05-15 818
生成验证码param(参数): 无Return: 图片的内容校验验证码用户输入的验证码5. 代码编写生成验证码://图型验证码写出,可以写出到文件,也可以写出到流try {//返回到浏览器修改前端代码相对应的接口验证成功。
vue3专栏项目 -- 五、权限管理（下）
m0_64931189的博客
05-15 818
我们这一系列做的就是，我们刚开始做了message组件，我们可以直接在某个组件中通过即可调用这个message组件，从而展示出这个提示信息框但是我们觉得它可以像以前用过的alert一样，直接通过一个函数调用就可以展示出这个组件，所以有了如下一步步改进：
【VueRouter 的基本使用】
2302_76611599的博客
05-17 168
完成Vue Router 安装后，就可以使用路由了，路由的基本使用步骤，首先定义路由组件，以便使用Vue Router控制路由组件展示与 切换，接着定义路由链接和路由视图，以便告知路由组件渲染到哪个位置，然后再项目中创建路由模块，最后导入并挂载路由模块。为了在页面中将路由对应的组件显示出来，还要在App组件中定义路由视图。路由视图标签定义，该标签会被渲染成当前路由对应组件，另外，为了方便在不同组件之间切换，可以通过标签定义路由链接，该标签的to属性表示链接地址，与路由匹配规则中的path属性对应。
vue3 el-date-picker设置禁用日期,只能选今天或者今天之后的日期
Dnn01的博客
05-14 293
vue3 el-date-picker设置禁用日期,只能选今天或者今天之后的日期
前端之电力系统SVG图低代码
weixin_38233449的博客
05-14 261
有了线，当然需要面，这时候一个polygon类就可以解决，唯一和polyline不同的是，path最后一个点需要Z闭合。两点一线，只要知道两个点的坐标就可以，但是基础图元可以旋转，也可以闪烁，所以这些属性都需要动态计算。其实所有的图形都是由点，线，面组成的。ployline也是用path就可以了，但是中间的点需要连起来，样式的计算需要循环拼接字符串。两点可以组成线，多点可以组成折线，这就需要一个polyline类去解析每个折线。svg里面的渲染最有难度的大圆弧和小圆弧，需要用到三角函数。
Web前端开发技术——HTML,CSS,JavaScript 答案
05-20
1. HTML（超文本标记语言）是用于创建 Web 页面的标准标记语言，它描述了一个页面的结构和内容。 2. CSS（层叠样式表）是用于控制 Web 页面样式的语言，它可以对 HTML 元素的布局、字体、颜色等进行样式控制。 3. ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Mikk-

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

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

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

打赏作者

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

抵扣说明：

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

余额充值