html(1)

news/2024/5/11 0:10:10/文章来源:https://blog.csdn.net/qq_64054032/article/details/129698549

创建html项目

新建html项目,用记事本打开:

 

 只需要浏览器就可以执行里面的代码,不需要安装额外的运行环境(例如JDK)

html不需要编译,浏览器读取后就可以执行

上述hello world在文件是如下代码:

 其并不是严格符合HTML语法的,但是即使语法存在问题,浏览器也会尽可能执行,

这是得利于浏览器的鲁棒性(robustness)(对他越粗鲁,表现得越好)

上图才是符合HTML语法的语句, 需要有一个head和一个body,head放一些属性信息,body放页面上显示的内容

html的语言特点:

1.是由一些标签构成的

2.几乎每个标签都有开始标签和结束标签(只有单个标签的称为单标签)

3.标签之间可以相互嵌套(例如上图中 html是head和body的父标签,head和body是html的子标签)

html的标签(tag),也可以称为元素(element)

用vscode来编写html

通过使用!加enter 可以得到以上模板

<!DOCTYPE html>
//这一行为是html文件的声明<html lang="en">
//给予了lang这样的属性
//html标签是可以在开始标签中写一些属性的(键值对)
//使用空格来分割键值对,使用=来分割键和值并且这里的=两侧不能有空格 
//lang全称是language,en全称是english,从而提醒浏览器当前是什么语言,是否需要自动翻译<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>//html的标题 也就是选项卡的名称    </head>
<body>hello
</body>
</html>

在开启浏览器查看源代码后 在页面按下F12就可以查看源代码

 

html的常用标签

注释标签:

<!---->
<!--你好我好大家好-->
//需要在同一行写注释

注释标签不会在网页中显示出来

标题标签:

	<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5>
//数字越大,越小越细
//数字越小,越大越粗

 段落标签

	<p>这是一个段落 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae sint est quidem dignissimos eveniet labore dolorum cumque quod eligendi dolore. Non ipsam dolor earum error impedit optio quidem autem vel.</p>
//段落标签之间会有换行,并且有明显的段落间距
//使用lorem来生成随机字符串的一个方式,文字排版的时候可能会用到

在html里面 直接回车换行写段落是不行的,需要换行标签 

html中对于制表符,换行符,多个连续的空格都不会当成是代码内容,会自动把这些东西给忽略

换行标签

	<p>这是一个段落<br>Lorem ipsum dolor sit,<br> amet consectetur adipisicing elit. Repudiandae sint est quidem dignissimos eveniet labore dolorum cumque quod eligendi dolore. Non ipsam dolor earum error impedit optio quidem autem vel.</p>//<br>是单标签 只有开始标签没有结束标签

 常用的字符样式标签:

//加粗
strong b//倾斜
em i//删除线
del s//下划线
ins u
	<strong>加粗</strong><b>加粗2</b><em>倾斜</em><i>倾斜2</i><del>删除线</del><s>删除线2</s><ins>下划线</ins><u>下划线2</u>

 独占一行的标签,叫做 块级元素

不独占一行的标签,叫做 行内元素

块内元素和行内元素可以相互转化

图片标签

<img>
//为单标签 且必须带有一个src属性 通过这个属性来指定你要显示图片的路径

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_274458.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

静态版通讯录的实现(详解)

前言&#xff1a;内容包括三个模块&#xff1a;测试通讯录模块&#xff0c;声明模块&#xff0c;通讯录实现模块 实现一个通讯录&#xff1a; 1 可以存放100个人的信息 每个人的信息&#xff1a; 名字 性别 年龄 电话 地址 2 增加联系人信息 删除联系人信息 查找联系人信息…

windows无盘启动技术开发之传统BIOS(Legacy BIOS)引导程序开发之二

by fanxiushu 2023-03-21 转载或引用请注明原始作者&#xff0c;接上文&#xff0c;这篇文章其实主要就是讲述上文中 Int13HookEntry 这个C函数的实现过程&#xff0c;看起来就一个函数&#xff0c;可实现起来一点也不轻松。首先得准备编译环境&#xff0c;因为是16位程序&…

LeetCode岛屿问题通用解决模板

文章目录前言第一题&#xff1a;求岛屿的周长模板整理遍历方向确定边界重复遍历问题处理模板解第一题第二题&#xff1a;求岛屿数量第三题&#xff1a;岛屿的最大面积第四题&#xff1a;统计子岛屿第五题&#xff1a;统计封闭岛屿的数目第六题&#xff1a;最大人工岛总结前言 …

04.hadoopHDFS

win java访问hadoop //复制文件夹,配置环境变量//配置HADOOP_HOME为我们的路径 ,hadoop-3.3.0 ,记得JAVA_HOME不要带有空格,!!!默认java安装环境有空格C:\Program Files//要在cmd hadoop -fs 查看是否配置成功//%HADOOP_HOME%\bin到path//maven添加依赖hadoop3.1.0//创建目录Be…

常见的CMS后台getshell姿势总结

目录 WordPress dedecms aspcms 南方数据企业系统 phpmyadmin日志 pageadmin 无忧企业系统 WordPress 默认后台登录地址 /wp-login.php /wp-admin 登录后在外观的编辑里面找一个模板&#xff0c;我们在404模板 (404.php)里面写入一句话后门 可以蚁剑连接 上传一个压缩…

自定义类型的超详细讲解ᵎᵎ了解结构体和位段这一篇文章就够了ᵎ

目录 1.结构体的声明 1.1基础知识 1.2结构体的声明 1.3结构体的特殊声明 1.4结构体的自引用 1.5结构体变量的定义和初始化 1.6结构体内存对齐 那对齐这么浪费空间&#xff0c;为什么要对齐 1.7修改默认对齐数 1.8结构体传参 2.位段 2.1什么是位段 2.2位段的内存分配…

web前端框架——Vue的特性

目录 前言&#xff1a; 一.vue 二.特性 1.轻量级 2.数据绑定 3.指令 4.插件 三.比较Angular 、React 、Vue 框架之间的比较 1. Angular Angular的优点&#xff1a; 2. React React 的优点&#xff1a; 3.vue 3.Vue的优点&#xff1a; 前言&#xff1a; 本篇文章…

QT开发笔记(多媒体)

多媒体 多媒体&#xff08;Multimedia&#xff09;是多种媒体的综合&#xff0c;一般包括文本&#xff0c;声音和图像等多种媒体形式。 在计算机系统中&#xff0c;多媒体指组合两种或两种以上媒体的一种人机交互式信息交流和传播媒体。 使用的媒体包括文字、图片、照片、声音…

头歌c语言实训项目-函数(2)

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 第1关&#xff1a;模拟投掷骰子游戏: 题目&#xff1a; 代码思路&#xff1a; 代码表示&#xff1a; 第…

20230322英语学习

Why Are So Many Gen Z-Ers Drawn to Old Digital Cameras? 老式数码相机&#xff1a;Z世代的复古潮流 The latest digital cameras boast ever-higher resolutions, better performance in low light, smart focusing and shake reduction – and they’re built right into …

牛客C/C++刷题笔记(五)

122、对于"int *pa[5]&#xff1b;"的描述中&#xff0c;&#xff08; &#xff09;是正确的。 123、以下叙述中正确的是&#xff08;&#xff09; C语言的源程序中对缩进没有要求,所以A选项错误。C语言中区分大小写,main函数不能写成Main或_main,所以B选项错误。一…

声声不息,新“声”报到

魅力声音大家庭总群&#xff08;10&#xff09;大玲&#xff0c;刚见到新来的四川孩儿——樱桃&#xff0c;真是太可爱了&#xff01;可不就是&#xff0c;这孩儿真是招人稀罕&#xff0c;我现在就把她拉到咱大群里“大玲” 邀请 “樱桃” 加入群聊所有人 咱们大家庭迎来了第一…

【字符串】刷题

P4173残缺的字符串心得&#xff1a;这道题&#xff0c;我觉得是不难的&#xff0c;代码逻辑很清晰&#xff0c;但是提交就是有问题最后发现两个问题&#xff1a;scanf输入字符后要用getchar() 吞回车 !!!!&#xff08;天坑用 scanf 输入时&#xff0c;不管输入什么&#xff0c;…

C语言小程序:通讯录(静态版)

哈喽各位老铁们&#xff0c;今天给大家带来一期通讯录的静态版本的实现&#xff0c;何为静态版本后面会做解释&#xff0c;话不多说&#xff0c;直接开始&#xff01;关于通讯录&#xff0c;其实也就是类似于我们手机上的通讯录一样&#xff0c;有着各种各样的功能&#xff0c;…

30天从零到1创业螺旋式

趁梦想还在&#xff0c;想去的地方&#xff0c;现在就去&#xff1b;想做的事情&#xff0c;现在就做。一开始立刻启动的你的项目&#xff0c;安排好时间计划&#xff0c;拆分微模块&#xff0c;每天花20分钟去完善产品&#xff0c;去改变世界。可以为自己的创意设置临时办公室…

RK3588平台开发系列讲解(显示篇)DP显示调试方法

平台内核版本安卓版本RK3588Linux 5.10Android 12文章目录 一、查看 connector 状态二、强制使能/禁⽤ DP三、DPCP 读写四、Type-C 接口 Debug五、查看 DP 寄存器六、查看 VOP 状态七、查看当前显示时钟八、调整 DRM log 等级沉淀、分享、成长,让自己和他人都能有所收获!😄…

【数据结构】链队列的C语言实现

队列 1.队列的概念 队列 和栈一样&#xff0c;是一个 特殊的线性表。 队列只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表。进行 插入操作 的一端称为 队尾&#xff0c;进行 删除操作 的一端称为队头。 队列中的元素遵守 先进先出(First I…

【类的继承与派生的知识点】

文章目录类的继承与派生的知识点类的继承与派生&#xff1a;类成员的访问&#xff1a;类型兼容规则&#xff1a;一个公有派生类的对象在使用上可以被当成基类的对象&#xff0c;反之不行单继承与多继承派生类的构造与析构类成员的标识与访问类的继承与派生的实验结果类型兼容规…

Baumer工业相机堡盟相机如何使用Sharpening图像锐化功能( Sharpening图像锐化功能的优点和行业应用)(C++)

项目场景 Baumer工业相机堡盟相机是一种高性能、高质量的工业相机&#xff0c;可用于各种应用场景&#xff0c;如物体检测、计数和识别、运动分析和图像处理。 Baumer的万兆网相机拥有出色的图像处理性能&#xff0c;可以实时传输高分辨率图像。此外&#xff0c;该相机还具…

【计算机网络】如何解决TCP粘包问题?

【计算机网络】如何解决TCP粘包问题&#xff1f; 文章目录【计算机网络】如何解决TCP粘包问题&#xff1f;如何理解字节流&#xff1f;如何解决粘包&#xff1f;固定长度的消息特殊字符作为边界自定义消息结构如何理解字节流&#xff1f; 之所以会说 TCP 是面向字节流的协议&a…