博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
python学习第42、43天 HTML\CSS
阅读量:5321 次
发布时间:2019-06-14

本文共 1432 字,大约阅读时间需要 4 分钟。

前端是什么?

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

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

web前端常用三层语言:

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

HTML

HTML简介

HTML文档结构

1 2 3     ...4     ...5 

 

首先,<!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

 

转载于:https://www.cnblogs.com/heimajia/p/10792711.html

你可能感兴趣的文章
sublime快捷键
查看>>
mysql操作命令梳理(4)-中文乱码问题
查看>>
Hyper-V Centos7 网络设置 虚拟机固定IP
查看>>
Python环境搭建(安装、验证与卸载)
查看>>
一个.NET通用JSON解析/构建类的实现(c#)
查看>>
Windows Phone开发(31):画刷 转:http://blog.csdn.net/tcjiaan/article/details/7460226
查看>>
Windows Phone开发(5):室内装修 转:http://blog.csdn.net/tcjiaan/article/details/7269014
查看>>
记Angular与Django REST框架的一次合作(2):前端组件化——Angular
查看>>
08.存储Cinder→5.场景学习→08.Backup Volume→1.概述与配置
查看>>
进阶之路(基础篇) - 012 Arduino IDE 添加DHT11传感器第三方库的方法
查看>>
详谈js面向对象 javascript oop,持续更新
查看>>
express简单原理
查看>>
基础练习 十进制转十六进制
查看>>
关于这次软件以及pda终端的培训
查看>>
jQuery上传插件Uploadify 3.2在.NET下的详细例子
查看>>
spring11----基于Schema的AOP
查看>>
解决input框自动填充为黄色的问题
查看>>
音视频基础知识(一)
查看>>
CyclicBarrier的使用
查看>>
小程序开发笔记
查看>>