HTML零基础入门(上)

news/2024/4/29 5:43:21/文章来源:https://blog.csdn.net/wujianrenn/article/details/127446053

一、什么是HTML

html是一门标记性语言

全称是超文本标记语言(Hyper Text Markup Language),它是用来描述网页的一种语言。

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

html只是用来制作网页的一种语言,由各种各样的标签组成

html制作网页,而很多个网页聚集在一起,构成网站

二、HTML基本用法

1、标题标签

共   h1到h6  6种

<!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>标题标签</title></head><body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6></body></html>

                                   

2、段落标签

分为  p标签  和  br标签

在p标签中每个p标签单独一行,而且每个p标签间都有一定的间距

而br标签只是换行,不存在两个br标签间的间距

<!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>段落标签</title></head><body><p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p><p>这是另一个段落这是另一个段落这是另一个段落这是另一个段落这是另一个段落这是另一个段落这是另一个段落这是另一个段落这是另一个段落这是另一个段落这是另一个段落这是另一个段落这是另一个段落这是另一个段落这是另一个段落这是另一个段落这是另一个段落</p>br标签之间中间不存在空隙<br>不像p标签那样,对吧<br></body></html>

 

3、文本格式化标签

主要作用是突出重要性,一般情况下全称的,语义更强烈,如:strong、em、ins、del标签语义强于对应的简写b、i、s、ins

实现加粗,删除,倾斜,下划线的作用

<!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>文本格式化标签</title></head><body><strong>加粗</strong><b>加粗</b><hr><em>倾斜</em><i>倾斜</i><hr><del>删除</del><s>删除</s><hr><ins>下划线</ins><u>下划线</u></body></html>

4、文本标签

分为div标签和span标签两种

div主要用于布局,但一行只能放一个div标签,div独占一行,是个大盒子

span也是用来布局的,但是一行上可以放多个span,更像是个小盒子

<!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>文本标签</title></head><body><div>我是div标签</div><div>我是div标签</div><span>我是span标签</span><span>我是span标签</span></body></html>

 5、图像标签

使用img标签

需要些别的属性,例如:src属性为图片地址,这里实例中的图片使用的是本地文件,相对路径

alt标签是在图片加载不出来时,出现的提示文字,提示我们这个图片原本是什么的,加入我图片地址写错的话,alt标签就会发挥作用,如图

 title标签是当我鼠标悬停,放在图片上时显示的文字,如图

 我们还能自定义图片的大小,可以添加width宽度属性,或者高度hight属性,当然两者应该选一个添加就可以了,那样的话,图片会自动等比例缩放或扩大,不会改变宽高比例

还能加border属性,添加图片的边框

这是我添加了10像素的边框的样子

 <img src="cat.gif" alt="这是一条猫" title="这是title文字,鼠标悬停的时候显示" width="500" border="10px">

不过这里不推荐使用border来添加边框,我们可以通过CSS代码来控制边框的大小和颜色 

<!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>图像标签</title></head><body><!-- alt:替换文本,当图片不显示的时候显示的文字 --><!-- width 和 height 属性只需要给出一个值,另一个等比缩放 -- 好处是图片不变形 --><img src="cat.gif" alt="这是一条猫" title="这是title文字,鼠标悬停的时候显示" width="500"></body></html>

 6、路径

分为相对路径和绝对路径,(在本机上)

还有个网络路径(素材,照片视频等来自网络)

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

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

相关文章

Visual Code配置C/C++

1. 前言 VS Code和以前的Visual studio 开发环境不一样,只是代码编辑器,如果需要运行代码C/C++,需要额外安装编译器。在Linux环境下,一般系统自带了gcc编译器,但是windows环境没有,所以要额外安装编译器,选择MinGW。总体参考资料: C/C++ for Visual Studio Code2. MinG…

ZnCdTe/ZnS三元/Cu2MoS4荧光量子点/MoS2QDs二硫化钼量子点的制备

瑞禧小编这里给大家准备了ZnCdTe/ZnS三元/Cu2MoS4荧光量子点/MoS2QDs二硫化钼量子点的制备步骤与方法&#xff0c;一起来学习吧&#xff01; MoS2QDs二硫化钼量子点的制备 以钼酸钠提供钼源,谷胱甘肽提供硫源,通过"自下而上"一步水热法制备MoS2 QDs,并以其荧光强度作…

Oracle——行转列与列转行

文章目录行转列创建表和增加测试数据方式一&#xff1a;先分组&#xff0c;再统计平铺方式二&#xff1a;使用Oracle11g自带函数PIVOT实现列转行创建表和增加测试数据方式一&#xff1a;union all 单个合并方式二&#xff1a;unpivot 函数实现总结资料参考行转列 把某一个字段…

Js中六种拖拽(拉)事件(drag 和 drop)

拖拽事件 今天同事问有没有实现过表格的拖拽功能&#xff0c;我当时想的是应该跟图片的拖拽代码逻辑是一样的主要是使用了浏览器中的以下几个事件 例如&#xff1a; 一、dragstart 二、dragend 三、dragover 四、dragenter 五、drop 等 文章目录拖拽事件前言(各个浏览器的兼容性…

基于matlab的神经网络设计,深度神经网络代码matlab

为什么谈论深度学习工具时&#xff0c;很少有人讨论matlab的神经网络工具包 首先深度学习不光是在学术界非常火热, 在工业界也有着大量的运用, 这就要求深度学习框架要方便在服务器上部署, 而这个恰恰是Matlab的软肋, 想象一下你前端用个Django做个页面接受用户输入的图像, 后…

【Linux驱动开发】并发控制机制:原子操作、自旋锁、信号量、互斥锁详解

并发控制机制 首先我们来了解一下 “操作系统的并发性” 这个概念&#xff1a; 操作系统的并发性(concurrence)&#xff1a;指的是两个或者两个以上事件在同一时间间隔内发生&#xff0c;即这个设备一会执行这个事件一会执行那个事件&#xff0c;多个事件共同使用一个设备。 操…

yolov5和yolov7之实例分割训练

还没来得及实验&#xff0c;我在这里就给出几个参考的链接 1、How to train your segmentation data with seg in U7? What is the data set format?Thanks&#xff01;&#xff01; Issue #732 WongKinYiu/yolov7 GitHub 2、JSON2YOLO/general_json2yolo.py at master …

南大通用GBase8s 常用SQL语句(287)

UPDATE 语句 使用 UPDATE 语句来更改表或视图中一个或多个现有的行的一个或多个列中的值。 语法 Target WHERE 选项 元素 描述 限制 语法 alias 您在此为本地表或远程表声明的临时的名称 如果 SET 是 alias 的标识符&#xff0c;则 AS 关键字必须在 alias 之前 …

计算机网络(六) | 应用层:HTTP协议详解

目录HTTP协议HTTP协议简介理解应用层协议HTTP协议的工作过程HTTP协议格式Fiddler的简介Fiddler的使用HTTP请求格式概述HTTP响应格式概述HTTP请求格式详解URL方法请求报头请求正文(body)HTTP响应格式详解状态码响应报头响应正文(body)构造HTTP请求form表单构造HTTP请求通过ajax构…

Unity9 路径权限、场景的加载、异步加载、场景跳转

Application类 using System.Collections; using System.Collections.Generic; using UnityEngine;public class ApplicationTest : MonoBehaviour {// Start is called before the first frame updatevoid Start(){//游戏数据文件夹路径 只读、加密压缩Debug.Log(Application…

华为云数据库GaussDB(for MySQL)携高新技术强势而来

华为云数据库GaussDB(for MySQL)携高新技术强势而来 企业数据库堪比人的心脏一样重要&#xff0c;不仅要承担企业数据存储、维护、管理、分析等任务&#xff0c;还要保证企业数据的完整性和准确性&#xff0c;并且需要承载着对其他业务系统或客户信息进行整合处理的功能&#x…

网课搜题公众号在线查题系统

网课搜题公众号在线查题系统 本平台优点&#xff1a; 多题库查题、独立后台、响应速度快、全网平台可查、功能最全&#xff01; 1.想要给自己的公众号获得查题接口&#xff0c;只需要两步&#xff01; 2.题库&#xff1a; 查题校园题库&#xff1a;查题校园题库后台&#xf…

【学习笔记】JSP内置对象

JSP内置对象pageContextRequestResponseconfig [ServletConfig]outApplication [ServletContext]pageexceptionsession 其中,pageContext、Request、Application、session 用于存储数据 它们都使用setAttribute() 来存数据 <% pageContext.setAttribute("name1&quo…

Dubbo的简单使用

一、架构演进 发展演变1.1 单一应用架构 当网站流量很小时,只需一个应用,将所有功能都部署在一起,以减少部署节点和成本。此时,用于简化增删改查工作量的数据访问框架(ORM)是关键。适用于小型网站,小型管理系统,将所有功能都部署到一个功能里,简单易用。 缺点性能扩展…

操作系统:文件IO

文章目录文件描述符文件描述符池基本文件操作openopen返回文件描述符的规则open的文件描述符与fopen的文件指针closewritereadlseekfcntl共享文件操作同一进程&#xff0c;多次open同一文件多个进程&#xff0c;多次open同一文件dupdup2利用dup、dup2实现重定位高级文件IO非阻塞…

【网络安全-键盘监视】学会以后去捉弄舍友,看他有了什么不可告人的秘密

&#x1f343;博主昵称&#xff1a;一拳必胜客 博主主页面链接&#xff1a;博主主页传送门 博主专栏页面连接&#xff1a;专栏传送门–计算机考研 &#x1f351;创作初心&#xff1a;本博客的初心是每天分享记录自己学习的脚步&#xff0c;和各位技术友探讨交流&#xff0c;同时…

通过jmap、jstack分析问题,以及分析方法

一、问题 多批次导入任务&#xff0c;会出现异步线程停止工作的情况&#xff0c;后续无论导入多少任务&#xff0c;异步线程都不会执行&#xff0c;只有重启能解决。 二、工具使用 进入jdk的bin目录&#xff1a; cd /beeb/ap/uip/jdk1.8.0_231/bin 2.1 拉取jstack日志&…

setContentView源码解析

一、引言 本文将解析activity加载布局文件的setContentView源码&#xff0c;由于会涉及到部分activity的启动流程&#xff0c;这里附上一张activity启动流程图&#xff1a; 关于 setContentView 源码分两种情况&#xff0c;因为我们的 activity 有两个&#xff1a; 一种是继…

halcon脚本-边缘及骨架的识别【附源码】

文章目录前言一、原图1.边缘图2.骨架图二、实现思路1.边缘图2.骨架图三、halcon脚本实现1.边缘图2.骨架图四、实现效果1.边缘图2.骨架图前言 本文实现基于图像进行边缘或者骨架的识别&#xff0c;可实现让机器人画画 一、原图 1.边缘图 2.骨架图 二、实现思路 1.边缘图 提取…

【阅读】一周翻过《构建之法》,笔记整理

文章目录&#x1f6a9; 前言&#x1f966; 阅读笔记&#x1f33e; 结语&#x1f6a9; 前言 我的阅读方式 我拿到这本书挺久了&#xff0c;之前已经零散地看过一部分&#xff0c;最近一周集中地花了一些时间&#xff0c;将整本书看过了一遍。看得比较粗略&#xff0c;正如“好读…