HTML概述

news2024/12/24 8:52:42

1.HTML介绍&规范

                1.1介绍

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

普通的文本就是英文单词,英文字母一样的存在。

超文本的意思是有一些单词或字母,在网页浏览器的世界中被赋予了特殊的权利。

比如:我们都是普通人,但是有些人经过国家的选拔,穿上警服之后,他就被赋予了执法的特殊
权利,普通人是没有执法权的。
字母img只是普通的字母,没什么特殊的含义。而被加上尖括号后,在网页的世界中,就具备了 显示图片的作用。

                1.2 使用记事本开发第一个网页

        在计算机任意的位置,创建一个空白的记事本 重点:文件的后缀名必须是 “htm” 或 “html” 鼠标右键文件,选择打开方式为"记事本",输入下面代码

<html>
    <head>
	<title>测试网页</title> 
    </head>
	<body>
		~小安同学!
	</body>
</html>

保存文件,双击文件会以计算机默认的浏览器运行,你的第一个网页就制作完成了!
注意:
1.标签它代表当前页面是一个HTML
2.标签中可以声明HTML页面的相关信息
3.标签中它主要是用于显示页面信息
4.标签要有开始,有结束,成双成对
5.开始标签与结束标签中的内容是标签的内容,如果没有标签内容,可以让标签自关闭<br/>
6.大多数标签它具有属性,属性值要使用引号引起来。
7.HTML它本身是不区分大小写的。

        2.HTML的使用

                2.1 文件标签

<html> 标签: 代表当前书写的是一个HTML文档
<head>标签:存储的本页面的一些重要的信息,它不会显示
<head>标签:有一个子标签
<title>它是用于定义页面的标题的
<body>标签:书写的内容会显示出来
<body>标签的属性

  • ext 用于设置文字颜色
  • bgcolor 用于设置页面的背景色
  • background 用于设置页面的背景图片

                 2.2 排版标签

                        2.2.1 HTML注释

                         2.2.2 换行标签

<br/> 标签就是一个换行(回车)功能标签,标签中的 / 可有可无的。
有/是html语言的标准化,但是html语言是一门不那么严谨的语言

                        2.2.3 段落标签

在<p>标签中的内容,会在开始与结束之间产生一个空白行,并且它会自动换行. 常用属性 align 它的作用是设置段落中的内容对齐方式 可取值有 left right center

                         2.2.4 水平线标签

<hr>标签会在页面上产生一个水平线
对于hr标签它有常用属性:

  • align:可取值有left right center 代表水平线位置
  • size:代表水平线厚度(粗细)
  • width:代表水平线宽度
  • color:水平线的颜色

单位:size=“5”,5是默认的单位,为"像素"/“像素点”,像素就是构成计算机图片的最小单位! 也可以使用百分比,size=“50%”

                        2.2.5 分区标签 

div是一个块标签,用来进行布局的 普通的div并没有什么效果,肉眼也看不见,但div与CSS结合,就会更好对页面进行排版
div与span都是“容器”的作用,具体区别:

  • div会自动换行,我们也叫这样的标签为块级元素
  • span标签它不会自动换行,我们也叫它为行内元素
  • div:整体划分区块
  • span:局部划分

                 2.3 字体标签

                        2.3.1 字体标签

<font>标签可以设置字体,字的大小及颜色,常用属性:

  • face:用于设置字体,例如 宋体 隶书 楷体
  • size:用于设置字的大小(大小默认设置1-7,7最大,想更大,往后学css即可)
  • color:用于设置字的颜色

注:
我们所看到的屏幕上所有的颜色都是由红、绿、蓝这三种基色调混合而成的。
每一种颜色的饱和度和透明度都是可以变化的,用0~255的数值来表示。如纯红色表示为(255,0, 0),十六进制表示为#FF0000。
按这种表达方式,理论上我们可以得到256 * 256 * 256 = 16777216种颜色。

  1. 使用十六进制方式,取值范围 #000000 ~ #FFFFFF (黑色到白色)。当颜色值为#cc3300 时,可简化成 #c30 这种方式
	<body bgcolor="#666">
  1. RGB颜色表示法:RGB(x,y,z)。x、y、z是0 ~ 255之间的整数。rgb字母大小写无所谓

	<body bgcolor="rgb(11,11,11)">

(在线颜色选择器: http://www.86y.org/code/colorpicker/color.html )

                        2.3.2 标题标记

给一段文字起一个标题
<h1> ----- <h6>
h1最大 h6最小,它们代表的是标题,
自动换行,字体加粗,标题与标题之间产生一定的距离
注意:在HTML中允许标签进行嵌套的,但是一般都包裹嵌套,而不可以进行交叉嵌套

                        2.3.3 格式化标签 

<b>:字体加粗
<i>:字体倾斜
<del>:删除线
<u>:下划线

         2.4 列表标记

                ol:有序列表

  • type=‘A’:字母排序
  • type=‘I’:罗马排序
  • start=“3” 序列从几开始

                ul:无序列表

  • type=“disc”:默认,实心圆
  • type=“square”:方块
  • type=“circle”:空心圆

        2.5 图像标签

<img>它可以让我们在网页引入一张图片,常用属性:

  1. src 代表的图片的路径
  2. width 图片的宽度
  3. height 图片的高度
  4. border 用于设置图片的边框
  5. alt 如果图片不可以显示时,默认显示的文本信息
  6. title鼠标悬停图片上,默认显示的文本信息
  7. align 图片附件文字的对齐方式,可取值有
  • left:把图像对齐到左边
  • right:把图像对齐到右边
  • middle:把图像与中央对齐
  • top:把图像与顶部对齐
  • bottom:把图像与底部对齐(默认)

         2.6 超连接标签

        <a>标签,可以实现跳转到其它页面操作. 超链接内容不仅可以是文本,也可以是图片等信息 常用属性:

  1. href 代表的我们要跳转的路径
  2. target 这个属性规定在何处打开这个链接文档,可取值:

         _ blank 在新窗口中打开页面
        _ self 默认。在本窗口打开页面

         2.7 表格(未完待续...)

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java进阶(6)——抢购问题中的数据不安全(非原子性问题) Java中的synchronize和ReentrantLock锁使用 死锁及其产生的条件

目录 引出场景&#xff1a;大量请求拥挤抢购事务的基本特征ACID线程安全的基本特征 加锁(java)synchronized锁ReentrantLock锁什么是可重入锁&#xff1f;如何保证可重入 滥用锁的代价&#xff1f;&#xff08;死锁&#xff09;死锁的四个必要条件死锁的案例 总结 引出 1.大量请…

pytorch安装VAE项目详解

安装VAE项目 一、 基本环境二、代码来源三、搭建conda环境四、下载数据集五、启动项目六、其他相关问题 一、 基本环境 工具版本号OSwin 11pycharm2020.1GPU3050 二、代码来源 github地址为&#xff1a; https://github.com/AntixK/PyTorch-VAE/blob/8700d245a9735640dda458d…

Mybatis-动态sql和分页

目录 一.什么是Mybatis动态分页 二.mybatis中的动态SQL 在BookMaaper.xml中写sql BookMapper BookBiz接口类 BookBizImpl实现接口类 demo测试类 ​编辑 测试结果 三.mybatis中的模糊查询 mybatis中的#与$有是什么区别 在BookMapper.xml里面建立三个模糊查询 ​编辑 …

校园人员进出入登记系统 微信小程序

利用eclipse编译器和微信开发者工具进行运行高校人员进出管理系统&#xff0c;用户需要登录完成之后才可以进行申请进出学校。管理员在登录系统之后具有的功能包括个人中心&#xff0c;学生管理&#xff0c;教师管理&#xff0c;申请出校管理&#xff0c;出校批准管理&#xff…

idea http request无法识别环境变量

问题描述 创建了环境变量文件 http-client.env.json&#xff0c;然后在*.http 文件中引用环境变量&#xff0c;运行 HTTP 请求无法读取环境变量文件中定义的变量。 事故现场 IDEA 版本&#xff1a;2020.2 2021.2 解决步骤 2020.2 版本环境变量无法读取 2021.2 版本从 2020.…

实景无人直播平台是这么开发出来的

标题&#xff1a;实景无人直播平台开发&#xff1a;探索专业性、思考深度与逻辑性的全新体验 随着科技的不断进步&#xff0c;实景无人直播平台成为了当今数字娱乐领域的热门话题。这种新型娱乐方式将虚拟与现实相结合&#xff0c;为用户带来了前所未有的视听体验。本文将探…

圆的反演 hdu 6097

欢迎关注更多精彩 关注我&#xff0c;学习常用算法与数据结构&#xff0c;一题多解&#xff0c;降维打击。 题目大意 http://acm.hdu.edu.cn/showproblem.php?pid6097 有一个圆C&#xff0c;它的圆心是O(0,0), 半径是r。 在C内部或边界上有两点P和Q&#xff0c;OPOQ。 求解…

mysql 8.0 窗口函数 之 序号函数 与 sql server 序号函数 一样

sql server 序号函数 序号函数 ROW_NUMBER() 顺序排序RANK() 并列排序&#xff0c;会跳过重复的序号&#xff0c;比如序号为1&#xff0c;1&#xff0c;3DENSE_RANK() 并列排序&#xff0c;不会跳过重复的序号&#xff0c;比如 序号为 1&#xff0c;1&#xff0c;2 语法结构…

【树莓派打怪升级】:玩转个人Web世界!

文章目录 概述使用 Raspberry Pi Imager 安装 Raspberry Pi OS设置 Apache Web 服务器测试 web 站点安装静态样例站点 将web站点发布到公网安装 Cpolarcpolar进行token认证生成cpolar随机域名网址生成cpolar二级子域名将参数保存到cpolar配置文件中测试修改后配置文件配置cpola…

MFC——base编码和json数据

目录 1. JSON是什么 2. base64是什么 Base64是一种编解码算法 1. JSON是什么 JSON 是一种数据格式。采用完全独立于语言的文本格式, 因为易读, 易写, 易解析的特性成为理想的数据交换语言。主要有三种类型的值:简单值(字符串, 数字, 布尔, null), 对象, 数组。 长这样的数…

AI Agent在情景猜谜场景下的AgentBench基准测试

目录 AgentBench评估哪些场景? 近日,来自清华大学、俄亥俄州立大学和加州大学伯克利分校的研究者设计了一个测试工具——AgentBench,用于评估LLM在多维度开放式生成环境中的推理能力和决策能力。研究者对25个LLM进行了全面评估,包括基于API的商业模型和开源模型。 他们发现…

什么是eval()?eval是用来干什么的?

一、什么是eval()? eval() 是 JavaScript 中的一个全局函数&#xff0c;用于解析并执行传递给它的字符串作为 JavaScript 代码。 二、eval()是用来干什么的&#xff1f; 当调用 eval() 时&#xff0c;它会将传入的字符串参数视为 JavaScript 代码&#xff0c;并在调用位置执…

KEPServerEX 助力选矿厂生产优化升级

背景 客户是一家系统集成商&#xff0c;在山西某选矿厂项目中为业主提供一系列的设备安装及通讯支持&#xff0c;为了更高效节能的完成选矿环节&#xff0c;客户需要对设备实时状态进行精确监控&#xff0c;并将需要的数据记录到数据库中&#xff0c;方便后期进行数据追溯、大数…

【无标题】 欢迎使用Markdown编辑器

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

继承中的构造与析构

思考 如何初始化父类成员&#xff1f; 父类构造函数和子类构造函数有什么关系&#xff1f; 子类对象的构造 子类中可以定义构造函数 子类构造函数 必须对继承而来的成员进行初始化 直接通过初始化列表或者赋值的方式进行初始化调用父类构造函数进行初始化 父类构造函数在子…

实业兴国 守护种源 —— 白露木實®农业的活力之风

高科技领域&#xff0c;芯片是生命线&#xff1b;而在农业领域&#xff0c;种源与芯片在高科技领域的重要性是相同的。保护、发展、培育我国的种质资源&#xff0c;是中国农业发展至为关键的一环。但是&#xff0c;因为思想、观念、认识、技术等方面的原因&#xff0c;让我们错…

营销系统类型有哪些?广州市营销系统开发推荐

营销系统是能够让企业实现与客户的价值交换&#xff0c;并从中获得销售收入的系统。企业的日常经营离不开营销推广活动&#xff0c;为了让用户获得更好的营销体验、也为了企业更快捷简便地提供营销服务&#xff0c;自然少不了对于营销系统的使用。如开利网络蚓链营销系统拥有70…

3D虚拟数字人定制及数字人影片制作方案

在新消费大环境下&#xff0c;各行业正在向着数字化方向发展&#xff0c;数字人是行业进入数字化的主要入口&#xff0c;因此“数字人品牌”的营销模式不断出现于市场&#xff0c;为何品牌偏爱3D虚拟数字人定制&#xff1f; 因为数字人随着惯性动作捕捉技术的应用&#xff0c;成…

如何将数据从 InfluxDB 无缝接入到 TDengine 中?来看看

现在借助 TDengine 3.0 企业版和 TDengine Cloud&#xff0c;你可以无缝接入不同数据源的数据到 TDengine 中了&#xff0c;为了帮助大家更好地应用此功能&#xff0c;我们还输出了系列的教程文章。上期《TDengine 推出重磅功能&#xff0c;助力 MQTT 无缝数据接入》一文为大家…

中小企业如何搭建在线客服中心?

随着人工智能时代的到来&#xff0c;人工智能在企业服务领域的实际场景尤为迫切&#xff0c;对智能客户服务机器人的需求也出现在历史时刻。同时&#xff0c;随着用户对体验的需求不断提高&#xff0c;传统企业的客户服务部门往往陷入一定的自我矛盾循环。 目前&#xff0c;企…