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

文章目录

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

前言

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

一、什么是前端？

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

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

  • （以谁开头 以谁结尾 包含那个字母）

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

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