初识前端

it2023-06-19 68

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言一、什么是前端？二、开发技术三要素1.HTML2.CSS3.JavaScript 三、html+css学习心得1.HTML1.CSS3.遇到的一些问题

前言

最近一周在学习有关html和css的知识，现对其做一大致总结。

一、什么是前端？

即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。列举几个我对其的实例化认识：

网页网站现在我们所看到的各种PC端、移动端的所有网站都离不开前端，如我们常接触的百度，淘宝，京东等这样的网站，都是通过代码合理布局，装饰，添加特效后形成的。APP 手机应用占据前端开发比例很大，像我们熟知的QQ，微信，微博等，其中近90%的展示效果基本靠前端完成。小程序小程序这种无需下载安装即可使用的应用，“用完即走”的特点让其迅速火热，微信，支付宝等中已随处可见，它们的源代码语法，和html、css相似度高达99%。H5小游戏这些基于浏览器上运行的游戏，如4399、7k7k这些都可以靠前端实现。但前端无法做大型游戏。

二、开发技术三要素

1.HTML

指的是超文本标记语言 (Hyper Text Markup Language)，经历了多个版本的发展，现已经发展到5.0版了, 即HTML5。它就相当于“代码布局”。

2.CSS

级联样式表（Cascading Style Sheet），用来进行网页风格设计，可以统一地控制HTML中各标志的显示属性，即“合理装饰”。

3.JavaScript

js类似于c语言的语法，但它是一种直译式脚本语言，用来“添加特效”。

三、html+css学习心得

1.HTML

简单列举一些重点元素标签是HTML的一个最重要的组成部分。HTML的编写更多的只是一种排列和规划，使用元素标签将要写的部分包裹起来就可以了。生效方式也很简单，将写的东西保存，用浏览器打开即可，我们一般更常用的为谷歌浏览器。一个HTML文件，由DOCTYPE，html，head，title，body五部分组成， <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> //防止网页显示乱码 <title></title> </head> <body> </body> </html>

html元素分为行级标签（不换行）和块级标签（换行）

超链接标签 a 属于行级标签 href属性为要连接的地址，两种写法： 1.远程的（远程路径也是相对相对路径） 2.相对路径（相对当前项目文件的）默认打开当前选项卡，可用target _blank 重新打开一个选项卡

文字标签 span（主要放文字）属于行级元素

区块标签 div 容器（搭配别的元素使用主要用于网站的结构）属于块级元素

表单标签以及表单元素对象标签(如常用的表单验证）,对其做一简单练习：

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <form action="" method="get"> <p>学生信息统计：</p> <ul> <li><lable for="userName">姓名</lable> <input type="text" name="userName"/></li> <li><lable for="userAge">年龄</lable> <input type="text" name="userAge"/></li> <li><lable for="userNum">学号</lable> <input type="text" name="userNum"/></li> <li><lable for="userSex">性别</lable> <input type="radio" value="男生" name="userSex"/>男 <input type="radio" value="女生" name="userSex"/>女</li> <li><lable for="userCourse">必修课</lable> <input type="checkbox" value="C语言" name="userCourse"/>C语言 <input type="checkbox" value="Java" name="userCourse"/>Java <input type="checkbox" value="数据库" name="userCourse"/>数据库</li> <li><lable for="userTime">入学时间</lable> <select> <option value="2017" name="userTime">2017</option> <option value="2018" name="userTime">2018</option> <option value="2019" name="userTime">2019</option> <option value="2020" name="userTime">2020</option> </select></li><br/> <li><lable for="userDetails">个人简介</lable> <textarea name="userDetails" cols="30" rows="10" placeholder="请输入不少于30字"></textarea></li> </ul> </form> </body> </html>

1.CSS

层叠样式表(Cascading Style Sheets)是一种用来表现HTML文件样式的计算机语言。CSS 能够对网页中元素位置的排版进行像素级精确控制，不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS的三种样式： 1.行内样式（在元素标签上的style属性上直接写css） 2.内嵌样式 (在网页里面任意位置（head/body标签之内写 style) 3.外部样式表（css写在外部的css文件里面，网页直接调用使用）优先级：三大样式之间如果存在冲突行内样式>内嵌样式>外部样式（行内样式>外部样式>内嵌样式）

熟练掌握各种选择器的使用四个基本选择器之间的优先级：id>class>ele>*

盒子模型 css中，所有元素都是由一个个盒子模型包围着的，它是我们使用css实现准确布局，处理元素排列的关键。

一个块级盒子模型由以下几部分组成

1.Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height. 2.Padding box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置。 3.Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。 4.Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。目前盒子模型才刚开始接触，接下来深入了解后我再作以补充。

css里面块级元素和行级元素相互转化的问题： display:block;（转化块级） display:inline-block;(转化行级快) display:inline;（转化行级）

BFC 是指元素相对独立，自身的结构和位置不会影响周边元素普通流的BFC：块元素上下结构如果属域同一个BFC，这两个元素之间的外间距会重叠如果将另一个元素用其他元素包裹设置父元素样式 overflow: hidden; 会构建为另一个BFC，这样的两个上下元素之间的间距会叠加不会重叠

3.遇到的一些问题

在练习外联样式时，一定要注意路径的写法，因为过于马虎在练习时浪费了不少时间。

在对着笔记练习属性选择器时，发现根据属性值来匹配时必须也记得写type类型。

最后要提醒我自己记得带好像素单位，在练习图片充当背景图时卡了好一会。

因为最近学校课程也有些紧张，练习得不是太充分，目前先掌握好各种标签的熟练应用，在今后的练习中继续发现问题，解决问题，消化问题。

最新回复(0)