（由于本篇学习内容较多，文章大约一周更新一次，在已有内容之下补充新的学习笔记）

网页前端-学习笔记【1】

【在科学上方是没有平坦的大路可走的，只有那在崎岖小路的攀登上不畏劳苦的人，才有期望到达光辉的顶点。 ——马克思】

HTML 学习笔记

前置

生成浏览器文件.html的快捷方式：!+Enter

代码格式化： Shift+Alt+F

HTML5 介绍：

HTML5是用来描述网页的一种语言，称为超文本标记语言，用HTML5编写的文件，后缀为.html，HTML是一种标记语言，标记语言是一套标记标签，标签是由尖括号包围的关键字，例如：<html>

标签有两种表现形式：

  1. 双标签，例如<html><html>
  2. 单标签，例如<img>

HTML5 基本骨架：

DOCTYPE 声明：

DOCTYPE是document type（文档类型）的缩写。<!DOCTYPE html>是H5的声明位于文档的最前面，处于标签之前。他是网页必备的组成部分，避免浏览器的怪异模式。

html标签：

定义HTML文档，其他元素要包裹在它里面，标签定义了文档的开始点和结束点

1
2
3
<!DOCTYPE html>
<html>
</html>

head标签：

定义文档的头部，头部描述了文档的各种属性和信息，包括文档的标题，在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

1
2
3
4
5
<!DOCTYPE html>
<html>
    <head>
    </head>
</html>

body标签：

body元素定义文档的主体。

body元素包含文档的所有内容（例如文本，超链接，图像，表格和列表等）

它会直接在页面中显示出来，也就是用户可以直观看到的内容

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        冰冰邦邦~
    </body>
</html>

title标签：

可定义文章的标题

它显示在浏览器窗口的标题栏或状态栏上

<title>标签是<head>标签中唯一必须要求包含的东西，也就是说，写head一定要写title

<title>的增加有利于SEO优化

1
SEO是搜索引擎优化的英文缩写，通过对网站内容调整，满足搜索引擎的排名需求

meta标签

meta标签用来描述一个HTML网页文档的属性，关键词等，例如：charset=“utf-8”是说当前使用的是utf-8编码格式

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>冰冰邦邦</title>
    </head>
    <body>
        冰冰邦邦！！！！
    </body>
</html>

标题标签

标题介绍与应用

标题是通过<h1><h6>标签进行定义的

<h1>定义最大的标题，<h6>定义最小的标题

1
2
3
4
5
6
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

标题标签的位置摆放：

在标签中添加属性align="left|center|right"来改变位置。默认居左：

段落标签

段落：

段落通过<p>标签来定义。

1
2
<p>这是一个段落</p>
<p>这是另一个段落</p>

换行：

如果在不产生一个新段落的情况下进行换行，使用<br>

1
<p>hhhh<br>aaaa<br>hhhh</p>

水平线：

<hr>标签在HTML页面中创建水平线

1
<hr color="" width="" size="" align=""/>

属性：

color：设置水平线颜色

width：设置水平线长度

size：设置水平线高度

align：设置水平线对齐方式（默认居中），可取值（left|right）

图片标签：

<img>标签定义HTML页面中的图像

1
<img src="" alt="" title="" width="" height="">

注意：<img> 是单标签，不需要进行闭合操作。

属性：

src：路径（图片地址与名字）

alt：规定图像的替代文本

width：规定图像的宽度

height：规定图像的高度

title：鼠标悬停在图片上给予提示

超文本链接标签：

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

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，点击这些内容来跳转到新的文档或者当前文档中的某个部分

1
<a href="url">链接文本</a>

超链接属性：

默认情况下，链接将以以下形式出现在浏览器中：

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

文本标签：

常用文本标签：

标签 描述
<em> 定义着重文字
<b> 定义粗体文字
<i> 定义斜体字
<strong> 定义加重语气
<del> 定义删除字
<span> 元素没有特定的含义

提示：常用文本标签和段落是不同的，段落表示一段文本，而文本标签一般表示文本词汇

列表标签

有序列表

有序列表是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签。

1
2
3
4
<ol>
    <li>冰冰</li>
    <li>邦邦</li>
</ol>