JAVA EE 第九周（3月30-4月5号）苦写三天，我把前端的内容（CSS和HTML）总结了一遍（含超详细的原创版思维导图，可复习时用）

最新推荐文章于 2021-01-15 16:32:45 发布

爱编码的程序员

最新推荐文章于 2021-01-15 16:32:45 发布

阅读量381

点赞数 12

分类专栏： java学习 Html 知识总结文章标签： html 定位 css javascript java

本文链接：https://blog.csdn.net/weixin_43501566/article/details/105354739

版权

java学习同时被 3 个专栏收录

44 篇文章 0 订阅

订阅专栏

知识总结

42 篇文章 0 订阅

订阅专栏

Html

10 篇文章 0 订阅

订阅专栏

第九周（3月30-4月5号）

HTML

HTML的概念

HTML是用来描述网页的一种标准标记语言
HTML指的是超文本标记语言（Hyper Text Markup Language）
HTML 不是一种编程语言，而是一种标记语言（Markup language）
标记语言是一套标记标签（markup tag)
HTML使用标记标签来描述网页

HTML的结构

一个HTML文档包含以下基本标签
- HTML ：HTML文档的根标签
- head ：头标签。用于指定HTML文档的一些属性。引入外部的资源
- title ：标题标签
- body ：体标签
- html5 中定义该文档是HTML文档
HTML的基本结构
- 例子
  Title
html 常用标签
- 标题
  - -
  - 标题是通过
    -
    等标签进行定义的
  - 定义最大的标题。
    定义最小的标题
  - 例子
    title
    This is a heading
    
    This is a heading
    
    This is a heading
- 段落标签
  title
  This is paragraph
  
  This is another paragraph
  - 可以把HTML文档分割为若干段落
  - 段落是通过
    标签定义的
- 换行
  TiTle 如果你希望在不产生一个新段落的情况下进行换行
  This is
  a para
  graph with line break
  - 如果你希望在不产生一个新段落的情况下进行换行（新行），请使用
    标签
- 水平线
  - 标签在html 页面中创建水平线
  - hr 元素可用于分割内容
  - 例子
    TItle
    This is a paragraph
    
    This is a paragraph
    
    This is a paragraph
- 文本格式化标签
  - :字体加粗
  - : 字体斜体
  - 属性定义：
    - color :
      - 1.英文单词： red ， green ,blue
      - 2.rgb(值1，值2，值3）：值得范围： 0~255 如 rgb (0,0,255)
      - “#” 值1 值2 值3 ：值的范围： 00~FF之间。如#FF00FF
    - width
      - 1.数值： width =“20” ,数值的单位，默认是px (像素）
      - 2.数值% ：占比相对于父元素的比例
  - 子主题 4
- 图片标签
  - 在HTML中，图像由标签定义
  - 要在页面上显示图像，你需要使用源属性（src) src 指“source" .源属性的值是图像的URL
  - 属性：
    - src :指定图片的位置
    - alt : 替换文本属性，在浏览器无法载入图片时，替换文本属性告诉读者他们失去的信息
  - 例子
    Title

CSS

CSS概述

CSS指层叠样式表
样式定义如何显示HTML元素
样式通常存储在样式表中
把样式添加到HTML4.0中，是为了解决内容与表现分离的问题
降低耦合度，让分工协作更容易；外部样式表可以极大提高工作效率
外部样式表通常存储在CSS文件中
多个样式定义可层叠为一个

CSS基础语法

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明
selector
- 选择器通常是你需要改变样式的HTML元素
- 每条声明由一个属性和一个值组成

CSS和HTML的结合

内联样式
- 内联样式。你需要在相关的标签内使用样式属性
内部样式
- 当单个文档需要特殊的样式时，就应该使用内部样式表，在head表标签内；你可以使用< style> 标签在文档头部定义内部样式表
外部样式
- 当样式需要应用于很多页面时，外部样式表将是理想的选择
- 在head标签内，定义link标签。引入外部的资源文件

CSS选择器

ID选择器
- 语法：#id 名 {属性：属性值；}
元素选择器
- 语法：元素名称{属性：属性值；}
类选择器
- 语法： .class 名{属性：属性值；}
群组选择器
- 选择符1，选择符2，选择符3… {属性：属性值}
通配符选择器
- - {color:red ;}
属性选择器
- 元素名称[属性名=“属性值”] {}
后代选择器
- 选择器1 选择器2{}
子元素选择器
- 选择器1 > 选择器2{}
伪类选择器
- 元素：状态{}
- a:link {属性：属性值；} 超链接的初始状态
- a:visited {属性：属性值；} 超链接被访问后的状态
- E： hover { 属性：属性值；} 鼠标划过元素时的状态
- E： active { 属性：属性值；} 即鼠标按下时元素的状态

CSS属性

文本的相关属性
- font-size :字体大小
- font-family : 字体样式类型
- font-style : 字体风格
- color：文本颜色
- text-decoration: 划线修饰
- letter-spacing : 字母间隔
- text-align: 水平对齐方式
- vertical-align : 垂直对齐方式
- line-height: 行高
背景
- background-color: 背景颜色
- background-image: 背景图片
- background-repeat：平铺状态
- background-position: 属性设置背景图像的起始位置
- 注意： ( 第一个值是水平位置，第二个值是垂直位置
边框
- border: 3px solid red ;
- 边框线型： solid : 实线； dashed :虚线， dotted : 点状线 double : 双线， none : 没有边框
- 单独设置某个方向的边框属性
- border-top: 上边框
- border-bottom :下边框
- border-left ：左边框
- border-right: 右边框
尺寸
- width: 宽度
- height : 高度

盒子模型

CSS框模型：规定了元素框处理元素内容、内边距、边框和外边距的方式
margin: 外边距
padding : 内边距
border：边框

定位

CSS定位属性允许你对元素进行定位
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
CSS定位机制
- CSS有三种基本的定位机制：普通流（相对定位）浮动和绝对定位
- 除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在（X） HTML中的位置决定
- 块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来
相对定位：相对于原有的位置发生改变，并且保留原有的空间的位置
绝对定位
- 绝对定位相对于他有position 属性的父级元素进行定位，如果父级元素没有postion 定位，那么就找父级的父级。直到向上找到position定位为止，如果他向上找不到position 定位。那么就以最外层的body 进行定位
- 并且绝对定位不会保留原有的位置空间
浮动
- 浮动可以帮助我们更好进行页面排版，使原本竖着排列的盒子，可以横向排列起来