初识html与css
---恢复内容开始---
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的更多相关文章
- 新手程序员随笔2——初识html、css和javascript
翻看博客,发现好久木有发blog了.纠其原因,一则是近来工作上卡到了一个编程难题,我是一个单线程的小猿,当我手头有事情做的时候,我不想分心去做其它事情,如写blog.二则是我个人的写作能力不佳,想到写 ...
- 初识html、css时随笔记录
css部分样式 圆框效果:border-radius:5px; 固定样式:position:fixed;悬浮窗在IE6中position:absolute其余浏览器可以用fixed: 使table中的 ...
- 初识HTML和CSS
HTML 1.一套规则,浏览器认识的规则. 2.开发者: 学习Html规则 开发后台程序: - 写Html文件(充当模板的作用) ****** - 数据库获取数据,然后替换到html文件的指定位置(W ...
- 0008 CSS初识(行内式、内部样式表、外部样式表)
typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表 学习目标 理解 css的目的作用 css的三种引入方式 应用 css三种引用方式的书写 通 ...
- CSS初识- 选择器 &背景& 浮动& 盒子模型
# CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 &g ...
- 2020年12月-第02阶段-前端基础-CSS初识
CSS层叠样式表 理解 css的目的作用 css的三种引入方式 1.HTML的局限性 说起HTML,这其实是个非常单纯的家伙, 他只关注内容的语义, 比如`<h1>`表明这是一个大标题,用 ...
- 003.前端开发知识,前端基础CSS(2020-01-07)
一.CSS初识 CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. ...
- Flex布局【弹性布局】学习
先让我们看看在原来的学习中遇到的问题 之前在软件工程的大作业中,自己从零开始学习如何开发一个网站,从页面,到后台,当然数据库是大二的必修课 在学习如何编写一个静态页面的时候,完全是自学,自己摸索,所以 ...
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
随机推荐
- POJ1848--Tree ——树形dp
题意:给你一个树,问你最少连几条边可以让树中的每一个节点在且只在一个环内.如果无法完成就输出-1. 我们设dp[i][0]为根节点为i的树变成每一个节点都在且只在一个环里所需要的最小边数.dp[i][ ...
- 深度学习环境搭建(ubuntu16.04+Titan Xp安装显卡驱动+Cuda9.0+cudnn+其他软件)
一.硬件环境 ubuntu 16.04LTS + windows10 双系统 NVIDIA TiTan XP 显卡(12G) 二.软件环境 搜狗输入法 下载地址 显卡驱动:LINUX X64 (AMD ...
- OpenVPN部署,实现访问云服务器的内网
本教程不描述如何FQ 一.OpenVPN服务端部署 $ yum -y install net-tools lzo lzo-devel openssl-devel pam-devel gcc gcc-c ...
- python中模块的__all__详细使用
python模块中的__all__,用于模块导入时限制,如:from module import * 此时被导入模块若定义了__all__属性,则只有__all__内指定的属性.方法.类可被导入:若没 ...
- Vue-admin工作整理(八): BUS | | 组件通信
一.父子组件之间通信 思路:定义一个个人组件,个人组件通常需要在前缀统一命名一下,如:AInput,该组件的作用是将编辑框中的内容获取并通过事件提交出去,然后在目标组件(store)中通过双向交互模式 ...
- C#操作Control异步工具类
/// <summary> /// 异步工具类 /// </summary> public class TaskTools { /// <summary> /// ...
- Vue小项目二手书商城:(一)准备工作、组件和路由
本项目基于vue2.5.2,与低版本部分不同之处会在(五)参考资料中提出 完整程序:https://github.com/M-M-Monica/bukesi 实现内容: 资源准备(mock数据) 组件 ...
- 创建X个任意元素数组并且可以遍历的的一个方法
方法一: Array.apply(null, { length: 20 })分析:apply 第二个参数应该是数组,现在把 { length: 20 } 转化为数组,就是一个长度为X的数组(类数组对象 ...
- react props与render成员函数
props是组件固有的属性集合,其数据由外部传入,一般在整个组件的生命周期中都是只读的,React的API顶层设计也决定了这一点.属性初值通常由React.createElement函数或者JSX中标 ...
- jmeter系列-如何实现像loadrunner一样,多个并发用户先通过登录初始化,然后做并发的接口性能压测
自动转开发后,就很少关注性能测试方面的东西,最近在帮朋友做一个性能压测,由于朋友那边的公司比较小,环境比较简单,而且是对http服务进行的压测,所以最终 选用了jmeter来实现这个压测. 如下就是我 ...