HTML介绍--转载

  1. 概念:是最基础的网页开发语言

    • Hyper Text Markup Language 超文本标记语言
      • 超文本:
        • 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本.
      • 标记语言:
        • 由标签构成的语言。<标签名称> 如 html,xml
        • 标记语言不是编程语言
  2. 快速入门:

    • 语法:

      1. html文档后缀名 .html 或者 .htm

      2. 标签分为

        1. 围堵标签:有开始标签和结束标签。如
        2. 自闭和标签:开始标签和结束标签在一起。如
      3. 标签可以嵌套:
        需要正确嵌套,不能你中有我,我中有你
        错误:
        正确:

      4. 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可)引起来

      5. html的标签不区分大小写,但是建议使用小写。

    • 代码:

        
        	title
        
        
        
        	Hello World
      Hello World
  3. 标签学习:

    1. 文件标签:构成html最基本的标签

      • html:html文档的根标签
      • head:头标签。用于指定html文档的一些属性。引入外部的资源
      • title:标题标签。
      • body:体标签
      • :html5中定义该文档是html文档
    2. 文本标签:和文本有关的标签

      • 注释:

      • to

        :标题标签 * h1~h6:字体大小逐渐递减
      • :段落标签


      • :换行标签


      • :展示一条水平线 * 属性: * color:颜色 * width:宽度 * size:高度 * align:对其方式 * center:居中 * left:左对齐 * right:右对齐
      • :字体加粗

      • :字体斜体

      • :字体标签

      • :文本居中 * 属性: * color:颜色 * size:大小 * face:字体
      • 属性定义:

        • color:
          1. 英文单词:red,green,blue
          2. rgb(值1,值2,值3):值的范围:0~255 如 rgb(0,0,255)
          3. #值1值2值3:值的范围:00~FF之间。如: #FF00FF
        • width:
          1. 数值:width=‘20’ ,数值的单位,默认是 px(像素)
          2. 数值%:占比相对于父元素的比例
    3. 列表标签:

      • 有序列表:
        • ol:
        • li:
      • 无序列表:
        • ul:
        • li:
    4. 链接标签:

      • a:定义一个超链接
        • 属性:
          • href:指定访问资源的URL(统一资源定位符)
          • target:指定打开资源的方式
            • _self:默认值,在当前页面打开
            • _blank:在空白页面打开
    5. div和span:

      • div:每一个div占满一整行。块级标签
      • span:文本信息在一行展示,行内标签 内联标签
    6. 语义化标签:html5中为了提高程序的可读性,提供了一些标签。

      1. :页眉
      2. :页脚
    7. 表格标签:

      • table:定义表格
        • width:宽度
        • border:边框
        • cellpadding:定义内容和单元格的距离
        • cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、
        • bgcolor:背景色
        • align:对齐方式
      • tr:定义行
        • bgcolor:背景色
        • align:对齐方式
      • td:定义单元格
        • colspan:合并列
        • rowspan:合并行
      • th:定义表头单元格
      • :表格标题
      • :表示表格的头部分
      • :表示表格的体部分
      • :表示表格的脚部分

————————————————
案例:旅游网站首页

  1. 确定使用table来完成布局

  2. 如果某一行只有一个单元格,则使用

  3. 如果某一行有多个单元格,则使用

  4. 代码实现

黑马旅游网


首页 门票 门票 门票 门票 门票 门票 门票 门票 门票
黑马精选

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 899

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 899

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 899

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 899
国内游

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 699

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 699

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 699

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 699

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 699

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 699
境外游

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 699

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 699

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 699

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 699

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 699

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 699
江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882

————————————————
版权声明:本文为CSDN博主「Ficca」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_42957436/article/details/105732585
版权声明:本文为CSDN博主「Ficca」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_42957436/article/details/105732585

你可能感兴趣的:(HTML介绍--转载)