html的基础知识

时间 2020-10-06

标签 html 前端浏览器框架 ide 学习搜索引擎 url htm 栏目 HTML 繁體版

原文原文链接

本人对前端所知甚少，遂把基础知识笔记记录于下，方面之后学习翻看。有点凌乱。
html中的标签是前端的基础。html是一种超文本标记语言。里面有不少的简单标签。总体结构以下：
<html>
<head> ----帮助浏览器去解析
<meta />
<title>
</title>
</head>
<body>html

</body>前端

</html> -----根标签浏览器

说明：html根标签，一个页面有且只有一个根标签
head标签中的内容不会被显示，帮助浏览器解析
title：网页的标题标签，默认会显示在网页的标题栏上，搜索引擎
在检索页面时，会首先检索title标签中的内容，它会影响到网页在搜索引擎的排名框架

1.标签的属性：
处理标签的内容，在开始标签里添加，实质上是一个名值对
属性名=“属性值” 一个标签能够有多个属性，而且每一个属性用空格隔开
<font color="red" size="7">个人</font> ide

2.h5的文档声明写在网页的最上边。<! doctype html>
3.网页出现乱码的解决办法：
<meta charset="utf-8" />---设置网页的元数据，好比网页字符集
--自结束标签学习

4.内容标题标签 ---语义化标签
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>ui

5.<p></p>
p标签中的文字，默认会独占一行，段与段之间有间距
在html中，字符之间再多的空格，浏览器也会当作一个空格，换行也会当作一个
<br />表示一个换行，br标签是自结束标签
<hr />表示水平线，也是一个自结束标签搜索引擎

6.实体：
在html中，> <特殊字符不能直接使用。特殊符号是实体，转义字符
$实体的名字;
< ---- $lt;url

--- $gt;
空格----- $nbsp;
版权符号--------- $copy;htm

7.图片标签：

img标签引入外部图片
img标签也是自结束标签
src : 设置一个外部图片的路径
alt ：设置在图片不能显示时的描述
搜索引擎根据alt来识别不一样的图片

width:宽度单位为px
height：高度
通常开发中，除了自适应页面，不建议设置width和height
<img src="文件名" alt="这是一只大松鼠"/>
相对路径：相对于当前资源所在目录的位置

../表示返回当前文件夹的目录
../../返回几个目录就写几个../

8.图片的格式：
JPEG（JPG）：支持的颜色比较多，图片能够压缩，可是不支持透明,
通常使用JPEG来保持照片等颜色丰富的图片
GIF:支持的颜色少，只支持简单的透明，支持动态图，
图片颜色单一或者动态图时可使用

PNG：支持颜色多，而且支持复杂的透明，能够用来显示颜色复杂的透明图片

图片使用原则：
效果不一致，使用效果好的
效果一致，使用小的

9.meta 标签还能够设置网页的关键字

name 中的内容是对content值的描述
<meta name="keywords" content="HTML5" />

meta 能够用来作请求的重定向
<meta http-equiv="refresh" content="5:url="http://www.baidu.com"" />

10.html的语法规范：
1.html中不区分大小写，通常是小写
2.html中的注释不能嵌套使用
3.html中标签必须结构完整，要么成对出现，要么自结束

11.超连接 a标签
href :指向跳转的目标地址，能够写一个相对路径，或者完整的地址

<a href="http://www.baidu.com"></a>;
a标签中的target属性能够用来指定打开连接的位置
可选值：
_self:默认值
_blank：在一个新的窗口中打开咱们的连接
能够设置为一个内联框架的name属性值，连接将在指定的内联框架中打开

<center></center>标签中的内容表示居住的标签
若是将连接地址设置为#，点击连接后自动跳转到顶部位置
html中有一个属性，每一个元素都能设置，该属性能够做为标签的惟一标示。id
id属性在同一个页面中只能有一个，不能重复。 #+id属性值
<a href="#button"></a>

发送电子邮件的超连接，点击连接后默认打开计算机中的点击邮件客户端连接href="mailto:邮件地址"