前端学习笔记

mac2025-10-11 9

前端基础学习笔记

新人才学前端，连点皮毛都没有。有许多不懂的地方，或在文中有错误的地方望各位大拿勿喷。

在前端的基础学习中，有三个主要容：HTML，CSS,JavaScript。

HTML部分

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html>

— html 元素。这个元素包含了整个页面的内容，有时也被称作根元素。

— head 元素。这个元素放置的内容不是展现给用户的，而是包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。

—meta charset=“utf-8”— 这个元素指定了当前文档使用 UTF-8 字符编码，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，我们没有任何理由再选用其他编码。

— title元素。这个元素设置页面的标题，显示在浏览器标签页上，同时作为收藏网页的描述文字。

body 元素。这个元素包含期望让用户在访问页面时看到的内容，可以是文本、图像、视频、游戏、可播放的音轨或其他内容。

标签

可用input在页面上设置出按钮，文本框等标签，并可以设置属性。

<input type="button" /> button text radio checkbox password..... ame:表单提交项的按钮 value：表单提交项的值 checked：radio和checkbook默认被选中 readonly：只读text和password disable：只对inpu类型可用

也可以在body里面直接设置标签，如：

<p>我的猫咪脾气爆:)</p> //可以将这行文字封装成一个段落元素来使其在单独一行呈现： <img src="图片地址" alt="测试图片"> //插入一张图片 //标题标签，h1到h6依次减小 <h1>主标题</h1> <h2>顶层标题</h2> <h3>子标题</h3> <h4>次子标题</h4> ....... <a href="链接位置">显示的链接名称</a> //把属性的值设置为所需网址： //在HTML中还有许多的标签元素，可以参考：https://www.w3school.com.cn/tags/index.asp

CSS部分

和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式。

CSS的引入方式 css的引入方式：导入式，嵌入式，行内式，链接式<br/>

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

css选择器

基本选择器：标签选择器，类选择器，id选择器，通用选择器<br/> 组合选择器：后代选择器（以空格为分割），子元素选择器（儿子选择器）（以>分割）<br/> 兄弟选择器（以“~”分割），相邻选择器（以“+”分割）<br /> 属性选择器：ID class<br /> 分组选择器：在多个选择器之间用逗号（，）分开，如div,p{}<br />

css声明

属性是你希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。如：selector {property: value}

CSS定位 CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

CSS相对定位：

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。如下 #box_relative { position: relative;//相对定位 left: 30px; //左边距 top: 20px;//下边距 } ###### CSS相对定位：绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。 #box_relative { position: absolute;//绝对定位 left: 30px; top: 20px; }

JavaScript部分

瞅啥捏，还没学。

最新回复(0)