---恢复内容开始---

PS应用
量尺寸w.h
- 操作方式： 窗口，信息，右上角面板选项，标尺单位，像素
切图
- 操作方式： 切片工具， 文件 ，另存为web所有格式，jpeg,存储，切片：选中的切片，保存
HTML
全称：Hypertext markup langguage.超文本标记语言。
作用：代码通过浏览器渲染生成页面。HTML用于定义文档的内容结构
HyperText 超文本：不止包括文本，也可以包括图片，音频，视频等非文本元素。
markup language 标记语言：是一套标记标签，HTML使用标记标签来描述网页。
一个网页就是一篇文档而一篇文档最核心的，就是内容，不同的含义内容组成了文档的结构。
CSS
全称：Casading style sheet
用于定义HTML文档的样式（外观）
Casading Style Sheet：层叠样式表，该语言书写的代码通常会被浏览器解析执行
HTML文档页面中的外观样式都是由Css决定
- HTML+CSS通过浏览器渲染，生成理想中的网页。
HTML注释
注释的书写格式：< !--注释内容-->
- HTML注释主要用于描述代码功能
- 浏览器解析HTML代码是会忽略注释内容

HTML元素
1. HTML元素是HTML文档的重要组成部分，一个HTML文档由大量的元素组成 HTML中的所有内容结构，都是靠元素组织到页面中的
2. HTML元素由起始标记 属性 元素内容 结束标记组成
3. 书写格式：<起始标记 属性>元素内容<结束标记>;
4. 属性表示元素的额外信息；属性由属性名和属性值组成，书写格式：属性名=“属性值”
5. 空元素：又叫自闭和元素，没有元素内容和结束标签

空元素的书写方式：

<   标记名 属性>

<   标记名 属性/>

- 元素的层次结构
含义：一个元素的内容中可以包含其他元素，形成嵌套的层次结构 ；
- 若A元素直接包含B 则A为B的父元素，B为A的子元素
- 若两个元素有同一个父元素，它们互为兄弟元素
- 若A直接或间接包含B 则A是B的祖先元素，B是A的后代元素
- 两个元素之间不能相互嵌套（位置不能乱）
HTML文档结构
文档声明：不是元素，不是注释，它必须出现在HTML代码的第一行
书写格式为：<!DOCTYPE html>
用于通知浏览器，目前的文档正使用哪一个HTML版本（使用HTML5版本）
若不写文档声明，浏览器渲染页面时会进入怪异模式，解决怪异模式：加入：<!DOCTYPE html>
1.html元素又叫跟标记，根元素，它是所有其他元素的祖先元素
2.相关属性：lang
- 该属性指定文档中的文字是用何种自然语言书写的
- 该属性可能会影响浏览器的语言阅读和翻译行为
3.head元素又叫做文档头，它是html元素的第一个元素 文档头中可以包含一些其他元素，用于描述页面的附加信息
- head元素中的内容不会显示到页面上
head元素通常包括  < title>和< meta>
- < title>标识文档标题，该标题会显示在浏览器的标题栏或者是标签页上，可以有多个
- < meta>标识页面的其他元数据（页面相关的附加信息），这是一个空元素
示例：< meta charset="UTF-8">
- 指示浏览器，使用字符编码集UTF-8解析页面
为获得更好的地域兼容性，避免代码，应将字符编码集设置为UTF-8并且将该代码作为head的第一个子元素
body元素（文档体）
文档体，网页中所有的可见内容都放置在该元素内
绝对路径和相对路径
绝对路径：
书写格式：协议：//域名/目录
使用场景:
  1.访问站外场景时，只能使用绝对路径
  2.访问站外资源时，若网站已部署到服务器，可以使用绝对路径，并可以省略协议和域名

相对路径：
是指相对于当前资源的位置，只能用于访问站内资源

书写格式： ./路径 表示当前资源所在的目录，必须作为相对路径的开始，可省略
书写格式：../路径  表示返回上一级目录

初识html与css的更多相关文章

  1. 新手程序员随笔2——初识html、css和javascript

    翻看博客,发现好久木有发blog了.纠其原因,一则是近来工作上卡到了一个编程难题,我是一个单线程的小猿,当我手头有事情做的时候,我不想分心去做其它事情,如写blog.二则是我个人的写作能力不佳,想到写 ...

  2. 初识html、css时随笔记录

    css部分样式 圆框效果:border-radius:5px; 固定样式:position:fixed;悬浮窗在IE6中position:absolute其余浏览器可以用fixed: 使table中的 ...

  3. 初识HTML和CSS

    HTML 1.一套规则,浏览器认识的规则. 2.开发者: 学习Html规则 开发后台程序: - 写Html文件(充当模板的作用) ****** - 数据库获取数据,然后替换到html文件的指定位置(W ...

  4. 0008 CSS初识（行内式、内部样式表、外部样式表）

    typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表 学习目标 理解 css的目的作用 css的三种引入方式 应用 css三种引用方式的书写 通 ...

  5. CSS初识- 选择器 &背景& 浮动& 盒子模型

    # CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 &g ...

  6. 2020年12月-第02阶段-前端基础-CSS初识

    CSS层叠样式表 理解 css的目的作用 css的三种引入方式 1.HTML的局限性 说起HTML,这其实是个非常单纯的家伙, 他只关注内容的语义, 比如`<h1>`表明这是一个大标题,用 ...

  7. 003.前端开发知识，前端基础CSS（2020-01-07）

    一.CSS初识 CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. ...

  8. Flex布局【弹性布局】学习

    先让我们看看在原来的学习中遇到的问题 之前在软件工程的大作业中,自己从零开始学习如何开发一个网站,从页面,到后台,当然数据库是大二的必修课 在学习如何编写一个静态页面的时候,完全是自学,自己摸索,所以 ...

  9. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

随机推荐

  1. 论文笔记：Progressive Neural Architecture Search

    Progressive Neural Architecture Search 2019-03-18 20:28:13 Paper:http://openaccess.thecvf.com/conten ...

  2. 在线预览-Java 使用 Print2Flash 实现Office文档在线阅读

    近期项目上遇到一个需求是用户上传的文档进行在线浏览,之前有过一篇使用 OpenOffice 将 word 转换成 html 页面进行展示的.现在介绍一个新的工具那就是 Print2Flash .    ...

  3. Chrom Firefox 非安全端口访问

    使用Chrom Firefox 访问非安全端口 问题描述 Firefox 此网址已被限制 此网址使用了一个通常用于网络浏览以外目的的端口.出于安全原因,Firefox 取消了该请求. Chrome 无 ...

  4. 在多机器上远程执行JMeter

    安装完jmeter之后直接执行%InstallDir%\apache-jmeter-3.2\bin\JMeter.bat可以启动UI界面,可以编辑或者执行TestPlan等,默认情况下,用例是在本机执 ...

  5. 封装json输出

    /** * 输出json * @param $msg * @param int $errno */ protected function printOutError($msg,$errno = 100 ...

  6. react简书笔记一 环境, git 和 项目 关联

    1.. 建立git项目  ( 码云, github 都可以 ), 具体步骤: https://www.cnblogs.com/andy-lehhaxm/p/10720717.html 1.1  git ...

  7. jquary高级和ajax

    jquary高级: 1.动画 1.三种方式显示与隐藏元素 1.默认显示和隐藏的方式 1.show([speed],[easing],[fn]):显示 [speed],[easing],[fn] spe ...

  8. 用node.js启动mock.js

    Node.js Node 是一个让 JavaScript 运行在服务端的开发平台,它让 JavaScript 成为与PHP.Python.Perl.Ruby 等服务端语言平起平坐的脚本语言.官网下载n ...

  9. css实现垂直水平居中的方法（个数不限）？

    方法一:使用绝对定位 大家都知道margin:0 auto;能够实现水平居中,但却不知道margin:0 auto;也是可以实现垂直居中的: 给居中元素添加如下样式: .Absolute-Center ...

  10. 初识Log4Net

    刚刚了解log4net,根据自己的理解翻译了一下比较重要的东西.详细状况请见log4net官方网站 log4net是一种帮助程序员将日志语句输出到各种目标文件的输出工具,有了log4net,就可以在运 ...