软件开发案例分析

HTML基本标签(一)

HTML:Hyper Text Markup Language 超文本标签语言,网页的“源码”

浏览器:“解释和执行”HTML源码的工具

HTML文档的结构:



我的第一个网页 



       Hello World!



网页摘要信息利于浏览器解析和搜索引擎搜索:

1)使用标签</p> <pre class="has"><code><head> <title>搜狐-中国最大的门户网站

2)使用标签

(1)描述文档类型和字符编码


  

(2)描述搜索关键字和描述

 
   
   

HTML标签分类(方便后续的布局设计):

  1. 块级标签:显示为“块”状,前后隔一行   (块级块内包含多行)
  2. 行级标签:按行逐一显示 (行级包括文字、图片等)

根据使用场合,块级标签又细分为: 基本块级标签,常用于布局的块级标签

基本块级标签

  1. 标题标签

    标题

    ……
    标题
    ……

    一级标题

    二级标题

    三级标题

    四级标题

    五级标题
    六级标题
    ……

     

  2. 段落标签

    ……

    ……

    北京欢迎你

    北京欢迎你,有梦想谁都了不起!

    有勇气就会有奇迹。

    ……

     

  3. 水平线标签

……

……

北京欢迎你

北京欢迎你,有梦想谁都了不起!

有勇气就会有奇迹。

……

常用于布局的块级标签

  1. 有序列表标签
    1. 列表项1
    2. … …
    ……

    注册步骤:

    1. 填写信息
    2. 收电子邮件
    3. 注册成功
    ……

     

  2. 无序列表标签
    • 列表项1
    • ……

    新人上路指南

    • 如何激活会员名?
    • 如何注册贵美会员?
    • 注册时密码设置有什么要求?
    • 贵美认证

     

  3. 定义描述标签
    标题
    描述1
    ……
    ……
    咖啡
    一种黑色的热饮料,原料据说是咖啡豆,非洲盛产这类原料。
    可以提神,刺激神经。
    ……

    用定义描述标签实现图文混编的效果

    ……
    
    
    图片的HTML代码(后续讲解)……
    商品名称:灿坤蒸气电熨斗
    商品价格:388元
    商品简介:金钢低血超硬超顺滑,140ml透明大水箱设计
    ……

     

     

  4. 表格
     
    ……
    
    百度 新浪
    --表格 --行
    --列(单元格)

     

  5. 表单
    ……
    一般和table使用:
    .....
    ... ...

     

  6. 分区标签
    ……
    

    ……

    新人上路

      ……
    div其实就是一个......
    ……

    一般当作结构化块状元素使用,作为逻辑分区(分块)即容器来使用

  7. 请说出实际开发常用的4种块状结构是什么?

    1. div-ul(ol)-li :常用于分类导航或菜单等
    2. div-dl-dt-dd :常用于图文混编的场合
    3. table-tr-td :常用于图文布局或显示数据
    4. form-table-tr-td:常用于布局表单  

    行级标签

    1. 图像标签
      提示文字
      
      
      ……
      精品热卖:高清晰,30寸等离子电视
      ……
      

       

    2. 范围标签 :显示某行内的独特样式    
      文本等行级内容
      
      
      ……
      

      商品价格:仅售10

      ……

       

    换行标签
     

    ……
    

    北京欢迎你,有梦想谁都了不起!
    有勇气就会有奇迹。
    北京欢迎你,为你开天辟地
    流动中的魅力充满朝气。
    北京欢迎你,在太阳下分享呼吸
    在黄土地刷新成绩。
    北京欢迎你,像音乐感动你
    让我们都加油去超越自己。

    ……

    W3C

    • W3C:World Wide Web Consortium,万维网联盟
    • W3C的职能:负责制定和维护web行业标准
    • W3C标准包括:

    列的标准: HTML

    内容方面:XHTML

    样式美化方面:CSS  

    结构文档访问方面:OM

    页面交互方面:ECMAScript

    ……

    XHTML 1.0基本规范

    • 标签名和属性名称必须小写  
    • HTML标签必须关闭
    • 属性值必须用引号括起来
    • 标签必须正确嵌套 必须添加文档类型声明
      
      
      
      ……
      
      ……body部分内容……
      
      
      
      1、声明必须位于文档的最前面
      2、三种级别:Strict(严格类型) 、Trasitional(过度类型)、 Frameset(框架类型) 
      

       


     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    你可能感兴趣的:(学习笔记)