web前端 (04)XML 与 HTML

目录
XML
    DOM4J 生成XML文档
HTML
    HTML语法 熟悉
    HTML基础格式 案例 *****
    Head 与body 标签 熟悉
    在网页中 如何描述颜色 *
    在网页中 如何引入文件 : *
    在前段开发中, 如何制定长度单位 ***
    body子标签
    多媒体标签 *

DOM4J 生成XML文档 了解

Node接口的方法:
- 添加节点
Element element = node.addElement(“元素名称”);
- 添加属性
node.addAttribute(String 属性名称, String 属性值);

步骤:

1.  使用文档帮助器 (DocumentHelper) , 创建一个空的文档对象 ! 
    Document doc = DocumentHelper.createDocument();
2.  向文档中, 添加并得到一个根节点 
    Element books = doc.addElement("books");
3.  通过根节点, 丰富其子节点
    for(int i=0;i<10000;i++){
        //向根节点中, 加入子节点book
        Element book = books.addElement("book");
        //给子节点book 添加id属性
        book.addAttribute("id",10001+i+"");
        //给子节点book  添加子节点name ,并指定文本内容
        Element name = book.addElement("name");
        name.setText("图书名称"+i);
        //给子节点book  添加子节点info ,并指定文本内容
        Element info = book.addElement("info");
        info.setText("图书简介"+i);
    }
4.  得到一个字节输出流 ,用于输出创建的文档对象
    FileOutputStream fos = new FileOutputStream("c://books.xml");
5.  将字节输出流, 转换为XML输出流(XMLWriter)
    XMLWriter xw = new XMLWriter(fos);
6.  将文档输出 , 并释放资源 !
    xw.write(doc);
    xw.close();

HTML
简介 了解

超文本 标记语言 . 是用来描述网页的一种标记语言 !

W3C组织 定制与维护 HTML标准 !

93年 HTML1.0版本

95年 HTML2.0版本

97年 HTML3.0版本

97年 HTML4.0版本

99年 HTML4.01版本

2014年 HTML5.0

HTML文件 保存的后缀为: html 或 htm

HTML语法 熟悉

HTML与XML基本一致, 也是使用标签来编写文档内容, 但是规则相对松散 !

学习的是由W3C组织 定义和维护的 一系列的 标签名称 !

HTML基础格式 案例 *****

1. 文档声明
2. 文档头部
   
   
   
3. 文档内容
   Hello HTML

Head 与body 标签 熟悉

• head : 网页的头部信息, 用于描述网页

  子标签:
      -   title   :   网页标题
      -   meta    :   用于描述网页的内容类型 以及 文本编码, 也可以用于通知搜索引擎蜘蛛网页内容 !
      -   style   :   定义网页的层叠样式表 CSS
      -   script  :   用于定义网页脚本
  

• body : 网页主体内容部分 , 使用一些特定的标签,与丰富网页的内容 !

在网页中 如何描述颜色 *

方式1. 通过颜色单词 指定颜色值, 例如: red 红色

方式2. 通过R红G绿B蓝 三原色调色板 指定颜色:

        语法1.    #RGB
                由一个#号和3个16进制数字组成
                RGB的每一个颜色值, 表示一个16进制数字,    表示每一个颜色从暗 到 亮 !

        语法2.    #RRGGBB
                由一个#号和6个16进制数字组成
                RGB的每一个颜色值, 表示2个16进制数字,    表示每一个颜色从暗 到 亮 !

        语法3.    rbg(r值,g值,b值)
                RGB的每一个颜色值, 表示一个10进制数字,0-255之间,    表示每一个颜色从暗 到 亮 !

        语法4.    rbga(r值,g值,b值,a值)
                RGB的每一个颜色值, 表示一个10进制数字,0-255之间,    表示每一个颜色从暗 到 亮 !
                a值 表示透明度, 是一个0-1的浮点型数字,1表示不透明, 0表示完全透明 !

在网页中 如何引入文件 : *

两种方式:

方式1.    引入网络地址的  文件
        例如:     https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537952044027&di=980059f69e2c1719d57f78c85f4a51c7&imgtype=0&src=http%3A%2F%2Fdesk.fd.zol-img.com.cn%2Ft_s960x600c5%2Fg2%2FM00%2F04%2F0A%2FCg-4WVWJFFeIB24uAATmpLM-hh0AAF2ZAEnXDQABOa8838.jpg


方式2.    引入本地相对路径的文件 

        相对路径: 
            相对路径描述的文件, 表示相对于当前代码所在路径 描述的文件 !
            例如: 
                代码所在路径:     c://html/demo1.html
                代码中出现了images/1.jpg 的相对路径
                则此路径表示的文件路径为:  c://html/images/1.jpg

在前段开发中, 如何制定长度单位 ***

常用:
- px : 像素
- em : 是一种相对字体大小的 单位, 1em表示当前字体大小 !
- 百分比: 元素占用父元素的 宽高百分比 !

不常用:
- pc : 派卡
- in : 英寸
- mm : 毫米
- cm : 厘米
- pt : point 点

body子标签

• 任何标签都可以添加 title属性 , 当鼠标悬停时 , 会弹出显示title值 ***

1. body 标签的属性: 了解
   - bgcolor : 用于设置背景颜色
   - background : 用于设置背景图片
   - text : 用于设置文本内容的颜色

2. 标题标签 *
   

   
   
   
   … h1 表示一级标题, h2表示二级标题 … h6表示六级标 题
   … 标题指的是加粗的文本
   

3. 文字格式化标签 了解
   文本加粗
   文本斜体
   文本添加删除线
   下划线
   

   内容居中

4. 空格 换行 段落 等特殊符号 了解

     表示空格
   < <
   > >
   & &
   © ©
   ® ®
   ¥ ￥

   
   换行

   ---

   分割线
   p标签表示一个段落

5. 超链接 a标签 *

   用于链接一个 网址/锚点/手机号码/邮箱等等的 工具标签.
   

   语法格式:

   -   跳转到网页 ***
       <a href="网页的路径">提示的文本</a>
       案例:
           <a href="https://www.baidu.com/s?wd=美女大图">去百度搜索美女大图</a>
   
   -   新窗口打开网页 ***
       <a target="_blank" href="网页的路径">提示的文本</a>
   
   -   拨打电话 (常用于手机网页, 可直接调出拨号页面)
       <a href="tel:手机或电话号码">提示的文本</a>
   
   -   启动邮件发送 软件 (必须有对应的软件)
       <a href="mailto:邮箱地址">提示的文本</a>
   
   -   锚点使用  了解
   
       步骤1.    建立锚点 :  给空的a标签, 添加name属性 , name属性的值就是锚点名称 !
   
       步骤2.    编写超链接, 绑定到指定的锚点: 
               -   绑定同一个页面的锚点
                   格式: <a href="#锚点名称">提示的文本</a>
               -   绑定其他页面的锚点
                   格式: <a href="页面的地址#锚点名称">提示的文本</a>
               -   跳转到当前页面的顶部: 
                   格式: <a href="#">提示的文本</a>
   

6. div块元素 与 span行内 *
   元素的三种分类:
   - 块元素: 一个元素独占一行 ,不与其他兄弟元素 同行显示 ! 多个块元素之间 上下排列 ! 可以调整宽度与高度

       -   行内块元素:  显示的时候, 与其他的行内块元素或 行内元素 共享一行空间 , 从左至右排列, 一行排满自动换行 ! 可以调整宽度与高度
   
       -   行内元素:   显示的时候, 与其他的行内块元素或 行内元素 共享一行空间 , 从左至右排列, 一行排满自动换行 ! 无法调整宽度与高度
   

多媒体标签 *

• 图片标签 img ***
  属性:
  - src : 图片资源地址
  - alt : 当图片加载失败是, 提示的文字
  - width : 宽度
  - height : 高度
  注意: 在单独设置宽度或高度时 , 另一个属性 会按照宽高比例 进行缩放 !
  不建议同时设置宽度与高度, 会导致图片拉伸 变形

• 音乐标签 audio ( html5新增 ) *
  属性:
  - src : 音乐文件的地址
  - controls : 是否显示控制器 , html5的boolean类型属性, 属性一旦出现,无论值为多少, 则表示为true
  - autoplay : 是否自动播放 , html5的boolean类型属性

• 视频标签 video ( html5新增 ) *
  属性:
  - src : 视频文件的地址
  - controls : 是否显示控制器 , html5的boolean类型属性, 属性一旦出现,无论值为多少, 则表示为true
  - autoplay : 是否自动播放 , html5的boolean类型属性
  - width : 播放窗口的宽度
  - height : 播放窗口的高度

• 动画标签embed(HTML5新增标签) 了解 (常用于播放flash动画, .swf文件)
  属性:
  - src : 动画文件的地址
  - width : 播放窗口的宽度
  - height : 播放窗口的高度