首页分享前端基础知识HTML,css,js入门(超详细)

前端基础知识HTML,css,js入门(超详细)

来源：花匠小妙招时间：2024-12-07 19:17

〇、前言可以选择性跳过

1. 为什么要学前端基础知识

2. 话不多说上应用

一、HTML

1. HTML干啥用

2. HTML代码

2.1 双标记和单标记(或者标签)

2.2 块元素与行内元素

2.3 表单元素

二、CSS

三、JavaScript

〇、前言可以选择性跳过

1. 为什么要学前端基础知识

学习前端基础知识，特别是HTML、CSS和JavaScript，对于想要从事网页开发、网站设计、Web应用开发或者全栈开发的人来说，是至关重要的。——文心一言

总之，不论是要入门前端，为了更高级的技术打基础，还是搞期末大作业的网页，这些基础知识都是必备。

2. 话不多说上应用

在我们逛一些技术类博客网站的时候，经常会看到下面的一段话：

一般都要点击并关注，然后去阅读被挡住的文章。有没有别的办法来解决文章被挡住的问题呢？

我们只要右键检查就会弹出检查窗口，这时左键选中一大片代码的部分，Ctrl+F搜索article_content，可以找到这段代码：

<div id="article_content"

class="article_content clearfix"

style="height:2000px;

overflow:hidden">

</div>

代码看不懂，我们看代码下面的框框：

双击修改height的数值（比如变成原来的十倍），而后就可以惊奇地发现，文章全露出来了，那句关注博主的要求则沉底了。

可见这里的网页与它的页面源代码密切相关，而HTML，css，JavaScript正式这些代码的主要部分。

3. VScode开发环境安装配置和使用技巧（待更新）

一、HTML

1. HTML干啥用

百度的东西就不复制了，比如对于华为手机 - 华为官网 (huawei.com)，如果只剩下HTML，他会变成这样：

丑丑的，但是该有的都不缺。可以看出，这里的HTML就是充当一个骨架的作用，美观之类不是他的工作（是CSS的工作）。

2. HTML代码

HTML(HyperText Markup Language)代码大致是这种结构：

<html>

<head>

</head>

<body>

</body>

</html>

head里面放全局性的一些内容(如文件名，引用css等)，body则用于添加元素。

他的语法顾名思义，就是给内容作标记来实现网页的布局。下面介绍几个基本概念和代码。

2.1 双标记和单标记(或者标签)

双标记对这两个标记夹住的内容进行作用来形成元素，比如：

<h1>一级标题标签</h1>

<h2>二级标题标签</h2>

<p>这是一个段落标签</p>

<p>

这是字体<b>加粗</b>, <i>斜体</i>, <u>下划线</u>, <s>删除线</s>的段落标签

</p>

效果：

单标记则自己就可以作为一个元素，比如：

<br>

<hr>

效果为：。

< >里面可以添加除了标签名以外的内容来修饰标签：

<a href = "https://www.4399.com" target = "_blank">新窗口打开的4399超链接</a>

<p class="本段所属的类" id="本段的id" >我是一个段落标签</p>

除了上面的标题<h1>标签、段落<p>标签等，还有下面几种常用标签：

<ul>

</ul>

<ol>

</ol>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

2.2 块元素与行内元素

块元素的默认宽度是父级容器的100%，翻译过来就是能独占一行，且大都能装别的元素，前面的标题和段落元素都是块级元素，最为典型的块元素就是<div>标签。

<div>标签，依托它块级元素的特征，可以对内容作划分，也可以本身作为一个背景内容等来使用。比如前面提到的华为页面，其中的许多内容就是专门分在不同的块中实现的：

行内元素即不能独占一行的，只能装文本和行内元素的元素，典型的有<span>标签。

<div>的作用要搭配css才能更完美地显现。

下面是完整示例代码：

<!DOCTYPE html>

<html>

<head>

<title>块元素与行内元素</title>

</head>

<body>

<h1>块元素与行内元素</h1>

</div>

<hr>

<span>span标签1</span>

<span>span标签2</span>

<br>

<span>

点击后面的超链接

可见超链接也是行内元素

</span>

</div>

<span>这句话无法和上面的内容同行</span>

</body>

</html>

运行结果：

2.3 表单元素

典型的表单元素有表单<form>, 表单的标签<label>, 输入<input>, 按钮<button>，下拉列表<select>等，这里示例中间两类：

<hr>

<input type="radio" name="性别"> 男

<input type="radio" name="性别"> 女

<input type="radio" name="性别"> 其他

<input type="checkbox"> 唱

<input type="checkbox"> 跳

<input type="checkbox"> rap

<input type="checkbox"> 篮球

</form>

得到结果：

但是这里的输入框和按钮并不能起到什么效果，让他起到效果是javascript的工作。

二、CSS

待更新

三、JavaScript

待更新

前端基础知识HTML,css,js入门(超详细)