欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Study Day02-9.9

程序员文章站 2022-06-30 10:23:02
...

Study Day02-9.9

HTML 第一天

认识WEB > 浏览器 > 浏览器内核 > WEB标准 > HTML认识 > 开发工具 > 文档类型 >
字符集 > 常用标签 > 路径

上午的学习

  • 认识常用浏览器
    浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。

  • 浏览器的内核
    1.Trident(IE内核)
    2.Gecko(firefox)
    3.webkit(Safari)
    4.Chromium/Bink(chrome)
    5.Presto(Opera)

  • WEB标准

    • WEB标准的好处
      1、让Web的发展前景更广阔
      2、内容能被更广泛的设备访问
      3、更容易被搜寻引擎搜索
      4、降低网站流量费用
      5、使网站更易于维护
      6、提高页面浏览速度
    • WEB标准的构成
      主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。
      1、结构标准：结构用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分。
      2、样式标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
      3、行为标准：行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分

  • HTML 初识
    HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

  • HTML骨架格式

    <HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>

  • HTML标签分类
    1、双标签

    <strong> 标签名 </strong>

    2、单标签

    <br />   <hr />

  • HTML标签关系
    1、嵌套关系

    <head>  <title> </title>  </head>

    2、并列关系

    <head></head>
<body></body>

  • 开发工具
    DW、Sublime、WebStore、HBuilder、Visual Stdio Code 等等

  • 文档类型

    <!DOCTYPE html>

  • 字符集

    <meta charset="UTF-8">

    utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。

    gb2312 简单中文 包括6763个汉字

    BIG5 繁体中文 港澳台等用

    GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312

    UTF-8则包含全世界所有国家需要用到的字符

  • HTML标签的语义化
    白话： 所谓标签语义化，就是指标签的含义。

  • 为什么要有语义化标签

  1. 方便代码的阅读和维护
  2. 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
  3. 使用语义化标签会具有更好地搜索引擎优化

  • HTML标签

    <hn>   标题文本   </hn>
<p>  文本内容  </p>
<div> 这是头部 </div>    <span>今日价格</span>

  • 标签的属性

    <标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

    在上面的语法中，

    1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。

    2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

    3.任何标签的属性都有默认值，省略该属性则取默认值。

    采取 键值对 的格式 key=“value” 的格式

    提倡： 尽量不使用 样式属性。

  • 图像标签img
    该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

    <img src="图像URL" />

  • 链接标签

    <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

    href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

    target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

    注意：

    1.外部链接 需要添加 http:// www.baidu.com

    2.内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页

    3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

    4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

  • 锚点定位
    1.使用“a href=”#id名>“链接文本"创建链接文本。
    2.使用相应的id名标注跳转目标的位置。

  • base标签
    base 可以设置整体链接的打开状态

  • 特殊字符标签
    Study Day02-9.9

  • 注释标签

       <!-- 注释语句 -->

  • 路径
    路径可以分为： 相对路径和绝对路径

    • 相对路径
    1. 图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src=“logo.gif” />。
    2. 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src=“img/img01/logo.gif” />。
    3. 图像文件位于HTML文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如<img src="…/logo.gif" />。
    • 绝对路径
      “D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。

  • 列表标签

    • 无序列表

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

    • 有序列表

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

    • 定义列表

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

下午的练习

  • 实现简单排版文字页面

  • 实现类似百度百科界面(任何任务都可)，要求是要有锚点

  • 实现简单电商页面（布局 无序列表 ）

相关标签： 学习 日常

上一篇： Elasticsearch.Net使用入门教程（1）

下一篇： Linux网络编程基础-05_TCP/IP网络编程-UDP循环服务器

推荐阅读