html学习笔记

2024-04-18 11:29•html•阅读 2197

html的学习笔记，学习使用。

HTML学习

因为学了一半，停了，所以笔记前后详细程度不同。参考课程尚硅谷、DasAutoooo

HTML学习

1.学习前准备

浏览器(~~不要用360浏览器、2345浏览器。。。~~)
- Google Chrome
- Mozilla Firefox
- Safari
- Edge
编辑器
- VS Code(~~VS Code yyds!~~)
- Sublime Text
- Atom.io
- webstorm

2.HTML入门

2.1什么是HTML

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即我们所见到的网页。摘自百度。

2.1.1HTML标签

<标签>内容</标签>

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的。
标签对中的第一个标签是开始标签(opening tag)，第二个标签是结束标签(closing tag)。

2.1.2HTML元素

<标签>内容</标签>

包含标签在内的整个内容叫做HTML元素。

2.1.3HTML版本

HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

2.1.4<!DOCTYPE> 声明

声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

2.1.5中文编码

在浏览器中输入中文一般会出现乱码，我们需要简单处理一下。

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

用vs code输入"!"即可自动生成模板，我们在模板中可以看到，这就是浏览器的解码方式了，我们可以用gbk或utf-8。

2.2HTML基础

2.2.1HTML标题

HTML 标题（Heading）是通过

-

标签来定义的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>head test</title>
</head>
<body>

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

</body>
</html>

3.实体

html中有一些特殊符号显示不出来，比如多个空格、<>符号等。

实体符号语法：

&实体名字;

  空格 " "
> 大于号 >
< 小于号 <
© 版权符号 ©

4.常用标签

4.1meta标签

用于设置网页的元数据，不是给用户看的。

meta标签的属性有：

charset
用于指定网页的字符集
name
指定数据的名称
content
指定数据的内容

样例：

billbill

<meta
      name="description"
      content="bilibili是国内知名的视频弹幕网站，这里有及时的动漫新番，活跃的ACG氛围，有创意的Up主。大家可以在这里找到许多欢乐。"
    />

description是描述，搜索引擎搜索到后，会显示出来。

京东

<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>

keywords是关键词，用于搜索引擎的搜索关键词

跳转

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

几秒后跳转到某个网页。

4.2结构化语义标签

4.2.1独占一行的元素称为块元素 block element。

在网页中一般是通过块元素对页面进行布局。
块元素基本上什么都可以放。

在p标签中的内容表示一个段落。

p元素中不能放任何的块元素

不符合规则的源码，浏览器会自行修正。比如body外放元素、p元素中放块元素。

<header>表示网页头部</header>
<main>网页表示主体</main>  <!--一个页面只会有一个-->
<footer>表示尾部</footer>
<nav>nav表示网页中的导航</nav>
<aside>表示和主题相关的其他内容</aside>
<article>表示一个独立的文章</article>
<section>一个独立的区块</section>
<div>没有语义,就是用来表示一个区块</div>
<blockqute>长引用，块元素</blockqute>

4.2.2行内元素（inline element）行内元素主要用来包裹元素。

一般情况下在块元素中房行内元素，而不会在行内元素中放块元素。

<q></q>
<!--   短引用内联元素     -->
<em></em>
<!--   语气强调     -->
<strong></strong>
<!--   加粗     -->
<span></span>
<!--   行内元素，也没有语义    -->

4.2.3单标签

<br/>换行，单标签。

<hr/>水平线，单标签。

4.2.4列表

有序列表
ol(orderlist)标签 <ol> </ol>
li(list item)列表项<li></li>

无序列表

ul(unorderlist)标签 <ul> </ul>

<ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ul>

定义列表
dl(definition list)标签<dl></dl>
dt表示定义的内容，dd对内容解释说明。
```
<dl>
    <dt>定义的内容</dt>
        <dd>对内容进行解释说明</dd>
</dl>
```
列表之间可以相互嵌套。

4.2.5超链接

a标签(锚点 anchor),行内元素

<a href=""></a>

a标签内能嵌套除自己外的任何元素，包括块元素。

target属性：用来指定超链接打开的位置

可选值

_self 默认值在当前页面打开超链接。
```
<a href="test" target="_self"></a>
```
_blank 在一个新的页面打开超链接。
```
<a href="test" target="_blank"></a>
```

跳转顶部

<a href="#">回到顶部</a>

跳转任意位置

id属性

id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性。

<a href="#id"></a>

跳转到任意位置，以id属性为锚点。

href占位符

开发常用占位符。

<a href="#">点击会回到顶部</a>
<a href="javascript:;">点击超链接什么都不会发生</a>

4.2.6相对路径

./   当前路径
../     上一级路径

4.2.7图片标签

自结束标签,是替换元素（块元素和内行元素之间，具有两种元素的特点）。

<img src="" alt="描述"/>

alt：是图片的描述

其他属性

width
图片宽度
height
图片高度

只改变一个属性，另一个属性同时改变，保持比例。改变两个，才会改变比例。

图片种类

jpeg(jpg)
支持的颜色丰富，不支持透明效果，不支持动图。
一般用来显示图片。
gif
支持的颜色比较少，支持简单透明，支持动图。
颜色单一的图片，动图
png
支持颜色丰富，支持复杂透明，不支持动图。
颜色丰富，复杂透明图片（专为网页而生）
webp
谷歌专门推出的网页中的图片的一种格式。
有以上所有的优点。
但兼容性不好。
base64
将图片使用base64编码，这样可以将图片转化为字符，通过字符的形式引入图片。
一般是一些需要和网页一起加载的图片才会使用base64。

效果一样的，用小的。

效果不一样的，用效果好的。

4.2.8内联框架

用于向当前页面中引入一个其他页面。

<iframe src="https://www.qq.com" frame ></iframe>>

src指定要引入网页的路径。

frameborder 指定内联框架的边框。

0表示没有边框 1表示有。

4.2.9音频

audio标签，用来向页面中引入一个外部的音频文件。

音视频文件引入时，默认情况下不允许用户控制播放、停止。

属性：

controls
是否允许用户控制播放。controls没有值，存在即为允许控制。
autoplay
音频是否自动播放。
如果设置了autoplay，则音乐在打开页面时自动播放，但目前大部分浏览器都不会对音乐自动播放。
loop
循环播发。

写法一

<audio src="" controls></audio>

写法二

可以处理不支持audio的浏览器报错。

<audio controls>
    对不起，版本太旧，不支持  <!--用于处理版本太低，提示报错信息。-->
        <source src="xxx"> 
    <embed src="xxx" type="xxx"> <!--有这句，就没有兼容问题了-->
</audio>

5.结语

完结撒花★,°:.☆(￣▽￣)/$:.°★ 。，小米的企业实践要开始写项目了，吓得我赶紧补完html，明天学css。

上一篇 »POX学习笔记：从POX启动开始——boot.py文件解读
下一篇 »学习笔记-mysql_日志