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>

猜你喜欢

转载自blog.csdn.net/qq_29917503/article/details/131963957