HTML基础知识

最新推荐文章于 2024-07-14 09:37:06 发布

一李

最新推荐文章于 2024-07-14 09:37:06 发布

阅读量167

点赞数

分类专栏：前端文章标签： HTML基础前端

本文链接：https://blog.csdn.net/qq_43641432/article/details/101057946

版权

前端专栏收录该内容

102 篇文章 1 订阅

订阅专栏

HTML超文本标记语言

html：根标签，一个页面只能有一个根标签

head：head改标签中的内容不会在网页中直接显示，帮助浏览器解析页面-

title：标题标签会显示在浏览器标题栏中搜索引擎检索页面时，会首先检索title标签中的内容，对于搜索引擎最重要的内容，会影响网页的排名

body：设置网页中的主体内容

在这个结构中可以用来编写HTML注释
注释中的内容不会在页面中显示，但是可以在源码中显示
通过注释可以对代码进行描述，从而帮助其他的开发人员工作。
养成良好的注释习惯（简单明了）

属性标签：

可以通过属性来设置标签如何处理标签中的内容
可以在开始标签中添加属性,属性需要写在开始标签中，实际上就是一个名值对的结构属性名 = "属性值"
一个标签可以设置多个属性，属性之间用空格隔开-

<!-- 根标签，一个页面只能有一个根标签-->
<html>
    <!-- head改标签中的内容不会在网页中直接显示，帮助浏览器解析页面-->
    <head>
        <!-- 标题标签  会显示在浏览器标题栏中
	搜索引擎检索页面时，会首先检索title标签中的内容，对于搜索引擎最重要的内容，会影响网页的	排名-->
        <title>this is</title>
    </head>
    <!--设置网页中的主体内容 -->
    <body>
	<!-- 在这个结构中可以用来编写HTML注释
		注释中的内容不会在页面中显示，但是可以在源码中显示
		通过注释可以对代码进行描述，从而帮助其他的开发人员工作。
		养成良好的注释习惯（简单明了）
	-->
         <!-- 可以通过属性来设置标签如何处理标签中的内容
	可以在开始标签中添加属性
	属性需要写在开始标签中，实际上就是一个名值对的结构  属性名 = "属性值"
	一个标签可以设置多个属性，属性之间用空格隔开-->
        <h1>这是我的<font color = "red" size = "7" >第二个</font>网页</h1>
    </body>
</html>

<!doctype html>

进制：常用的进制：2,10,8,16进制

乱码问题

编码：依据一定的规则，将字符转化为二进制编码的过程

解码：依据一定的规则，将二进制编码转化为字符的过程

字符集：编码和解码所用的规则，称为字符集

常见的字符集：ASCII ISO-8859-1 GBK GB2312 UTF-8（万国码，支持所有的文字）

产生乱码的根本原因是编码和解码采用的字符集不同

中文系统浏览器中默认使用GB2312进行解码。------

meta是一个自结束标签,在编写时在开始标签中添加一个 /

<meta charset = "utf-8"/>

标题标签

           在HTML中一种有六级标题标签
           h1--h6
           在显示效果上h1最大h6最小，但是文字的大小不关心
           只关心语意
           6级标题中，表示一个网页的主要内容，h2~h6重要性依次降低，
           h1标签非常重要，他会影响到页面在搜索引擎中的排名一般一个页面只能写一个h1

           一般页面中标题只用h1h2h3.

段落标签

使用p标签表示一个段落
p标签中的文字默认独占一行，并且段与段之间有间距

在HTML中，字符之间写再多的空格，浏览器也会当场一个空格解析，换行也会当成一个空格解析
在页面中可以使用br标签来表示换行，
br标签是一个自结束标签

hr标签也是一个自结束标签，在页面中生成一条水平线

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8"/>
		<title>常用的标签</title>
	</head>
	<body>
		<!--标题标签
			在HTML中一种有六级标题标签
			h1--h6
			在显示效果上h1最大h6最小，但是文字的大小不关心
			只关心语意
			6级标题中，表示一个网页的主要内容，h2~h6重要性依次降低，
			h1标签非常重要，他会影响到页面在搜索引擎中的排名一般一个页面只能写一个h1
			
			一般页面中标题只用h1h2h3.
			
			-->
		<h1>一级标题</h1>
		<h2>一级标题</h2>
		<h3>一级标题</h3>
		<h4>一级标题</h4>
		<h5>一级标题</h5>
		<h6>一级标题</h6>
		<!--段落标签
			使用p标签表示一个段落
			p标签中的文字默认独占一行，并且段与段之间有间距
		-->
		<!--在HTML中，字符之间写再多的空格，浏览器也会当场一个空格解析，换行也会当成一个空格解析
			在页面中可以使用br标签来表示换行，
			br标签是一个自结束标签
		-->
		<!--
			hr标签也是一个字节数标签，在页面中生成一条水平线-->
		<hr />
		<p>pdunali<br/>
		威风威风微服务fw
		 wef wef
		  为</p>

	</body>
	
</html>

实体

在HTML中一些特殊的符号是不能使用的 < >,需要用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称为实体（转义字符串）

浏览器在解析到实体时，会自动的将实体，转换为对应的字符

< <
> >

空格  

版权符 ©

图片标签 img（自结束标签）

<img src  = "1.png" alt = "这是一个" />

使用img标签来向网页中引入一个外部图片

属性：

src：外部图片的路径。src属性配置的是图片的路径，目前我们所要只用的路径全都是相对路径。

alt：图片的描述，只有图片没有时才显示，（搜索引擎可以通过alt属性来识别不同的图片）

如果不写alt属性，则搜索引擎不会对img中的图片进行收录

width：修改宽度

height：修改高度

当width和height两个属性如果只设置一个，另外一个也会等比例改变。如果两个值同时改变

一般开发中不建议改变。

相对路径

相对于当前资源所在目录的位置，

../返回当前文件的上一级

可以使用../来返回一级目录，几个../就返回几级路径

图片的格式

jpeg(jpg):

-支持图片颜色多，可以压缩，小，但是不支持透明。

-一般使用jpg来保存照片

gif

-支持的颜色少，只支持简单透明，支持动态图

-图片颜色单一，动态图时

png

-支持的颜色多，并且支持复杂透明

-可以用来显示颜色复杂的透明的。

图片的使用原则

效果不一致使用效果好的

效果一致用小的

meta标签

用来设置网页关键字，

<meta name = "keywords" content = "HTML5,javascipt, " />

name 的值是对content的一个描述

用来指定网页的描述

<meta name = "description" content = "描述">

请求的重定向

隔5秒以后去指定地址

<meta http-equiv = "refresh" content = "5;url = http://www.baidu.com"/>

搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但是站着两个值不会影响页面在搜索引擎的排名

xhtml语法规范

不区分大小写，但是一般都使用小写
注释不能嵌套
标签必须结构完整，要么成对出现，要么自结束标签
浏览器会尽最大的努力去解析页面，所有不符合规范的内容，会自动修正。但是有些情况会修正错误。
HTML标签可以嵌套，但是不能交叉嵌套
HTML标签中的标签必须有值，且值必须加 " "..

内联框架（不推荐使用）

可以引入一个外部页面，但是内联框架中的内容不会被搜索引擎检索

使用iframe创建一个内联框架

width height name = 给内联框架起名

<iframe src = "demo02.html" >

超链接

使用超链接可以从一个页面跳转到另外一个界面

使用a标签创建超链接

创建超链接时，如果没有地址，先用#占位置

href：指向链接跳转的地址

<a href = "http://www.souhu.com">超链接		</a><br />

a标签中的target属性可以用来指定打开连接位置

可选值：

_self（默认值）

_blank(在一个新的窗口中打开链接)

<a href = "http://www.souhu.com" target = _blank >

可以设置一个，内联框架的name属性值，链接将会在指定的内联框架中打开

<a href = "http://www.souhu.com" name = "tom">超链接		</a><br />

center标签中的内容会默认居中，可以将要居中的元素都放在center中

ps：

如果将超链接的地址设置为#，则点击超链接以后回到顶部

HTML有一个属性，每一个元素都可以设置，该属性可以作为标签的唯一标识

ID属性在同一个页面中只能有一个不能重复。

一个简单的页面

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8"/>
		<title>个人博客</title>
		<meta name = "keywords" content = "博客">
	</head>
	<body>	
	<center>
		<!--跳转到id=bottom位置---->
		<a href = "#bottom">去底部</a><br />
		<a href = "#littlegirl">小可爱</a>
		
		<h1>这个我的个人博客</h1>
		<h2>东风破</h2>
		<a href = "#">周杰伦</a>
		<p>wenzi <br />
		   wenzi<br />
			<img id ="littlegirl" src = "a.png" alt = "周杰伦" width = "300px"><br />
		
		</p>
		<p>wenzi <br />
		   wenzi<br />
			<img src = "a.png" alt = "周杰伦" width = "300px"><br />
		
		</p>
		<hr />
		友情链接：<a href = "#">A网站</a>|<a href = "#">B网站</a>|<a href = "#">C网站</a><br />
		<a id = "bottom" href = "#">回到顶部</a>|
		<!--如果将超链接的地址设置为#，则点击超链接以后回到顶部-->
		<a href = "mailto:abc@lili.com">联系我们</a>
		<!--点击后打开特定的客户端,当点击会打开默认的电子邮件客户端-->
	</center>
	</body>
</html>

一李

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础知识

HTML超文本标记语言html：根标签，一个页面只能有一个根标签head：head改标签中的内容不会在网页中直接显示，帮助浏览器解析页面-title：标题标签会显示在浏览器标题栏中搜索引擎检索页面时，会首先检索title标签中的内容，对于搜索引擎最重要的内容，会影响网页的排名body：设置网页中的主体内容在这个结构中可...
复制链接

扫一扫