HTML基础 第一课

news2024/11/17 5:30:14

文章目录

    • 什么是HTML
    • HTML规范
    • 标签的种类
      • 开闭合标签
      • 整合标签
      • 标签中的属性
    • 我的第一个HTML

什么是HTML

Hyper Text Markup Language 超文本标记语言

超文本:表示页面上的一切要素,正如Java中的万物皆对象一样,在网页中包含 普通的文本样式 结构 视频 音频等都可以称之为超文本。

标记:也称之为标签,英文为Tag,页面上的一切要素都是用标记来渲染,包括样式 结构视频 音频等一系列要素都有标签来进行渲染,比如我们需要进行一个换行操作,点击键盘上的回车键是无效的,必须使用标签进行换行。

HTML规范

1993年由W3C世界互联网组织发布了第一版的Html规范,此规范初步了规定了各种标签的使用方式,Html可以同时渲染页面的结构和样式,目前2020年使用的版本已经迭代到第五版也就是著名的html5,迄今为止依然存在部分的浏览器差异性。

html文件以.html 或者 .htm 结尾,必须以浏览器打开,目前世界上常见的浏览器主要有以下几种,也是w3c的主要成员 谷歌 火狐 opera safari和ie,这五种浏览器都是用了自己独特的内核。我国没有自己独立内核的浏览器。

标签的种类

开闭合标签

<tagName>需要被嵌套的内容</tagName>
<!--例如-->
    <i>文本倾斜</i>
    <b>文本加粗</b>

整合标签

一般用来渲染特定的结构等

<tagName /> 或者 <tagName>

以上两种写法在Html5规范中都是正确的

标签中的属性

在标签中可以设置多个属性

<tagName 属性名1="属性值1" 属性名2="属性值2" />

属性多用来补充标签的一些特性,例如宽高等辅助参数

我的第一个HTML

html文件以.html和.htm为后缀,全文不区分大小写具有较高的容错性,浏览器具有一个标签解析器和脚本解析器,从上往下解析
用户书写的html页面,如果出现严重的错误,则无法显示相应的结构和样式在html页面上主要存在以下三种

结构(html) 页面上有什么 一个人身高 体型 素颜
样式(css html*)的这个东西是什么样子的打扮化妆以后的样子
动作(js) 页面上能够具有什么操作 这个人的谈吐举止

在1996年css出现之前html也能够渲染页面样式,之后样式被css取代

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>我的第一个html</title>
	</head>
	<body>
		<center>
			<div id="container">
			
				<header>
					<h2>~用户注册~</h2>
					<hr width="60%">
				</header>
			
				<section></section>
			
				<footer>
					<address>我是页脚中的版权信息</address>
				</footer>
			</div>
		</center>
	</body>
</html>

html文件双击可运行
在这里插入图片描述

第一句为DTD信息,规定了整个页面使用的是第几版的html规范,可以使用哪些标签,哪些标签不能使用,此处使用的是html5,从第五版开始,dtd不再发生改变,如果不书写DTD,则默认使用4.01版本

<!DOCTYPE html>

html:html的根标签,在html和xml中都有且仅有一个根标签嵌套在最外层 lang:属性,可选,用来描述当前页面是何种语言的网页
en为英文网页,此处比对我们的操作系统的地区,如果不一致,则google翻译提示是否进行翻译

<html lang="zh-CN"> </html>

head:一级子元素,也可以称之为html标签的子元素,用来设置页面的头信息,例如标签,编码,引入的js css等注意书写规范为,子标签必须在父标签向右一个制表符

<head> </head>

meta:此标签可以设置页面的编码,关键字,描述等此处为设置编码,如果不指明编码则可能会导致页面的乱码注意有以下几种编码iso-8859-1:此编码为最早的编码,不支持中文,部分开发工具和浏览器默认使用此编码gb2312:国标码测试版,在iso-8859-1的基础上修改而来,支持中文但是存在2000多个无法识别的中文生僻字gbk:国标码,完全支持所有中文,国内大部分中文网站采用
windows系统默认使用此编码utf-8:互联网安全编码,支持中文,国外大部分网站多使用此编码很多开发工具默认使用此编码,OS系统默认为此编码

<meta charset="UTF-8">

title:用来设置页面的标题,支持中文

<title>我的第一个html</title>

body:表示页面的正文,所有主要的结构样式全部书写在body元素内

<body></body>

center:h4标签,已淘汰,仍然可以使用,会强制居中内部的所有元素已经被css取代

<center></center>

header:h5新增标签,表示页眉,一般放置页面的标题,搜索栏导航栏等元素

<header></header>

section:h5新增标签,表示整个页面中主体部分,放置完整的文章等

<section></section>

footer:h5新增标签,表示页脚,用来放置作者信息 网站版权 法律合作信息等

<footer></footer>

h1~h6:共有六级标题,随着序号的增大,字体不断减小,加粗,自动换行

<h2>~用户注册~</h2>

hr:分割线,一般是一条横线,可以设置宽度和颜色width:设置宽度,设置宽度一般存在以下两种书写方式

1)像素px 设置宽度和高度 480320 640480 笔记本最低分辨率(强烈不推荐) 1366*768 retina 2k 4k 8k
2)百分比 用来设置元素占据父元素的百分比

<hr width="60%">

address:用来书写地址等信息

<address>我是页脚中的版权信息</address>

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

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

相关文章

c++ 面试错题整理

在C中&#xff0c;下列哪个语句用于定义一个字符串变量&#xff1f;&#xff08;D&#xff09; A. string myString; B. char myString[]; C. String myString; D. char* myString; 关于为什么不是A&#xff0c;我猜测可能是因为string本质上是一个类。 C中的引用与指针有什么…

element-ui 合并表格行

element-ui 合并表格行操作 需求描述 动态获取数据后&#xff0c;将ID相同的行&#xff0c;ID合并成一个。 官方方法 //rowIndex当前行号 columnIndex当前列号 由此可知道每一行渲染时都会调用当前方法&#xff0c;只不过在渲染过程中设置了它合并的行数和列数&#xff0c;…

【Java】Spring关于Bean的存和取、Spring的执行流程以及Bean的作用域和生命周期

Spring项目的创建普通的存和取存储Bean创建Bean将Bean注册到容器中 获取并使用Bean获取Spring上下文获取并使用 更简单的存和取存储Bean配置扫描路径添加注解类注解Bean的命名规则五大注解的区别方法注解Bean方法注解要配合类注解使用重命名 Bean有参数的方法 获取Bean属性注入…

uniapp:H5定位当前省市区街道信息

高德地图api&#xff0c;H5定位省市区街道信息。 由于uniapp的uni.getLocation在H5不能获取到省市区街道信息&#xff0c;所以这里使用高德的逆地理编码接口地址接口&#xff0c;通过传key和当前经纬度&#xff0c;获取到省市区街道数据。 这里需要注意的是&#xff1a;**高德…

微信小程序,仿微信,下拉显示小程序效果,非常丝滑

1. 视图层 使用到了微信小程序的movable-view&#xff08;可移动的视图容器&#xff09;和movable-view的可移动区域。 微信小程序文档 <!--wxml--> <view style"position: relative;" class"page-container"><view>二楼内容</vie…

C++ - 优先级队列(priority_queue)的介绍和模拟实现 - 反向迭代器的适配器实现

仿函数 所谓仿函数&#xff0c;其实它本身不是一个函数&#xff0c;而是一个类&#xff0c;在这个类当中重载了 operator() 这个操作符&#xff0c;那么在外部使用这个类的 operator() 这个成员函数的时候&#xff0c;使用的形式就像是在使用一个函数一样&#xff0c;仿函数&a…

Web3.0:已经开启的互联网革命!

1 痛点 2 web发展形态 只读、封闭式、协作式。 3 一个高度联系、全球统一的数字经济体 去中心化架构通过计算几余打破数据垄断&#xff0c;同时实现数字确权大量的功能依靠智能合约自动实现&#xff0c;运转效率大大提升DAO大量涌现&#xff0c;全球范围实现资源配置 4 特…

类加载机制,类加载顺序

类加载顺序 ①类加载从上往下执行&#xff0c;依次执行静态的初始化语句和初始化块&#xff0c;而且类加载优先于对象创建。&#xff08;静态初始化语句和初始化块只加载一次&#xff09; ②创建本类的对象时&#xff0c;从上往下执行一次非静态的初始化语句和初始化块&#…

ElementUI Select选择器如何根据value值显示对应的label

修改前效果如图所示&#xff0c;数据值状态应显示为可用&#xff0c;但实际上仅显示了状态码1&#xff0c;并没有显示器对应的状态信息。在排查了数据类型对应关系问题后&#xff0c;并没有产生实质性影响&#xff0c;只好对代码进行了如下修改。 修改前代码&#xff1a; <…

出海周报|Temu在美状告shein、ChatGPT安卓版上线、小红书回应闪退

工程机械产业“出海”成绩喜人&#xff0c;山东相关企业全国最多Temu在美状告shein&#xff0c;跨境电商战事升级TikTok将在美国推出电子商务计划&#xff0c;售卖中国商品高德即将上线国际图服务&#xff0c;初期即可覆盖全球超200个国家和地区ChatGPT安卓版正式上线&#xff…

【梯度下降应用于波士顿房价预测(岭回归)】

数据准备 首先&#xff0c;我们需要获取波士顿房价数据集&#xff0c;并对数据进行处理。我们从CMU统计学习数据集库中获取数据&#xff0c;并将其划分为训练集和测试集。 import pandas as pd import numpy as npdata_url "http://lib.stat.cmu.edu/datasets/boston&q…

CFS调度器(原理->源码->总结)

一、CFS调度器-基本原理 首先需要思考的问题是&#xff1a;什么是调度器&#xff08;scheduler&#xff09;&#xff1f;调度器的作用是什么&#xff1f;调度器是一个操作系统的核心部分。可以比作是CPU时间的管理员。调度器主要负责选择某些就绪的进程来执行。不同的调度器根…

基于JAVA SpringBoot和Vue高考志愿填报辅助系统

随着信息技术在管理中的应用日益深入和广泛&#xff0c;管理信息系统的实施技术也越来越成熟&#xff0c;管理信息系统是一门不断发展的新学科&#xff0c;任何一个机构要想生存和发展&#xff0c;要想有机、高效地组织内部活动&#xff0c;就必须根据自身的特点进行管理信息时…

VUE中使用ElementUI组件的单选按钮el-radio-button实现第二点击时取消选择的功能

页面样式为&#xff1a; html 代码为&#xff1a; 日志等级&#xff1a; <el-radio-group v-model"logLevel"><el-radio-button label"DEBUG" click.native.prevent"changeLogLevel(DEBUG)">DEBUG</el-radio-button><el-r…

Harbor私有仓库搭建

Harbor 是由 VMware 公司中国团队为企业用户设计的 Registry server 开源项目&#xff0c;包括了权限管理(RBAC)、LDAP、审计、管理界面、自我注册、HA 等企业必需的功能&#xff0c;同时针对中国用户的特点&#xff0c;设计镜像复制和中文支持等功能。 作为一个企业级私有 Reg…

31. Oracle开发中遇到的一些问题

文章目录 Oracle开发中遇到的一些问题一、Oracle中的同义词二、 Oracle创建表空间无权限1.问题&#xff1a;2. 解决 三、设置Oracle不区分大小写四、查询语句表名是否需要加双引号问题 Oracle开发中遇到的一些问题 一、Oracle中的同义词 1.现在有一个这样的oracle业务场景 我…

MLagents 多场景并行训练

MLagents多场景并行训练调试总结 摘要 关于Unity MLagents的环境安装已经有了很多的blog和Video&#xff0c;本文针对MLagents的多场景的并行训练&#xff0c;以及在探索过程中出现的问题进行总结。 内容 Unity MLagents 多场景并行训练可以同时设置开多个场景进行并行探索…

C# 翻转二叉树

226 翻转二叉树 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1] 示例 2&#xff1a; 输入&#xff1a;root [2,1,3] 输出&#xff1a;…

【Java基础教程】(四十八)集合体系篇 · 上:全面解析 Collection、List、Set常用子接口及集合元素迭代遍历方式~【文末送书】

Java基础教程之集合体系 上 &#x1f539;本章学习目标1️⃣ 类集框架介绍2️⃣ 单列集合顶层接口&#xff1a;Collection3️⃣ List 子接口3.1 ArrayList 类&#x1f50d; 数组&#xff08;Array&#xff09;与列表&#xff08;ArrayList&#xff09;有什么区别?3.2 LinkedL…

java执行ffmpeg命名的Docker镜像制作

今天来记录一下通过Dockerfile制作docker镜像的过程 背景 我需要通过java服务调用ffmpeg去执行视频合并的功能&#xff0c;想把这个环境封装到docker镜像当中&#xff0c;方便以后迁移部署。 实现方法 随便找一个路径创建一个Dockerfile文件 touch Dockerfilevim Dockerfi…