day46---前端之HTML一
1. HTML
-
定义：超文本标记语言(Hypertext Markup Language，HTML)，是一套浏览器认识的规则，通过标签语言来标记要显示的网页中的各个部分
-
描述：浏览器按顺序渲染网页文件，然后根据标记符解释和显示内容。但需要注意的是，对于不同的浏览器，对同一标签可能会有不完全相同的解释(兼容性)
-
说明：HTML 不是一种编程语言，而是一种标记语言 (markup language)，HTML 使用标记标签来描述网页
-
后缀名：.html或.htm
-
结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head></head>
<body></body>
</html>
+ #### <!DOCTYPE>标签：指定浏览器使用html来解析当前文档
+ #### 标签：文档开始和结束标记
+ #### 标签：文档头部内容，head标签内的内容不会显示到页面中
+ #### 标签：文档主题内容，body标签内的内容是页面的可见内容
-
标签格式：
-
由尖括号包围的关键字
-
标签不区分大小写
-
标签和成对出现，也可以单个出现
-
成对出现的标签有开始和结束两个标签组成，中间的内容就叫标签体
-
单个标签出现的叫做自闭合标签
-
标签内可以使用属性，也可以不带属性
-
标签可以嵌套使用，不能交叉使用，先开始的标签后结束，后开始的标签先结束
-
-
标签语法：
-
开始和结束标签
<标签名 属性名1="属性值1" 属性名2="属性值2"...>内容</标签名>-
自闭合标签
<标签名 属性名1="属性值1" 属性名2="属性值2".../> -
-
注释：
<!-- 注释内容 -->
2. <!DOCTYPE>标签
-
描述：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式
-
document.compatMode：
-
BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面
-
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面
-
-
说明：<!DOCTYPE>需要放在标签之前，页面文档的最顶部。<!DOCTYPE>属性会被浏览器识别并使用，如果没声明有DOCTYPE的类型，那么compatMode默认就是BackCompat
3. <html>标签
-
<html>标签是整个文档的标记，页面所有的内容都需要包含在<html>的开始和结束标记之间，包含<head>和<body>标签，声明在<!DOCTYPE>标签后一行
4. <head>内常用标签
<head>
<meta charset="UTF-8(编码)">
<title>title名称</title>
<link rel="icon" href="favicon.ico(icon图标地址路径)">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="keywords" content="网页关键字">
<meta name="description" content="网页描述信息">
</head>
-
<meta>标签：
-
描述：提供页面的元信息，针对搜索引擎和更新频度的描述和关键词；<meta>标签位于文档的头部，不包含任何内容；<meta>提供的信息不可见
-
组成：<meta>标签有两个属性：
-
name属性：主要用于描述网页，配合content属性，指定一些便于搜索引擎机器人查找信息和分类信息
<meta name="keywords" content="网页关键字"> <meta name="description" content="网页描述信息">-
http-equiv属性：http的文件头作用，配合content属性，向浏览器传回一些有用的信息，帮助正确地显示网页内容
<meta http-equiv="Refresh" content="n;URL=https://www.yange.com"> <!-- 页面n秒后跳转到指定URL --> <meta http-equiv="content-Type" charset=UTF8"> <!-- 指定文档的编码类型 --> <meta http-equiv="x-ua-compatible" content="IE=edge"> <!-- IE浏览器以最高级模式渲染文档 --> -
-
-
非<meta>标签：
<title>标题名称</title>
<!-- 指定网页标题名称 -->
<link rel="icon" href="favicon.ico">
<!-- 指定网页的icon图标地址路径 -->
<link rel="stylesheet" href="style.css">
<!-- 引用css文件 -->
<script src="javascript.js"></script>
<!-- 引用js文件 -->
4. <body>内常用标签
-
基本标签：
-
：标题标签，n的取值范围1~6，从大到小 -
<p></p>：段落标签，中间的内容会被换行，并且上下内容之间也会有一行空白
-
<b></b>：粗体标签
-
<u></u>：下划线标签
-
<i></i>：斜体标签，等同于<em></em>
-
<s></s>：删除线标签，等同于<strike></strike>
-
<sup></sup>：上角标标签
-
<sub></sub>：下角标标签
-
<br/>：换行标签
-
<hr/>：水平线标签
-
-
常用的特殊字符：
-
空格：
-
and符&：&
-
人民币¥：¥
-
大于号>：>
-
小于号<：<
-
版权©：©
-
注册®：®
-
-
div标签和span标签：
-
div：用来定义一个块级元素，无实际的意义，主要用于接收css样式
-
span：用来定义一个内联元素或叫行内元素，无实际的意义，主要用于接收css样式
-
块级元素与行内元素的区别：块级元素占用一整行，渲染元素需要换行，内联元素占用一行内的一部分，渲染元素不需要换行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响
-
块级标签：div、p、hr、br、h1~h6等
-
内联标签：span、b、u、i、s、sup、sub、img、a等
-
标签嵌套规则：
-
块级标签可以嵌套块级标签和内联标签
-
p标签不能嵌套div标签
-
内联标签一般情况下不能嵌套块级标签
-
-
-
图片标签：
-
src：图片路径和图片名称
-
alt：图片加载失败时的提示
-
title：鼠标悬浮到图片时的提示信息
-
width：图片的宽度
-
height：图片的高度
-
如果宽度和高度只设置了其中一个属性，显示的图片结果会自动按照等比例缩放
<img src="" alt="" title="" width="" height=""/> -
-
超链接标签：
-
URL的描述：URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址
-
URL地址由4个部分组成(每个部分之间用'/'符号隔开)：
-
第1部分：协议(http://、https://、ftp://等)
-
第2部分：站点地址(域名、IP地址、端口号)
-
第3部分：页面在站点中的目录(真实目录或虚拟目录)
-
第4部分：页面名称(index.html等)
-
-
描述：超链接是指从一个网页指向一个目标的连接关系。这个目标可以是一个网页，也可以是相同网页的不同位置，也可以是一个图片、一个邮件地址、一个文件或一个应用程序等
<a href="" target="" >click内容</a>-
a标签的属性：
-
href：指定链接目标的网页地址，可以有三种指定方式
-
目标URL地址的绝对路径
-
目标URL地址相对路径
-
当前页面的锚点
-
-
target：指定链接打开的位置
-
_blank：在新标签页中打开
-
_self(默认方式)：在当前标签页中打开
-
_parent：在父框架集中打开
-
_top：在整个窗口中打开
-
-
-
浙公网安备 33010602011771号