Html/Css 初步认识笔记
1.什么是 HTML ?
- HTML(HyperText Markup Language) 的学名是超文本标记语言。
- 标记用来表示网页内容要如何显示,自身不显示 。<我就是标记>
- 标记成对出现,内容放在中间,标记对可以简写。 <开始标记>我是内容</结束标记> <我是简写的标记/>
- 标记的尖括号内一般包括 标记名 和 属性。
<标记名 属性名 = "属性值">内容</标记名>
简写 <标记名 属性名 = "属性值"/>
<a>内容</a> 表示其内容是可以点击的链接文字
<img / > 标记表示这是一个图片
2.Html 网页文件的结构
- Html 网页文件都以 <!DOCTYPE html> 开始
- 网页内容从<html>开始到</html >结束
- 网页内容分为 头部<head> 和主体<body> 两部分
Head 可以放置标题 title 和其他信息,帮助浏览器解析网页。
Body 标记内的内容才会显示在网页上,网页的主体,
3. head 标记里面可以放什么?
- 页面的标题 <title> <title>我的网页</title> 这个标题将显示在浏览器页面顶部的标签卡上面
- 元信息标记 <meta> meta 标记的属性可以包含页面的各种信息
格式为 <meta 属性名="属性值"/> 或 <meta name = "属性名" content = "属性值"/>
- 页面的编码 <meta charset = "utf-8"/> 设置页面编码为 utf-8 模式,确保中文的 title 显示正常
- 页面作者信息 <meta name = "author" content = "小明"/>
- 加载外部文件 <link rel = "icon" href = "图片链接"/> 表示链接中的图片将作为标题栏的小图,注意图片的地址只能是自己网站的图片
- 其他信息
- 页面内容介绍
- 所关键字
- 页面使用哪国语言
- 页面在移动设备上如何显示
- 加载其他文件(CSS JS)
4.Body标记 里面可以防放什么?
- div 容器盒子 <div> 任何东西</div> 常用的将页面划分为多个框架的标记,整个页面 body 被分割成多个 div 容器盒子
- img 图片 <img src="图片地址"/>
还可以添加下面两个属性设置图片大小 宽度 width = "100" 高度 height = "200"
alt = "如果图片找不到就显示这里的文字"
- a 超链接 <a herf = "要打开的网页地址">显示的文字</a>
如果需要在新的窗口中打开页面,需要添加 target =" _black"
- input 输入框 <input type = "text"/>
类型 type 还可以是别的,比如 password 密码框,显示成星号或点 checkbox 勾选框
- 演示更多标记
- 不换行的 span
- 换行的 br
- 标题从大到小的 h1~h6
- 段落标签 p
- 有序列表 ol 和无序列表 ul
4.什么是 CSS?
CSS(Cascading Style Sheets)的学名是层叠样式表。
- 样式 Style <div style = "background:red">文字</div>
样式描述标记内容如何显示或者表示,比如元素的颜色(color 和 background)、文字(front-size)、边框(border)、位置和边距(外边距 margin 、内边距 padding)等。
样式可以写在 html 标记的属性中 <style = "样式名:样式的值;样式名:样式的值 "/>
5.CSS选择器一起改变多个元素的样式
- 选择器
- 选择器就是把符合某个规则的元素(标记对)都选出来
这些规则可以是:
- 都是同类型的标记,比如 div
- 具有某个相同属性名,或者属性值也相同的标记
- CSS 选择器可以写在<style></style> 标记中 ,格式如下
- 常见的 CSS 选择器
- 标记选择器:可以修改所有相同标记名元素的样式
- .class 类选择器:可以修改具有指定 class 属性值的元素的样式
- #ID 选择器:可以修改具有指定 id 属性值的元素的样式
- [属性] 选择器:可以修改具有任意属性的元素的样式
- CSS 选择器的组合使用
- 选择后代元素 :可选出所有嵌套的内部元素
- 常见的 CSS 选择器
- 选择子层的元素 :可选出所有嵌套的子层元素,不包括孙层或更低后代
- 选择相邻的兄弟元素 :可选出同层的后面一个元素
- 使用伪类选择器选择某状态的元素 :改变元素不同状态的样式
5.使用 CSS 样式做动画
- 设计动画
- 定义动画
- 指定到需要动画的元素
6.html 文件中加载 css 文件
- 可以在三个地方编写 css 样式
- html 文件的元素的 style 属性内
- html 文件的 style 标记内
- 单独的 css 文件里
- html 文件内使用 <link> 标记加载
7.什么是 js?
- JavaScript 是一种编程语言,是最通用的网页编程语言。
- js 可以直接指挥 html 和 css,让网页动起来和用户交互。
- html、css、js 的关系
- html 定义网页上的内容,即网页上有什么。
- css 定义网页上元素的外观,即看上去什么样。
- js 即网页的行为,可以操控一切,创造动态效果,让网页可以响应用户的操作,即决定了网页怎么动,怎么用。
- 可以在三个地方编写 js 代码
- 直接写在标记的事件属性值内,如 onclick = "js 代码"
- 直接写在 html 文件的 <script><script/> 标记内
- 写在单独的 js 文件中,再在 html 文件内用 <script src= "js文件地址">载入
8.数据和变量
- 什么是数据?
- 数据是用来描述物体属性或动作参数的值
- 最基本的三种数据:数字、字符串(文字)、数组(集合)
- 可以对数据进行操作
- 常用的格式
- 什么是对象?
- 对象用来描述整个物体
- 格式
属性值可以使数据也可以是另一个对象
- 什么是变量?
- 变量就是给对象或者数据起的临时外号、别名
- 格式
9.用 js 操纵 html 和 css
- 创建 html 元素(标记对)
- 把创建的元素添加到页面上
如果要添加其他元素
- 获取页面上的元素
- 修改元素的文字
- 修改元素的属性
- 修改元素的 css 样式
- 删除元素
10.用函数为元素添加点击动作
- 函数
- 函数是多个命令的组合
- 新建函数
- 运行函数
- 把函数指定到元素事件
11.数字的基本操作
- 指定小数位数和取整数
- 生成0-1 之间随机数
如果要0-10的随机数则 ×10 去掉小数部分
- 非数字类型数据或对象转化为数字对象 Number(任意数据类型)
12.字符串的基本操作
- 单引号和双引号
- 字符串可用单引号也可用双引号,但不能混用。
- 双引号内嵌套的字符串只能用单引号,反之亦然。
- 转义字符
- 显示带引号的字符串,应使用 \'' 或\'
- 回车换行 \n 表示新开一行 ; \r表示结尾回车
- 斜杠用 \\表示
- 非字符串数据或对象转化为字符串对象 String (任意数据类型)
- 截取字符串中间的一小段
注意下标是从0 开始的
- 查找字符串
如果找到了,n 是子字符串在字符串中的位置的数字
n = 0,从开头就找到了
n = -1,没有找到
- 替换字符串
13.操作数组
- 数组是一组数据或对象的集合
- 数组的长度
arr.length();
- 获取数组中的成员
- 单个成员 arr[下标]
- 多个成员
- 添加新成员
arr.push(新成员)
- 插入或删除多个成员
- 搜索成员
arr.indexOf(成员);
- 字符串变为数组
str.spilt("分隔符"); 以某种分隔符将字符串拆分成一个数组
14.日期和时间数据
- 获取当前时间和日期
var now = new Date(); Date 是一个对象,是一种数据格式
- 单个获取各个数值
- 单独修改各个时间数值
15. js 操作颜色数据
- 颜色表示格式
- 'rgb(红色值,绿色值,蓝色值)
- 增加不透明度 alpha 值 0-1 'rgba(红色值,绿色值,蓝色值,不透明度值)
- 颜色的 16进制表示法
- 格式 ' #红色绿色蓝色' 是字符串 这里的红色绿色蓝色都是16进制,满红满绿是黄,满红半绿是橙
- 十进制转十六进制
- n.toString(16);
- 16 进制表示的颜色与随机颜色值
16. js动画与计时器
- 用计时器制作动画
- 使用 setInterval 命令使代码每隔一段时间执行一次
- 使用 setTimeout 命令使代码等待一段时间后执行(不重复)
- 使用 clearInterval 和 clearTimeout 取消定时器
17.再看数据、函数和对象
- 均可用变量指代
- 函数
- 对象的属性可以是数据,也可以是函数(方法)
- return什么 函数当作什么用
方法执行后返回值 为 小明
- 对象['属性名']
Html/Css 初步认识笔记的更多相关文章
- CSS揭秘读书笔记 (一)
CSS揭秘读书笔记 (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px solid hsla(0,0%,100%,.5); background: ...
- css居中学习笔记
css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...
- 《CSS揭秘》笔记(一)
前言 我们在现代 CSS 中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器 bug.如今的挑战是,在保证 DRY ① .可维护.灵活性.轻量级并且尽可能符合标准的前提下,把我们手中的这些CSS特性 ...
- CSS 3 学习笔记
css 3 学习笔记 文本: word-wrap : normal | break-word取值:normal: 控制连续文本换行.break-word: 内容将在边界内换行.如果需要,词 ...
- Android NDK开发及OpenCV初步学习笔记
https://www.jianshu.com/p/c29bb20908da Android NDK开发及OpenCV初步学习笔记 Super_圣代 关注 2017.08.19 00:55* 字数 6 ...
- css随堂笔记(三)
Css随堂笔记(三) 1 关于背景图片 A 设置背景图片:background-image:url(“图片的路径”): B 背景图片位置: background-position:1 方位名词 ...
- (2)《Head First HTML与CSS》学习笔记---img与基于标准的HTML5
1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...
- 工厂方法FactoryMethod 初步学习笔记
一,意图 定义一个用于创建对象的接口,让子类决定实例化哪一个类.工厂方法使一个类的实例化延迟到其子类. 二,别名 虚构造器 Virtual Constructor 三,适用性 当一个类不知道它 ...
- 《CSS世界》笔记二:盒模型四大家族
上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margin ...
随机推荐
- 关于JavaScript的操作
一:js基础. 1. var是定义js变量的关键字. 如: var leng=5;定义一个变量为5 var length = 16; // Number 通过数字字面量赋值 var points = ...
- 关于elasticsearch function_score的使用
最近做新闻推荐系统,新闻搜索采用的是elasticsearch引擎,为了使推荐更接近用户偏好,搜索时使用了function_score功能对文档进行了重新打分,改变排序规则.以下介绍关于functio ...
- 从Redis生成数据表主键标识
对于MySql的全局ID(主键),我们一般采用自增整数列.程序生成GUID.单独的表作为ID生成器,这几种方案各有优劣,最终效率都不能说十分理想(尤其海量数据下),其实通过Redis的INCR可以很方 ...
- Testing - 软件测试知识汇总
软件测试知识梳理 基础概念 : http://www.cnblogs.com/anliven/p/6070000.html 测试分类 : http://www.cnblogs.com/anliven/ ...
- Python常用模块——json & pickle
序列化模块 1.什么是序列化-------将原本的字典,列表等对象转换成一个字符串的过程就叫做序列化 2.序列化的目的 1.以某种存储形式使自定义对象持久化 2.将对象从一个地方传递到另一个地方 3. ...
- odoo开发笔记 -- 传递上下文实现列表视图按照指定条件过滤显示
按钮传递上下文: <xpath expr="//div[@name='dec_work_sheet_id']" position="after"> ...
- .Net开源myrtille远程连接服务(支持SSH)
今天在博客园首页,无意中看到一篇文章(https://github.com/Microsoft/dotnet/blob/master/dotnet-developer-projects.md),于是对 ...
- Python学习的路上,Anaconda送你一双遮天神翼
一.背景 最近在学习python,发现在本地搭建python环境的时候,要是想要同时搭建不同python版本的环境,就比较麻烦,很容易就出现冲突了,很是头疼.然后光明就出现这山重水复疑无路的时候, ...
- mac在命令行中打开某个文件夹
使用 open 命令,如打开 ~/Download/abc open ~/Download/abc
- go中的读写锁RWMutex
读写锁是针对于读写操作的互斥锁. 基本遵循两大原则: 1.可以随便读.多个goroutin同时读. 2.写的时候,啥都不能干.不能读,也不能写. 解释: 在32位的操作系统中,针对int64类型值的读 ...