首页 > 代码库 > JavaWeb之HTML入门及常用标签

JavaWeb之HTML入门及常用标签

 

HTML:

  HTML的概述及作用: 

    HTML全称为HyperText Markup Language,译为超文本标记语言,不是一种编程语言,是一种描述性的标记语言,用于描述超文本中内容的显示方式。比如字体什么颜色,大小等。
    Html就是超文本标记语言的简写,是最基础的网页语言。
    Html是通过标签来定义的语言,代码都是由标签所组成。

  HTML的基本格式:

<html>    <head>    放置一些属性信息或者辅助性的信息        <title></title>    引入外部的文件    会先加载    </head>    <body>    真正存放数据内容的地方    其他的标签    </body></html>

A:通过观察格式,发现
Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。
头部分是给Html页面增加一些辅助或者属性信息,它里面的内容会最先加载。
体部分是真正存放页面数据的地方。

B:对格式的解释
html:放在html文件的开头,但没有实质性的功能,即使没有这个标记,浏览器在碰到其他的html标记时也一样会进行解析。
浏览器内置了html语言的解析器.
可以设置默认打开浏览器:工具—文件夹选项-文件类型
head:头标记,放置关于此html文件的信息,如提供索引,定义css等。
title:标题标记,包含在head标记内,它的作用是设定网页的标题。
body:主体标记,网页所需要显示的内容都放在这个标记内。

* 以.html或者.htm来结尾
* 浏览器就可以解析HTML的文件。

 

  HTML的注意事项:

 一般的标签都有开始和结束,只有单一的功能,可以在标签内部结束。
改变属性,达到好的显示效果
属性值可以使用双引号,单引号,或者不用引号,一般采用双引号,或者根据公司的规范。


* MyEclipse
* 设置工作空间的编码
* window-首选项-General-workspace-选择UTF-8的编码
* Window—preferences—MyEclipse—Files and Editors—HTML—修改成UTF-8的编码
* Window—preferences—General—Editors—File Associations—选择*.html—选择MyEclipse HTML Editor—选择default—选择ok


* HTML的标签
* 排版标签
* 换行标签 <br/> (用的比较少)
* 水平线 <hr/>
* 属性:color:颜色
* 颜色的写法:有两种写法:1)颜色的英文单词 2)RGB三原色(red green blue) #ffffff
* 属性:width:宽度
* 值有两种写法:1)像素值(300px)2)百分比(30%)
* 区别:百分比会随着浏览器大小而改变,像素不会。
* 空格:&nbsp;
* 段落标签(用的相对较多)
* <p></p>
* 特点:在开始和结束的位置上,各产生一行空行。
* 属性:align:对齐的方式

* <div></div>
* <span></span>
* 标签非常的简单,就是在浏览器上声明一块区域。
* 区别:div后面有换行,span没有。

* 块级元素和行内元素(了解)


* 字体标签
<font></font>(重要的)
* color:颜色
* size:字体的大小
* 最大值和最小值 最大值是7 最小值是1
* 默认值是3,size的写法又提供了一种(+2)
* face:字体的类型

* 标题的标签(用的比较少)
* <h1></h1>
...
* <h6></h6>
* 从1到6是逐渐缩小的。

* 粗体和斜体的标签
<b></b>
<i></i>

* 标签是可以嵌套的
<b><i></i></b>

* HTML的特殊字符
< : &lt;
> : &gt;
& : &amp;

* 滚动字幕(忘了吧)
marquee

* 列表标签
* 把数据进行格式化,指定的格式。

* 列表标签
<dl>(用的较少)
<dt>上层项目</dt>
<dd>下层项目</dd>
<dd>下层项目</dd>
</dl>

* dd标签的特点:默认缩进和自动对齐的。

* 有序列表和无序列表
有序:(也是比较多的)
<ol>
<li></li>
</ol>
* 属性: type 类型
start 从哪开始

无序:(用的非常多)
<ul>
<li></li>
</ul>
* 属性:type

* 不管是有序还是无序,中间数据的条目都使用<li></li>


* 图片标签(重要*****)
<img />
* 属性:
* 属性:src="http://www.mamicode.com/图片的地址"
* width 图片的显示宽度
* height 图片显示的高度
* alt 图片的说明文字


* 超链接的标签(重要*****)
* <a>文本内容</a>
<a></a>
* 链接资源
* 属性:href="http://www.mamicode.com/指定链接的资源的地址"
* 注意:如果链接网络资源,需要协议写上。如果没有协议,默认file文件协议。
* 注意:如果浏览器可以解析的文件,直接就打开了。
* 如果浏览器不可以解析的文件,弹出下载窗口。
* 自定义的协议
* 如果浏览器解析不了的协议,会找操作系统上的应用程序。

* target:打开的位置。

* 定位资源
* 专业的术语 锚
* 属性:name

* 表格标签(*****)
表格标签
<table>:声明表格的范围
* 属性: border="1"
width:表格的宽度
height:高度
bgcolor:背景的颜色
cellpadding:内边距

<caption>标题</caption>
<tr>:代表表格的行
* 属性:align:文字的对齐方式

<td>:单元格
属性:width:宽度
height:高度
合并单元格:
行合并:rowspan="2"
列合并:colspan="2"
</td>
</tr>
<tr>
<th></th>:单元格
</tr>
</table>

* 注意:td与th的区别:th默认居中并且加粗的


* 表单标签(重要**********)
<form>:封装表单的范围。
* 属性: action="请求提交的路径"

method="表单的提交方式"
* 面试题:表单的提交方式有哪些?
* 答:表单的提交方式有很多,常用的有两种,get和post。
* get和post提交方式的区别:
* get方式提交时,会把数据显示在地址栏上。
* post方式不会。

* get方式提交时,安全级别较低。
* post方式安全级别较高。

* get方式提交时,数据大小有限制。
* post方式不会。

* 输入项的表单组件
<input />
* 非常重要的属性:type,根据type值的不同,提供了不同的输入项的组件。
* 列子:<input type="text" />

type=text 文本输入框
type=password 密码输入框
type=radio 单选按钮
* 提供了属性name(name的值是相同的)
* 默认被选中的:checked=checked或者true

type=checkbox 多选按钮
* 默认被选中的:checked=checked或者true

type=file 文件的选择框
type=hidden 隐藏组件
type=button 按钮(史上最难看的)
type=image 和提交按钮是相同的作用。
type=reset 重置
type=submit 提交数据

* 选择框
<select name="city">
<option value="http://www.mamicode.com/bj">北京</option>
<option value="http://www.mamicode.com/sh">上海</option>
</select>

* 文本域
<textarea rows="" cols=""></textarea>

</form>

* 注意:点击了提交按钮后,地址栏发送了变化(?sex=on)* ?username=haha&sex=on
* ?username=zhangsan&pwd=123&sex=nan&love=lq

* input标签需要提供两个属性,一个属性name,一个是value
(*****)name属性必须要指定,value看情况指定。


* 框架标签(用的比较少)
* 使用<frameset></frameset> :注意:不能在body标签的内部和下面来使用该标签。





















JavaWeb之HTML入门及常用标签