Html/Css 初步认识笔记

2018-06-24 00:55:03来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

 

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什么 函数当作什么用

    

            方法执行后返回值 为 小明

  • 对象['属性名']

    

    

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS中:visited的隐私保护

下一篇:css3弹性盒子模型——回顾。