web前端知识梳理——HTML5(一)

一.Web基础知识(了解) 
  web与Internet
  1.Internet
  全球性计算机互联网络,简称因特网,互联网,交互网.
  2.Internet上的应用程序
    1.c/s  --可执行的桌面应用程序,需要下载安装更新
      c:client客户端  
      s:server服务器
    2.b/s ---类似京东 
      b:browser浏览器 
      s:server 服务器
    3.web
         web:运行在Internet之上的一种B/S结构的应用程序,俗称:网站
         web的工作原理:基于浏览器和服务器以及通信(http)协议实现信息的传输和展示
         浏览器:chrome,IE,firefox,opera(挪威的,欧洲用的多),safari
         服务器:NODEjs,java,php,pyhton,.net
         通信协议:HTTP协议,规范数据如何打包和传输
  4.浏览器技术(前端技术)
    HTML,JS,CSS


二.HTML快速入门(掌握)
  1.什么是HTML
    HyperText Markup Language 超文本标记语言
   
    超文本:超出普通文本的功能    a:普通英文首字母 超级链接
    标记:是标记,带有尖括号
    语言:都有自己的语法

  2.特点
    1.由浏览器解析执行
    2.用带有尖括号的"标记"来标识的
    3.以.html或.htm为后缀
    4.网页中可以嵌套脚本语言(js)

三.HTML的基础语法(掌握)
  1.标记
    标记:又称为元素或标签,在网页中,主要用来表示一些功能
    标记分类:
      1.封闭类型
        也称为双标记,必须成对出现,有开始有结束标记.
        语法:<标记>文本
        ex:百度

             加粗

      2.非封闭类型
        也称为单标记,或空标记
        语法:<标记>--或<标记/>-----html5都兼容
        ex:或
           
或

           

---

或

---

  2.标记嵌套
    1.什么是嵌套
      在一对标记中出现另外一对或一个标记,从而形成功能的层叠.
     2.语法
       <标记1>
          <标记2>
              内容
         
       
      ex:
     
       
           
       
     
        注意：
          1.嵌套顺序，成对出现
          2.标记换行缩进
  3.属性和值
      允许通过属性的方式对标记进行修饰
      语法:
        1.属性必须声明在开始标记中
          <标记 属性名="值">
        2.多个属性之间用空格隔开即可
          <标记 属性名="值" 属性2="值2"...>
  4.标准属性（通用属性）
      id:唯一标识(名称),id值一定不能重复
      title:鼠标悬停在元素上时所提示的文本
      class:在css中使用,引用类选择器
      style:在css中使用,定义元素的行内样式
  5.注释
    语法:
    注意:
     1.注释本身不能嵌套 --> 错误!!会多一个 -->
     2.注释不能嵌套在标记中

四.HTML文档结构(掌握)
  1.HTML文档结构组成
    1.文本类型的声明
      作用:告诉浏览器HTML的版本类型
      语法: -html5写法
        在最顶端编写
    2.HTML页面
        在文档类型的声明下方紧挨着写一对html标记
       
        作用:表示整个页面的开始与结束
        在html中分两部分:
          1.
            作用:表示网页的头部,定义全局信息
          2.
            作用:定义网页的主体内容
         3.
            1.head是其它头元素的容器
              ①:定义网页的标题
              ② ----ex:京东例子
                //设置文档字符集
              ③
              ④
         4.body元素
          写网页的主体内容
          body标记的属性
            text:修饰文本颜色
            bgcolor:背景颜色(注意:不是background(css写法)!!)
            这两个只能在body标签里用

五.文本标记
  1.特殊字符
     表示一个空格
    <  表示"<"
    > 表示">"            <p> </p>

    © 表示版权符号©
    ¥   表示¥
    ®    表示注册商标®
    × 表示关闭×号
    
  2.文本样式
    1.:加粗
    2.: 斜体
    3.:下划线
    4.:删除线
    5.:下标
    6.:上标
    
  3.标题元素
    作用:在页面中以醒目的方式显示文本
    语法:
      n:1-6
     

文本

:一级标题
      ...
     

文本

:六级标题
    特点:
      1.独占一行
      2.加粗,并且字体大小可以变化
      3.单独成行,上下文之间有空白间距
    属性:
      align:设置内容的水平对齐方式--取值:left/center/right
  4.段落标记
    语法:

    作用:以突出显示一段文本
    特点:单独成行,上下文之间有空白间距(p的空白间距要比

大,div没有额外的空白间距)
    属性:
      align:left/center/right
  5.换行元素
    语法:
或

    作用:让文本换行显示
  6.水平线
    语法:

---

或

---

    作用:在网页中表示一根水平线
    属性:
      size:表示水平线的尺寸(高度),取值以px为单位的数字.
      width:表时水平线的宽度,取值以px为单位的数字或者百分比
      align:水平线的对齐方式,取值left/center/right
      color:水平线的颜色,取值为合法的颜色值
    
  7.预格式化
    语法:

    作用:保留HTML中回车和空格   --我发现:文字要比正常的小

  8.分区元素
    1.块分区元素
      作用:用于页面中布局效果
      语法:

    2.行分区元素
      作用:在网页中处理同一行文本的不同样式
      语法:
  9.行内元素与块级元素
    1.块级元素
      在网页中独占一行,内容从上往下显示就是块级.
      常见的块级元素:
        标题元素h1~h6
        段落元素p
        div (pre)
    2.行内元素
      在网页中,多个元素在一行中从左往右显示.
      常见的行内元素:
        a/b/u/i/s/sub/sup/span
    3.行内块 显示呈行内元素的效果,但是具备块级的特点(比如:可设置宽高)
    4.table
    补充:
      1.段落标记自己不能嵌套自己(p)
      2.块级中嵌套行内元素


六.图像和链接
    1.URL
      1.目录结构
        文件目录:文件夹嵌套结构
      2.URL
        URL:Uniform Resource Locator统一资源定位器,俗称路径
      3.路径的表现形式
        1.绝对路径
          完整路径,一定可以找到你想找的文件
          网络资源:
              协议+主机名称+文件目录结构+文件名称
          本地资源:
              从最高盘符比如c:\xampp\htdocs\Day01
        2.相对路径(重点)
          相对于当前某个文件位置,从它出发所经过的路径就是相对路径.
            (1).同级目录
              直接引用文件 
              ex: "2.jpg"
            (2).子级目录
              先进入文件夹,再引用
              ex: img/1.jpg
            (3).父级目录
              先返回上一级,再引用
              ex: ../3.jpg
          ps:属性值 可加引号也可以不加
        3.根相对路径
          ex: /myPro/demo.html