第一次网页前端培训笔记（HTML）

1.安装HBuilderX

网址：HBuilderX-高效极客技巧 (dcloud.io)https://dcloud.io/hbuilderx.html

下载后打开该文件夹，选取HBuilderX的应用程序即可，为了方便后续打开，创建桌面快捷方式

2.打开b站视频学习P1-P3

视频指路：

【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版

BV1sf4y1k7dr

3.初步认识HTML

3.1.何为HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

3.2.完整的HTML页面

 3.3.标签

标签是由<>包围的关键词，通常是成对出现的，其中第一个是开始标签（开放标签），第二个是结束标签（闭合标签）。

格式为:  <标签>内容</标签>

3.4.浏览器页面

浏览器（如谷歌浏览器等）可以读取HTML文件，将其作为页面展示给用户

4.常用标签

4.1.HTML标题

HTML 标题（Heading）是通过<h1> -<h6> 标签（从大到小）来定义的。每个页面建议只是用一个<h1>标题，否则可能进入搜索引擎的黑名单。请确保将 HTML 标题 标签只用于标题。注意，不要仅仅是为了生成粗体或大号的文本而使用标题。格式使用如图所示：

 4.2.水平线

<hr> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。

常用属性：color 颜色，size 粗细，width 长度，align 对齐方式（如< hr color = "red",size = "3",width = "50%"，align = "left" >)

 4.3.HTML段落

段落是通过 <p> 标签定义的。演示如图所示，其中注意：即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来，但是最好带上结束标签。

 4.4.HTML折行

在不产生一个新段落的情况下想进行换行（新行），可以使用 <br> 标签，<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

 4.5.列表

分为有序列表和无序列表，两者属性均有type，具体内容动手试试即可

4.5.1.有序列表

由ol和li组成。

 

4.5.2.无序列表

由ul和li组成。

 4.6.div

div标签默认占全部的宽度，其长度（height）宽度（width）可以设置

4.7.span

行内元素，不会自动换行

4.8.font

规定文本的字体风格（face），字体尺寸（size），字体颜色（color）

4.9.pre

定义预格式文本

示例1

 示例2（对比示例1）

4.10.文本格式化标签

b 加粗（或者用<strong>），i 倾斜，u 下划线，del 中划线，sup 上标，sub 下标

5.链接标签

5.1.a标签

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

5.1.1.href属性（必须属性）

href属性：需要跳转的链接的地址。默认情况下，链接将以以下形式出现在浏览器中：

• 一个未访问过的链接显示为蓝色字体并带有下划线。
• 访问过的链接显示为紫色并带有下划线。
• 点击链接时，链接显示为红色并带有下划线。

5.1.2.target属性

target属性：窗口打开的方式。

_self：当前窗口（默认）

_blank：在空白窗口

5.1.3.锚点

锚点链接的具体使用场景有 2 种：跳转到其他页面的指定位置。

1.  跳转到当前页面的指定位置

 

 

 5.2.img标签

 嵌入一张图标

5.2.1.属性

src：需要引入的图片的地址（必须属性）

alt：当图片破损或不存在时显示的文本内容

title：鼠标悬停在图片上时的文本

width：宽

height：高

border：边框

 5.3.table表格

table 表格，tr 行，td 标准单元格，th 表头且字体自动居中加粗

5.3.1.table属性

width 表格宽度，border 边框，align 对齐方式

注意：style="border -collapse:collapse;"可以使边框变成一条线

5.3.2.tr属性

align 行的对齐方式，bgcolor 背景颜色