前端三剑客

  • 一. HTML
    • 1. 什么是HTML？
    • 2. 元素
    • 3. 常见的元素
      • （1）标题元素
      • （2）段落元素
      • （3）列表
      • （4）超链接
      • （5）图片
      • （6）无语义标签
  • 二. CSS
    • 1. 什么是 CSS ？
    • 2. 引入的样式
    • 3. 常见的 CSS 选择器
      • （1）标签选择器
      • （2）id选择器
      • （3）类选择器
      • （4）子元素选择器
    • 4. CSS 中的属性
      • （1）字体相关的属性
      • （2）文本相关属性
      • （3）背景相关属性
    • 5. CSS 中的盒模型
      • （1）盒子的大小：width、height
      • （2）元素的边框
      • （3）内边距
      • （4） 外边距
    • 6. CSS的布局
      • （1）使用弹性布局
  • 三. JavaScript

如果想要制作出来一个漂亮的网页，那么前端“三剑客”是必不可少的。

一. HTML

1. 什么是HTML？

HTML 是一种用来告知浏览器如何组织页面的标记语言，描述页面的整体骨架。由一系列的元素组成。

2. 元素

元素由标签和标签内容组成，具体如下图：

3. 常见的元素

（1）标题元素

h1、h2、h3、h4、h5、h6
依次是一级到6级标题，字号由大到小。

（2）段落元素

用 p 表示段落元素。

（3）列表

  • 无序列表：ul
  • 有序列表：ol
  • 列表项目：li

（4）超链接

用 a 表示链接

（5）图片

用 img 表示。

（6）无语义标签

  • 块级无语义标签：div
  • 内联无语义标签：span

这两个标签可以表示标题、列表、图片、段落等元素。

二. CSS

1. 什么是 CSS ？

CSS 是一种样式规则语言，用来描述页面的样式。可将样式应用于 HTML 内容， 例如设置背景颜色和字体。

2. 引入的样式

  • 内联样式：以元素的属性指定

  • 内部样式：以 < style > 标签包裹

  • 外部样式：以外部文件的方式

3. 常见的 CSS 选择器

（1）标签选择器

直接写某个具体的标签，表示选中该页面中所有的对应名字的元素
。这种做法大部分来说不是很方便，很多时候，同一个标签有不同的功能，这种情况，我们就可以使用id选择器。

（2）id选择器

可以让一个标签有不同的功能，需要先给html标签指定一个id的值，再通过id选择器选中该元素。一个html中的id是唯一的，不能重复。

（3）类选择器

由于id选择器要求元素只能有唯一id，如果要一次选中多个元素，就不能用id选择器了，使用类（CSS的类）选择器。类选择器非常灵活，可以给任意多的元素引用对应类。

（4）子元素选择器

选定某个标签里面的某个标签。可以和上面的选择器组合使用。

4. CSS 中的属性

（1）字体相关的属性

（2）文本相关属性

（3）背景相关属性

5. CSS 中的盒模型

每一个HTML元素都是一个矩形（盒子）

一些和盒子相关的属性：

（1）盒子的大小：width、height


以上设置高度宽度，是针对块级元素的；
对于行内元素，无法设置宽高。行内元素的尺寸完全是由内部尺寸撑起来的。
如果想让span具有宽度高度，需要将其转成块级元素。

（2）元素的边框

使用border属性设置元素的边框，需要设置3个值：

默认情况下，边框会撑大盒子，可以通过box-sizing属性来修改边框的行为，让边框不撑大盒子。

（3）内边距

通过padding 指定内边距；内边距：边框到内容之间的距离。

padding可以给四个方向都进行设置，内边距会导致盒子被撑大。

（4） 外边距

通过margin 指定外边距，外边距：盒子和盒子之间的边距。


为了实现给两个元素都能够具有一定的间距，可以给上方元素加一个下外边距；也可以给下方元素加一个上外边距，但是不能两个都加，都加了就会产生“外边距塌陷问题”。

外边距的一个经典用法：实现块级元素水平居中给这个块级元素左右外边距设置为auto即可。

padding 也支持这样的复合写法。

6. CSS的布局

布局：把指定的元素放到合适的位置上。

实现水平布局的方式：

  • 经典：浮动（float）[有很多副作用]
  • 弹性布局，即flex布局[比较推荐]
  • 网格布局，即grid布局（下一代的布局方式）

（1）使用弹性布局

  • 使用display：flex开启弹性布局（给父元素加这个属性），此时内部的子元素就会按照弹性布局的规则来排列了。

  • 通过justify-content属性设置元素水平方向的排列方式，（还是给父元素加这个属性）。



  • align-items 设置元素垂直方向的排列

三. JavaScript

JavaScript 是运行在浏览器上的，功能是控制页面与用户之间的交互，是一种脚本语言。

JavaScript 编程语言允许在 Web 页面上实现复杂的功能。如果你看到一个网页不仅仅显示静态的信息，而是显示依时间更新的内容，或者交互式地图，或者 2D/3D 动画图像，或者滚动的视频播放器，等等 —— 基本可以确定，这需要 JavaScript 的参与。
类似于 Java语言，JavaScript也有自己的常见类型的代码块，比如条件语句、循环、函数、以及事件等。由于较为复杂，我们在这里不再赘述。

正是由于HTML、CSS、JavaScript 三者的合作，才使得我们的网页看起来不那么单调，要想学好这“三剑客”，需要经过大量的练习才可掌握，小编在这里预祝每个编程的小伙伴们都能马到成功！！！

WEB-1-前端三剑客相关推荐

  1. Python全栈 Web（前端三剑客之JavaScript 从小白鼠到武林盟主）

    // HTML嵌套: // 元素标签中绑定JS代码: // "<p onclick="js操作">文本</p>" // 文档嵌套: // ...

  2. 【前端基础知识】web前端设计基础（前端三剑客之一 —— HTML5，包含课后习题）

    HTML5 第一章 HTML5基础 1.1 HTML5文档结构 1.2 元素与标签 1.3 属性 1.4 语法规则 第一章习题 第二章 HTML5内容结构与文本 2.1 结构标签 2.2 基础标签 2 ...

  3. 前端入门 前端自学路线 web开发前端如何学习

    本文介绍前端入门之路,以及之后对前端应该怎么学,大概学哪些东西.作者在前端.后端入门的时候,花了大量时间到CSDN.知乎.百度上去找资料,但是有的说的不是太复杂, 就是一句话带过,那个时候很苦恼.现在 ...

  4. 前段第44天------前端、前端三剑客、HTML

    一.前端 定义:前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页. 前端技术:前端设计:一般可以理解为网站的视觉设计 前端开发:网站的前台代码实现,包括基本的HTML和CSS以及 ...

  5. 前端三剑客之 HTML - JavaEE初阶 - 细节狂魔

    文章目录 前言 后端 && 前端的部分历史 - java 关于网站搭建 正文开始! HTML 怎么编写一个HTML的代码? 小拓展: 快速编写 HTML 代码的小技巧 浏览器的开发者工 ...

  6. 前端三剑客_HTML

    前端三剑客 一.软件的架构 1.C/S(客户端/服务器端) 一般我们使用的软件都是C/S架构: 比如系统中的QQ.360--: C表示客户端,通过客户端来使用软件: S表示服务器,服务器负责处理软件的 ...

  7. 前端“三剑客”——HTML,CSS,JS

    文章目录 一,前端是什么? 二,HTML 三,CSS (一)CSS简介 (二)CSS定义规则: (三)两种使用方式 1,内嵌式 2,链入式 3,CSS选择器和常用属性 (1),标记选择器 (2),类选 ...

  8. 02.Web大前端时代之：HTML5+CSS3入门系列~H5结构元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...

  9. Web纯前端“旭日图”实现元素周期表

    一.什么是旭日图 旭日图是在Excel 2016中新增的一种图表.有些类似饼图,饼图的优势是可以显示占比.但是饼图只能显示单级数据.旭日图用来表示多层级数据的占比.旭日图以一种分层方式显示,非常适合用 ...

  10. 04. Web大前端时代之：HTML5+CSS3入门系列~HTML5 表单

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...

最新文章

  1. mysql mysql_row 整行数据_PHP使用mysql_fetch_row查询获得数据行列表的方法，phpmysql_fetch_row_PHP教程...
  2. 使用java poi解析表格
  3. php中的for循环最多循环多少次,php - 我在PHP中有2次时间，如何运行foreach循环来遍历所有这些日子？ （最后24小时同时循环1小时！） - 堆栈内存溢出...
  4. c语言小游戏贪吃神,[原创]自己编的一个贪吃蛇小游戏
  5. 数据结构之排序五：选择排序
  6. 操作系统-Windows操作系统的线程调度了解这些
  7. Merge Sorted Array 合并两个有序数组
  8. IBM AIX创建lv
  9. sigar取得进程信息
  10. MATLAB图像处理（包括图像类型转换）
  11. cherry G80-3000茶轴空格左边失灵，经常无法触发按钮，安装空格卫星轴零件
  12. 什么是Winsock WSAData ?
  13. 年薪百万阿里前端工程师分享——Web应用实例：音频可视化
  14. 写给女儿高中编程课老师的一封信
  15. MySQL DBA的KPI考核指标有哪些
  16. 美国音乐学院计算机音乐专业排名2015年,美国音乐学校排名Top100
  17. android sim 卡7816,采用SO7816标准规范的SIM卡读卡器的研究
  18. SAP在华真相:天价收费与用户之灾
  19. Win7 设置任务栏自动隐藏后，偶尔不能自动隐藏？
  20. 习惯养成计划申明（重要)

热门文章

  1. 光伏逆变器“核心器件”IGBT在光伏逆变器的应用
  2. Mysql基于binlog日志恢复数据
  3. Abbkine细胞周期染色试剂盒特色和实验建议
  4. 2017-4-14校内训练
  5. Django短信和邮箱注册、支付宝沙箱的使用
  6. 论机房动力环境监控系统的重要性！
  7. Android,JCVideoPlayerStandard，节操,视频播放
  8. ajax传智播客百度云,传智播客AJAX视频资料分享
  9. 全志R16_SPI总线驱动的使用文档,全志R16开发资料
  10. 免费的内网穿透（钉钉）