整理一下这一周学习的一些知识。
首先是一些基本标签。
<!DOCTYPE HTML><html>
文档类型声明: 让浏览器,按照html5的标准对代码进行解释与执行。
文档类型声明必不可少,而且,必须放在文档最上方。
如果不写文档类型声明,浏览器会默认按照兼容模式运行,可能会出现不明BUG。
<head></head>head中,主要放一些关于网页设置的相关语句。
<body><body>body中的内容,会显示在浏览器的展示区域。
从功能上,HTML标签,分为“块级标签”和“行级标签”。
【块级标签和行级标签的区别】
① 块级标签自动换行,前后隔一行;
行级标签不会自动换行,从左往右依次显示;
② 块级标签的宽度默认是100%;
行级标签的宽度由文字内容撑开;
③ 块级标签可以设置宽度、高度、边距等属性;
行级标签不能设置上述属性
常见的块级标签。
h标签:标题标签,默认加粗,h1最大,h6最小。
hr标签: 水平线标签。
p标签: 段落标签,表示网页中的一段文字。
br标签: 换行符号,在代码中敲回车,在网页中并没有作用。必须使用<br>断行
blockquote:引用标签。表示标签中的文字是引用自其他网站的内容。
浏览器默认显示效果:整段向后缩进
cite属性:表示引用内容的来源,常写引用的网址URL
pre标签:预格式标签。 与p标签不同的是,pre标签会保留代码中的空格和回车,在网页直接显示。
最常用的作用,是在网页中显示代码段,保留代码段格式。
【基于布局的块级标签】
有序列表 ol order list
一个有序列表由多个li组成
无序列表 ul unorder list
定义列表 dl
定义列表包含两部分:
<dt></dt>:定义列表的标题,标题顶格显示,一般一个定义列表只有一个标题
<dd></dd>:定义列表的描述项,相对于标题向后缩进显示,一个列表可以有多个描述项。
div 分区标签,用于配合CSS使用。将网页划分为区块,可以包裹各种标签。
【常用的行级标签】
span标签:用于包裹行内的文字。 常配合CSS使用修改文字样式。
img图片标签
1. src属性:表示图片所在的路径。
2. width、height 宽度、高度属性
3. title:鼠标指上时显示的文字
4. alt: 图片无法加载时,显示的文字。 省略alt,将默认显示title内容
5. align: 图片周围的文字,相对于图片的排列方式;
top 文字居上 center 文字居中 bottom 文字局底
a标签 超链接
1. href属性: 超链接跳转的地址。可以是网络连接,也可以是本地HTML文件的相对路径。
2. target属性: 超链接新页面打开的位置。
_slef在当前页面打开(默认) _blank在新页面打开
3. title属性:鼠标指在超链接上显示的文字。
【表格】
表格table
表格中一行,用tr表示;
一行中的每个单元格,用td表示;
首行的表头中每个单元格,用th表示,th默认文字会加粗、居中。
【表格中的各种属性】
1. border: 给表格的每个td和整个table加边框。 如果border的值>1,则只有最外层边框加粗,td上的边框不变。
2. cellspacing:设置单元格与单元格之间的间距。
cellspacing="0" 可以设置边框之间的间距为0,但是相邻的边框不会合并,而是显示为两条线的宽度。
[设置表格边框合并]
可以使用CSS设置:style="border-collapse: collapse;"
设置边框合并以后,cellspacing属性将会失效。因为两条线已经合并到一起了。
3. cellpadding: 单元格内边距,单元格中文字与边框之间的距离。
4. width/height: 表格的宽度、高度
5. align: 设置表格在浏览器中,居左、居中、居右
6. bgcolor: 表格背景色
bordercolor: 表格的边框颜色
background: 表格背景图。背景色和背景图同时存在时,背景图生效。
【表格的行列属性】
作用于tr或者td上的属性:
1. width、height: 宽度、高度
2. bgcolor:背景色。
当表格的属性与行列的属性发生冲突时,优先级采用“近者优先”的原则:table<tr<td
3. align: 设置单元格中的文字,水平对齐方式;left center right
valign: 设置单元格中的文字,垂直对齐方式; top center bottom
【表格的跨行与跨列】
1. 跨列: colspan="n" 如果某个单元格跨n列,则该单元格右侧n-1个td就不需要了;
2. 跨行: rowspan="n" 如果某个单元格跨n行,则该单元格下方n-1个td就不需要了;
【form表单】
1、form表单有两个重要的属性:
action:表示,将表单提交给哪个服务器地址;
method:表单提交数据的方式,可选值有 get 和 post 两种。
[get和post区别]
① get使用URL传递数据。所有内容在地址栏可见,不安全;
post的数据无法在地址栏看到,比较安全。
② get传递的数据量有限,而且只能传递纯文字内容;
post可以传递大量数据,并且可以传递图片、视频等文件。
③ get的传输速度要比post快。
[get传递数据的URL格式]
http://原来的地址.html?name1=value1&name2=value2
比如:http://127.0.0.1:8020/0595.html?username=123
所以,input使用时,name属性必不可少。缺少name,将导致该输入框的数据不向后台传递。
2、 input的常用属性:
① type :表示当前输入框是何种类型的输入框;
② name : 给输入框起别名。向后台传递时,使用name=value的形式传递
③ value: 当前input的默认值;
④ placeholder: 输入框的提示内容。当输入框有value时,提示内容消失。
⑤ hidden: 隐藏当前输入框。 可以写为hidden="hidden",也可以省略属性值,只写<input type="text" hidden />
隐藏的输入框内容,依然可以向后台传递数据
⑥ disabled: 禁用当前输入框。 可以显示,不能使用。
被禁用的输入框内容,将不能向后台传递数据。
⑦ checked="checked" 设置单选按钮/多选按钮,默认选中
3、input的type类型:
① text: 普通的文本框;
② password: 密码框。 输入的内容 ,显示为小黑点。
③ radio: 单选按钮。 单选按钮的value不能省略,这个value需要传到后台;
单选按钮,凭借name是否相同,区分按钮是否为同一组。 同一组按钮只能选中一个,name必须相同。
checked="checked" 设置单选按钮,默认被选中。
④ checkbox: 多选按钮。 其他与单选按钮相同。
⑤ file: 文件上传框。
accept属性,可以限制只能上传何种类型的文件。 "*"表示可以接受所有文件,"image/*"表示只能接受图片。
multiple="multiple" 设置可以上传多个文件。
⑥ submit: 表单提交按钮。
⑦ reset : 表单重置按钮。点击将表单恢复为初始状态。
⑧ image : 图形提交按钮。src属性导入图片,与submit都具有提交表单的作用。
⑨ button: 显示为按钮形状,但是没有任何作用。
⑩ hidden: 隐藏的输入框。与普通输入框+hidden="hidden"的作用相同。
4、 select 下拉选择区块
① select里面的每一项,用<option></option>标签表示;
② name属性,需要写到select标签上;
③ option标签如果有value属性,则向后台传递的将是value属性的值,如果没有value属性,则传递的是<option></option>标签之间的文字。
④ option添加属性selected="selected", 设置默认选中项。
⑤ select添加属性multiple="multiple", 设置当前下拉控件可以多选
⑥ option添加属性title,表示鼠标指上后显示的文字。
⑦ select可以使用<optgroup></optgroup> 标签对选项进行分组,用label属性显示分组名。
<select >
<optgroup label="沿海">
<option>青岛</option>
<option>烟台</option>
</optgroup>
<optgroup label="内地">
<option>济南</option>
<option>临沂</option>
</optgroup>
</select>
5、 textarea 文本域
① 文本域大小控制:
可以用文本域属性cols="20"(宽度多少字符) rows="10"(高度多少行)
可以使用CSS样式style="width:100px; height:100px;"
② 设置文本域大小不能拖动:
style="resize: none;"
③ 设置文本域为只读模式,不能修改:
<textarea readonly="readonly"></textarea>
④ 文字超出区域处理:
使用style="overflow: xx;"可以设置文字超出区域的显示的方式:
>>> overflow: hidden; 超出区域的文字隐藏不显示;
>>> overflow: scroll; 无论文字多少,都会显示水平垂直滚动条
>>> overflow: auto; 自动,默认效果。文字多显示滚动条,文字少,不显示滚动条。
>>> 可以使用overflow-x和overflow-y单独修改两个方向的滚动条
overflow-y: scroll; overflow-x: hidden;
【HTML5 智能表单】
1、H5给我们提供了将form外的input与表单关联的方式。只需要给form表单起一个id,然后给表单外面的input添加form属性,指向这个id,就可以实现表单与input的绑定;
<form id="ff"></form>
<input form="ff"/>
2、 H5给我们新增了许多input的新的type类型。
range color date email url
3、H5新增的input属性:
① form属性: 关联指定表单的id。
② Placeholder: 输入框的提示内容
③ required="required" 必填
④ autofocus="autofocus" 指定输入框,自动获得焦点
⑤ autocomplete: 是否开启自动提示完成功能。 默认为开启状态,设置为off表示关闭,设置为on表示打开。
可以给form标签设置autocomplete,控制表单所有输入框的自动提示功能。