美文网首页html
[前端学习]html部分学习笔记,第一天

[前端学习]html部分学习笔记,第一天

作者: 印象rcj | 来源:发表于2017-08-21 10:42 被阅读0次

网页的简介

  • 网页即浏览器显示给用户看的页面,通常这些页面都是浏览器内核把代码渲染后展示出来的效果。一般有文本、图像、链接、音频、视频等元素来组成。

浏览器介绍

  • 常用的五大浏览器(按照市场占用率排列)
    1.谷歌(内核:blink);
    2.IE|Edge(内核:Trident|EdgeHtml);
    3.safari(内核:webkit);
    4.firefox(内核:Gecko);
    5.opera(内核:blink)。

Web标准

  • 正因为各大浏览器的内核不同,为了保证渲染出来的效果一致,w3c推出了web标准。
    1.结构标准:用html来书写;
    2.样式标准:用css来书写;
    3.行为标准:用js来书写。

HTML介绍

  • 超文本标记语言,网页中可以包含各种多媒体文件,需要不同的标签来声明。作用是绘制网页结构

html标签

  1. 标签类型:有单标签和双标签;

  2. 标签关系:父子关系和并列关系;

  3. hmtl骨架(最新H5):

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    </body>
    </html>

常用开发工具:

  1. sublime轻量级;
  2. webstorm功能强大的IDE工具。
  • 一些常用的编辑操作:
    • 标签字母+tab 快捷生成标签格式
    • html:5+tab 快捷生成html5骨架
    • ol>li*5 快捷生成ol标签格式,5个li

字符集:

  • 强烈推荐用现在最强大的字符集UTF-8

各种标签:

  • <h1-6></h1-6> 标题标签,独占一行,有6个等级。一般h1标签一个页只用一次,用于展示LOGO
  • <p></p> 段落标签。独占一行
  • <hr /> 下划线标签
  • <br /> 换行标签
  • <strong></strong> 加粗并强调标签
  • <em></em> 倾斜
  • <del></del> 删除线
  • <ins></ins> 下划线
  • <base target="_blank" /> 写在head标签中全局设置超链接打开新窗口

标签属性:

  • 除了标签必须带的属性之外,例如:<img src=""><a href="">等等之外,一般不建议过多使用标签属性,建议用CSS来调整样式

锚点定位:

  1. 同页面锚点定位:

    • <a href="#锚点名">锚点</a>
    • <h2 name="名">跳转点</a>
  2. 不同页面锚点定位:

    • <a href="xxxx.html#锚点名">锚点</a>
    • <h2 name="名">xxxx.html页面的跳转点</a>

特殊字符:

  • & nbsp; 空格
  • & lt; <
  • & gt; >
  • 只记录几个常用的,其他用的时候翻手册。

注释标签

  • 注意:注释顾名思义作用是解释代码的,是针对同事或者后续接收人员看代码用的,不显示到页面。
  • <!- - 注释语句 - ->

路径

  1. 相对路径(三种情况):

    • 同级路径,使用./调用文件名,例如:<a href="./文件"></a>
    • 下级路径,使用/来引导,例如:<a href="下一级目录名/文件"></a>
    • 上级路径,使用../(上两级就用../../,以此类推)来引导,例如<a href="../文件"></a>
  2. 绝对路径:
    http://www.itcast.cn/images/logo.gif,包含了完整路径的地址。

相关文章

网友评论

    本文标题:[前端学习]html部分学习笔记,第一天

    本文链接:https://www.haomeiwen.com/subject/mxlcdxtx.html