前端是什么?

帮助不了解后端程序的客户轻松使用程序的工具,可以提升工作效率,提供各种各样的体验。

通用的前端大致会使用三种语言,用在三个不同的方面对前端进行架构和优化,这里也只介绍这三种

web前端常用三层语言:

  1. HTML  超文本标记语言(HyperText Markup Language)
    主要作用:从语义的角度,描述页面的结构。
  2. CSS    层叠样式表(Cascading Style Sheets)
    主要作用:从审美的角度,描述样式(美化页面)
  3. JavaScript
    主要作用:从交互的角度,描述行为(提升用户体验)

HTML

HTML简介

HTML文档结构

 <!DOCTYPE HTML>
<html>
<head>...</head>
<body>...</body>
</html>

首先,<!DOCTYPE HTML>是文档声明,必须写在HTML文档的第一行,位于<html>标签之前,表明该文档是HTML5文档。

  1. <html></html> 称为根标签,所有的网页标签都在<html></html>中。
  2. <head></head> 标签用于定义文档的头部,它是所有头部元素的容器。常见的头部元素有<title><script><style><link><meta>等标签,头部标签在下一节中会有详细介绍。
  3. <body></body>标签之间的内容是网页的主要内容,如<h1><p><a><img>等网页内容标签,在<body>标签中的内容(图中淡绿色部分内容)最终会在浏览器中显示出来。

HTML文档包含了HTML标签及文本内容,不同的标签在浏览器上会显示出不同的效果,所以我们需要记住最常见的标签的特性。

<body>标签及相关内容

标题标签h1~h6

段落标签 p

超链接标签 a

列表标签 ul,ol

盒子标签 div

图片标签 <img/>

CSS

CSS介绍

使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当HTML内容非常多时,就会定义很多重复的样式属性,并且修改的时候需要逐个修改,费心费力。是时候做出改变了,所以CSS就出现了。

CSS的出现解决了下面两个问题:

  1. 将HTML页面的内容与样式分离。
  2. 提高web开发的工作效率。

什么是CSS:

CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。

CSS语法

CSS引入方式

  CSS的三种引入方式

行内导入

内部导入

外部导入

    

选择器概念:

在一个HTML页面中会有很多很多的元素,不同的元素可能会有不同的样式,某些元素又需要设置相同的样式,选择器就是用来从HTML页面中查找特定元素的,找到元素之后就可以为它们设置样式了。 选择器为样式规则指定一个作用范围。

基本选择器

  

组合选择器

属性选择器

分组选择器

伪类选择器

伪元素选择器

继承

优先级

样式

宽度高度

字体

大小

颜色

字重

字体

字间距

对齐样式

文字装饰

首行缩进

背景属性

边框

display:

盒子模型

特殊字符

浮动

溢出

定位

z-index

opopacity

python学习第42、43天 HTML\CSS的更多相关文章

  1. python学习-day14-前端之html、css

    一.Html 1.本质:一个规则,浏览器能任务的规则 2.开发者:        学习Html规则        开发后台程序:            - 写Html文件(充当模板的作用) ***** ...

  2. python学习博客地址集合。。。

    python学习博客地址集合...   老师讲课博客目录 http://www.bootcdn.cn/bootstrap/  bootstrap cdn在线地址 http://www.cnblogs. ...

  3. python学习之“切片操作从入门到精通”

    在python学习开发的过程中,我们总是不断的要对List(列表),Tuple(元组)有取值操作:假如我们有一个列表List1现在想取出1其中的前5个元素,改怎么操作呢? >>> L ...

  4. Python学习之---冒泡,选择,插入排序

    Python学习之---冒泡,选择,插入排序 最近学习了python基础,写一下3大排序练练手: 1 ''' 2 Created on 2013-8-23 3 4 @author: codegeek ...

  5. Python:Python学习总结

    Python:Python学习总结 背景 PHP的$和->让人输入的手疼(PHP确实非常简洁和强大,适合WEB编程),Ruby的#.@.@@也好不到哪里(OO人员最该学习的一门语言). Pyth ...

  6. Python学习入门基础教程(learning Python)--6.3 Python的list切片高级

    上节"6.2 Python的list访问索引和切片"主要学习了Python下的List的访问技术:索引和切片的基础知识,这节将就List的索引index和切片Slice知识点做进一 ...

  7. 2019-04(2)Python学习

    一.元组 1.什么是元组? 元组是一个固定长度,不可改变的Python序列对象.创建元组的最简单方式,是用逗号分隔一列值: In [1]: tup = 4, 5, 6 In [2]: tup Out[ ...

  8. python学习之argparse模块

    python学习之argparse模块 一.简介: argparse是python用于解析命令行参数和选项的标准模块,用于代替已经过时的optparse模块.argparse模块的作用是用于解析命令行 ...

  9. Python学习-终端字体高亮显示1

    Python学习-终端字体高亮显示   1.采用原生转义字符序列,对Windows有的版本不支持(比如win7),完美支持Linux 实现过程: 终端的字符颜色是用转义序列控制的,是文本模式下的系统显 ...

随机推荐

  1. MVC 5 Scaffolder + EntityFramework+UnitOfWork Pattern 代码生成工具

    MVC 5 Scaffolder + EntityFramework+UnitOfWork Pattern 代码生成工具集成Visual Studio 2013 MVC 5 Scaffolder + ...

  2. vue中computed和watch

    computed 计算属性 能够监听vue数据上的变化,页面上来就执行一次,每改变一次数据就又触发.在操作数据的时候,会派生出另一个事情 1.函数形式 computed:{ listenArr(){ ...

  3. 15个新鲜出炉的 Photoshop 文本效果教程

    文本效果可能是 Photoshop 图形设计中最常用和最通用的技术之一.最重要的是你可以使用任何效果,风格或纹理来产生有趣的排版,越多人尝试过它并制作了一些精彩的教程.所以这篇文章旨在为您提供全面的 ...

  4. Python安全 - 从SSRF到命令执行惨案

    前两天遇到的一个问题,起源是在某个数据包里看到url=这个关键字,当时第一想到会不会有SSRF漏洞. 以前乌云上有很多从SSRF打到内网并执行命令的案例,比如有通过SSRF+S2-016漏洞漫游内网的 ...

  5. new和delete动态分配和撤销内存

    视频:C++引用及new和delete的使用 一.new用法 使用new运算符时必须已知数据类型,new运算符会向系统堆区申请足够的存储空间,如果申请成功,就返回该内存块的首地址,动态分配失败,则返回 ...

  6. JQuery之Attr()与Prop()方法

    一.Prop()的由来 JQuery 1.6开始 新增方法prop() prop()解决:表单元素中checked,selected,disabled等属性在方法attr()中可能会出现的不一致问题( ...

  7. visual studio属性管理器

    位于 视图->其它窗口 项目配置属性,这个项目的属性别的项目也需要的时候可以把属性页复制到新项目. 以及配置单个项目的不同构建方案

  8. luogu P3236 [HNOI2014]画框

    传送门 我们把一种方案的\(\sum a_{i,j}\)和\(\sum b_{i,j}\)看成点\((\sum a_{i,j},\sum b_{i,j})\),那么就只要求横纵坐标之积最小的点,类似于 ...

  9. Kaldi的关键词搜索(Keyword Search,KWS)

    本文简单地介绍了KWS的原理--为Lattice中每个词生成索引并进行搜索:介绍了如何处理OOV--替补(Proxy,词典内对OOV的替补)关键词技术:介绍了KWS的语料库格式:介绍了KWS在Kald ...

  10. git操作本地仓库基本使用教程

    1.创建仓库 mkdir learngit 2.初始化 cd learngit git init 3.添加文件(把要提交的所有修改放到暂存区(Stage)) git  add 文件 4.提交到仓库(以 ...