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 选择器的组合使用
      • 选择后代元素 ：可选出所有嵌套的内部元素

　　　　　　　　

      • 选择子层的元素 ：可选出所有嵌套的子层元素，不包括孙层或更低后代

　　　　　　　　　

      • 选择相邻的兄弟元素 ：可选出同层的后面一个元素

　　　　　　　   　

      • 使用伪类选择器选择某状态的元素 ：改变元素不同状态的样式

　　　　　　　　　

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 初步认识笔记的更多相关文章

  1. CSS揭秘读书笔记 （一）

    CSS揭秘读书笔记      (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px  solid  hsla(0,0%,100%,.5); background: ...

  2. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...

  3. 《CSS揭秘》笔记（一）

    前言 我们在现代 CSS 中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器 bug.如今的挑战是,在保证 DRY ① .可维护.灵活性.轻量级并且尽可能符合标准的前提下,把我们手中的这些CSS特性 ...

  4. CSS 3 学习笔记

    css 3 学习笔记 文本: word-wrap : normal | break-word取值:normal:    控制连续文本换行.break-word:    内容将在边界内换行.如果需要,词 ...

  5. Android NDK开发及OpenCV初步学习笔记

    https://www.jianshu.com/p/c29bb20908da Android NDK开发及OpenCV初步学习笔记 Super_圣代 关注 2017.08.19 00:55* 字数 6 ...

  6. css随堂笔记（三）

    Css随堂笔记(三) 1 关于背景图片   A 设置背景图片:background-image:url(“图片的路径”):   B 背景图片位置: background-position:1 方位名词 ...

  7. （2）《Head First HTML与CSS》学习笔记---img与基于标准的HTML5

    1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...

  8. 工厂方法FactoryMethod 初步学习笔记

    一,意图   定义一个用于创建对象的接口,让子类决定实例化哪一个类.工厂方法使一个类的实例化延迟到其子类. 二,别名   虚构造器 Virtual Constructor 三,适用性 当一个类不知道它 ...

  9. 《CSS世界》笔记二：盒模型四大家族

    上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margin ...

随机推荐

  1. 关于JavaScript的操作

    一:js基础. 1. var是定义js变量的关键字. 如: var leng=5;定义一个变量为5 var length = 16; // Number 通过数字字面量赋值 var points = ...

  2. 关于elasticsearch function_score的使用

    最近做新闻推荐系统,新闻搜索采用的是elasticsearch引擎,为了使推荐更接近用户偏好,搜索时使用了function_score功能对文档进行了重新打分,改变排序规则.以下介绍关于functio ...

  3. 从Redis生成数据表主键标识

    对于MySql的全局ID(主键),我们一般采用自增整数列.程序生成GUID.单独的表作为ID生成器,这几种方案各有优劣,最终效率都不能说十分理想(尤其海量数据下),其实通过Redis的INCR可以很方 ...

  4. Testing - 软件测试知识汇总

    软件测试知识梳理 基础概念 : http://www.cnblogs.com/anliven/p/6070000.html 测试分类 : http://www.cnblogs.com/anliven/ ...

  5. Python常用模块——json & pickle

    序列化模块 1.什么是序列化-------将原本的字典,列表等对象转换成一个字符串的过程就叫做序列化 2.序列化的目的 1.以某种存储形式使自定义对象持久化 2.将对象从一个地方传递到另一个地方 3. ...

  6. odoo开发笔记 -- 传递上下文实现列表视图按照指定条件过滤显示

    按钮传递上下文: <xpath expr="//div[@name='dec_work_sheet_id']" position="after"> ...

  7. .Net开源myrtille远程连接服务（支持SSH）

    今天在博客园首页,无意中看到一篇文章(https://github.com/Microsoft/dotnet/blob/master/dotnet-developer-projects.md),于是对 ...

  8. Python学习的路上，Anaconda送你一双遮天神翼

    一.背景 ​ 最近在学习python,发现在本地搭建python环境的时候,要是想要同时搭建不同python版本的环境,就比较麻烦,很容易就出现冲突了,很是头疼.然后光明就出现这山重水复疑无路的时候, ...

  9. mac在命令行中打开某个文件夹

    使用 open 命令,如打开 ~/Download/abc open ~/Download/abc

  10. go中的读写锁RWMutex

    读写锁是针对于读写操作的互斥锁. 基本遵循两大原则: 1.可以随便读.多个goroutin同时读. 2.写的时候,啥都不能干.不能读,也不能写. 解释: 在32位的操作系统中,针对int64类型值的读 ...