首页 > 其他分享 >关于web 第一章 初识HTML以及HTML四大案例 (保姆级教学)

关于web 第一章 初识HTML以及HTML四大案例 (保姆级教学)

时间:2024-07-07 15:27:19浏览次数:11  
标签:web 内置 浏览器 标签 代码 初识 HTML 应用程序

什么是 HTML?

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词,比如 <html>
  • HTML 标签通常是成对出现的,比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签闭合标签

HTML 文档 = 网页

  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页

HTML 编译器

使用文本编译器  

先进行第一步操作

启动文本 

 输入以下代码,注意转换为英文输入 ,中文输入可能出现报错,出现乱码的情况,或者没有显示,如果有,请回去检查你的代码。这是因为浏览器的编译器无法识别你的中文标识符。

重命名文档名称,改后缀为.html,或者.htm都可以使用  

效果图如下 

 

 基本的HTML标签-四个例子

在这个时候先看一下博主的另一篇文章如何搭建web环境

搭建完成以后看这里 

创建新的文件夹

创建新的html文件

在内容中打上一个英文感叹号!然后回车 

 

会生成如图所示的代码 

<html lang="en">意思是

这段代码表示正在使用英语(en)作为页面的语言。<html lang="en"> 是 HTML 代码中用于定义页面语言的部分。 “en” 是 ISO 639-1 代码,代表英语。

`<meta charset="UTF-8">` 这段代码用于设置页面的字符编码为UTF-8。在HTML中,这是非常重要的,因为它告诉浏览器如何解释页面的文本内容。UTF-8是一种通用的字符编码方案,支持几乎所有的文字语言,包括英语和其他许多语言。

`<meta name="viewport" content="width=device-width, initial-scale=1.0">` 这段代码是用来设置页面在移动设备上的视口(viewport)。在响应式网页设计中,视口是指用户在网页上实际看到的区域大小。

具体来说:
- `width=device-width` 表示视口的宽度应该等于设备的宽度,这样可以确保在不同设备上显示的内容宽度一致。
- `initial-scale=1.0` 表示初始的缩放比例为1.0,即不进行缩放。这确保了页面在加载时不会被自动缩放,用户能够看到原始的布局和大小。

这段代码在移动设备上非常重要,可以确保网页内容能够正确地适配不同大小和分辨率的设备屏幕,提供更好的用户体验。

<title>Document</title> 这段代码用于定义网页的标题。

 HTML标题

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

我们修改标签名为

 <title>HTML 标题</title>

将以下代码加入代码行中做测试 

<body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>
    
    <p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>   
</body>

鼠标右键

点击运行,进入浏览器查看结果 

下方两个open是运行内置 浏览器 

在Web开发中,"内置浏览器"和"普通浏览器"有一些重要区别:

1. 内置浏览器(Embedded Browser)
   - 内置浏览器通常指嵌入到另一个应用程序或环境中的浏览器功能。例如,在桌面应用程序或移动应用程序中嵌入的浏览器视图。
   - 内置浏览器可以是一个轻量级的浏览器实例,具有限制的功能集,通常用于显示特定的Web内容或集成Web功能到应用程序中。

2. 普通浏览器(Regular Browser)
   - 普通浏览器是指用户在桌面或移动设备上通常使用的完整的独立浏览器应用程序,如Chrome、Firefox、Safari等。
   - 这些浏览器具有完整的功能集,可以打开任何网站,并支持广泛的Web标准和技术。

在Web调用中,这两者的主要区别在于:

- 功能和限制:内置浏览器通常是为了特定的应用程序或场景而定制,可能会限制对某些Web功能(如某些JavaScript API)的访问,或者可能不支持某些高级的浏览器功能(如某些CSS样式或媒体格式)。
- 用户体验和集成:内置浏览器可以通过应用程序的界面和交互方式进行定制,以提供更一致的用户体验和更紧密的集成。
- 安全性和隐私:内置浏览器可以通过应用程序的安全设置和策略来管理安全性和用户隐私,这些控制可能比传统浏览器更加严格或特定。

在开发应用程序时,选择使用内置浏览器还是要求用户打开外部浏览器,通常取决于应用程序的需求、性能要求以及用户体验的权衡。

运行结果如下 

HTML 段落 

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

修改为HTML段落,增加以下代码

<!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>

    <p>这是段落。</p>
    <p>这是段落。</p>
    <p>这是段落。</p>
    
    <p>段落元素由 p 标签定义。</p> 
    
    </body>
</html>

 

运行结果如上 

HTML 链接

HTML 链接是通过 <a> 标签进行定义的。

注释:在 href 属性中指定链接的地址。

这里我们用百度做测试,一样修改代码名字,目的是为了区分不同类型

<!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>

    <a href="https://www.baidu.com/">点击百度</a>
    
    </body>
</html>

 

 

HTML 图像

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

注释:图像的名称和尺寸是以属性的形式提供的。

这里我们需要找一张自己喜欢的图片,新建一个文件夹 我们以csdn为例。

将图片保存到新的文件夹里面

 

修改代码为

<body>

    <img src="./img/csdn.png" width="300" height="120" />
    
    </body>

 图片存放的位置一定要对

./是同级文件目录

../ 父级目录

/ 根目录

结果展示如上 

 

标签:web,内置,浏览器,标签,代码,初识,HTML,应用程序
From: https://blog.csdn.net/2202_75375955/article/details/140244873

相关文章

  • JSP静态Webshell编码
    #0x00 背景介绍JSP静态Webshell分析,包括unicode、html、cdata、特殊字体编码等,相互结合以达到欺骗效果。#0x01unicode编码JSP中可以解析unicode编码,通过contentType字段定义。原始一句话如下:Stringcmd=request.getParameter("cmd");Processprocess=Runtime.getRu......
  • [CISCN2019 华北赛区 Day1 Web1]Dropbox
    进入题目注册一个账号登录进去后上传一个文件发现只能上传图片下载删除时分别抓包发现在download.php里下载,在delete.php处删除发现filename参数,有任意文件下载漏洞下载download.php,delete.php目录遍历在delete.php里发现class.phpdb=$db;}publi......
  • [CISCN2019 华北赛区 Day1 Web5]CyberPunk
    进入题目点击左下角发现不同文件查看index.php检查发现file参数猜测文件包含用php为协议读取源码require_once"config.php";if(!empty($_POST["user_name"])&&!empty($_POST["phone"])){$msg='';$pattern='/select|insert......
  • [CISCN2019 华北赛区 Day2 Web1]Hack World
    进入题目输入数字1数字20对select空格unionor等等测试发现没有过滤select空格也被过滤注意不能单独测试用亦或运算1^0为真尝试0^if((ascii(substr((select(flag)from(flag)),1,1))=100),0,1)回显正常根据回显判断正误编写脚本爆破,由于该网站请求太快会报429......
  • [CISCN2019 华东南赛区]Web4
    进入题目发现一个超链接、右键检查发现/read?url路径猜测后端语言不是php是python点击超链接跳转到百度猜测存在ssrf漏洞访问/etc/passwd成功尝试访问/app/app.py源码成功encoding:utf-8importre,random,uuid,urllibfromflaskimportFlask,session,requesta......
  • [CISCN2019 总决赛 Day2 Web1]Easyweb
    进入题目查看源码发现id参数可用sql注入脚本目录扫描发现robots.txt尝试fuzz爆破参数发现image.php.bak可用<?phpinclude"config.php";$id=isset($_GET["id"])?$_GET["id"]:"1";$path=isset($_GET["path"])?$_GET["path"]:"&......
  • [CISCN2019 华东南赛区]Web11
    进入题目注意到xff在url处随意输入目录·xff随之变化注意下放smarty是php模板猜测xff为模板注入点如下用if标签看到回显得到flagflag{6efda977-94fb-4d30-8668-fe28458ec2bf}......
  • 前端HTML+CSS
    一、HTML1.什么是html概念:超文本标记性语言(HyperTextMarkupLanguage)--不只是有文本的标签超:超级文本===》不仅仅是普通文本还可以是:文字、图形、动画、声音、表格等。标记性:标记,元素,标签来源:w3c万维网联盟:组织java开源jspython2.作用:制作网页①网页应该......
  • ctfshow-web入门-文件上传(web151-web160)
    目录1、web1512、web1523、web1534、web1545、web1556、web1567、web1578、web1589、web15910、web1601、web151试了下前端只能传png后缀的将一句话木马改成png后缀,上传后用burpsuite抓包绕过前端检测后,改回php后缀,发包调用:/upload/eval.php?cm......
  • webservice简介
    1、简介webservice即web服务,它是一种跨编程语言和跨操作系统平台的远程调用技术。实现不同系统,进程间,任何地点的数据交换,webservice是跨语言技术。webservice是基于HTTP与XML的技术。采用标准SOAP(SimpleObjectAccessProtocol)协议传输,soap属于W3C标准。Soap协议是基于htt......