第一章 前端开发基础html

最新推荐文章于 2024-08-23 10:53:05 发布
最新推荐文章于 2024-08-23 10:53:05 发布
阅读量1.4k 收藏 24
点赞数 27
分类专栏： 运维开发实战Web前端开发 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42434700/article/details/135288901
版权

第一章：前端开发基础：html
第二章：前端开发基础：CSS
第三章：前端开发基础：JavaScript
第四章：前端开发基础：jQuery
第五章：前端UI框架 Layui

文章目录

网页的组成

介绍

网页主要由导航栏、栏目、及正文内容这三大要素组成。网页结构的创建、网页内容布局的规划实际也是围绕这三大组成要素展开的。

HTML、CSS 和 JavaScript 是构成网页的三大部分

如果把网页比作一个人的话:

HTML 相当于骨架

JavaScript 相当于肌肉

CSS 相当于皮肤

语言

  1. HTML标记语言：用于创建网页结构，定义网页中的各种元素和内容。

  2. CSS样式语言：用于控制网页的外观和布局，包括字体、颜色、大小、位置等。

  3. JavaScript程式语言：一种脚本语言，用于为网页添加交互性和动态效果，使网页更加生动有趣。

  4. Jquery程式语言：基于JavaScript的一种库，简化了JavaScript编写过程，提供了丰富的API和插件，方便开发者快速开发网页

页面结构

这是一个基本的HTML页面结构，包括了头部（head）和主体（body）部分。在头部部分，定义了一些元数据，如字符集、标题、关键词和描述等。同时，还引入了一个外部的CSS样式表（main.css）。在主体部分，可以添加各种内容，如文本、图片、链接等。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="" Keywords content="关键字">
    <meta name="Description" content="简介、描述">
    <link rel="stylesheet" href="./css/main.css">
    <style>
        /* css代码(网页的样式) */
    </style>
    <script type="text/javascript">
        // js代码
    </script>
</head>

<body>
    <!-- 内容(网页的内容) -->
</body>
<style>
    /* css代码 */
</style>
<script type="text/javascript" src="./js/main.js"></script>

</html>

HTML介绍

  • HTML，是一种用来结构化网络文档的HTML，全称为超文本标记语言（HyperText Markup Language），是一种用来结构化网络文档的标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

  • HTML不是一种编程语言，而是一种标记语言。标记语言是一套标记标签 (markup tag)，HTML使用标记标签来描述网页。这些标签可以说明文字、图形、动画、声音、表格等内容

  • HTML是由标签和内容构成

代码块

<!DOCTYPE html>
<html lang="en">
    <bead>
        <meta charset="UTg-8">
        <title>演示</title>
    </bead>
    <body>
        文档的内容<br>
        你好html
    </body>
</html>

image-20231206223115970

文本格式化标签

标签描述
<br>换行
<h1>~</h1>标题，定义标题字体大小，1最大，6最小
<p>…</p>段落
<i>…</i>斜体
<cite></cite>引用
<b>…</b>加粗
<strong>…</strong>强调加粗
<del></del>删除线

代码块

段落时候是不需要 <br>换行的

<!DOCTYPE html>
<html lang="en">
    <bead>
        <meta charset="UTg-8">
        <title>演示</title>
    </bead>
    <body>
        文档的内容
        <h1>你好</h1>
        <h2>你好</h2>
        <p>段落1</p>
        <p>段落2</p>
        <i>斜体</i><br>
        <b>加粗</b><br>
        <strong>强调加粗</strong><br>
        <del>删除线</del>
    </body>
</html>

image-20231206223955769

列表标签

标签描述参数
<ul></ul>无序列表type=disc 默认实心圆
square 实心方块
circle 空心圆
<ol></ol>有序列表type=1 默认数字，其他值：A/a/I/i/1
<li></li>列表项目在有序列表和无序列表中用

代码块

<!DOCTYPE html>
<html lang="en">
<bead>
    <meta charset="UTg-8">
    <title>演示</title>
</bead>

<body>
    <h1>无序列表</h1>
    <!-- <h2>实心圆</h2> -->
    <ul type="disc">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
    <!-- <h2>实心方块</h2> -->
    <ul type="square">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
    <!-- <h2>空心圆</h2> -->
    <ul type="circle">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
    <h1>有序列表</h1>
    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="i">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="A">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="a">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
</body>

</html>

image-20231206225124360

超链接标签

格式

超链接标签：<a href=“网址” ></a>

属性描述
href指定链接跳转方式
target链接打开方式，常用值：_blank打开新窗口
title文字提示属性
name定义锚点

代码块


<!DOCTYPE html>
<html lang="en">
<bead>
    <meta charset="UTg-8">
    <title>演示</title>
</bead>

<body>
    <a name="miaodian"></a>
    <h1>无序列表</h1>
    <!-- <h2>实心圆</h2> -->
    <ul type="disc">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
    <!-- <h2>实心方块</h2> -->
    <ul type="square">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
    <!-- <h2>空心圆</h2> -->
    <ul type="circle">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
    <h1>有序列表</h1>
    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="i">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="A">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="a">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="a">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="a">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="a">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <h1>跳转</h1>
    <ul type="disc">
        <a href="http://www.baidu.com"><li>当前界面直接跳转</li></a>
        <a href="http://www.baidu.com" target="_blank"><li>新窗口跳转</li></a>
    </ul>
<a href="#miaodian">回到顶部</a>
</body>
</html>

当前页面直接跳转

image-20231207151724285

image-20231207151733707

新窗口跳转

image-20231207151753317

回到顶部

image-20231207151844639

image-20231207151856444

图片标签

格式

<img src=“图片文件路径”alt=“图片提示”>

属性描述
alt图片加载失败时的提示信息
title文字提示属性

准备工作

code是主目录

image-20231207203124442

image-20231207203101263

代码块

<!DOCTYPE html>
<html lang="en">
<bead>
    <meta charset="UTg-8">
    <title>演示</title>
</bead>

<body>
    <h1>图片</h1>
    <!-- 没有2222.jpeg -->
    <img src="img/2222.jpeg" alt="图片加载失败"><br>
    <img src="img/tupian.jpeg" alt=""><br>
</body>

</html>

image-20231207203141023

表格标签

介绍

HTML表格标签用于在网页中创建表格。常用的表格标签有：

  1. <table>：定义表格。
  2. <tr>：定义表格行。
  3. <td>：定义表格单元格。
  4. <th>：定义表头单元格。
  5. <thead>：定义表格的页眉。
  6. <tbody>：定义表格的主体。
  7. <tfoot>：定义表格的页脚。
  8. <caption>：定义表格标题。
  9. <colgroup>：定义表格列组。
  10. <col>：定义表格列的属性。
  11. <rowgroup>：定义表格行组。

代码块

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>HTML表格示例</title>
</head>

<body>

    <table border="1">
        <caption>学生信息表</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>20</td>
                <td>女</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">总计</td>
            </tr>
        </tfoot>
    </table>

</body>

</html>

image-20231207203628273

表单标签

介绍

HTML表单是一个重要的组成部分，主要用于收集用户的输入信息。这些信息可以包括文本、密码、电子邮件、电话号码等等。一个完整的HTML表单通常包含三个基本组成部分：表单标签、表单域和表单按钮。

表单标签是<form>标签本身，它定义了一个包含表单元素的区域。所有的表单控件（如文本字段、复选框、单选框、提交按钮等）都需要放在<form>和</form>之间。值得注意的是，<form>元素是一个块级元素，它会在前后产生换行。

表单域是<form>标签中用来收集用户输入的部分，每一项通常用input标签来定义。input标签具有不同的类型，以适应用户的不同数据输入需求，例如文本域、下拉列表、单选框和复选框等。

此外，根据设备和用户代理的不同，HTML表单可以使用各种类型的输入数据和控件，因此它是目前HTML中最强大、最复杂的元素之一。

表单标签：<form></form>

属性描述
action提交的目标地址(URL)
method提交方式：get(默认)和post
enctype编码类型
• application/x-www-form-urlencoded 默认值，编码字符
• multipart/form-data 传输数据为二进制类型，如提交文件
• text/plain 纯文本的传输

表单项标签：<input>

属性描述
type• text：单行文本框
• password：密码输入框
• checkbox：多选框
• radio：单选框
• file：文件上传选择框
• button：普通按钮
• submit：提交按钮
• reset：重置按钮
name表单项名，用于存储内容值
value表单项的默认值
disabled禁用该元素
checked默认被选中，值也是checked

下拉列表标签<select></select>

属性描述
name下拉列表名称，用于存储下拉值
disabled禁用该元素
multiple设置可以选择多个项目
size指定下拉列表中的可见行数

下拉列表选项标签<option></option>

属性描述
value选项值
name默认下拉项

代码块

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表单标签</title>
</head>

<body>
    <form action="" method="post">
        文本框：<br><input type="text"><br>
        <input type="submit" value="提交"><br>

        密码：<br><input type="password"><br>
        <input type="submit" value="登录"><br>

        多选框：<br>
        <input type="checkbox" value="选项1"> 选项1 <br>
        <input type="checkbox" value="选项2">选项2<br>
        <input type="checkbox" value="选项3">选项3<br>
        <input type="submit" name="提交" value="提交"><br>

        单选框：<br>
        <input type="radio" value="选项1"> 选项1 <br>
        <input type="radio" value="选项2">选项2<br>
        <input type="radio" value="选项3">选项3<br>
        <input type="submit" name="提交" value="提交"><br>

        文件上传：<br>
        <input type="file" name="file"><br>
        <input type="submit" name="提交" value="提交"><br>

        下拉列表：<br>
        <select name="" id="">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <br>
            <input type="submit" name="提交" value="提交"><br>
        </select><br>
        下拉列表多选：<br>
        <select name="" id="" multiple>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <input type="submit" name="提交" value="提交"><br>
        </select>
        <button type="submit">提交</button><br>
        <button type="button">普通</button><br>
        <button type="reset">重置</button><br>
    </form>

</body>

</html>

image-20231207215909051

div布局标签

介绍

<div>标签用于在HTML文档中定义一个区块。
<div>标签常用于将标签集中起来，然后用样式对它们进行统一排版。

代码块

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>dev</title>
</head>

<body>
    <div style="height: 200px;width: 200px;background-color:rebeccapurple;">
        <p style="background-color: brown;">一段落</p>
        <p style="color: burlywood;">二段落</p>
    </div>
</body>

</html>

image-20231207220601185

XMYX-0
关注
  • 27
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
第一章：网页开发基础 chapter01
05-12
在本章节"第一章：网页开发基础 chapter01"中，我们将深入探讨网页开发的基本概念和技术。这涵盖了网页的结构、样式以及动态功能的实现。网页开发是构建互联网应用的核心部分，它让信息能够以交互的方式呈现给全球...
web前端开发（一）—HTML基础
mdxiaohu的博客
07-31 10万+
  目录 web前端简介 什么是HTML？ HTML标签 HTML基本结构 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HTML 标签 HTML 列表标签 HTML表格 HTML超链接 HTML 图片 HTML表单 表单元素-文本、密码框 表单元素-多行文本框 表单元素-选择框 表单元素-下拉选择框 表单元素-按钮...
web前端基础——第一章
ZiminLi的博客
10-19 2173
web前端基础
第一章，Web前端设计基础
m0_62460019的博客
06-16 1501
了解是我们学习很多课程非常重要的方法。Web应用项目本身是一种软件系统，它也是具有自身结构的，即系统体系结构。有一门课程《软件体系结构》会专门研究这个问题。系统体系结构是一个综合各种观点的模型，用来完整描述整个系统，通过系统体系结构就能够了解一个软件系统的基本架构。常见的系统体系结构有C/S结构和B/S结构。首先，了解一下C/S的工作流程，Server端存储了各种资源，我们在Client端通过网络发送资源请求，接收并显示Server端响应的内容。
Web前端开发笔记——第一章 Web前端概论
小宇y的博客
08-17 1267
JavaScript 是 web 开发人员必须学习的 3 门语言中的一门： HTML 定义了网页的内容 CSS 描述了网页的布局 JavaScript 控制了网页的行为
第一章 HTML基础 ② 代码练习
Liu_wen_wen的博客
06-06 2166
HTML基础 多种标签的代码
前端基础知识第一章---HTML
battledao的博客
01-14 6412
前言 ❤️ 天空黑暗到一定程度，星辰就会熠熠生辉 ❤️
第一章 react前端开发-react入门
qq_24430629的博客
11-10 1844
react入门
Web前端开发--第二章：HTML5基础
专科三年的修炼的博客
11-08 697
第二章：HTML5基础 一.预习笔记 1.Html5文档的基本结构 1）文档类型声明<!doctype>     位于文档的最前面,用于向浏览器说明当前文档使用哪种HTML标准规划。 2）根标记<html>     <html>标记标志着Html文档的开始，</html>标记标志着Html文档的结束。它们中间的就是文档的头部和主体类容 3）头部标记<header> &n
前端页面的简单学习与项目搭建（主要针对HTML和VUE的学习）
热门推荐
张彦峰的博客
04-09 169万+
备注：只是本人的自学与备注，自己本身不是做前端的，只是简单搭建一些前端的东西，自己玩的。 一、HTML简单的回顾 （一）HTML 基本结构 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html&...
第1章Web前端开发基础.pdf
10-03
综上所述，Web前端开发基础涉及到众多技术和工具，包括HTML、CSS、JavaScript这三个核心，以及相关的开发工具、CMS、AJAX、JavaScript库和框架等。掌握这些基础知识和工具对于成为一名合格的前端开发工程师至关重要...
第1章 Web前端开发基础.pdf
06-19
在本章《Web前端开发基础》中，我们将深入探讨构建现代网页和应用程序所需的基本技能、技术和工具。Web前端开发是互联网行业中至关重要的一个领域，它专注于用户与网站交互的界面和体验。 首先，我们来看看实训的...
第1章Web前端开发基础[整理].pdf
10-12
本章主要涵盖了Web前端开发的基础知识、实训目标以及常用的技术和工具。 首先，Web前端开发实训目标分为三个层面：知识目标、能力和素质目标。知识目标强调对HTML、CSS、JavaScript等核心技术的理解；能力目标则...
第1章 Web前端开发基础.docx
06-19
在本章《Web前端开发基础》中，我们将深入探讨构建现代网页和应用程序所需的关键技术和实践。Web前端开发是互联网行业中至关重要的部分，它涉及到用户与网站互动的所有视觉和交互元素。 首先，我们要明确实训目标。...
只用一个 HTML 元素可以写出多少形状？——不规则图形篇
最新发布
Conan9912345的博客
08-23 654
您有没有想过一个问题，如果我们只用一个 div 元素，一共可以写出多少种形状呢？
html转vue项目
qq_38880880的博客
08-19 381
总结来说，将HTML代码转换为Vue需要引入Vue框架并编写Vue组件，使用Vue的数据绑定和事件绑定语法实现页面的动态更新。当我们点击"Change Name"按钮时，changeName方法会被调用，将name属性的值改为"Vue.js"。在Vue的data选项中，我们定义了一个name属性，并将其初始值设为"Vue"。除了简单的数据绑定和事件绑定外，Vue还提供了丰富的指令和组件库，用于构建更复杂的用户界面。通过使用这些特性，我们可以将HTML代码转换为更加动态和交互的Vue应用。
HTML 基本语法特性与 title 标签介绍
前端基地
08-20 615
本文详细阐述了 HTML 的基本语法特性，涵盖对换行和缩进不敏感（无论标签是否换行及缩进，都不影响页面结构，并通过实例加以说明）、存在空白折叠现象（文字间的空格、换行和缩进会被折叠为一个空格显示，同样有示例展示）以及标签必须严格封闭（以避免错误，如不封闭 title 标签可能导致意外结果，也给出了示例）。此外，还对 title 标签进行了介绍。通过丰富的举例说明，助力读者进一步熟悉 HTML 的这些特性。
vue项目开发记录1：为v-html内的img元素添加点击放大效果
qq_41057206的博客
08-20 279
内容
前端开发基础：HTML, XHTML, CSS与JavaScript入门
"这是一本关于前端开发基础的书籍——《Beginning HTML, XHTML, CSS, and JavaScript》。本书详细介绍了构建Web页面所必需的HTML、XHTML、CSS和JavaScript技术，适合初学者入门学习。" 在Web开发领域，HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

XMYX-0

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

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

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

打赏作者

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

抵扣说明：

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

余额充值