Day01 HTML

简介: HTML

# HTML

##### 概述

HTML(Hypertext Markup Lauguage)超文本标记语言。

##### HTML结构

```html

<!-- 文档说明 -->

<!-- 声明用来告诉浏览器当前网页的版本是HTML5 -->

<!DCTYPE html>

<!-- HTML的根标签,网页中所有内容都要写到根元素的里面 -->

<html>

   <!-- 网页头部 -->

   <!-- head中的内容不会在网页中直接出现,主要作用是用来帮助浏览器或搜索引擎来解析网页 -->

   <head>

       <!-- meta标签用来设置网页的元数据 -->

       <meta charset="utf-8">

       <!-- 网页标题 -->

       <!-- title中的内容会显示在浏览器的标题栏,搜索引擎会主要根据title中的内容来判断网页的主要内容 -->

       <title>网页标题</title>

   </head>

   <!-- 网页内容 -->

   <!-- body是html标签中的子元素,表示网页的主体,网页中所有的可见内容都应该写在body里 -->

   <body>

       网页内容

   </body>

</html>

```

##### HTML注释

```html

语法:<!--  -->

作用:注释中的内容会被浏览器所忽略,不会在网页中直接显示,但是可以在源码中查看注释,注释用来对代码进行解释说明的。

注意:注释不能嵌套。

<!--  

注释

<!-- 注释中的注释 -->

-->

```

##### HTML标签  

**概述:**

是由尖括号包围的关键词,比如\<html\>、\<h1\>等。

通常是成对出现的,比如:\<html\>\</html\>等。但是也有自结束标签,例如:\<img /\>、\<input /\>

标签对中的第一个标签是开始标签(开放标签),第二个标签是结束标签(闭合标签)。

##### HTML标签的属性

**概述:**

标签中(开始标签或自结束标签)还可以设置属性。

属性是一个键值对(key:value)。例如: 属性名:属性值

用来设置标签中的内容如何显示。

```html

<h1>这是标签<font color="red" size="14">属性</font></h1>

```

注意:

属性和标签名或其他属性应该使用**空格隔开**。

属性名是固定的。

有些属性有属性值, 有些没有, 属性值要用双引号或者单引号引起来。

##### HTML实体(转义符)

在网页中编写的多个空格默认会自动被浏览器解析为一个空格。

如果需要在网页中书写这些特殊的符号时,则需要使用html中的实体(转义符)

实体语法:&实体的名字;

```html

例如

<!--  

&nbsp; 空格

&gt;   大于号

&lt;   小于号

&copy; 版权符号

-->

```

##### meta标签

meta主要用于设置网页中的一些元数据,元数据不会展示给用户。

```html

<!DOCTYPE html>

<html lang="en">

<head>

   <!--  

       meta主要用于设置网页中的一些元数据,元数据不会展示给用户。

       charset  指定网页的字符集

       name     指定数据的名称

       content  指定数据的内容

       keywords 表示网站的关键字,可以同时指定多个关键字,关键字用,隔开

       description 用于指定网站的描述

    -->

   <meta charset="UTF-8">

   <meta name="username" content="BanQ">

   <meta name="keywords" content="半晴Miko,半晴">

   <meta name="description" content="半夏晴空">

   <!--  

       重定向到某个网页

       3表示打开网页后多少秒跳转

       url表示跳转的地址

    -->

   <meta http-equiv="refresh" content="3;url=https://www.banq.ink/">

   <title>Document</title>

</head>

<body>

 

</body>

</html>

```

目录
相关文章
|
7月前
|
移动开发 前端开发 JavaScript
HTML
HTML
48 0
|
移动开发 HTML5
|
5月前
|
Web App开发 移动开发 JavaScript
HTML5
HTML5
81 0
|
7月前
|
开发者
html怎么学
【4月更文挑战第10天】html怎么学
39 1
|
7月前
|
前端开发 搜索推荐
html的常用技巧
【4月更文挑战第1天】html的常用技巧
28 2
|
前端开发
HTML详解连载(6)
HTML详解连载(6)
|
移动开发 开发工具 HTML5
HTML5简单总结
学习HTML后的简单总结
180 0
HTML5简单总结
|
Web App开发 移动开发 前端开发
HTML初识
HTML初识
112 0

相关实验场景

更多