首页 > 代码库 > 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%)
* 区别：百分比会随着浏览器大小而改变，像素不会。
* 空格：
* 段落标签（用的相对较多）
* <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的特殊字符
< : <
> : >
& : &
* 滚动字幕（忘了吧）
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入门及常用标签