HTML+CSS （第一天）

 

  1. 常见Web浏览器内核
    1. Trident内核:ie浏览器，360，猎豹，百度等许多国内浏览器（window10之后IE更名为Edge,同样其内核更换为EdgeHTML）
    2. Gecko内核:firefox浏览器，代码开源
    3. Webkit内核:safari浏览器
    4. Chromium/Blink:goole浏览器（以前是使用的webkit内核),现在最新版的国内浏览器用的是Blink(Blink是webkit的分支)
  2. 常见移动端浏览器内核
    1. Android:Webkit内核，即使有些宣扬有自己的浏览器内核也是在Webkit的基础上二次开发的
    2. IOS:在Safari浏览器内核的基础上二次开发的
    3. WP7：在IE浏览器内核的基础上二次开发的
  3. Web标准
    1. 不同浏览器解析渲染显示的效果不同，所以开发过程中兼容性是一个前端工作人员必须掌握的技能。
    2. Web标准构成
      1. 结构标准Struct:对网页元素的分类与整理,主要是HTML----人的骨骼---使得内容更清晰，更有逻辑
      2. 表现标准Presentation:设置网页中的版式,颜色,大小等外观样式,主要是CSS---人的衣服鞋子----用于修饰内容的样式
      3. 行为标准BeHavior:网页模型的定义以及交互的编写,主要是JavaScript----奔跑,跳跃---内容的交互以及操作效果
  4. HTML超文本标签语言（用文字来描述网页的标签）
    1. 文本：他是由文本组成的，比如h1,p,span
    2. 标签：html所有的元素都有<>
    3. 语言：浏览器认识的，有一定语法规则
    4. 超：它不仅仅表现的是文本而且还可以表示图片,声音，动画,多媒体等内容，不仅仅如此还可以从一个文件跳转到另一个文件，将全世界主机的文件连接起来
  5. HTML骨架
    1. 1 <html>
2     <head>
3         <title></title>
4     </head>
5     <body></body>
6 </html>
    2. <html></html>:根标签
    3. <head></head>:文档的头部，一般不会显示给用户看，描述文档得属性和信息，包括文档得标题，在Web中的位置以及和其他文档的关系
    4. <title></title>:让页面有自己的标题，显示在Tab页上
    5. <body></body>:所有的内容都在body标签中
  6. 标签分类
    1. 双标签
    2. 单标签
  7. 标签关系
    1. 父子关系
    2. 兄弟关系
  8. 文档类型
    1. 指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令,这样浏览器拿到文档后才能正确的解析。
    2. <!DOCTYPE html>
  9.  字符集
    1. <meta charset="utf-8">
    2. 常见的字符集编码方式
      1. gb2312:包括简体中文
      2. BIG5:繁体中文
      3. gbk:包括简体和繁体中文
      4. utf-8:全世界所有国家需要用到的字符集
  10. HTML标签语义化
    1. 什么是HTML语义化
      1. HTML是来负责网页的结构的，结构好不好在于对应的内容是否有一个合理的标签包裹着。
    2. 为什么要语义化
      1. 语义化可以使得HTML代码最少，这样加载会快
      2. 使得页面结构清晰，便于维护
      3. 利于SEO,，语义化可以和搜索引擎建立好关系，使得爬虫更准确
    3. 为了语义化，我们写代码时应该注意什么
      1. 尽量少使用div,span等无语义的标签
      2. 对语义要求不明显时，能使用p不使用div
      3. 不要用纯样式标签比如b,font,u而使用css来设置
      4. 需要强调的文本包含在 strong或者em中
      5. 表格标题使用caption,头用thead,主体使用他body,尾巴使用tfoot
  11. 常见的HTML标签
    1. 排版标签（主要和CSS搭配显示网页结构）
      1. 标题标签：（title是文档标题需要和这里的标题区分）
        1. html 提供了6个等级的标题标签
        2. <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">    
    <title></title>
</head>
<body>
        <h1>传智播客学前端，</h1>
        <h2>前端学院四十班。</h2>
        <h3>新班强哥讲台站，</h3>
        <h4>又带新颜技术钻。</h4>
        <h5>标题一共六级选，</h5>
        <h6>具体效果刷新见。</h6>    
</body>
</html>
      2. 段落标签
        1. 文本在一个段落中会根据浏览器窗口大小自动换行
        2. <p>,</p>
      3. 水平线标签
        1. <hr />
      4. 换行标签
        1. <br />当某段文本需要强制换行显示时，就需要使用换行标签
      5. div span标签（网络布局的两个主要的盒子）css+div
        1. 没有任何语义
    2. 文本格式化标签　
      1. <b></b> <strong></strong> 文字以粗体的形式显示
      2. <i></i> <em></em> 文字以斜体的形式显示
      3. <s></s> <del></del>文字以删除线的形式显示
      4. <u></u><ins></ins>文字以下滑线的形式显示
      5. b i s u没有强调的意思，strong em del ins语义更强烈推荐使用
      6. 这些不常用的文本格式化标签在做一些小部件的时候常常用到需要注意一下
    3. 标签属性
      1. 需要标签提供更多的信息，可以给标签添加属性
      2. 语法格式:<标签名 属性1=“值1”  属性2=“值2”></标签名>
        1. 一个标签可以有多个属性
        2. 属性之间不分先后，使用空格分隔开
        3. 任何属性都有默认值，省略则该属性取默认值
        4. 采用键值对的格式
        5. 不推荐使用样式属性
    4. 图像标签
      1. <img src="timg.jpg" />
      2. 属性
        1. src属性用于指定图像文件的路径和文件名，是img标签必须的属性
        2. alt属性是图像不能显示时的替换文本
        3. title属性是鼠标悬停时显示的文本
        4. width属性设置图片的宽度
        5. height属性设置图片的高度，只设置宽度或者只设置高度时图片会等比例缩放，如果两个都设置图片会变形
        6. border属性：数字设置图像边框的宽度
    5. 链接标签
      1. <a href="跳转目标" target="目标窗体的弹出方式">文本或者图像</a>
      2. href 用于指定链接目标的URL地址,当为标签设置href属性时就具有超链接功能
        3. target:用于指定链接页面的打开方式,self和blank,_self为默认值，_blank为新窗口打开方式
        1. 注意:外部连接需要添加http://ww.baidu.com
        2. 内部连接直接添加文件名字即可
        3. 如果连接为空时href=“#”
        4. 不仅可以创建超文本连接，在网页中的各种元素比如图像,表格,音频,视频都可以添加超链接
      3. 锚点定位案例（回到顶部案例）
      4. base标签　　
        1. base 可以设置整体链接的打开窗口的方式
        2. base 写到 <head> </head> 之间
        3. 语法：<base target="_blank"/>
        4. 如果想单独设置某一个链接的打开方式可以在链接内单独设置target属性
    6. 特殊字符标签
      1. 不需要全记住，只需要记住重点的几个，需要用到的时候去查一下就Ok了
      2. 空格:&ndsp;  <:&lt; >:&gt; &:&amp;人民币符号:&yen;版权符号:&copy;
    7. 注释标签
      1. <!-- 被注释的语句 -->
      2. 多写注释是非常好的编码习惯，可以让团队协作更好
      3. 注释不是给用户看的，是给自己和同事看的，浏览器是不执行的
    8. 路径（重难点）
      1. 相对路径
        1. 图像图片和html文件位于同一文件夹下:src设置为图像文件的名称即可
        2. 图像文件位于html文件的下一级文件夹下:src设置为文件夹名/图像文件名
        3. 图像文件位于html文件的上一级文件夹内:src 设置为../文件夹名/图像文件名
      2. 绝对路径
        1. 一般使用绝对路径都是引用网上某一资源，src设置的是完整的网络地址
        2. 绝对路径的参考地址是web站点的根目录
    9. 列表
      1. 无序列表
        1. 语法规则：

          <ul>
          <li>列表项1</li>
          <li>列表项2</li>
          <li>列表项3</li>
          ......
          </ul>

        2.  

          各个列表项之间没有顺序区分
        3. <ul></ul>中只能嵌套<li></li>不能嵌套别的
        4. <li></li>相当于一个容器，它可以嵌套任何元素
        5. 无序列表有自己的样式，但是这个样式的修改最好通过CSS来实现
      2. 有序列表
        1. 语法规则：

          <ol>
          <li>列表项1</li>
          <li>列表项2</li>
          <li>列表项3</li>
          ......
          </ol>

      3. 四大名著案例
      4. 自定义列表
        1. 语法规格

          <dl>
          <dt>名词1</dt>
          <dd>名词1解释1</dd>
          <dd>名词1解释2</dd>
          ...
          <dt>名词2</dt>
          <dd>名词2解释1</dd>
          <dd>名词2解释2</dd>
          ...
          </dl>

        2. 常用于对术语或者名词进行解释
        3. 使用场景
posted @ 2018-09-11 10:06  jessciaWu  阅读(188)  评论(0)    收藏  举报