一、HTML概述

HTML(Hyper Text Markup Language超文本表示语言)

  • 是一种用来制作超文本文档的简单标记语言
  • 用HTML编写的超文本文件称为HTML文件,也称Web文件
  • HTML是Web开发的基本技术
  • HTML文档的结构
<HTML>
<HEAD>
<TITLE>我的第一个网页</TITLE>
</HEAD>

<BODY>
  Hello World!<br>
  这是我的第一个页面
</BODY>
</HTML>

1、HTML标签

  • HTML标记标签通常被称为HTML标签(HTML tag)
  • HTML标签是由尖括号包围的关键词,比如
  • HTML标签通常是成对出现的,比如
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签闭合标签

2、HTML元素

  • HTML元素指的是从开始标签到结束标签的所有代码,是HTML语言的基本部分
  • HTML文档由嵌套的HTML元素构成
  • 空的HTML元素
    没有内容的HTML元素被称为空元素。空元素是在开始标签中关闭的
    <br>(定义换行的标签)就是没有关闭标签的元素

3、HTML元素属性

HTML元素可以有自己的相关属性,属性为HTML元素提供附加信息
HTML元素属性格式
<开始标签 属性名="属性值"></结束标签>

例:

h1 align="center">This is heading 1</h1>

属性通常添加在元素的开始标签当中,属性值带双引号

  • 页面背景色或背景图像
<BODY bgcolor="#FFCCFF" background="back_imag.GIF">
   hello world
</BODY>

4、常用的基本标签

标题<h1>-<h6>
段落<p>
换行<br>
链接<a>
图像<img>
注释<!--This is a comment-->
嵌入元素(声频、视频):<embed src="文件名">
HTML定义了一些文本格式的标签,可以改变字体样式
<b>粗体bold
<big>定义大号字
<small>定义小号字
em定义着重文字
<i>斜体italic
<del>文字当中划线表示删除
<ins>文字下划线表示插入
<sub>下标
<sup>上标
字体、字号标签<font>

5、表格

  • 表格由<table>标签来定义
  • 每个表格均有若干行(由<tr>标签定义)
  • 每行被分割为若干单元格(由<td>标签定义)
  • 字母td指表格数据(table data),即数据单元的的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
  • 三个元素必须一起使用,否则无法定义表格

6、表单

HTML表单用于搜集不同类型的用户输入。最常见典型的表单即注册页面

  • 表单是一个包含表单元素的区域
  • 表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素
  • 表单使用表单标签(<form>)定义
  • 基本格式
<FORM Action="url" Method="*" >
      <input></input>
      ......
</FORM>
  • 表单的三个要点
    表单控件(Form Controls)
    动作属性(Action)
    方法属性(Method)
6.1表单-表单控件

通过HTML表单的各种控件,用户可以输入文字信息,或者从选项中选择,以及做提交操作
input:根据type可分为

  • 文本输入框:用户名/密码 Type="text" / "password"
  • 单选按钮:Type="radio"
  • 复选框:Type="Checkbox"
  • 按钮:Type="button"

Select:下拉列表,用option定义多个选项

6.2表单-动作属性

当用户单击确认按钮(即提交表单)时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性指向的这个文件通常会对接收到的输入数据进行相关的处理。

6.3表单-Wethod属性

Method 属性告诉浏览器如何将编码后的数据发给服务器。其值为get或者post
get:浏览器会将数据直接附在表单的action URL之后。这两者之间用问号进行分割
post:直接连接服务器,然后将html表单中的值发送给WEB服务器。这种方式是没有字符长度限制的。

6.4HTML5表单-新的input类型
  • color 用于选取颜色
  • date 从一个日期选择器选择一个日期
  • datetime 选择一个日期(UTC时间)
  • datetime-local 选择一个日期和时间(无时区)
  • email 包含e-mail地址的输入域
  • month 选择一个月份
  • number 包含数值的输入域
属性 描述
max number 规定允许的最大值
min number 规定允许的最小值
step number 规定合法的数字间隔(如果step=“3”,则合法的数时-3,0,3,6等)
- value number 规定默认值
  • time 选择一个时间
  • url 包含URL地址的输入域,在提交表单时,会自动验证url域的值
  • week 选择周和年
Logo

一站式 AI 云服务平台

更多推荐