前端学习——HTML

G.Kurfürsten

已于 2024-06-03 15:58:10 修改

阅读量1.5k

点赞数 31

文章标签：学习 html 前端

于 2024-05-30 21:09:43 首次发布

本文链接：https://blog.csdn.net/qq_41270111/article/details/139328609

版权

Web开发学习文档MDN： https://developer.mozilla.org/zh-CN/docs/Learn

Vscode常用快捷键

生成浏览器.html文件的快捷方式：！+ enter
代码格式化：shift + alt + F
当前代码向上 / 向下移动一行（与上行或下行对换）：alt + up / alt + down
快速向下复制一行代码：shift + alt + up / shift + alt + down
快速保存 / 查找 / 替换：Ctrl + S / F / H

HTML5

HTML5 介绍

HTML是一种用来描述网页的标记语言，标记语言是一套标记标签（HTML5是一套标记标签）

HTML5的DOCTYPE声明

<!DOCTYPE html>是HTML5的声明，位于文档的最前面，处于标签之前，必备部分，避免浏览器怪异模式

HTML5基本骨架

html标签

<html>定义html文档，浏览器看到他才知道这是个html文档，其他元素包裹在其里面，<html></html>限制文档的开始和结束

<!DOCTYPE html>
<html>
</html>

head标签

<head>定义文档头部，描述文档的各种属性和信息（标题、web中的位置、和其他文档的关系等），大多数文档头部里的数据不是真正给读者看的内容

<!DOCTYPE html>
<html>
    <head>
    </head>
</html>

body标签

<body>定义文档的主体。包含文档的所有内容（文本、超链接、图像、表格、列表等）。

直接在页面中显示出来，用户看的到的那些数据

<!DOCTYPE html>
<html>
    <head>
    </head>
    
    <body>
        里面的内容会显示在浏览器中
    </body>
</html>

title标签 (head内）

定义文档的标题。什么是标题：

红框里的就是标题，显示在浏览器窗口的标题栏或者状态栏上

<title>标签是<head>标签中必备的东西，head里必有title

<!DOCTYPE html>
<html>
    <head>
        <title>这是文档标题，必填</title>
    </head>
    
    <body>
        里面的内容会显示在浏览器中
    </body>
</html>

meta标签（head内）{单标签}

meta标签用来描述一个HTML网页文档的属性、关键词等，是一个单标签。eg：charset="utf-8"是指当前文档使用的是utf-8编码格式

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8">
        <title>这是文档标题，必填</title>        
    </head>
    
    <body>
        里面的内容会显示在浏览器中
    </body>
</html>

标题标签（body内）

标题就是正文的标题，用<hx></hx>(x:1~6)描述。 vscode快捷键：h$*1—6

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8">
        <title>这是文档标题，必填</title>        
    </head>
    <body>
        <h1>标题一</h1>
        <h2>标题二</h2>
        <h3>标题三</h3>
        <h4>标题四</h4>
        <h5>标题五</h5>
        <h6>标题六</h6>
    </body>
</html>

注：

正确使用标题标签，只用于标题，不要为了生成粗体或大号的字体而使用标题标签
标题默认左，更改位置设置标题标签的属性（不建议实际操作使用，后续用CSS调整）：align = "left / center / right"

段落、换行、水平线标签

段落标签

段落文本用 <p>标签进行承载即可

<p>这是第一段</p>
<p>这是第二段</p>

换行标签

在不产生一个新段落的情况下进行换行，用<br>标签进行换行。

水平线标签 {单标签}

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

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

其中：

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

图片标签 {单标签}

<img>定义HTML中的图片

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

参数如下：

src：图片的路径
alt：图片的替代文本（图片无法显示时替代其的文字）
title：鼠标悬停在图片上给予的提示
width / height：图片的宽度和高度

图片路径详解（src）

绝对路径：电脑盘符存储与访问的具体地址。
相对路径：图片与.html文件的相对关系。当两者为同级关系时，可以直接访问；子集关系：images/1.png；父级关系：../2.png。
网路路径：具体的网络地址。

超文本链接标签

使用<a>设置超文本连接标签

超链接可以是字、词、句子、图像等，点击这些内容以跳转到新的文档或者当前文档的某个部分

<a href="URL" target="目标窗口位置" title="鼠标悬停时显示的文本">链接文本或图像</a>

参数如下：

href：指定链接的目标地址
target：指定链接的打开位置，_self 表示当前窗口，_blank 为新窗口或标签
指定链接的额外信息，如鼠标悬停时显示的文本。

文本标签：显示不一样的文字

常用文本标签：

标签	描述
<em>	定义着重文字
<b>	文字加粗
<i>	斜体字
<strong>	加重语气
<del>	删除字
<span>	组合文档中的行内元素

注：段落代表一段文本，文本标签表示文本词汇

有序列表

一系列有顺序的项目集合，有序列表始于<ol>标签，每行始于<li>标签

<ol type="A">
    <li>列表第一行</li>
    <li>列表第二行</li>
    <li>列表第三行</li>
    <li>
        <ol>
            <li>嵌套列表第一行</li>
            <li>嵌套列表第二行</li>
            <li>嵌套列表第三行</li>
        </ol>
    </li>
</ol>

<ol>属性type: 标号设置

列表可以进行嵌套。

无序列表

无序列表基础

一系列无顺序的项目集合，有序列表始于<ul>标签，每行始于<li>标签

<ul type="disc">
    <li>无序列表第一行</li>
    <li>无序列表第二行</li>
    <li>无序列表第三行</li>
    <li>
        <ul>
            <li>嵌套列表第一行</li>
            <li>嵌套列表第二行</li>
            <li>嵌套列表第三行</li>
        </ul>
    </li>
</ul>

type属性

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

常见应用效果

无序的列表效果
导航效果：

表格标签

表格基础

表格组成：行、列、单元格

表格标签：

表格：<table>
行：<tr>
单元格：

<table>
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr> 
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr> 
    <tr>
        <td>第三行第一列</td>
        <td>第三行第二列</td>
    </tr> 
</table>

vscode生成表格结构快捷方式：table>tr*2>td*3{单元格}

表格属性：（后期用CSS设置）

border：设置单元格边框
width / height：宽高度

表格单元格合并：以左上为基准

水平合并：colspan，保留左边，删除右边
垂直合并：rowspan，保留上边，删除下边

现有一表格：

<table border="5" width="800pt" height="400pt">
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
            <td>单元格4</td>
        </tr>
        <tr>
            <td>单元格5</td>
            <td>单元格6</td>
            <td>单元格7</td>
            <td>单元格8</td>
        </tr>
        <tr>
            <td>单元格9</td>
            <td>单元格10</td>
            <td>单元格11</td>
            <td>单元格12</td>
        </tr>
        <tr>
            <td>单元格13</td>
            <td>单元格14</td>
            <td>单元格15</td>
            <td>单元格16</td>
        </tr>
    </table>

要合并的表格：

现在合并单元格5,6；单元格11,15；单元格1,2,3；单元格4,8,12,16；单元格9,10,13,14

<table border="5" width="800pt" height="400pt">
        <tr>
            <td colspan="3">单元格1,2,3</td>
            <td rowspan="4">单元格4,8,12,16</td>
        </tr>
        <tr>
            <td colspan="2">单元格5,单元格6</td>
            <td>单元格7</td>
        </tr>
        <tr>
            <td colspan="2" rowspan="2">单元格9,10,13,14</td>
            <td rowspan="2">单元格11,15</td>
        </tr>
        <tr>
        </tr>
 </table>

结果如下：

Form表单标签：让网站具有交互性

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

需要让用户输入内容的地方都用表单写，如登录注册，搜索框等

表单组成

由容器和控件组成，一个表单一般包含用户填写信息的输入框，提交按钮等，其中输入框、按钮等叫做控件，表单为容器，容纳各种控件。

表单标签为<form>

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

属性说明

action：后台服务器地址（传给哪个服务器）
name：表单名称
method：提交表单的方式。其中get方法为默认方法，将表单附在URL后面，作为URL的一部分发送给服务器，用于提交少量且不涉密的数据。post方法将表单数据作为HTTP请求的一部分发送给服务器，不显示在URL中，比get方法更安全，适合处理涉密数据。

表单元素

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

表单标签：<form></form>
表单域：输入框
表单按钮：提交按钮等

<form>
    <input type="text">
    <input type="submit">
</form>

文本框

文本域通过<input type="text">标签设定，在表单中输入字母、数字等内容时使用。

<form>
    名字：<input type="text">
    <br>
    性别：<input type="text">
</form>

密码框

密码字段通过<input type="password">定义，里面的输入内容不会明文显示

<form>
    账号：<input type="text">
    <br>
    密码：<input type="password">
</form>

提交按钮

通过<input type="submit">放一个按钮，点击就将数据提交给服务器

<form>
    账号：<input type="text">
    <br>
    密码：<input type="password">
    <input type="submit" value="登录">
</form>

块元素和行内（内联）元素

块级元素和内联元素的区别

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

常见块级元素