HTML入门

HTML核心入门

1.1

1.2

1.3、浏览器的工作原理

浏览器本质上是一个解析引擎，可以把 HTML 代码解析成人类更容易接受的界面。 浏览器能直接解析的一套代码，这套代码是一种标记，能被浏览器直接识别并解析。这套标记形 成一套语言————超文本标记语言（hyper text marked language(HTML））

1.4、开发工具

1.5、标签、元素以及属性：

标签：以开始，以结束称为标签。

元素：标签和其内容称为元素。

属性：在元素或者标签内 可以以 key=“value” 形式给元素或者标签添加特 性。这些特性称为属 性。

1.6、HTML文档结构

1.6.1、文档声明

html4.01文档声明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

html5

<!-- 文档的版本类型 -->
<!-- 告知浏览器启动 html5 版本解析引擎 -->
<!doctype html>

页面结构

<!-- 文档声明 -->
<!-- 启动浏览器的 html5 解析引擎版本 -->
<!doctype html>
<!-- 标准 HTML5 文档结构 -->
<html>
<!-- 页面的头:告知浏览器的预设 -->
<head></head>
<!-- 页面体:用户能看到的界面 -->
<body></body>
</html>

在head中一般通过标签指定浏览器预设值

1.6.2 浏览器视口

**width：**控制 viewport 的宽度，这个值可以被指定，例如：500px。亦或者 是“device-width”， 意思是设置视口宽度为设备宽度。

**height：**控制 viewport 的高度（不常用）。

**initial-scale：**初始缩放比例，即每一次加载时页面缩放的比例。

**maximum-scale：**允许用户缩放到的最大缩放比例。

**minimum-scale：**允许用户缩放到的最小缩放比例。

**user-scaleable：**是否允许用户缩放，可以传“yes”或“no“

设置视口不允许用于缩放：

<meta name="viewport" content="width=device-width,
initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scaleable=no">
1.6.3 SEO优化
<!-- seo 优化 -->
<meta name="keywords" content="小米,小米 9,小米 cc9,Redmi K20,Redmi Note 7, 小米 MIX3,小米商城" />
<meta name="description" content="为发烧而生"" />
1.6.4 标准的 html5 页面结构
1.6.4.1 Emmet 表达式技巧

快捷键设置为tab

创建div标签
div  +tab键

创建id为div1的div
div#div1  +tab键

创建div同时在子节点创建p标签
div>p	+tab键

创建div同时在子节点创建p标签 并向p标签添加内容
div>p{内容}	+tab键

创建div同时在子标签建img和span标签 img和span为同级
div>img+span	tab键
创建input标签 属性值为password
input[type=password]	+tab键

1.7 HTML核心标签

HTML标签根据排版规则可以分为2类

块标签

  1. 单独占一行，垂直方向排列
  2. 能设置宽高

行内标签(img是特殊的行内标签可以改变宽高)

  1. 在一行内并排排列，水平方向排列
  2. 不能设置宽高

有语义化标签

有特定用途的/含义的标签称为有语义标签。例如:img、video、audio 等

无语义化标签

没有特定用途/含义的标签 => 什么都可以显示 => 一般作为其他标签的容器使用

1.7.2 行内标签
1.7.2.3 a

a 有语义行内标签，表示链接。

href 属性表示链接的地址。 title 属性表示鼠标悬停时的提示文本

<!-- 【1】绝对路径和相对路径 -->
<a href="F:\0805-j\html\html01\code\index08.html">index8</a>
<a href="./index08.html">index8</a>
<!-- 【2】title -->
<a href="./index08.html" title="test">index8</a>

锚点:页面内跳转。

<ul>
<li><a href="#intro">人物简介</a></li>
<li><a href="#art">演艺经历</a></li>
<li><a href="#life">个人生活</a></li>
<li><a href="#work">主要作品</a></li>
</ul>

空链接

<a href="###">空连接</a>

自学哈哈哈