学习前端的第四天

学了如下内容：

1、软件开发
  >> 结构：
    C/S
    B/S

  >> web（万维网）
    基于 超文本 和 HTTP 的交互式图形信息系统。

  >> IP
    类似 133.168.179.107

  >> 域名
    https://www.baidu.com/

  >> 浏览器
    IE（Edege）
    Firefox（火狐）
    safari
    Chrome
    欧朋

  >> w3c 组织（万维网联盟）

2、HTML
  2.1 理解
    超文本标记语言。

  2.2 历史
    HTML1
    HTML2
    HTML3
    HTML4(1999年发4.01)
    HTML5（2008年发布草案。2014年正式发布）

    XHTML

  2.3 基本结构
    DOCTYPE：文档声明部分。
    
    html：网页的根标签，放在最外层，一个网页只会出现依次。
      lang="en"：规定当前语言类型为英文。
      lang="zh"：规定当前语言类型为中文。
    
    head：
      网页头部，主要用于记录网站相关信息。

      <meta charset="UTF-8"> 编码
      <title>Document</title> 网页标题

    body：
      网页主体内容，主要代码编辑区域，用于展示网页内容。

  2.4 html 语法
    * 所有的标签都应该包含在 <> 起止符之间；
    * 大部分的标签都有开始标签和结束标签；
    * 标签可以拥有属性，属性总是以 属性名='属性值' 这样的键值对出现，多个属性通过空格隔开；
    * 标签可以嵌套；
    * 标签名大小写都可以，但是统一建议小写；
    * HTML 文档的后缀名为 .html 或者 .htm；
    * 注释 <!-- 注释内容 -->：不会渲染的，用于文档说明。快捷键：ctrl + /
    * 写一个标签要换行。
    * 父子标签要有缩进。

  2.5 常见标签
    >> h1~h6：
      标题标签，效果是加粗和字体大小的变化。

    >> p：
      段落标签，主要用于文本展示。

    >> div：
      块级标签，没有意义的标签，一般用于布局。

    >> span：
      文本标签，没有意义的标签，一般用在需要突出显示文字的时候。

    >> b：
      文字加粗标签，一般不建议使用，加粗效果可以通过 css 实现。

    >> strong：
      拥有文字加粗效果，还有语气加重的含义。

    >> i：
      文字斜体效果，不建议使用，可以通过 css 实现。

    >> em：
      文字斜体，有语气加重。

    >> small：
      比一般的文字小一点。

    >> sub：
      下标。

    >> sup：
      上标。

    >> del：
      被删除的文本。

  2.6 超链接
    <a></a>

    >> href 属性
      默认进行链接跳转，设置跳转地址的时候必须加上 http 或者 https。

      * 超链接 <a href="http://www.baidu.com">百度</a>
      * 执行 JS 代码 <a href="javascript:alert(123);">执行 JS 代码</a>
      * 打电话 <a href="tel:13562698714">打电话</a>
      * 发短信 <a href="sms:13562698714">发短信</a>
      * 发邮件 <a href="mailto:fay@163.com?subject=邮件主题&bodu=邮件内容">发送邮件</a>
    
    >> dowload 
      下载

    >> title（绝大部分标签都有该属性）
      鼠标停留在该标签上时，会显示的文字。

    >> target：
      一般用于链接跳转，代表当前打开的链接在什么位置显示。

      _blank：在新标签页打开；
      _self：在当前标签页打开；
      _top：在顶层窗口打开；
      _parent：在窗口打开；

  2.7 图片
    <img> 或者 <img />

    >> src：
      图片地址。

      >>> 绝对地址：
        http://www.baidu.com

        c:/

      >>> 相对地址：
        * 兄弟关系：图片名.后缀名
        * 文件与图片的父级是同级：图片所在文件夹名/图片名.后缀名
        * 文件父级与图片同级：../图片名.后缀名
        * .. 代表返回上一级

    >> alt 
      图片无法展示的时候显示的文字信息。

  2.8 媒体
    >> 音频
      audio：支持格式为 mp3，wav，ogg
        controls：控制工具属性。
        loop：循环。
        muted：静音。
        autoplay：自动播放，但是目前绝大部分浏览器禁用勒。

    >> video：支持格式 mp4，webm，ogg
      controls：控制工具属性。
      loop：循环。
      muted：静音。
      autoplay：自动播放，但是目前绝大部分浏览器禁用勒。
      width
      height

  2.9 其他
    >> code
      单行代码包裹标签。

    >> pre 
      预格式化文本，换行和空格会被保留。

    >> br 
      换行标签。

    >> hr
      横线。

  2.10 实体符号
    空格：&nbsp;
    大于符号：&gt;
    小于符号：&lt;

  2.11 列表
    >> 有序列表
      <ol>
        <li></li>
      </ol>

    >> 无序列表
      <ul>
        <li></li>
      </ul>

      type：disc、circle、

    >> dl、dt、dd

3、标签的分类
  3.1 两大类型
    >> 内联标签
      * 不会独占一行
      * 排列方向从左往右依次排列，直到当前行排不下的时候会换行
      * 宽度由内容决定
      * 包含：span、a、img、strong、i、em、b

    >> 块级标签
      * 会独占一行
      * 排列方式是从上往下依次排列
      * 当前标签的宽度是父标签宽度的 100%
      * 包含：h1~h6、div、p、ul、ol、li

  3.2 标签嵌套规则
    * 原则上块级标签可以嵌套块级标签和内联标签；
    * 内联标签原则上只能嵌套内联标签；
    * p 和 h1~h6 只能嵌套内联标签；
    * ul 和 ol 只能嵌套 li，li 可以嵌套任意标签；