HTML的认识

Share

一

（一）什么是HTML

超文本标记语言，最基础的网络语言

（二）常用名词

  1. WWW万维网
  2. URL 统一资源定位器，路径、网址
  3. http 超文本传输协议
  4. W3C万维网联盟是一个官方的组织，制定一系列规范

    （三）五大浏览器

  5. IE
  6. 火狐
  7. 谷歌
  8. 苹果
  9. 欧鹏

    （四）DW设置

  10. 设置代码提示：编辑——首选参数——代码提示——键入开始标记>
  11. 字号：编辑——首选参数——字体——建议16号
  12. 行数，自动换行：查看——代码视图选项——勾选行数，自动换行

    （五）显示后缀名

    打开任意文件夹——组织——文件夹和搜索选项——查看——不勾选隐藏已知文件类型扩展名
    win10打开任意文件夹——查看——勾选文件扩展名
    ##（六）html的语法
  13. 单标记<标签名/>
    eg: <br/>
  14. 双标记<开始标记></结束标记>
    eg:<h1></h1>

    (七)html的常用标记

  15. <h1></h1>:h1-h6. 标题标记; 注意：标题标记不是用来控制文字大小的，控制标题的层级关系，一个页面中h1尽量只出现一次。
  16. <br/> 换行
  17. <hr/>水平线
  18. <p></p>段落标记
  19. <b></b>加粗
  20. <i></i>倾斜
  21. <u></u>下划线
  22. `删除线

    （八）Web标准的构成

    结构(html)+表现(css)+行为(javascript)

    （九）html的基本机构（骨架）

    1
    2
    3
    4
    <html>
        <head><title></title></head>
        <body></body>
    </html>

(十)DW默认代码

  1. Doctype文本声明，让不同的浏览器按照一个规范显示页面。
  2. Meta信息头标记 设置编码(字符集)

    （十一）插入图片

    <img src="图片的路径"/>
    语法：<标签名 属性名=”属性值”/>
    注意：所有的标签符号必须在英文输入状态下书写！
    IMG里的属性
  3. src图片的来源
  4. Alt替换文本（图片不能正常显示时）
  5. Title图片标题
  6. Width 宽度
  7. height 高度
  8. border 边框

    （十二）路径

  9. 绝对：带有盘符或完整的网络地址
    eg:F:/day01/1.jpg.
    http://www.baidu.com/jpg
  10. 相对：不带有盘符，不能跨盘符
    eg:../day01/1.jpg
  • 种类：
    1. 同级查找：直接写被查找文件
    2. 下级查找：写被找文件路径
    3. 上级查找：返回上一级——写被找文件路径

      （十三）html中的注释

      <!--注释-->

      （十四）链接

      <a href="链接的路径"></a>
  • 种类：
    1. 网络链接
    2. 本地链接
    3. 图片链接
    4. 空链接：href=”#”
      注意：实际工作中绝对不会使用带有盘符这种的绝对路径
  • a里的属性
    1. href：链接的路径或网址
    2. “target”_blank 新窗口打开

      二

      （一）列表

  1. 无序

    1
    2
    3
    <ul>……声明无序列表
        <li></li>……列表项（有多个）
       </ul>

  2. 有序列表

    1
    2
    3
    <ol>
        <li></li>
    </ol>

  3. 定义列表

    1
    2
    3
    4
    <dl>……声明定义列表
        <dt></dt>
        <dd></dd>……对项目的描述（dd可以有多个）
    </dl>

(三)表格

  • 表格基本结构

    1
    2
    3
    4
    5
    <table>……声明表格
        <tr>……行
        <td></td>……列（单元格）
        </tr>
    </table>

  • table的属性

    1. border 边框
    2. width 宽度
    3. height 高度
    4. align 水平对齐方式
    5. bgcolor 背景颜色
    6. background 背景图片
    7. cellspacing 单元格与单元格之间的距离
    8. cellpadding 内容与单元格之间的距离
  • tr里的属性
    1. height 高
    2. align 水平对齐方式
    3. valign 垂直对齐方式
    4. bgcolor 背景颜色
    5. background 背景图片
  • td里的属性
    1. width
    2. height
    3. aligh
    4. valigh
    5. bgcolor
    6. background
    7. colspan 跨列
    8. rowspan 跨行

      （四）表单

      手机用户信息的
  1. 声明表单
    <form action="表单提交的地址" method="表单提交的方式"></form>
  2. 表单元素
    1）文本框 <input type="text"/>
    2）密码框<input type="password"/>
  3. 单选按钮<input type="radio" name="" value=""/>
  4. 多选按钮<input type="checkbox" name="" value=""/>
  5. 上传文件 <input type="file"/>
    默认被选中属性 checked=”checked”
  6. 下拉菜单
    ``
  7. 多行文本<文本域>
    <textarea></textarea>
  8. 按钮
    1）提交按钮 <input type="submit" value=""/>
    2）重置按钮 <input type="reset" value=""/>
    3）普通按钮 <input type="button" value=""/>
    4）图片按钮 <input type="img" src=""/>
    value属性是用来修改按钮上的文字的

    （五）特殊字符

  9. 空格:  
  10. 大于号: >
  11. 小于号: <
  12. 版权：©
  13. 注册： ®

    三、CSS

    （一）什么是CSS

    层叠样式表

    （二）CSS的语法

    选择器{属性名：属性值；}
    h1{color:#000000;}

    (三)控制文字的三属性

  14. color 文字颜色
  15. font-size 字号
  16. font-family 字体

    （四） 实体化盒子三属性

  17. width
  18. height
  19. background 背景颜色

    （五）显示模式（元素类型）

  20. 行内元素：不能控制宽高，不独占一行
  21. 块元素：能控制宽高，独占一行
  22. 行内块 能控制宽高，不独占一行

    （六）显示模式转换（元素类型的转换）

  23. 行内转块：display:block;
  24. 块转行内：display:inline;
  25. 转行内块：display:inlie-block;

    (七)div和span标记

  26. div：较大容器，能装任何元素
  27. span：较小容器，能装文本和行内元素

    （八）基础选择器

  28. 标签选择器：标签名{}，div{}, h1{}
  29. ID选择器： #id名{}， #box{}, #aaa{},
  30. 类选择器：.类名{}。 .box{}, .bbb{}.

    (九) 命名规则

  31. 不能以数字开头
  32. 尽量不占用关键字
  33. 尽量不是用中文
  34. 不用特殊字符包括空格，除了_ -

    (十) CSS的引入方式（CSS代码写哪）

  35. 行内式：<div style="css代码"></div>
  36. 内嵌式：<style type="text/css">css代码</style>
  37. 链接式：<link href="css文件路径" rel="stylesheet" type="text/css"/>

    (十一)CSS选择器的基础权限

    行内式>id选择器>类选择器>标签选择器

    （十二）常用属性总结

  38. color 文字颜色
  39. font-size 字号
  40. font-fanmily 字体
  41. font-weight：bold/normal;文字加粗或正常
  42. font-style：italic/normal;文字斜体或正常
  43. width 宽
  44. height 高
  45. background 背景颜色
  46. text-align：center/left/rihgt 文本或行内元素的水平对齐方式
  47. text-indent 文本缩进
  48. line-height 行高

    （十三）CSS特性

  49. 层叠性：后写的样式会覆盖先写的
  50. 继承性：子集会继承父级的样式
    注意：不是所有属性都有继承性
    注意：font-size有继承性，但是h标记不起作用，单独控制。