web前端:HTML

大纲

image.png

HTML是用来描述网页的一种语言

  • HTML指的是超文本标记语言
  • 不是一种编程语言,而是一种标记语言
  • 标记语言是一套标记标签
  • 使用标记标签来描述网页

HTML标签

  • 在某些场合也称为元素

  • 标签必须在<>内

  • 标签可以嵌套

  • 多数标签是成对出现的(比如img就是一个,这种就不能嵌套)

  • 标签中的第一个标签是开始标签,第二个标签是结束标签

  • 开始和结束标签也称为开放标签闭合标签

  • 常见标签

    1. div 作为布局容器
    2. a 可点击的链接
    3. img 显示图片
    4. table,tr,td 表格
    5. ul,ol 列表
    6. h1-h6 1-6级标题
    7. br/ 换行
    8. 表单类
    • input
    如图

    提交按钮(sumlit代表的是提交键)

    (value指的是按钮内的内容).png
    image.png
    checkbox代表多选框,radio代表的是单选框.png
  • textarea 多行文本框


    如图
  • select 下拉列表(下拉选择选项)

    image.png
    效果如图所示
  • form(可以真正地提交点击表格内容)

    如图

    (可以在表格里填写内容后点击方框,可以提交内容)

    如图

HTML属性

  • 为每个标签赋予特定的功能

    如图
  • 公共属性
    1.id
    2.class
    3.title

  • 私有属性

  • 属性总是以名称/值对的形式出现,比如name=“value”

    如图
  • 属性总是在HTML元素的开始标签中规定

  • 属性实例

    1. HTML链接由<a>标签定义,链接的地址在href属性中指定
      <a href="http://www.baidul.com.cn">This is a link</a>
      <u>如图所示</u>(有属性就可以点击)

      如图
    2. <h1> 定义标题的开始。
      <h1 align="center"> 拥有关于对齐方式的附加信息。

    3. <body> 定义 HTML 文档的主体。
      <body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

    4. <table> 定义 HTML 表格。
      <table border="1"> 拥有关于表格边框的附加信息。

  • 属性和属性值对大小写不敏感

  • 属性值影视中被包括在引号内,最常用的是双引号,部分用单引号

HTML完整结构

* html

放head和body

如图

* head

1. 描述文档属性,文档说明(title)
2. 声明网页编码

如图

* body

真正用来写内容的

如图

整体结构框图如图所示

如图

实战

附:留言板表格雏形代码


image.png
image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。