HTML的学习记录


标签在 HTML 页面中创换行符。


标签在 HTML 页面中创建水平线。

段落是通过

标签定义的。

 浏览器会自动地在段落的前后添加空行。(

是块级元素)

HTML的学习记录_第1张图片

文本格式


This text is bold字体加粗
This text is strong强调文本
This text is big字体加大
This text is emphasized定义文字斜体
This text is italic定义文字斜体
This text is small缩小文本
subscript下标
superscript上标

    
预格式文本。

HTML的学习记录_第2张图片

 二十 十二    删除文本和下划线文本

 xxx 定义缩写

HTML的学习记录_第3张图片

 

 
定义地址

  Here is some Hebrew text  定义文字方向

定义从其他来源引用的节。
定义项目或缩略词的定义。
定义短的行内引用。
定义著作的标题。

css的引用:

h1{ }   直接修改h1部分

.head{ }  用class=“head” 来引用

#head{ } 用id=“head” 来引用

HTML的学习记录_第4张图片

 去掉超链接的下划线

这是一个超链接,未去掉下划线

这是一个超链接,去掉下划线

使用 name 属性创建 HTML 页面中的书签。

锚(显示在页面上的文本)

在新的浏览窗口打开超链接

该链接会在新窗口中打开

连接到同一个页面的不同位置

会跳转到name值为c3的位置

会跳转这个位置

跳出框架

会跳出框架

超链接发送邮件

发送邮件

 图像的插入:

替换文本书属性,图片显示失败,则显示该文字

图片位置的排列

未设置对齐方式的图像:

图像 在文本中

已设置对齐方式的图像:

图像 在文本中

图像 在文本中

图像 在文本中

请注意,bottom 对齐方式是默认的对齐方式。

HTML的学习记录_第5张图片

带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。

带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。

HTML的学习记录_第6张图片

改变 img 标签的 "height" 和 "width" 属性的值

创建图像映像

map
//usemap的值必须与name相同,

    Sun

HTML的学习记录_第7张图片

表格:

每个表格由 table 标签开始。
每个表格行由 tr 标签开始。
每个表格数据由 td 标签开始。

表格的表头使用 标签进行定义

border定义边框

HTML的学习记录_第8张图片

 定义表格的标题

合并单元格

的属性

姓名  姓名占两行
电话  电话占两列

横跨两列的单元格:

姓名 电话
Bill Gates 555 77 854 555 77 855

横跨两行的单元格:

姓名 Bill Gates
tong
电话 555 77 854

HTML的学习记录_第9张图片

 使用 Cell padding 来创建单元格内容与其边框之间的空白

First Row
Second Row

HTML的学习记录_第10张图片

使用 Cell spacing 增加单元格之间的距离

First Row
Second Row

HTML的学习记录_第11张图片

无序列表

  • 咖啡
  • 牛奶

有序列表 (start 表示序号的起始)

  1. 咖啡
  2. 牛奶

边框标签

该文字能插入边框

HTML的学习记录_第12张图片

frame标签实现框架(主要用于表格的边框)

Table with frame="box":

Month

Table with frame="above":

Month

Table with frame="below":

Month

Table with frame="hsides":

Month

Table with frame="vsides":

Month

HTML的学习记录_第13张图片

内联框架iframe

HTML的学习记录_第14张图片

作为跳转的内联


跳转第三个网页,并在内联网页中显示

通过name进行跳转

HTML的学习记录_第15张图片HTML的学习记录_第16张图片

表单的应用

 元素是最重要的表单元素

元素有很多形态,根据不同的 type 属性

类型 描述
text 定义常规文本输入。
radio 定义单选按钮输入(多选的话name名字可以不同)
submit

定义提交按钮(提交表单)

reset 定义重置按钮
性别:
Male
Female
爱好:
1
2
3
4

HTML的学习记录_第17张图片

文本输入

 定义用于文本输入的单行输入字段:

HTML的学习记录_第18张图片

提交按钮

 定义用于向表单处理程序提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面(表单处理程序在表单的 action 属性中指定)

HTML的学习记录_第19张图片

Action 属性

action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常,表单会被提交到 web 服务器上的网页。

Method 属性

method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST):

使用 GET 时,表单数据在页面地址栏中是可见的(默认)

POST 的安全性更好,因为在页面地址栏中被提交的数据是不可见的、


Name 属性

如果要正确地被提交,每个输入字段必须设置一个 name 属性。


Target 属性

target 属性规定提交表单后在何处显示响应。

target 属性可设置以下值之一:

描述
_blank 响应显示在新窗口或选项卡中。
_self(默认) 响应显示在当前窗口中。
_parent 响应显示在父框架中。
_top 响应显示在窗口的整个 body 中。
framename 响应显示在命名的 iframe 中。

 表单属性:

元素

//文本类型
//提交按钮
//重置类型
//单选

HTML的学习记录_第20张图片


//图片作为提交按钮


 定义密码字段


 定义复选框。复选框允许用户在有限数量的选项中选择零个或多个选项。

 HTML的学习记录_第21张图片


 用于应该包含数字值的输入字段。能够对数字做出限制。

HTML的学习记录_第22张图片HTML的学习记录_第23张图片


 用于应该包含日期的输入字段
 显示为滑块控件。

 允许用户选择周和年

HTML的学习记录_第24张图片


  Enter a date before 1980-01-01:
  
Enter a date after 2000-01-01:

 用于应该包含颜色的输入字段。

HTML的学习记录_第25张图片


 输入字段能够显示为滑块控件。

 


  允许用户选择日期和时间(无时区)

HTML的学习记录_第26张图片


 用于应该包含电子邮件地址的输入字段

HTML的学习记录_第27张图片

 用于搜索字段(搜索字段的表现类似常规文本字段)