---恢复内容开始---
一、HTML
1、什么是html?
html 超文本标记语言
超文本:就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素
标记语言:标记(标签)构成的语言
2、什么是标签?
⑴、是由一对尖括号包裹的单词构成。例如<html>*所有标签中的单词不可能以数字构成
⑵、标签不区分大小写,<html>和<HTML>,推荐使用小写
⑶、标签分为两部分:开始标签<a>和结束标签</a>,两个标签中间的部分,我们叫做标签体。
⑷、有些标签功能比较简单,使用一个标签即可。这种标签叫做自闭合标签。<br/>、<hr/>、<input/>、<img/>。
⑸、标签可以嵌套,但是不能交叉嵌套<a><b></a></b>。
3、标签的属性
⑴、通常是以键值对形式出现的,例如name=“nick”
⑵、属性只能出现在开始标签或自闭合标签中。
⑶、属性名字全部小写,属性值必须使用双引号或单引号包裹,例如name=“nick”
⑷、如果属性名和属性值完全一样。直接写属性名即可,例如 readonly。
4、HTML5基本结构
将HTML4中的DTD定义为如下结构即可:
<!DOCTYPE HTML>
HTML5支持的两种指定页面使用的字符集的方式:
⑴、使用content-type指定字符集
<meta http–equiv="Content-type"
content="text/html;charset=UTF-8"/>
⑵、直接使用charset指定字符集
<meta charset=“UTF-8”>
二、<head>标签
1、<title>
<title>Title</title>
⑴、<base/>
标签为页面上的所有链接规定的默认地址或默认目标。
⑵、<link/>
引用外部文档,常见于引用外部样式。重要属性有三个:rel、href、type
①、rel规定文档与被链接文档之间的关系
rel="dns-prefetch"预先解析缓存文档中使用的域名,目的是为了提高网页访问速度。使用场景:在一个网页频繁使用其他域名资源时。
rel="shortcut icon"或rel="icon"在收藏和标题栏上用于显示的图标,实例 <link rel="icon" href="http://…/o-s.png">。注意IE浏览器只支持ico格式,为了兼容IE,图片文件采用ico格式。
rel="stylesheet"引用外部样式表。
rel="nofollow"用于指示搜索引擎不要追踪(爬虫抓取),减少垃圾链接。用于<a>标签。使用场景:网页不被信任或者不希望被搜索引擎录入的网站。
②、href
资源的路径(相对路径/绝对路径)
③、type
规定被链接文档的MIME类型,用于明确文档的打开方式。例如.ico文件,image/icon.
⑶、<meta/>
定义关于HTML文档的元数据。重要的属性有三个:http-equiv、name、content
①、http-equiv把content属性值关联到http头部。
content-type(浏览器接受的文档类型,一般是text/html)
refresh(网页刷新,以秒为单位)
expires(设定网页到期时间,一旦过期,必须到服务器上重传)
②、name 把content属性关联到一个名称
keywords(搜索关键字,用于搜索引擎抓去信息的显示)
description(搜索到网站后显示的网页内容简描述)
author(站点制作者信息)
generator(用于叙述生成工具)
name也可以根据特定的功能自定义
③、content定义http-equiv或name属性相关的元信息,是必要的属性。
三、<body>标签
1、块级标签和内联标签
块级标签 <p><h1><ol><ul><form><div>
内联标签 <a><input><img><sub><sup><textarea><span>
⑴、block(块)元素的特点
①、总是在新行上开始;
②、高度,行高以及内边距和外边距都可控制;
③、宽度缺省是它的容器的100%,车费设定一个宽度。
④、它可以容纳内联元素和其他块元素
⑵、inline(内联)元素的特点
①、和其他元素都在一行上;
②、高、行高、内边距以及外边距不可改变;
③、宽度就是它图片以及文字的宽度,不可改变;
④、内联元素只能容纳文本或者其他内联元素
对行内元素,需要注意如下
①、设置宽度width无效
②、设置高度height无效,可以通过line-height设定
③、设置margin,只有左右margin有效,上下无效。
④、设置padding,只有左右padding有效,上下则无效。
⑤、注意元素范围是增大了,但是对元素周围的内容是没有影响的。
2、基本标签
<h1>~<h6> 标题标签
<p>段落标签。包裹的内容被换行,并且也上下内容之间有一行空白。
style="text-indent:2em",可以设置样式为首行缩进两个字符。
<blockquote></blockquote>可以用来设置整个段落的缩进。
<b><string> 加粗标签
<strike> 为文字加上一条中线
<u>文字下方加下划线
<em><i> 文字变成斜体
<sup>和<sub>上角标和下角标
<br> 换行
<hr> 水平线
<div> 块级标签。块级标签常用于布局,行级标签常用于显示内容。
div的显示常用于id或class来标识。id为唯一的标签表示,class为标签的类标识。
div的大小是由内容来决定的,默认情况下,高度由内容的高度决定,宽度适应屏幕。可以容纳其他元素,是一个容器。
<span>
3、特殊符号
&gt; >
&it;<
&nbsp; 空格
&quot; 引号
&copy; 版权符号
4、<a> 超链接标签(锚标签)
重要属性有三个:href、target、name
⑴、href 超链接地址,可以是web上任意资源,包括图片、网页、样式、脚本文件等。
⑵、target 文档打开时要显示的目标位置,属性值一般有:_blank(新窗口中打开),_self(默认,在超链接所在的容器中打开),_parent(在超链接的父容器中打开),_top(整个容器中打开),name(框架名称)。
⑶、name 锚记名称。作用:跳转到文档的某个地方,返回首页。
5、<img> 图形标签
行级标签,用来显示图片。
重要属性有:src、title、alt、width、heigth、align
⑴、src 图片地址
⑵、title 鼠标悬浮在图片上的文字。
⑶、alt 图片找不到时要替换的文字。如果图片资源使用的是外网资源,则不会显示要替换的文字。如果使用的是本网站的资源(相对路径资源),则找不到图片时会显示替换的文字,并保留图片设置的宽高结构。
⑷、align 图片周围文字的垂直对齐情况。常用地属性值有:top(与图片的顶部对齐)、middle(与图片的中部对齐)、bottom(默认,与图片的底部对齐)。
⑸、width 图片的宽
⑹、height 图片的高(宽高两个属性只用一个,会自动等比缩放)
6、列表标签
⑴、<ul> 无序列表标签
<li> 列表中的每一项
⑵、<ol> 有序列表标签
<li> 列表中的每一项
li>列表中的属性主要有type、value两个
type 指明项目的类型,属性值有A,a,I,i,disc(实心圆),square(实心正方形),cilcle(空心圆)。
value 表示序号值从几开始。
⑶、<dl> 定义列表
<dt> 列表标题
<dd> 列表项
7、<table> 表格标签
border: 表格边框
align:水平对齐方式
bgcolor:背景颜色
cellpadding:内边距。单元格与内容之间的距离
cellspacing:外边距。单元格的边距,设置为0时,表格变为实线表格。
width:表格的宽度。可以用%或者像素,最好通过css来设置长宽。
<caption> 表格的标题
<tr> 表格的数据行,
<th> 表格的表头名称,文字采用加粗居中的形式显示
<td> 单元格,用来显示表格内容
<thead> 表格头部,使结构更加分明
<tbody> 表格主题部分,使结构更加分明
rowspan 单元格竖跨多少行,作用在th或者td上
colspan 单元格横跨多少列(即合并单元格),作用在th或者td上
8、<form> 表单标签
⑴、表单属性
HTML表单用于接受不同类型的用户输入,用于提交的所有内容都应该在该标签内。
属性有:action、method、enctype
①、 anction表单要提交的地址,用于处理表单的内容。(一般是提交字典到后台的一个接口,接口有java所写)
②、method 提交的方法,默认是get方式提交。
③、enctype 对表单数据进行编码,默认都是要编码的
⑵、<input> type属性
①、 text 文本框输入(默认text文本框类型)。
autocomplete (自定完成输入的内容,要求表单元素要用name属性才有自动完成的效果,off表示自动完成不可用,on表示自动完成可用)
disabled (设置或者获取控件的状态,默认是false即可,等于true时不可用,不能输入内容)
②、 password 密码框(以下属性text和password属性共有)
size (指定表单元素的初始宽度,当type为text或者password,表单元素的大小以字符为单位,对于其他元素,宽度以像素为单位)
maxlengh (当type为text或者password,表示输入的最大字符数),有利于防止sql的攻击
readonly 只读
placeholder 框内预制内容(灰色),写上内容时才消失
③、radio 单选按钮
属性:
name:将name的值设置为相同值,才表示一组数据,才能实现单选功能。
value:必须要写,提交到服务器的key值,实际开发过程中,value一般指编号
checked:是否被选中的状态
④、checkbox 复选框
name:名字一定要一样一样的,才表示是一组数据,添加到同一value值列表,提交到服务器
value:必须要写,提交到服务器的key值,实际开发过程中,value一般指编号
checked:是否被选中的状态
⑤、file 文件域 ,上传文件(不同的浏览器表现形式不同)
⑥、submit 提交按钮,用于提交表单
⑦、reset 重置按钮,清空表单的输入,恢复到表单磨默认的状态
⑧、buttom 普通按钮,一般结合javascript使用
⑨、image 图片按钮,用来提交表单,与submit是一样的效果
src 图片路径
⑩、hidden 隐藏字段
value 隐藏的内容
⑩①、color 颜色标签 value指定颜色值(采用#十六进制数表示)
⑩②、data 日期。value值指定默认的日期,格式为****_**_**(年月日)
⑩③、datatime_local 显示本地时间,value值指定默认的时间。(年月日时分秒)
⑩④、number数字向上或者向下滑动。可以填数字然后向上或者向下填不同的值。
⑩⑤、range 滑动标签。min(指定最小值),max(指定最大值),value(指定当前默认值)
⑩⑥、week 每年的周数。value指定那一年第几周
⑶、<texearea>文本域标签。默认表现形式是可以输入很多行文本的文本框。
①、name(表单提交项的key)
②、cols 设置文本域宽度
③、rows 设置文本域高度,即行数
⑷、<select> 下拉框标签。使用时要结合<option>标签框一同使用。
name(表单提交项的key)
size(选项个数)
multiple(多选)
<option> 下拉选中的每一项
value 表单提交项的值
selected(selected下拉选默认被选中)
⑸、<label> 把元素与文本结合起来
友好设计:不只是选中复选框才能选中并打钩,要求点击对应的文字也能选中该复选框。这种情况下要用到<label>标签的for属性(设置或获取给定标签对象指定到的对象,值=另一个元素的id号即可)
⑹、<fieldset> 对表单中的相关元素进行分组
注意:
value 表单提交项的值
对于不同的输入类型,
---恢复内容结束---
一、HTML
1、什么是html?
html 超文本标记语言
超文本:就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素
标记语言:标记(标签)构成的语言
2、什么是标签?
⑴、是由一对尖括号包裹的单词构成。例如<html>*所有标签中的单词不可能以数字构成
⑵、标签不区分大小写,<html>和<HTML>,推荐使用小写
⑶、标签分为两部分:开始标签<a>和结束标签</a>,两个标签中间的部分,我们叫做标签体。
⑷、有些标签功能比较简单,使用一个标签即可。这种标签叫做自闭合标签。<br/>、<hr/>、<input/>、<img/>。
⑸、标签可以嵌套,但是不能交叉嵌套<a><b></a></b>。
3、标签的属性
⑴、通常是以键值对形式出现的,例如name=“nick”
⑵、属性只能出现在开始标签或自闭合标签中。
⑶、属性名字全部小写,属性值必须使用双引号或单引号包裹,例如name=“nick”
⑷、如果属性名和属性值完全一样。直接写属性名即可,例如 readonly。
4、HTML5基本结构
将HTML4中的DTD定义为如下结构即可:
<!DOCTYPE HTML>
HTML5支持的两种指定页面使用的字符集的方式:
⑴、使用content-type指定字符集
<meta http–equiv="Content-type"
content="text/html;charset=UTF-8"/>
⑵、直接使用charset指定字符集
<meta charset=“UTF-8”>
二、<head>标签
1、<title>
<title>Title</title>
⑴、<base/>
标签为页面上的所有链接规定的默认地址或默认目标。
⑵、<link/>
引用外部文档,常见于引用外部样式。重要属性有三个:rel、href、type
①、rel规定文档与被链接文档之间的关系
rel="dns-prefetch"预先解析缓存文档中使用的域名,目的是为了提高网页访问速度。使用场景:在一个网页频繁使用其他域名资源时。
rel="shortcut icon"或rel="icon"在收藏和标题栏上用于显示的图标,实例 <link rel="icon" href="http://…/o-s.png">。注意IE浏览器只支持ico格式,为了兼容IE,图片文件采用ico格式。
rel="stylesheet"引用外部样式表。
rel="nofollow"用于指示搜索引擎不要追踪(爬虫抓取),减少垃圾链接。用于<a>标签。使用场景:网页不被信任或者不希望被搜索引擎录入的网站。
②、href
资源的路径(相对路径/绝对路径)
③、type
规定被链接文档的MIME类型,用于明确文档的打开方式。例如.ico文件,image/icon.
⑶、<meta/>
定义关于HTML文档的元数据。重要的属性有三个:http-equiv、name、content
①、http-equiv把content属性值关联到http头部。
content-type(浏览器接受的文档类型,一般是text/html)
refresh(网页刷新,以秒为单位)
expires(设定网页到期时间,一旦过期,必须到服务器上重传)
②、name 把content属性关联到一个名称
keywords(搜索关键字,用于搜索引擎抓去信息的显示)
description(搜索到网站后显示的网页内容简描述)
author(站点制作者信息)
generator(用于叙述生成工具)
name也可以根据特定的功能自定义
③、content定义http-equiv或name属性相关的元信息,是必要的属性。
三、<body>标签
1、块级标签和内联标签
块级标签 <p><h1><ol><ul><form><div>
内联标签 <a><input><img><sub><sup><textarea><span>
⑴、block(块)元素的特点
①、总是在新行上开始;
②、高度,行高以及内边距和外边距都可控制;
③、宽度缺省是它的容器的100%,车费设定一个宽度。
④、它可以容纳内联元素和其他块元素
⑵、inline(内联)元素的特点
①、和其他元素都在一行上;
②、高、行高、内边距以及外边距不可改变;
③、宽度就是它图片以及文字的宽度,不可改变;
④、内联元素只能容纳文本或者其他内联元素
对行内元素,需要注意如下
①、设置宽度width无效
②、设置高度height无效,可以通过line-height设定
③、设置margin,只有左右margin有效,上下无效。
④、设置padding,只有左右padding有效,上下则无效。
⑤、注意元素范围是增大了,但是对元素周围的内容是没有影响的。
2、基本标签
<h1>~<h6> 标题标签
<p>段落标签。包裹的内容被换行,并且也上下内容之间有一行空白。
style="text-indent:2em",可以设置样式为首行缩进两个字符。
<blockquote></blockquote>可以用来设置整个段落的缩进。
<b><string> 加粗标签
<strike> 为文字加上一条中线
<u>文字下方加下划线
<em><i> 文字变成斜体
<sup>和<sub>上角标和下角标
<br> 换行
<hr> 水平线
<div> 块级标签。块级标签常用于布局,行级标签常用于显示内容。
div的显示常用于id或class来标识。id为唯一的标签表示,class为标签的类标识。
div的大小是由内容来决定的,默认情况下,高度由内容的高度决定,宽度适应屏幕。可以容纳其他元素,是一个容器。
<span>
3、特殊符号
&gt; >
&it;<
&nbsp; 空格
&quot; 引号
&copy; 版权符号
4、<a> 超链接标签(锚标签)
重要属性有三个:href、target、name
⑴、href 超链接地址,可以是web上任意资源,包括图片、网页、样式、脚本文件等。
⑵、target 文档打开时要显示的目标位置,属性值一般有:_blank(新窗口中打开),_self(默认,在超链接所在的容器中打开),_parent(在超链接的父容器中打开),_top(整个容器中打开),name(框架名称)。
⑶、name 锚记名称。作用:跳转到文档的某个地方,返回首页。
5、<img> 图形标签
行级标签,用来显示图片。
重要属性有:src、title、alt、width、heigth、align
⑴、src 图片地址
⑵、title 鼠标悬浮在图片上的文字。
⑶、alt 图片找不到时要替换的文字。如果图片资源使用的是外网资源,则不会显示要替换的文字。如果使用的是本网站的资源(相对路径资源),则找不到图片时会显示替换的文字,并保留图片设置的宽高结构。
⑷、align 图片周围文字的垂直对齐情况。常用地属性值有:top(与图片的顶部对齐)、middle(与图片的中部对齐)、bottom(默认,与图片的底部对齐)。
⑸、width 图片的宽
⑹、height 图片的高(宽高两个属性只用一个,会自动等比缩放)
6、列表标签
⑴、<ul> 无序列表标签
<li> 列表中的每一项
⑵、<ol> 有序列表标签
<li> 列表中的每一项
li>列表中的属性主要有type、value两个
type 指明项目的类型,属性值有A,a,I,i,disc(实心圆),square(实心正方形),cilcle(空心圆)。
value 表示序号值从几开始。
⑶、<dl> 定义列表
<dt> 列表标题
<dd> 列表项
7、<table> 表格标签
border: 表格边框
align:水平对齐方式
bgcolor:背景颜色
cellpadding:内边距。单元格与内容之间的距离
cellspacing:外边距。单元格的边距,设置为0时,表格变为实线表格。
width:表格的宽度。可以用%或者像素,最好通过css来设置长宽。
<caption> 表格的标题
<tr> 表格的数据行,
<th> 表格的表头名称,文字采用加粗居中的形式显示
<td> 单元格,用来显示表格内容
<thead> 表格头部,使结构更加分明
<tbody> 表格主题部分,使结构更加分明
rowspan 单元格竖跨多少行,作用在th或者td上
colspan 单元格横跨多少列(即合并单元格),作用在th或者td上
8、<form> 表单标签
⑴、表单属性
HTML表单用于接受不同类型的用户输入,用于提交的所有内容都应该在该标签内。
属性有:action、method、enctype
①、 anction表单要提交的地址,用于处理表单的内容。(一般是提交字典到后台的一个接口,接口有java所写)
②、method 提交的方法,默认是get方式提交。
③、enctype 对表单数据进行编码,默认都是要编码的
⑵、<input> type属性
①、 text 文本框输入(默认text文本框类型)。
autocomplete (自定完成输入的内容,要求表单元素要用name属性才有自动完成的效果,off表示自动完成不可用,on表示自动完成可用)
disabled (设置或者获取控件的状态,默认是false即可,等于true时不可用,不能输入内容)
②、 password 密码框(以下属性text和password属性共有)
size (指定表单元素的初始宽度,当type为text或者password,表单元素的大小以字符为单位,对于其他元素,宽度以像素为单位)
maxlengh (当type为text或者password,表示输入的最大字符数),有利于防止sql的攻击
readonly 只读
placeholder 框内预制内容(灰色),写上内容时才消失
③、radio 单选按钮
属性:
name:将name的值设置为相同值,才表示一组数据,才能实现单选功能。
value:必须要写,提交到服务器的key值,实际开发过程中,value一般指编号
checked:是否被选中的状态
④、checkbox 复选框
name:名字一定要一样一样的,才表示是一组数据,添加到同一value值列表,提交到服务器
value:必须要写,提交到服务器的key值,实际开发过程中,value一般指编号
checked:是否被选中的状态
⑤、file 文件域 ,上传文件(不同的浏览器表现形式不同)
⑥、submit 提交按钮,用于提交表单
⑦、reset 重置按钮,清空表单的输入,恢复到表单磨默认的状态
⑧、buttom 普通按钮,一般结合javascript使用
⑨、image 图片按钮,用来提交表单,与submit是一样的效果
src 图片路径
⑩、hidden 隐藏字段
value 隐藏的内容
⑩①、color 颜色标签 value指定颜色值(采用#十六进制数表示)
⑩②、data 日期。value值指定默认的日期,格式为****_**_**(年月日)
⑩③、datatime_local 显示本地时间,value值指定默认的时间。(年月日时分秒)
⑩④、number数字向上或者向下滑动。可以填数字然后向上或者向下填不同的值。
⑩⑤、range 滑动标签。min(指定最小值),max(指定最大值),value(指定当前默认值)
⑩⑥、week 每年的周数。value指定那一年第几周
⑶、<texearea>文本域标签。默认表现形式是可以输入很多行文本的文本框。
①、name(表单提交项的key)
②、cols 设置文本域宽度
③、rows 设置文本域高度,即行数
⑷、<select> 下拉框标签。使用时要结合<option>标签框一同使用。
name(表单提交项的key)
size(选项个数)
multiple(多选)
<option> 下拉选中的每一项
value 表单提交项的值
selected(selected下拉选默认被选中)
⑸、<label> 把元素与文本结合起来
友好设计:不只是选中复选框才能选中并打钩,要求点击对应的文字也能选中该复选框。这种情况下要用到<label>标签的for属性(设置或获取给定标签对象指定到的对象,值=另一个元素的id号即可)
⑹、<fieldset> 对表单中的相关元素进行分组
注意:
⑺、value 表单提交项的值
对于不同的输入类型,value属性的用法也不同:
⑴、type=“button”“reset”“submit”定义按钮上的显示的文本。
⑵、type=“text”“password”“hidden”定义输入字段的初始值。
⑶、type=“checkbox”“radio”“image”定义与输入相关联的值。
三、框架
1、<frameset>框架
用来划分窗体,不能放在<body>中,不然没有效果。
⑴、cols (纵向分割页面。其数值表示方法有三种:“30%,30(或者30px),*”;数值的个数表示分成的视窗数目且数值之间用“,”隔开。“30%”表示该框架区域占全部浏览页面区域的30%,“30”表示该区域横向宽度为30像素“*”表示该区域占用余下页面空间。例如:cols=“25%,200,*”,表示将页面分为三部分,左面部分占页面25%,中间横向宽度占200像素,页面余下的做右面部分)
⑵、rows (横向分割页面。属性和cols一样)
⑶、frameborder (设置是否显示框架边框。设定值只有0,1;0表示不要边框,1表示要显示边框)
⑷、border(框架之间的距离。一般设置为0)
⑸、bordercolor(边框的颜色)
⑹、framespacing(设置框架与框架间的保留的空白距离)
2、<iframe> 框架
元素会创建包含另外一个文档的内联框架(即行内框架)
name(设置框架名称,此为必须设置的属性)
src (设置此框架要显示的网页名称或路径,此为必须设置的属性)
scrolling (设置是否要显示滚动条。设定值为:auto,yes,no)
bordercolor (设置框架的边框颜色)
frameborder(设置是否显示框架边框。设定值只有0,1;0表示不要边框,1表示要显示边框)
noresize (设置框架大小是否能手动调节)
marginwidth (设置框架边界和其中内容之间的宽度)
marginhight (设置框架边界和其中内容之间的高度)
width (设置框架宽度)
height (设置框架高度)
原文:https://www.cnblogs.com/jxyshuju/p/11622705.html