手把手带你前端快速入门_技术笔记

韩本洋_uyLVX2 2天前

前端的三大核心技能
前端是由三个语言组成，分别是HTML、CSS、JavaScript
前端后期的框架或库只是同上述内容封装而来，是为了更方便的操作这三个语言而已。
1 . HTML的全称是超文本标记语言。我们可以使用这些标签说明文字、图像、音视频等等。
HTML的的官方叫法为“标签”
简单来说，HTML更像是房子的架构，做好HTML后我们就相当于在了一个毛坯房。
2 . CSS又叫层叠样式表，可以静态地修饰网面，让网页更有活力更好看。
简单来说，CSS更像给房子装修好买了家具，让房子更漂亮了.
3 . JavaScript (简称"JS")是一种具有函数优先的轻量级，解释型或即时编译型的编程语言，他主要负责和使用者与网面交互使用的。比如按钮的触碰效果、导航栏轮播等效果。
简单来说，JS更像房子的智能家居系统，让用户和房子能够互动。

0赞 · 0采集
HUANGMEIMEI 2024-11-21

<span>輸入帳號密碼隔前面的文字

0赞 · 0采集
HUANGMEIMEI 2024-11-20

input需要登入介面而使用的標籤
<input type(類型)="例如:帳號/密碼/生日/電話"/>

0赞 · 0采集
HUANGMEIMEI 2024-11-20

<ol>數字列表

0赞 · 0采集
HUANGMEIMEI 2024-11-20

<ul>大列表
<il>小列表

0赞 · 0采集
HUANGMEIMEI 2024-11-20

div分割作用

0赞 · 0采集
慕标5234759 2024-11-18

input标签有六种，输入框

0赞 · 0采集
HUANGMEIMEI 2024-11-11
1. <!DOCTYPE(告知瀏覽器這是甚麼) 後方帶入html之類的>
2. 有頭就有尾基本要有以下三大標籤
<html></html>甚麼編碼
<head></head>網頁的頭
<body></body>網頁的身體
三大標籤順序為
<html>
    <head> </head>
    <body></body>
</html>
    3. <meta>裡面charset(網頁編碼解析器)="UTF-8(中文)"
    4.<title>網頁標題</title>
0赞 · 0采集
慕数据3031255 2024-08-29

前端人员是制作小程序，app的

0赞 · 0采集
恋旧3106072 2024-08-20

<span>标签被用来组合文档中的行内元素

0赞 · 0采集
恋旧3106072 2024-08-19

P标签

P标签里不可以放占位的标签，例如：input、buttom、div等。
p标签里可以放文字、图片、a标签。

0赞 · 0采集
恋旧3106072 2024-08-19

1.html中作为按钮标签有两种，一种是input、另一种是button标签。
2.最基本的区别为前者为单标签，后者为闭合的标签。

<input type="button" value="按钮"> 
<button>按钮</button> 
<button>
<img src="img/1.gif">
</button>

0赞 · 0采集
恋旧3106072 2024-08-19

<input value="慕课网"> 
<input value="abc">

<input
maxlength="5"
value="abcdefg"> 

<input value="请输入密码">
<input placeholder="请输入密码"> 

0赞 · 0采集
恋旧3106072 2024-08-18
1. input标签是网页中最常见的输入文字的标签
2. input有很多种类型，例如：密码、文字、数字、颜色、复选等。
<input type="text"/> 
<input type="password"/> 
<input type="number"/> 
<input type="color"/> 
<input type="checkbox"/> 
<input type="date"> 
0赞 · 0采集
恋旧3106072 2024-08-16

1.前端网页的有序列表ol（英文ordered List）
2.列表里的项目用<li>(英文list item)标签记述
3.默认状态宽度是一整行

0赞 · 0采集
恋旧3106072 2024-08-13

<a href="https://www.imooc.com/u/index/allcourses">
慕课网
</a>
跳转页面

<a target="_blank" href="https://www.imooc.com/">
<img src="https://www.imooc.com/static/img/index/logo2020.png" width="20" height="20"/>
</a>
新开页面

<a href="index-one.html">
index_one页面
</a>
跳转到同级目录页面

<a href="New Folder/index-oo.html">
index_oo第二页面
</a>
跳转到不同级目录页面

../(返回上级目录)

0赞 · 0采集
恋旧3106072 2024-08-13

herf 超文本引用

0赞 · 0采集
慕少6082733 2024-06-09

<ul> 标签定义无序（带项目符号）列表。
请使用 <ul> 标签和 <li> 标签来创建无序列表。
提示：请使用 CSS 来设置列表样式。
提示：对于有序列表，请使用 <ol> 标签。

0赞 · 0采集
慕少6082733 2024-06-09

<ol> 标签定义有序列表。有序列表可以是数字或字母顺序。
<li> 标签用于定义每个列表项。
提示：请使用 CSS 来设置列表样式。
提示：对于无序列表，请使用 <ul> 标签。

0赞 · 0采集
慕少6082733 2024-06-09

<div> 标签定义 HTML 文档中的分割或部分（分区或小节，division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
任何类型的内容都可以放在 <div> 标签内！<div> 标签可用作 HTML 元素的容器，然后使用 CSS 设置样式或使用 JavaScript 进行操作。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。通过使用 class 或 id 属性，可以轻松地对 <div> 标签设置样式。
注意：默认情况下，浏览器总是在 <div> 元素前后放置一个换行符。
用法
<div> 是块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

0赞 · 0采集
慕少6082733 2024-06-09

<title> 标签定义文档的标题。标题必须是纯文本的，显示在浏览器的标题栏或页面的选项卡中。
<title> 标签在 HTML 文档中是必需的！
页面标题的内容对于搜索引擎优化 (SEO) 非常重要！搜索引擎算法使用页面标题来决定在搜索结果中列出页面时的顺序。
<title> 元素：
定义浏览器工具栏中的标题
添加到收藏夹时为页面提供标题
在搜索引擎结果中显示页面的标题
以下是创建好的标题的一些建议：
选择较长且具有描述性的标题（避免使用仅包含一个或两个单词的标题）
搜索引擎将显示大约 50-60 个字符的标题，因此请尽量避免标题过长
不要仅将标题设为一组单词的列表（这可能会降低页面在搜索结果中的排名）
因此，尽量使标题准确且有意义！
注意：一个 HTML 文档中不能包含多个 <title> 元素。

<meta> 标签定义关于 HTML 文档的元数据。元数据是关于数据的数据（信息）。
<meta> 标签始终位于 <head> 元素内，通常用于指定字符集、页面描述、关键词、文档作者和视口设置：
元数据不会显示在页面上，但可以被机器解析。
浏览器（如何显示内容或重新加载页面）、搜索引擎（关键词）和其他网络服务会用到元数据。
提示：meta 元素有多种不同用法，而且一个 HTML 文档中可以多个 meta 元素。
提示：通过 <meta> 标签，有一种方法让网页设计师控制视口（即用户在网页中可见的区域）（请参见下面的"设置视口"实例）。
注意：每个 meta 元素只能用于一种用途。如果想要使用的特性不止一个，那就应该在 head 元素中添加多个 meta 元素。

0赞 · 1采集

慕少6082733 2024-06-09

<a></a>
a标签定义超链接，用于从一个页面链接到另一个页面。
a元素最重要的属性是 href 属性，它指定链接的目标。

0赞 · 0采集

慕粉0352580694 2024-02-26

<span>标签：组合文档中的行内元素
<span>abc</span>
<span>123</span>
效果就是在一行显示：
abc123

同一个div中的input会从左到右的排序，不会换到下一行

1赞 · 0采集
慕粉0352580694 2024-02-26

P标签自成一行，且会自动在其后创建一些空白；
div里面可以放P，P不能放div
p标签里面不能放div,不能放ul，ol，li
但是P标签里面放文字、图片<img>、链接<a>是可以的

0赞 · 0采集
慕粉0352580694 2024-02-26

按钮标签有2种，单标签的input，其中一种属性是按钮
闭合标签的button
例1：<input type="button" value="按钮"> ————value是按钮中显示的内容
例2：<button>按钮</button>————button标签有开始和闭合，因此文字可以直接放在两个标签中间，如果要引入图片也可以直接放，
如例3：
<button>
<img src=“图片路径”>
</button>
input标签的按钮显示文字和button标签显示文字差别不大，但是闭合标签中可以引入图片等东西，而这是单标签做不到的。

1赞 · 0采集
慕粉0352580694 2024-02-25

input 的 value属性，设置默认内容；
<input value="慕课网"/>，默认显示"慕课网"；
input 的 maxlength属性，设定最大值，限制输入长度，但是对默认value的长度不影响；

input 的 placeholder属性，设定提示信息--输入信息后，提示内容就不显示，删除输入框内容，提示信息就显示；

1赞 · 0采集
慕粉0352580694 2024-02-25

input是单标签，<input />
input有多种类型，type定义不同的属性，默认是text文本类型

文本 <input type="text"/>
密码 <input type="password"/>
数字 <input type="number"/>
颜色 <input type="color"/>
复选框 <input type="checkbox"/>
日期 <input type="date"/>

0赞 · 0采集
慕粉0352580694 2024-02-25

1、ul标签是无序列表，ol标签是有序列表
2、ul和ol是闭合标签
3、ul和ol，里面都有li 标签
4、无序列表格式如下：
<ul>
    <li><li>
<li><li>
<li><li>
    .......
<ul>
5、有序列表格式如下：
<ol>
<li><li>
<li><li>
<li><li>
    .......
<ol>
6、ul不同层之间，前面的图样标识不同【前四层不同】
7、如果第一层是有序ol,第二层是无序ul，ul展示标识是第二层的

1赞 · 1采集
慕粉0352580694 2024-02-25

1、div是闭合标签，可以理解成砖块；
2、div的默认占据一行；
3、几个挨着的div之间是一行行展示的，行与行之间没有间距；
4、P是段落标签，P和P之间是存在空白行作为段落间隔的；
5、div里面可以有P标签或者a标签、img标签，
6、但是P标签里面不能有div标签

1赞 · 1采集
慕粉0352580694 2024-02-25

<a>是闭合标签，两个属性：href ; target
href属性是链接地址
target属性是指新开一个界面访问链接
表达格式：
1、<a href="链接跳转的地址或图片地址"> HTML显示的文字 </a>
2、<a href="链接跳转的地址或图片地址"> <img src="图片的网页地址和"> </a>
3、<a target="_blank" href="链接跳转的地址" > HTML显示的文字或图片 </a>

2赞 · 1采集

数据加载中...