前端入门需要掌握的知识（学习总结，边学边总结）

最新推荐文章于 2022-05-13 10:49:15 发布

回郭肉

最新推荐文章于 2022-05-13 10:49:15 发布

阅读量1k

点赞数 1

文章标签：前端 html

本文链接：https://blog.csdn.net/weixin_44265425/article/details/121316187

版权

本文是一位Java开发者分享的前端学习笔记，涵盖了前端常用插件如VSCode的AutoRenameTag、LiveServer，HTML基本标签的使用，注释、列表、图片引入、超链接及表格的创建，以及特殊符号的表示。文章还介绍了表单和样式控制的基础概念，是初学者的良好参考资料。

摘要由CSDN通过智能技术生成

前端入门需要掌握的知识（学习总结，边学边总结）

写在前面

本人java开发工程师，闲时抽空学习前端，前端萌新一个，此文章是在学习过程中做的随手笔记，并非教学文章，如有哪里不对请大幅篇章的指出来，望见谅，谢谢！🙏

1.插件

使用工具：VSCode

Auto Rename Tag（同事修改标签两端）
Chinese (Simplified) (简体中文)
htmltagwrap（修改tag）
Live Server（修改代码保存时自动刷新网页）
View In Browser（右键点击Open in Browser，在浏览器显示该页面）

2.HTML标签

学习之前应先了解标签「*号为初学者使用到的标签（仅代表个人学习）」

由尖括号包围的关键词，比如 <html>
通常是成对出现的，比如 <div> 和 </div>
标签对中的第一个标签是开始标签，第二个标签是结束标签；
开始和结束标签也被称为开放标签和闭合标签。
也有单独呈现的标签，如：<img src=“百度百科.jpg” />等。
一般成对出现的标签，其内容在两个标签中间。单独呈现的标签，则在标签属性中赋值。如<h1>标题</h1>和 <input type=“text” value=“按钮” />。
网页的内容需在<html>标签中，标题、字符格式、语言、兼容性、关键字、描述等信息显示在<head>标签中，而网页需展示的内容需嵌套在<body>标签中。某些时候不按标准书写代码虽然可以正常显示，但是作为职业素养，还是应该养成正规编写习惯。

当出现嵌套类型的标签，则可以使用div1*3>div2*2

[div1代表最外层的大标签，*2、*3代表要创建几个；div2代表内层的标签，在div1标签里面；">"代表后边的在前面的标签里面，若想创建多层嵌套，以此类推]

如下

<div>
        <div></div>
        <div></div>
    </div>
    <div>
        <div></div>
        <div></div>
    </div>
    <div>
        <div></div>
        <div></div>
    </div>

标签	描述
<!–…-->	定义注释。	*
<!DOCTYPE>	定义文档类型。
<a>	定义锚。
<abbr>	定义缩写。
<acronym>	定义只取首字母的缩写。
<address>	定义文档作者或拥有者的联系信息。
<applet>	不赞成使用。定义嵌入的 applet。
<area>	定义图像映射内部的区域。
<article>	定义文章。
<aside>	定义页面内容之外的内容。
<audio>	定义声音内容。
<b>	定义粗体字。	*
<base>	定义页面中所有链接的默认地址或默认目标。
<basefont>	不赞成使用。定义页面中文本的默认字体、颜色或尺寸。
<bdi>	定义文本的文本方向，使其脱离其周围文本的方向设置。
<bdo>	定义文字方向。
<big>	定义大号文本。
<blockquote>	定义长的引用。
<body>	定义文档的主体。	*
<br>	定义简单的折行。	*
<button>	定义按钮 (push button)。	*
<canvas>	定义图形。
<caption>	定义表格标题。
<center>	不赞成使用。定义居中文本。	*
<cite>	定义引用(citation)。
<code>	定义计算机代码文本。
<col>	定义表格中一个或多个列的属性值。	*
<colgroup>	定义表格中供格式化的列组。
<command>	定义命令按钮。
<datalist>	定义下拉列表。
<dd>	定义定义列表中项目的描述。
<del>	定义被删除文本。
<details>	定义元素的细节。
<dir>	不赞成使用。定义目录列表。
<div>	定义文档中的节。	*
<dfn>	定义定义项目。
<dialog>	定义对话框或窗口。
<dl>	定义定义列表。	*
<dt>	定义定义列表中的项目。	*
<em>	定义强调文本。
<embed>	定义外部交互内容或插件。
<fieldset>	定义围绕表单中元素的边框。
<figcaption>	定义 figure 元素的标题。
<figure>	定义媒介内容的分组，以及它们的标题。
<font>	不赞成使用。定义文字的字体、尺寸和颜色。	*
<footer>	定义 section 或 page 的页脚。
<form>	定义供用户输入的 HTML 表单。	*
<frame>	定义框架集的窗口或框架。
<frameset>	定义框架集。
<h1> to	定义 HTML 标题，可以改变标题的大小。	*
<head>	定义关于文档的信息。	*
<header>	定义 section 或 page 的页眉。	*
<hr>	定义水平线。	*
<html>	定义 HTML 文档。	*
<i>	定义斜体字。	*
<iframe>	定义内联框架。
<img>	定义图像。	*
<input>	定义输入控件。	*
<ins>	定义被插入文本。
<isindex>	不赞成使用。定义与文档相关的可搜索索引。
<kbd>	定义键盘文本。
<keygen>	定义生成密钥。
<label>	定义 input 元素的标注。
<legend>	定义 fieldset 元素的标题。
<li>	定义列表的项目。	*
<link>	定义文档与外部资源的关系。	*
<map>	定义图像映射。
<mark>	定义有记号的文本。
<menu>	定义菜单列表。
<meta>	定义关于 HTML 文档的元信息。
<meter>	定义预定义范围内的度量。
<nav>	定义导航链接。
<noframes>	定义针对不支持框架的用户的替代内容。
<noscript>	定义针对不支持客户端脚本的用户的替代内容。
<object>	定义内嵌对象。
<ol>	定义有序列表。	*
<optgroup>	定义选择列表中相关选项的组合。
<option>	定义选择列表中的选项。
<output>	定义输出的一些类型。	*
<p>	定义段落。
<param>	定义对象的参数。
<pre>	定义预格式文本。
<progress>	定义任何类型的任务的进度。
<q>	定义短的引用。
<rp>	定义若浏览器不支持 ruby 元素显示的内容。
<rt>	定义 ruby 注释的解释。
<ruby>	定义 ruby 注释。
<s>	定义加删除线的文本。
<samp>	定义计算机代码样本。
<script>	定义客户端脚本。
<section>	定义 section。
<select>	定义选择列表（下拉列表）。
<small>	定义小号文本。
<source>	定义媒介源。
<span>	定义文档中的节。	*
<strike>	不赞成使用。定义加删除线文本。
<strong>	定义强调文本。
<style>	定义文档的样式信息。	*
<sub>	定义下标文本。
<summary>	为元素定义可见的标题。
<sup>	定义上标文本。
<table>	定义表格。	*
<tbody>	定义表格中的主体内容。
<td>	定义表格中的单元。	*
<textarea>	定义多行的文本输入控件。
<tfoot>	定义表格中的表注内容（脚注）。
<th>	定义表格中的表头单元格。	*
<thead>	定义表格中的表头内容。
<time>	定义日期/时间。
<title>	定义文档的标题。	*
<tr>	定义表格中的行。
<track>	定义用在媒体播放器中的文本轨道。
<tt>	定义打字机文本。
<u>	定义下划线文本。	*
<ul>	定义无序列表。	*
<var>	定义文本的变量部分。
<video>	定义视频。
<wbr>	定义视频。
<xmp>	定义预格式文本。

3.特殊符号

描述	书写
大于	<
小于	>
空格（不确定空出多少）
空格（正好是一个中文字符的大小）	&emsp;
™	™
®	®
表情符号（后三位可换，具体自己试试）	&#128551

4.列表

有序列表

<h2>有序列表</h2>
    <!-- 
        有序列表
        type只能是1、a、A、i、I；
        start只能是数字表示从第几位开始向后排序；若type是1，start是3，则开头第一个前面序号是3，若type是a，start是3，则开头第一个前面序号是c，
     -->
    <ol type="1" start="3">
        <!-- ol标签里面只能用li标签，li标签里面可以任意放标签 -->
        <!-- 页面显示的数字式自动生成的 -->
        <li>把冰箱打开</li>
        <li>大象装进去</li>
        <li>关上冰箱</li>
    </ol>

无序列表

 <h2>无序列表</h2>
    <!--
        无序列表
        ul标签里面只能用li标签，li标签里面可以任意放标签
        type值有 disc、circle、square、none
    -->
    <ul>
        <li type="disc">蒸羊羔</li>
        <li type="circle">蒸熊掌</li>
        <li type="square">烧花鸭</li>
        <li type="none">烧子鹅</li>
    </ul>

5.图片引入

路径“…/…/image/0BCCE5D0-9FF4-47D7-9289-68745415D019_1_105_c.jpeg”表示当前文件所在目录的“上级目录/上级目录/image文件夹下/0BCCE5D0-9FF4-47D7-9289-68745415D019_1_105_c.jpeg”

熟悉linux对这个路径就很清楚

<img src="../../image/0BCCE5D0-9FF4-47D7-9289-68745415D019_1_105_c.jpeg" alt="图片显示不出来时显示的提示信息" title="鼠标停留在图片上的提示" width="200px" height="200px">

6.超链接

<!--
        target属性
            _self :当前窗口跳转
            _blank :新的页面打开
    -->
    <a href="https://www.baidu.com" target="_blank">百度</a>
    <a href="05-列表.html" target="_blank">列表</a>
    <a href="06-img.html" target="_blank">
        <img src="../../image/A13AC873-DBB5-40B7-A3B7-8EE4B27490EF.webp" alt="图片跳转" height="300">
    </a>

7.table表格

    <!--
        border:边框宽度
        bordercolor:边框颜色
        bgcolor:背景颜色
        align:水平对齐,left、right、center
        valign:垂直对齐,top、middle、bottom
        cellspacing:单元格与单元格之间的间距
        cellpadding:单元格与内容之间的间隙
        高度是跟据内容来变化页面的高度，故当下面代码height设置为百分比时看不出效果

    -->
    <table border="1"  width = "50%" height = "100" bgcolor = "green" bordercolore = "blue" cellspacing = "5" cellpadding = "5"> <!--创建表格-->
        <!-- 宽度不可单独设置，高度可以 -->
        <tr bgcolor = "orange" align="center"> <!--行-->
            <!-- 设置一个单元格的宽度影响整列的宽度，高度影响正行的高度 -->
            <td bgcolor="pink">1</td> <!--列-->
            <td>2</td>
        </tr>
        <tr valign = "bottom" height = "100">
            <td align = "right" valign = "top">3</td>
            <td>4</td>
        </tr>
    </table>

 <table border="1" cellspacing = "0" width = "900" height = "300" bordercolor = "pink">
        <tr align="center" valign = "center">
            <td width = "150">会员姓名</td>
            <td width = "300"></td>
            <td width = "150">出生日期</td>
            <td width = "300"></td>
        </tr>
        <tr align="center" valign = "center">
            <td>身份证号</td>
            <td colspan="3"></td>
        </tr>
        <tr align="center" valign = "center">
            <td>通信地址</td>
            <td colspan="3"></td>
        </tr>
        <tr align="center" valign = "center">
            <td>联系电话</td>
            <td colspan="3"></td>
        </tr>
        <tr align="center" valign = "center">
            <td>会员卡号</td>
            <td colspan="3"></td>
        </tr>
    </table>

8.form表单

    <!--
        method 表示表单提交的方式POST GET
    -->
<form method = "POST" action="http://www.baidu.com">
    用户名：<input type="text" placeholder="请输入用户名" name="username"><br>
    密&emsp;码：<input type="password" placeholder="请输入密码" name="password"><br>
    <input type="submit" value="登录">
    <input type="reset" value="重置">
</form>