前端--HTML
一、HTML介绍
html(hypertext markup language)是超文本标记语言,是一种用于创建网页的标记语言。网页文件的扩展名为.html或.htm。
html文档的基本结构为:
<!DOCTYPE html> --->声明为HTML5文档
<html lang='en'> --->开始标记和语言声明
<head> --->标记开头
<meta charset='UTF-8'> --->字符编码声明
<title>title</title> --->定义网页标题,在浏览器标题栏显示
</head>
<body> --->body之间为网页现实的主题内容
</body>
</html>
标签格式是由尖括号加关键字的方式组成()。一般是成对出现,第一个是开始,第二个是结束,结束标签会有斜线标识。也有单独出现的标签,例如
,
等
标签的语法为:
<标签名 属性="属性值" 属性="属性值" 属性="属性值">内容</标签名>。
需要注意的重要属性:
- id:定义标签的唯一id,文档树中是唯一存在的。
- class:为html元素定义一个或者多个类名。
- style:规定元素的行内样式
二、常用标签
2.1 head内常用标签
<title></title> --->定义网页标题
<style></style> --->定义内部样式表
<script></script> --->定义JS代码或引入外部JS文件
<link/> --->引入外部样式文件或网站图标
<meta/> --->定义网页原信息
meta标签:
- 元素可提供有关页面的原信息(mata-information),针对搜索引擎和更新频度的描述和关键词。
- 标签位于文档头部,不包含任何内容
- 提供的信息是用户不可见的
meta标签有两个属性:http-equiv和name。
- http-equiv:相当于http的文件头作用,可以向浏览器传回一些有用的消息,帮助正确的显示网页内容,对应的值为content。
<!--指定文档的编码类型(需要知道)-->
<meta http-equiv="content-Type" charset=UTF8">
<!--2秒后跳转到对应的网址,注意引号(了解)-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--告诉IE以最高级模式渲染文档(了解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
- name:描述网页,对应的属性值为content,content中的内容主要是便于搜索引擎查找信息和信息分类用的。
2.2body内常用标签
基本标签:
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签</p>
<br>换行
<hr>水平线
<h1 id="h1">一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>
六级标题
只有六级标题
多了没有
</h6>
特殊字符:
空格
> 大于号
< 小于号
& &符号
¥ ¥
© 版权符号
® 注册
div标签和span标签:
div:用来定义一个块级元素,无实际意义。通过CSS样式为其赋予不同的表现。
span:用来定义内联元素,无实际意义。通过CSS样式为其赋予不同的表现。
块级元素和行内元素区别是渲染时另起一行,而行内元素不需要。需要注意的是标签嵌套时,块级元素可以包含内联元素或者块级元素,而内联元素不包含块级元素。
img标签
<img src="图片路径" alt="图片加载不成功的提示" title="鼠标悬浮时的提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
a标签-->超链接标签
<a href="网址" target="_black"></a>
href属性指定目标网页地址,有如下几种类型:
绝对URL,指向另一个站点
相对URL,指向当前站点中确切的路径
锚URL,指向页面锚点
target:
_black表示在新标签页中打开目标网页
_swlf表示在当前页中打开网页