HTML学习

HTML学习

一. HTML简介

1.什么是HTML

HTML:Hyper text markup language 超文本标记语言

用来制作网页

2.作用

  • 制作网页,控制网页和内容
  • 插入图片等多媒体
  • 通过链接检索信息
  • 使用表单获取信息,实现交互

3.版本

W3C:World Wide Web Consortium 万维网联盟,制定Web技术相关标准和规定的组织.HTML就是W3C制定的.

两个版本:HTML 4.01,HTML 5

官网:http://www.w3cschool.com.cn

4.文件后缀

.html .htm

二.HTML文档结构

1.基本结构

1.1简介

  • HTML标签是由尖括号包含的关键组成,通常都是成对出现,如<html></html
  • 以<html>为根标签组成的树形结构,包括<head>和<body>
  • <head>定义了文档的基本信息不用于显示
  • <body>定义了文档的显示内容

1.2结构模板

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
</html>

1.3开发工具

  • 最简单的记事本
  • HBuilder
  • Subline Text
  • ......

1.4浏览器

  • 建议使用谷歌浏览器
  • 不建议使用IE浏览器

1.5文档类型

在Html文档第一行一般会有<!DOCTYPE html>,这就是声明文档的类型.

简单来说就是告诉浏览器,我要使用的是Html的哪一个版本,每个版本的标签与格式不完全相同,例如HTML 5中新增了HTML 4.01中没有的标签,删除了部分文本格式标签.常用类型为:

  • HTML 5
  • HTML 4.01

三.基础知识

1.常用标签

1.1基本标签

标签 含义 说明
br 换行标签 单标签
p 段落标签 双标签,块级标签
h1~h6 标题标签 块级标签,h1~h6越变越小
pre 预格式化文本标签 保留原来的文本格式,
div 分块标签 块级元素,用来页面布局
span 文本范围标签 没有样式,一般用来定义特殊文本样式
ol,li 有序列表 块级标签
ul,li 无序列表 块级元素
dl,dt,dd 自定义列表 块级元素,用于描述定义
hr 水平分割线 块级标签
img 图片标签 行级标签

注:

  1. 有序列表

    默认使用阿拉伯数字,从1开始.可通过属性修改.

    • type:[1,a,A,i,I]
    • start:[/d]

  2. 无序列表

    默认以实心圆为标记符号.可通过属性修改.

    • type:[disc,circle,square,none]

  3. 定义列表

    默认定义顶格显示,描述缩进显示

  4. 水平线标签

    默认根据父元素的宽度来确定宽度,常用属性:

    • color:[(颜色单词),(16进制的RGB值)]
    • size:[(像素值)]
    • width:[(像素值),(百分比)]
    • align:[left,right,center]

  5. 图片标签

    常见的格式为: jpg png gif bmp等.

    • src:[(图片的url),(相对路径)]
    • alt:[(图片站位名称)]
    • title:[(图片描述)]
    • width/height:[(像素值),(百分比)]

1.2其他标签

标签 含义 描述
i 斜体 Html 5已被舍弃
em 强调内容 斜体
address 地址,显示为斜体
b 加粗 Html 5已被舍弃
strong 强调内容 加粗
delete 删除线 Html 5已被舍弃
sub 下标
sup 上标
bdo 文本方向
addr 文字缩写
smail 文字大小变小 Html 5已被舍弃
big 文字大小变大 Html 5已被舍弃

  1. 文本方向标签

    • dir:[(RTL),(LTR)]

  2. 文字缩写标签

    • title:[(文字缩写的提示信息)]

1.3头部标签

  • <meta />定义网页摘要信息,字符编码,关键组,描述,作者,也可定义重定向,定时刷新等.
  • <title></title>设置网页标题
  • <style></style>设置内置CSS样式
  • <link />引用外部的CSS样式
  • <script></script>引用或定义脚本代码
  • <base />定义基础路径,即默认去哪里寻找资源.

1.4 a标签超链接

简介

可以将其他位置的资源链接到超链接处,使其关联.

类型
  • 普通链接:用于跳转到其他页面
  • 锚链接:用于跳转到本页面的某个位置
  • 功能链接:实现特殊功能的链接
常用属性
  • href:[(链接的路径)]
  • target:[(_self),(_blank),(_parent),(_top),(自定义)]

1.5表格

简介

表格是一个规则的行列结构,每个表格由若干行和列组成.

基本结构

  1. table标签

    用来定义表格

    常用属性:

    • border:[(边框属性)]

    • width/height:[(像素),(百分比)]

    • aligh:[(left),(center),(right)]

    • bordercolor:[(颜色名),(十六进制颜色)]

    • bgcolor:[(颜色名),(十六进制颜色)]

    • background:[(图片url)]

    • cellspacing:[(像素),(百分比)] 表格间距

    • cellpadding:[(像素),(百分比)] 内容与单元格的边距

  2. tr标签

    用来定义行

    常用属性:

    • align:同table
    • valign:[(top),(middle),(bottom)] 垂直对齐
    • bgcolor:同table
    • background:同table

  3. td标签

    用来定义单元格

    常用属性:同tr

合并单元格

用到的属性:

  • rowspan:[(合并的数量)]

    行合并

  • colspan:[(合并的数量)]

    列合并

步骤:

  1. 找到将想要合并的单元格写上rowspan/colspan

  2. 删除其他多余的单元格

    注意要保证每行的实际列数一致,否则会出现错乱现象.

表格的高级标签
标签 含义 描述
caption 表格标题
thead 表示表格的头部
th 表示头部的标题 加粗,剧中显示
tbody 表示表格的主体
tfoot 表示表格的底部

1.6表单

简介

表单是用来收集用户输入的信息的工具

表单结构
<form action="" method="">
	<!--表单元素 -->
</form>

  • form标签

    常用属性:

    • action:表单提交数据的位置
    • method:提交数据的方式
      • get
      • post
    • enctype:提交数据的编码,文件上传需要规定的格式
      • application/x-www-form-urlencoded (默认值)
      • multipart/form-data (文件上传)
      • text/plain (空格转换为 "+" 加号，但不对特殊字符编码)
常用表单元素

大多数元素都使用<input />标签来定义的,通过type属性来定义不同的表单元素.

表单元素类型 含义 说明
text 单行文本框 默认为text
password 单行密码框
radio 单选框 只能选择一个
checkbox 复选框 可多选
submit 提交按钮 具有提交功能
reset 重置按钮 具有重置功能
image 图片按钮 也具有提交功能
buttion 普通按钮 默认没有功能
file 文件选择器 form表单的属性enctype必须为文件上传
hidden 隐藏域 不会显示,但是会提交,可以存储不想让用户看到的数据

元素共有属性:

  • name:提交时,服务器处理数据时所用的关键字,对应键值对的键.

  • value:提交时,服务器处理数据时所用的值,对应键值对的值.

  • size:元素的宽度

其他元素属性:

  1. 单行文本框:

    • maxlength:最大字符数
    • readonly:只读,可简写,可提交
    • disable:禁用,可简写,不可提交

  2. 单选框:

    • name:为了实现互斥,name值必须一致
    • checked:表示是否选中,可简写

  3. 复选框:

    • name:若选择的数据为同一类型,name值可一致

  4. 文件选择器:

    • accept:接受的文件类型,需要使用MIME定义资源类型

      常见的MIME类型:

      • 纯文本:text/plain text/html text/xml
      • 图片:image/jpeg image/png image/gif
特殊表单元素
表单元素 含义 描述
select 下拉列表框
option 下拉列表项
optgroup 下拉列表项组 用于分组列表项
textarea 文本域 默认支持拖动放大

  1. 下拉列表框:

    • size:显示多条列表项
    • multiple:可多选,可简写
    • disable:禁用,可简写

  2. 下拉列表项:

    • value:选项值
    • selected:默认选中,可简写

  3. 下拉列表项组

    • label:组名

  4. 文本域

    • rows:显示行数
    • cols:显示列数
其他表单元素

  • label标签:

    • for:和其他元素关联

  • button标签:

    • type:可指定按钮的类型,默认为submit

  • fieldset标签:元素分组标签

  • legend标签:元素分组名

2.内嵌框架

  1. 简介

    使用iframe可以在一个页面中引用多个页面显示

  2. 基本用法

    <iframe src=""></iframe>

    常用属性:

    • src:要引用的页面
    • width/height:设置宽度高度
    • frameborder:是否显示边框
    • scrolling:是否显示滚动条
    • name:为框架定义名称

  3. 在框架中打开超链接

    在超链接的target属性里写上想要显示的iframe的名字

    <a href="so.com" target="aaa">
<iframe name="aaa"></iframe>

四.路径分类

绝对路径

以根开头的路径,例如:

  • D:/Program Files/Java/Jdk1.8.121/bin/java.exe
  • http://www.baidu.com/index.html
相对路径

相对于某一个参照点所在路径的路径.

不是以根开头的路径.

  • .表示当前路径

  • ..表示上一个路径

    例如:假设当前路径为http://www.cikaros.cn/page/index.html

    那么./images/1.jpg等价与``http://www.cikaros.cn/page/images/1.jpg`,

    而../images/1.jpg等价于http://www.cikaros.cn/images/1.jpg

五.统一资源定位符

URL即为统一资源定位符,它用来描述资源的位置

URL

假设上面的域名是你的服务器,Web项目的位置在C:/webapps,那么上面的路径就代表你服务器上的C:/webapps/page/index.html.注意:前提是你没有进行虚拟路径的设置.

六.HTML 5

1.特点

  • 取消了过时的标签,如font,center等
  • 增加了一些更具语义化的标签,如header,footer,aside等
  • 增加了一些新功能标签,如audio,video,canvas等
  • 增加了一些新的表单控件,如email,date,time,url,search等
  • 可以直接在浏览器中绘画,无需Flash
  • 增加了本地存储的功能

2.兼容性

各大浏览器对于新的Html 5,还不是完全兼容.请自行上网百度,选择合适的浏览器.

3.新增内容

结构相关标签

用来进行页面布局的标签,本身无任何样式.需要自行修饰.

  • article 定义一个独立的内容,完整的文章
  • section 定义文章的章节,段落
  • header 文章的头部,页眉,标题
  • footer 文章的底部,页脚,标注
  • aside 定义侧边栏
  • figure 定义图片区域
  • figcaption 图片区域标题
  • nav 定义导航菜单

结构标签只是用来表明各个部分的角色,并无实际样式,与普通的div相同.

语义相关标签

  • mark 标注,用来突出显示文本,默认添加黄色背景

  • time 标注,这里的文本有特殊的时间含义

  • details 点击后显示details中的内容,默认显示summary的内容

  • summary 点击后显示details中的内容,默认显示summary的内容

  • meter 计数仪,表示度量,类似于进度条,根据定义的最佳值/最大值/最小值,不同的value值显示的颜色不同

    • max:定义最大值,默认为1
    • min:定义最小值,默认为0
    • value:定义当前值,
    • high:限定什么为高值
    • low:限定什么为低值
    • optimum:限定什么为最佳值

  • progress 进度条

    • value:表示当前值
    • max:限定什么为最大值

表单相关

新增了input的type类型:

元素type类型 含义 描述
email 邮箱输入框 必须格式满足格式才可以提交
url url输入框 必须输入符合要求的url才可以提交
tel 电话输入框 目前仅在手机端适用,PC端无效果
search 搜索框 在搜索框末尾有删除键
number/range 接受数字/数字滑块 用于输入数字,无法输入其他字符,可限制数字的取值范围,包含min,max,step等
date 日期框 兼容性不好
datetime 日期时间框 兼容性不好
month 年月框 兼容性不好
color 颜色拾取框

表单属性

autocomplete:是否要启用表单的自动完成功能,提示功能

novalidate:提交表单时,是否进行校验

表单元素属性

新增表单元素属性:input/select/textarea等

  • placeholder:提示文字信息
  • required:是否是必填项
  • autocomplete:是否要启用表单元素的自动完成功能,提示功能
  • autofocus:设置初始焦点位置
  • pattern:使用正则表达式设置校验规则
  • list:使文本元素具有下拉列表的功能,需要结合datalist和option标签使用
  • form:指定form表单

多媒体相关

  • audio标签 插入音频元素

    • src:音频来源

    • controls:是否显示控制面板

    • autoplay:是否自动播放

    • loop:循环播放

    • muted:是否静音

    • preload:是否要预加载,如果设置了autoplay,则该属性无意义

      可以与source结合使用

  • source标签

    • src:资源路径

  • video标签 插入视频元素,不同的浏览器对视频格式的支持可能不一样

    • audio的属性均可使用

    • width/height:可设置视频尺寸

    • poster:设置预览图

posted @ 2020-03-05 22:50  Cikaros  阅读(280)  评论(0)    收藏  举报