junzeyuling.

追剧听音乐

“且视他人之疑目如盏盏鬼火，大胆地去走你的夜路。”

“自分の人生の支配者になる”

2 分类

4 标签

1 归档

站点信息

文章数目： 5 篇

html基础

分类：前端

标签： html

日期：2024-07-22 19:36:34

Vscode

Vscode 的一些快捷键

快速生成浏览器文件.html的快捷键

! + 回车键

VScode常用快捷键列表

#HTML5介绍

HTML5是用来描述网页的一种语言，被称为超文本标记语言。标记语言是一套标记标签。标签是由尖括号包围的关键字，例如:

标签有两种表现形式：

1.双标签，例如：

2.单标签，例如：

#HTML5的DOCTYPE的声明

DOCTYPE 是 document type (文档类型)的缩写。是H5的声明位于代码的最前面（首行），处于标签之前。他是网页必备的组成部分，避免写出的代码在不同的浏览器显示效果不同。

1	<!DOCTYPE html>

#HTML5的基本骨架

<!DOCTYPE html>
<html lang="en"> == $0
<head>...</head>
<body>...</body>
</html>

例如

##html标签

定义了HTML文档，这个元素代表了此文件是html文档，同时次文档的元素应被包裹在它里面，标签限定了文档的开始点和结束点

<!DOCTYPE html>
<html lang="en"> == $0
...
...
</html>

##head标签

head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息，包括文档的标题、在web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者（而是给开发者或浏览器看的）

<!DOCTYPE html>
<html lang="en"> == $0
<head>
...
</head>
</html>

##body标签

body元素定义文档的主体

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

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

<!DOCTYPE html>
<html lang="en"> == $0
<head>...</head>
<body>
...
</body>
</html>

##title标签

1. 可定义文档的标题
2. 它显示在浏览器窗口的标题栏或状态栏上。
3. .<title>标签是<head>标签中唯一必须要求包含的东西，也就是说写head一定要写title
4. .<title>的增加有利于SEO优化

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

<!DOCTYPE html>
<html lang="en"> == $0
<head>
	<title>第一个页面</title>
</head>
<body>
 	我会显示在浏览器中被读者看到
<body>
</html>

##meta标签

meta标签用来描述一个HTML网页文档属性，关键词等：例如charset=”utf-8”是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8，或是gbk，这些都是编码格式，通常使用utf-8。

注：meta是单标签

#标题介绍与应用

标题（Heading) 是通过

-

标签定义的。

·

定义最大的标题

定义最小的标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

生成h1~h6快捷键: h$*6

VScode插件

快速打开浏览器

扩展->搜索open in browser ->安装

代码编程中右键

框图中一个是在默认浏览器中打开，一个是在其他浏览器中打开。

正确使用标题

确保HTML标题标签只用于标题。

不能为了生成粗体或者大号文字而使用标题。

正确使用标题有益于SEO

应该将

用作主标题（主要），其后是

（次要），在其次是

，以此类推。

标题标签位置摆放

在标签中添加属性： align = “left | center | right “默认居左

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 align = "left">一级标题</h1>
    <h2 align = "center">二级标题</h2>
    <h3 align = "right">三级标题</h3>
</body>
</html>

效果

#标签之段落、换行、水平线

##标签之段落

段落是通过

标签定义的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        <b>价格：</b>
        价格是100元
    </p>
    <p>
    这是另一个段落
    </p>
</body>
</html>

效果展示

##换行

如果您希望在不产生一个新段落的情况下换行（新行），可以使用
br是一个单标签，同时
元素（是一个空的html元素。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        <b>价格：</b>
        价格是100元
    </p>
    <p>
    这是另一个段落<br>这是另一个元素
    
    </p>
</body>
</html>

效果展示

##水平线

1	<hr/>标签在html页面创建水平线

举例

水平线默认位置在中心

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        <b>价格：</b>
        价格是100元
    </p>
    <p>
    这是另一个段落<br>这是另一个元素
    <hr color="red" width="600px" size="20px" align="left">
    </p>
</body>
</html>

效果展示

属性：

color：设置水平线的颜色
width：设置水平线的宽度
size：设置水平线的高度
align：设置水平线的对齐方式（默认居中），可取值left | right

#网站中最多的元素

网站中最多的元素—图片

1 2	注意事项 <img> 是单标签，不需要闭合操作

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="static/image/logo.ico" alt="logo" width="50px" height="" title="图标">
</body>
</html>

位置

效果

属性：

src：路径（图片地址与名字–要带上后缀名）
alt：规定图像的替代文本(只有在图片显示异常，显示不出来才可以看到)
width：规定图像的宽度
height:：规定图像的高度
title：鼠标悬停在图片上给予提示

##图片路径详解

绝对路径

绝对路径是电脑的盘符存储与访问的具体地址

1	D:\app\develop\qqmusic\static\image\logo.ico

1	<img src="D:\app\develop\qqmusic\static\image\logo.ico" alt="logo" width="50px" height="" title="图标">

相对路径

两者相对关系，两者在同一路径下可以直接访问

子级关系： /
父级关系： ../
同级关系： ./

网络路径

具体的网络地址： https://img.bossdesign.cn/2023/10/2023103016031139.png

#超链接描述

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

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

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

超链接属性

在标签中使用了href属性来描述链接的地址

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

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

注

后期可通过CSS样式修改掉这些效果

超链接表现

当鼠标指针移动到网页中的某个链接上时，箭头就会变为一只小手

常用文本标签

标签	描述
	定义着重文字
	定义粗体文字
	定义斜字体
	定义加重语气
	定义删除字
	元素没有特定的含义

注

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

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>示例</p>
    <em>示例</em>
    <i>示例</i>
    <b>示例</b>
    <span>示例</span>
    <strong>示例</strong>
    <del>示例</del>
</body>
</html>

效果展示

#有序列表

有序列表是一列项目，列表项目使用数字进行标记。有序列表始于

标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol>
        <li>音乐</li>
        <li>主页</li>
        <li>推荐</li>
        <li>雷达</li>
    </ol>
</body>
</html>

效果

##type属性

1	<ol>的属性type拥有的选项

1 表示列表项目用数字标号（1，2，3…)
a 表示列表项目用小写字母标号（a,b,c …)
A 表示列表项目用大写字母标号（A ，B， C …)
i 表示列表项目用小写罗马数字标号（i, ii , iii …)
I 表示列表项目用大写罗马数字标号（I ,II ,III …)

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol type="A">
        <li>音乐</li>
        <li>主页</li>
        <li>推荐</li>
        <li>雷达</li>
    </ol>
</body>
</html>

效果展示

有序列表嵌套

列表可以进行嵌套

#无需列表实现

无需列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记无序列表始于

标签。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>主页</li>
        <li>音乐</li>
        <li>推荐</li>
        <li>雷达</li>
    </ul>
</body>
</html

效果展示

type属性

1	<ul>的属性type拥有的选项

disc默认实心圆
circle空心圆
square小方块
none不显示

无序列表嵌套

列表是可以进行嵌套的

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>主页</li>
        <li>音乐</li>
        <li>雷达</li>
            <ul>
                <li>熟悉</li>
                <li>新奇</li>
                <li>陌生</li>
                <li>伤感</li>
                <li>健身</li>
            </ul>
            <li>推荐</li>
    </ul>
</body>

</html>

效果展示

常见应用场景

无序的列表效果
导航效果

导航效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>xiaomi手机</li>
        <li>redmi红米</li>
        <li>电视</li>
        <li>笔记本</li>
        
    </ul>
</body>

</html>

效果展示

后期在通过CSS调整成为横向位置

快捷键

快速生成ul+li的布局：ul>li*3（数字根据自己的需要的li数量修改）

#表格

表格组成与特点

行、列、单元格

单元格特点：同行等高、同列等宽。

表格标签

1
2
3

表格： <table>
行： <tr>
单元格（列）: <td>

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
</body>
</html>

效果展示

快捷键

快速生成表格结构： table>tr4>td3{单元格}

自动生成4行三列的列表同时每一个列表空格都被填入”单元格”。

表格属性

border：设置表格的边框
width：设置表格的宽度
height：设置表格的高度

##合并单元格

水平合并： colspan

垂直合并： rowspan

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" width="300px" height="200px">
        <tr>
            <td colspan="2">1</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td rowspan="2">6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
        </tr>
    </table>

</body>

</html>

效果展示

组合使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" width="300px" height="200px">
        <tr>
            <td colspan="2" rowspan="2">1</td>
            <td>3</td>
        </tr>
        <tr>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>

</body>

</html>

效果展示

#Form表单

表单在Web网页中用来给用户填写信息，从而能采用用户信息，使网页具有交互的功能。

所有的用户输入内容的地方都用表单来写，如登录注册、搜索框

表单是由容器和控件组成的，一个表单一般应该包含用户填写信息的输入框、提交按钮等，这些输入框，按钮叫做控件，表单就是容器，它可以容纳各种各样的控件

1	<form action="url" method="get\|post" name="myform"></form>

属性说明

action服务器地址

name表单名称

method中Get和Post

数据提交方式，get吧提交的数据url可以看到，post看不到
get一般用于提交少量数据，post用来提交大量数据

(注有关于服务器后台，后面详细讲解)

表单元素

一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮

表单标签
表单域
表单按钮

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<form action="url" method="get | post" name="myform">
    <input type="text">
    <input type="submit" value="百度一下">
    <button>按钮</button>
</form>
</body>
</html>

效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<form action="url" method="get | post" name="myform">
    <input type="text">
    <input type="submit" value="百度一下">
    <br>
    <input type="text">
    <input type="submit" value="验证码">
</form>
</body>
</html>

效果

表单元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<form action="url" method="get | post" name="myform">
    用户名：<input type="text" name="usename">
    <br>
    密码： <input type="password" name="password" id="">
    <br>
    验证:<input type="text">
    <input type="submit" value="提交">
</form>
</body>
</html>

效果

注

密码字段字符不会明文显示，而是以星号或圆点替代

提交按钮

当用户单击确认按钮时，表单的内容会被送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接受到的输入数据进行相关的处理

<form name="input" action="url" method="get">
	Username: <input type="text" name="user">
	<input type="submit" value="Submit">
</form>

块级元素	内联元素
块元素会在页面中独占一行（自上向下垂直排列	行内元素不会独占页面中的一行，只占自身的大小
可以设置width，height属性	行内元素设置width，height属性无效
一般块级元素可以包含行内元素和其他块级元素	一般内联元素包含内联元素不包含块级元素

常见块级元素

1	div、form、h1~h6、hr、p、table、ul、等

常见内联元素（行内元素）

1	a、b、em、i、span、strong等

行内块级元素（特点：不换行、能够识别宽高）

1	button、img、input等

扩展知识

1	div容器元素，也是页面中见到的最多的元素

H5新标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<header></header>         头部
<nav></nav>    导航 
<section></section>   定义文档中的节，比如章节、页眉、页脚
<aside></aside>         侧边栏
<footer></footer>        脚部
<article></article>    代表一个独立的、完整的相关内容块，例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等
</form>
</body>
</html>