javaweb的HTML部分
自己总结的知识点清单,如果转发请注明出处,尊重原创,虽然写的不怎么样吧,哈哈 ,内容中有些时候是不连贯的,那是本人做的笔记,或者写的感想,不影响阅读。有错误的地方还请批评指正。
HTML部分
Margin:外边距
Padding:内边距
HTML属性元素和格式化。
<p> </p>:一个段落标签
<br/>空标签:换行标签
两个标签都是换行,但是两行的间距是不同的。
HTML的属性。
就是以键值对的方式来表现出来的。比如
href=”链接”:
常用的标签属性:
<a>:target规定在何处打开链接。
<h>:align:对齐方式
<body>:bgcolor背景颜色,backgroud:背景图片。
HTML格式化:
<b> 定义粗体字
<em> 定义着重文字
<i> 定义斜体字
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
HTML样式:
1.标签
<style>:样式定义。----color size
<link>:资源引用。
2.属性
rel=”stylesheet”.外部样式引用。
type=”text/css”:引入文档的类型。
margin-left:边距。:
<hr/>分割线
HTML链接
1. 链接数据
文本链接
图片链接
2. 属性:
href属性;指向另一个文档的链接 #name
name属性:创建文档内的连接。
3. img标签属性。
alt:替换文本属性
width:宽
height;高
HTML表格
<table> 定义表格
<caption> 定义表格标题
<th> 定义表格的表头
<tr> 定义表格行
<td> 定义表格的单元
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
<col> 定义表格的列属性
1. 定义没有边框的表格:就是不定义border就可以,border放在table里面
2. 表格中的表头。也是放在tr里面包含
3. 单元格的边距,cellpadding=””,边距就是里面的文字和边框之间的距离
4. 单元格间距。cellspacing=””
5. 单元格的颜色:color=””;,添加图片,background
6. 单元格内容排列
7. 单元格跨行夸列
HTML列表
<ol> 有序列表
<ul> 无序列表
<li> 列表项
<dl> 列表
<dt> 列表项
<dd> 描述
1. 无序列表
使用标签;<ul>,<li>
属性:type= disc—实体圆 circle—空心圆 square—方块
<ul type=”disc”> 默认的
2. 有序列表
使用标签;<ol>,<li>
属性:A a I i start—从那个数开始
< ol type=”A” start=”10”> 按照大写的A排列
3. 嵌套列表;
使用标签:<ul> <ol> <li>
4. 自定义标签
使用标签:<dl> <dt> <dd>
HTML块
1. HTML块元素
块元素在显示的时候,通常会以新行开始
如:,<h1> <p> <ul>
2. HTML内联元素
内联元素通常不会以新行开始
如:<b> <a> <img>
3. html<div>元素
<div>元素也被称为块元素,其主要是组合HTML元素的容器
4. HTML<span>元素、
<span>元素时内联元素、可作为文本的容器。
HTML布局
1.使用div布局
margin::任何一个角度
background-color;
float:left 从左到右排列。
clear:both 如果上面有float,那么下面的div块就会跟着一起默认浮动。这个时候就要clear清除float布局,才能布局
2.使用table布局。
colsapn:合并几个列
HTML表单
1表单用于获取不同类型的用户输入
2.常用表单标签:
<from> 表单
<input> 输入域
<textarea> 文本域
<label> 控制标签
<fieldset> 定义域
<legend> 域的标题
<select> 选择列表
<optgroup> 选择租
<option> 下拉列表中的选项
<button> 按钮
<input type=”text”> <input type=”password”> <input type=”checkbox”>--复选框
<input type=”radio”>--单选框,一般情况下通过name属性指定相同。才可以实现作为一个组的属性,才可以单选。<inputtype=”button” value=”按钮名”>
<input type=”submit” value=”按钮名”>--提交按钮
<select>下拉列表,后面是option
文本域:<textarea cols=”” rows=””>
form表单里面.有两个属性,分别是action=”路径”,定义在提交表单时候执行的动作,向服务器提交表单的的通常做法是使用提交按钮,
method属性,规定在提交表单的时候使用的http方法。
name属性,如果想正确的被提交那么每个字段必须设置一个name属性。在jsp或者servlet的界面是通过name属性获得表单的值
HTML框架
1. 框架标签<frame>-----不常用了
框架对页面的设计有着很大的作用
2. 框架集标签(<frameset>):-----不常用了
框架集标签定义如何将窗口分割为框架
每一个frameset定义一系列行或者列
Rows/cols的值规定了每行或每列占据屏幕的面积。
3. 常用标签:
Noresize:固定框架大小
Clos:列
Rows:行、
4. 内联框架---比较重要
Iframe
< iframe src=”” frameborder=”0” >< /iframe>
全局属性:不写是false,写了没有指定是true,
contentEditable属性:元素是否可编辑属性
designModel属性:
hidden属性
spellcheck属性---对input属性等进行检查
tabindex属性---设置数字,然后就可以通过tab键不断的进行按顺序访问元素。设置成-1的的时候,不可以获取焦点,但是可以应用。
新增主体结构---为了不频发使用div元素
1. article元素:
article元素代表文档、页面或者应用程序之中独立的,完整的、可以独立被外部引用的内容。他可以是一篇博客或者报刊中的文章,一篇论坛中的帖子,一段用户评论或独立的插件,或其他任何独立的内容。
Article元素是可以独立使用的
Article元素可以用来表示插件。
Article里面有<header> <footer>元素,article元素嵌套使用是可以在一篇博客中的下面的评论。
<embed src=”#”>标签创造一个内嵌标签。----------#代表本页面
2. section元素
section元素用于对网站或者应用程序中页面的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素;当一个容器需要被直接定义样式或者通过脚本定义行为的时候,推荐使用div而非section
3. nav元素
nav元素是一个可以用作页面导航的连接组,其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进nav元素,只需要将主要的,基本的连接组放进nav元素即可。比如页面底部的连接组,可以放进footer标签之内。
nav元素的应用场景
传统的导航条
侧边栏导航:比如京东、淘宝等。
页面内导航。比如一些帮助文档。
翻页操作。
4. aside元素
aside元素用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或者主要内容相关的引用、侧边栏、广告、导航条,以及其他的类似的有区别与主要内容的部分。
5. time元素与微格式
pubdate属性。表示article元素中time的发布日期,或文章等。
datetime属性。时间
首先你要搞清楚一个概念,HTML并不是用来写页面样式的,而是用来表示一个网页的基本架构的,样式用CSS来实现
HTML5除了提出很炫的新效果以外还加强了语义化结构,其中这个time就是其中之一
用<time>来表示时间,并不是想要达到什么可见的效果,而是让网页的代码有条理,让机器——尤其是百度和谷歌的蜘蛛——能够理解你这个网页的意思。
HTML5新增的还有article、nav、header、footer.....等等等,其实现实效果都是和div一样没有效果,但是合理使用却能让页面结构更加清晰有逻辑
看来你被“DIV+CSS”这句哄人的话误导了。当年我也被误导了好几年,以前我做网站从头到尾就只有div,直到后来被一位老人家数落了一顿才觉悟,div是不能滥用的,只能用来做整体的布局,细节部分还是要用其他标签,一方面程序可读性和维护性加强,另一方面,可以用下级选择器来写样式,减少了class和id的命名,可以精简网页的结构;而且语义化结构 有条理才能让搜索引擎更加友好
新增的非主体结构
1. header元素
header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但是也可包含其他内容,例如数据表格、搜索表单或者相关的logo图片
2. footer元素
footer元素可以作为其上层父级内容区块或者是一个根区块的脚注。footer元素通常包含其他区块的脚注信息,如作者,相关阅读链接及版权信息等。
3. hgroup元素
hgroup元素是将标题及其子标题进行分组的元素,hgroup元素通常会将h1
~h6元素进行分组,譬如一个内容区块的标题及其子元素算一组。
4. address元素。
Address元素从来在文档中呈现联系信息,包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等。Address应该不止用来呈现电子邮箱或者真实地址,还用来展示跟文档相关的联系人的所有联系信息。
5. 网页编排规则。
5.1、显示编排内容区域块。显示编排是指明确使用section等元素创建文档结构,在每个区域块使用标题,
5.2、隐式编排内容区域块,隐式编排是指不明确使用section等元素,而是根据网页需求,来写各级的h1至h6,把各级内容区域块自动创建出来。
5.3标题分级,就是下级标题如果比上级标题级别低那么将会创建一个区域块,如果下级标题比上级标题级别高那么将会生成两个区域块,
5.4,不同区域块可以使用相同级别的标题。
表单新增元素与属性
1. 表单内元素的form属性
在HTML4中,表单内的元素必须书写在表单内部版,而在HTML5中可以把他们书写在页面内部的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了,
2. 表单内元素的formaction属性
在HTML4中,一个表单内的所有元素只能通过表单的action属性被同一提交到另一个页面,而在HTML5中可以为所有的提交按钮,增加不同的formaction属性,使单击不同的按钮可以将表单提交到不同的页面。
3. 表单内元素的formmethod属性。
在HTML4中,一个表单内只能有一个action属性用来对表单内所有元素统一指定提交页面,所以每个表单内页只能有一个method属性来同一控制提交方法。在HTML5中,可以使用formmethod属性来对每一个表单元素分别指定不同的提交方法。-----------------指的是get和post方法。
4. 表单内的formenctype属性
在HTML4中,表单元素具有一个enctype属性,该属性用于指定在表单发送服务器之前应该如何对表单内的数据进行编码。
在HTML5中可以使用formenctype属性对表单元素分别指定不同的编码方式。
5. 表单内元素的formtarget属性
在HTML4中,表单元素具有一个target属性,该属性用于指定在何处打开表单提交所需要加载的页面。
HTML5中,可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所加载的页面。
6. 表单内元素的autofocus属性。
为文本框、选择框或按钮控件加上autofocus属性,当画面打开的时候,该控件自动获取光标焦点。第一优先级的。
7. 表单内元素的required属性。
在HTML5中新增的required属性可以应用在大多数输入元素上,在提交的时候,如果元素中的内容为空白,则不允许提交,同时在浏览器中显示信息提示文字。
8. 表单内元素的labels属性。
在HTML5中,为所有可使用标签的表单元素、button、select元素等。定义一个labels属性,属性值为一个nodelist对象,代表该元素所绑定的标签元素所构成的集合。
<
labelfor
=
"female">Female</
label>
<
inputtype
=
"radio"name=
"sex"id=
"female"/>
Label元素通过for与input元素的id属性绑定,然后两个有female的是一个组,labels就指定他们,label,input是一组。当js通过id属性获取元素的时候实际上是获取的label,input两个元素。
9. 标签的control属性。
在HTML5中,可以在标签内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素。
比如
<label id=”label”>
<input id=”txt_zip”>
</label>
然后js代码
Var label = document.getElementById(“lable”);
Var textbox = label.control;-----此步骤就是获取input元素标签。
10. 文本框的placeholder属性
Placeholder是指当文本框处于未输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点的时候,模糊显示输入提示文字。
<input type=”text” placeholder=”请输入用户名”>
11. 文本框的list属性。
在HTML5之中,为单行的文本框增加了一个list属性,该属性的值为某个datalist元素的id,datalist元素也是HTML5中新增加的元素,该元素类似于选择框,但是当用户想要设定的值不在选择列表之内的时候,允许自行输入。Datalist元素本身并不显示,而是当文本框获得焦点的时候以提示输入的方式显示。
比如:
<input type=”text” name=”greeting” list=”greetings”/>
<datalist id=”greetings” style=”display:none”>
<option value=”html”>html</option>
<option value=”css”>css</option>
<option value=”js”>js</option>
</datalist>
12. 文本框的autocomplete属性。
帮助输入所用的自动完成功能,是一个既节省时间又十分方便的功能。在HTML5之前,因为谁都可以看见输入的值,所有在安全方面存缺陷,只要使用autocomplete属性,安全性方面也可以得到很好的控制。
Autocomplete=”on”/”off”默认是on
13. 文本框的pattern属性
在HTML5中,对input元素使用pattern属性,并且将属性值设为某个格式的正则表达式,在提交的时候会针对这些进行检查,检查其内容是否是符合给定格式。当输入的内容不符合给定的格式的时候,则不允许提交,同时在浏览器中显示信息提示文字,提示输入的内容必须符合给定格式。
14. 文本框的selectdirection属性
这对input元素与textarea元素,HTML5增加了selectdirection属性。当用户在这两个元素中用鼠标选取部分文字时,可以使用该属性来获取选取方向。当用户正向选取文字的时候,改属性值为”forward”,当用户反向选取文字时,该属性值为backward。当用户没有选取文字的时候,该属性的值为”forward
15. 复选框的indeterminate属性
对于复选框CheckBox来说,过去只是选取和非选取两种状态。在HTML5中,可以是JavaScript脚本代码中对该元素使用indeterminate属性,以说明复选框处于“尚未明确是否选取”状态。
16. image提交按钮的height属性与width属性,
针对类型为image的input元素,HTML5新增两个属性,height、width分别用来指定图片按钮的高度和宽度