web前端-《初识HTML》(附实例详解)

简介: web前端-《初识HTML》(附实例详解)

🍁(一)HTML简介


🔥1.什么是HTML?


  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)


  • HTML 不是一种编程语言,而是一种标记语言 (markup language)


  • 标记语言是一套标记标签 (markup tag)


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


🔥2.HTML标签


  • HTML标签由 尖括号包围 的关键词。如:< html>


  • HTML 标签通常是成对出现的,如 < p > 和 < /p >


  • 标签对中的第一个标签是开始标签(< p >),第二个标签是结束标签(< /p >)


注意:并不是所有标签都有结束标签如< b >


🔥3.HTML文档


-HTML文档包含 HTML 标签和纯文本


-HTML文档也被称为网页


浏览器会自动读取HTML文档,并以网页的形式显示出它们。浏览器不会显示HTML标签,而是使用标签来解释页面的内容


实例:


<html>
<body>
<h1>欢迎!!</h1>
<p>你好,一起来学习前端吧!</p>
</body>
</html>


image.png


在这串代码中


  • < html > 与 < /html > 之间的文本描述网页


  • < body > 与 < /body > 之间的文本是可见的页面内容


  • < h1 > 与 < /h1 > 之间的文本被显示为标题


  • < p > 与 < /p > 之间的文本被显示为段落


🍁(二)HTML四个基础标签


🔥1.HTML标题


HTML 标题(Heading)是通过 < h1 > — < h6 > 等标签进行定义的。


实例:


<html>
<body>
<h1>hello world </h1>
<h2>hello world</h2>
<h3>hello world </h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>
</body>
</html>


image.png


🔥2.HTML段落


HTML 段落是通过 < p > 标签进行定义的。


实例:


<html>
<body>
<h1>hello world </h1>
<p>sulaing!!!</p>
</body>
</html>


image.png


🔥3.HTML链接


HTML 链接是通过 < a > 标签进行定义的。a标签也叫跳转锚点标签,通过它可以实现页面的跳转。


实例:


<html>
<body>
<h1>hello world </h1>
<p>sulaing!!!</p>
<a href="https://suliang.blog.csdn.net/">苏凉.py的博客</a>
</body>
</html>


image.png


此时只需点击文字即可跳转。


🔥4.HTML图像


HTML 图像是通过 < img > 标签进行定义的。


实例:


<html>
<body>
<h1>hello world </h1>
<p>sulaing!!!</p>
<a href="https://suliang.blog.csdn.net/">苏凉.py的博客</a><br/>
<img src="https://img1.baidu.com/it/u=386692673,2792409680&fm=253&fmt=auto&app=138&f=JPEG?w=571&h=381" alt="web前端" width="300px" height="200px">
</body>
</html>


image.png


参数src为图片的路径,这里可以选择网页图片的地址,或者是本地图片,当使用本地图片时,需使用绝对路路径来定位图片。


参数alt为当图片路径不对加载图片出现错误时显示的内容。如:


image.png


🍁(三)HTML元素


HTML 元素指的是从开始标签结束标签所有代码。


🔥1.元素语法


  • HTML 元素以开始标签起始,以结束标签终止。


  • 元素的内容是开始标签与结束标签之间的内容。


  • 某些 HTML 元素具有空内容。


  • 空元素在开始标签中进行关闭(以开始标签的结束而结束),如< br > 换行标签。


  • 大多数 HTML 元素可拥有属性,如widh,height等。


温馨提示: 在html中虽然没有结束标签也可以浏览器也能正确读取出来。但尽量加上结束标签,这也是我们编程的一个良好的习惯!!


🍁(四)HTML属性


属性是 HTML 元素提供的附加信息


  • HTML元素可以设置属性


  • 属性可以在元素中添加附加信息


  • 属性一般描述于 开始标签


  • 属性总是以名称/值对的形式出现,比如:name=“suliang”。


实例:


<a href="www.baidu.com">百度一下</a>


这里的href就是a标签的属性,且是设置在a标签的开始标签里面的。


🔥1.常见HTML元素属性


属性 描述
class 为html元素定义一个或多个类名(classname)(类名从样式文件引入)
id 定义元素的 唯一 id
style 规定元素的行内样式(inline style)
title 描述了元素额外信息 (作为工具条使用)


🍁(五)HTML文本格式化


在html中,又是我们需要对文本进行格式化输出,例如加粗文本,斜体文本,以及文本的上标和下标的表示等等。


实例:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>格式化文本</p>
    <p>定义<b>粗体文本</b></p>
    <p>定义<em>着重文本</em></p>
    <p>定义<i>斜体文本</i></p>
    <p>定义<small>小号文本</small></p>
    <p>定义<strong>加重语气文本</strong></p>
    <p>定义<sub>下标</sub>H<sub>2</sub>O</p>
    <p>定义<sup>上标</sup>2<sup>10</sup></p>
    <p>定义<ins>插入字</ins></p>
    <p>定义<del>删除字</del></p>
</body>
</html>


image.png


🍁(六)HTML超链接


tips:在href属性中填写的url最好始终在url后添加反斜杠,主要是为了区分访问的是文件还是文件夹。如:访问路径为http://baidu.com/a,浏览器不知道是访问的是文件还是文件夹,就会再次访问确认是哪种类型,若是文件夹则在后面加上反斜杠后以http://www.baidu.com/a/ 再次运行 。若链接为http://www.baidu.com/a.html则可以明确的知道这是文件而非文件夹,即可以不用添加反斜杠。


🔥1.a标签的target属性


描述
_blank 在新窗口打开
_parent 在父窗口中打开链接
_self 默认,在当前页面跳转
_top 在当前窗口打开链接,并替换当前的整个窗体。


附:target属性还有一个值为framename,后续在js中我们再细说。


🍁(七)HTML头部信息


一个默认的HTML文件头部信息如下:


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>


上面包含了meta和title两个元素,当然html的头部中你还可以插入脚本(scripts), 样式文件(CSS)以及style,link,base等元素。


🔥1.< meta >标签


元数据(Metadata)是数据的数据信息。< meta > 标签提供了 HTML 文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。常用于指定网页的描述,关键词,文件的最后修改时间,作者及其他元数据。


  • < meta >标签没有结束标签


实例:


1.1 定义文档字符编码


<meta charset="UTF-8">


1.2 把content属性关联到HTTP头部


<meta http-equiv="X-UA-Compatible" content="IE=edge">


1.3 定义文档关键词,用于引擎搜索


<meta name="viewport" content="width=device-width, initial-scale=1.0">


另外还可以进行对页面的刷新和定义页面作者等信息。


1.4 定义页面作者


<meta name="author" content="su liang">


1.5 刷新页面


//每30秒刷新页面
 <meta http-equiv="refresh" content = "30">


🔥2.< title >标签


定义了文档的标题


实例:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端学习</title>
</head>


image.png


🔥3.< link >标签


  • < link > 标签定义文档与外部资源的关系


  • < link > 标签最常见的用途是链接样式表


注意: 此元素只能存在于 head 部分,不过它可出现任何次数


实例:


<link rel="stylesheet" type="text/css" href="./teststyle.css">


html代码:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./teststyle.css">
    <title>前端学习</title>
</head>
<body>
    <a style="text-decoration:none;" href="D:/桌面/图片111/liyif.png" target="_top"> 打开图片</a>
    <p class="su">
        苏凉
    </p>
    <div class="div1">这是一个盒子</div>
</body>
</html>


css代码:


.su{
    font-size: large;
    color: blueviolet;
}
.div1{ 
    margin-right:1400px;
    border:3px inset red;
    background-color: antiquewhite;
}


实现效果:


image.png


🔥4.< base >标签


定义了页面链接标签的默认地址链接。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./teststyle.css">
    <base href="https://www.baidu.com/" target="_blank">
    <title>前端学习</title>
</head>
<body>
    <a style="text-decoration:none;" href="D:/桌面/图片111/liyif.png" target="_top"> 打开图片</a>
    <p class="su">
        苏凉
    </p>
    <div class="div1">这是一个盒子</div>
<br/>
    <p><a href="">点击打开百度</a></p>
</body>
</html>


image.png


目录
相关文章
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
1月前
|
移动开发 前端开发 搜索推荐
《前端技术基础》第01章 HTML基础【合集】
超文本标记语言(HyperText Markup Language,简称 HTML)是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同,负责搭建网页“骨架”,用标签组织内容,像标题、段落、图片等元素,通过起始与结束标签(部分可单用,如`<img>`)界定层级与布局,将信息有序整合。标签含特定语义,向浏览器传达展示方式,为网页准确呈现及后续美化、交互筑牢根基。
83 25
|
2月前
|
人工智能 前端开发 JavaScript
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
|
2月前
|
缓存 监控 前端开发
探索前端性能优化:关键策略与代码实例
本文深入探讨前端性能优化的关键策略,结合实际代码示例,帮助开发者提升网页加载速度和用户体验,涵盖资源压缩、懒加载、缓存机制等技术。
|
3月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
68 6
|
3月前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
59 5
|
4月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
268 3
|
3月前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
159 62
|
2月前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南
|
3月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
269 45

热门文章

最新文章

  • 1
    打造高效的Web Scraper:Python与Selenium的完美结合
    13
  • 2
    Burp Suite Professional 2025.2 (macOS, Linux, Windows) - Web 应用安全、测试和扫描
    26
  • 3
    AppSpider Pro 7.5.015 for Windows - Web 应用程序安全测试
    20
  • 4
    【02】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-2月12日优雅草简化Centos stream8安装zabbix7教程-本搭建教程非docker搭建教程-优雅草solution
    54
  • 5
    部署使用 CHAT-NEXT-WEB 基于 Deepseek
    342
  • 6
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 7
    java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
    40
  • 8
    零基础构建开源项目OpenIM桌面应用和pc web- Electron篇
    28
  • 9
    【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
    22
  • 10
    FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
    55