JAVA 之 HTML知识框架
2017-08-07 本文已影响76人
何拾八
html知识导图.png
HTML简介
一. html是什么
Html是用来描述网页的一种语言。
(1)HTML 指的是超文本标记语言 (Hyper Text Markup Language)
(2)HTML 不是一种编程语言，而是一种标记语言(markup language,标记语言是一套标记标签(markup tag))
(3)HTML 使用标记标签来描述网页
超文本 标记 语言
语言：
人与计算机交互的工具
超文本：
(1)普通文本不能实现的，超文本可以实现，能实现普通文本不能实现的功能
(2)包括超链接的文本
标记：
就是标签，不同的标签能实现不同的功能
2、html能做什么
html通过标签的形式将信息展示给用户
3、html书写规范
(1)html结构
<html>
<head>
包括资讯信息：整个页面的属性、指导浏览器解析的标签、引入外部文件的标签
</head>
<body>
我们需要展示的信息
</body>
</html>
(2)html标签是以尖括号包裹关键字成对出现的，有开始标签和结束标签，支持正确的嵌套
(3)大部分标签有属性 格式：属性=“属性值”（多个属性之间用空格隔开）
(4)空标签：功能比较单一 ，例如：<br></br> === <br/>
(5)html不区分大小写，建议使用小写
需求：写一段文字，将其中的部分文字变成红色，字号变大
<html>
<head></head>
<body>
我请大家吃狗不理<font color="red" size="5">包子</font>，
<br/>
大家很高兴！！！
</body>
</html>
二、html基本标签
1、文件标签(结构标签)
<html><html>:根标签
<head>
<title></title>:页面的标题
</head>
<body></body>：内容
属性：
text:文本的颜色
bgcolor:背景色
background:背景图片
颜色的三种表示方式：
(1)单词：red green black
(2)rgb三原色：reg(0,0,0) 0-255
(3)#000000 #ffffff #325687 #377405
2、排版标签
(1)注释标签：<!--注释-->
(2)换行标签：<br/>
(3)段落标签：<p>文本文字</p>
特点：段与段之间有空行
属性：
align:对齐方式（有三个属性值：left center right）
(4)水平线标签：<hr/>
属性：
width:长度
size:粗度
color：颜色
align:对齐方式
尺寸的写法：
（1）像素：10px
（2）百分比：占据副标签的百分比，会随着副标签的大小进行变化
3、块标签
<div></div>:行级块标签
<span></span>:行内块标签
作用：
（1）<div></div>：div+css布局
（2）<span></span>：进行友好提示
4、文字标签
基本文字标签：<font></font>
属性：
color:颜色
size:大小（最大值:7，最小值:1，默认值:3）
face:字体类型，即字体，直接写文字就可以
标题标签：<h1></h1>-<h6></h6>
随着数字的增大逐渐变小，字体是加粗的，内置字号 默认占据一行
5、清单标签（也称为列表标签）
无序列表：<ul></ul>
<li></li>:列表项
属性：
type：有三个值，分别为disc、 square和circle
示例：
<ul >
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
有序列表：<ol></ol>
<li></li>:列表项
属性：
type：1、A、a、I、i（数字、字母、罗马数字）
start:数字，代表首项开始位置
示例：
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
列表标签的作用：实现菜单项（可以实现横向或者纵向菜单）
无序列表标签怎么去掉小圆点？HTML中不能直接去掉，没有这个属性值，需要在CSS中给li标签添加样式list-style:none;
6、图形标签：<img />（自关闭标签）
属性：
src:图形地址
width:宽度
height:高度
border:边框
align:对齐方式，代表图片与相邻的文本的相对位置（有三个属性值：top middle bottom）
alt:图片的文字说明
7、链接标签：<a></a>
属性：
href:跳转页面地址
name:名称，锚点
target:_self(自己) _blank(新页面,之前的页面还有)， 默认是_self
作用：
（1）页面跳转，注意：要调到外网必须要加协议
（2）访问锚点；回到锚点（顶部、底部、中间），在访问锚点时的书写格式：#name的值；
8、表格标签
<table></table>:
属性：
border:表格边框
width:表格的宽度
align:表格的对齐方式（<tr align="center">单元格里面的内容居中对齐<tr>）
bgcolor:背景颜色
<tr></tr>: 代表行
<td></td>：代表单元格
属性：
colspan:列合并
rowspan:行合并
<th></th>：相等于<td>, 只是内置样式加粗居中
<caption></caption>：表格的标题，即表头
表格的作用：
(1)简单的实现一个表格样式
(2)进行页面布局
示例：
<table>
<tr><!--行-->
<th>表格标头</th>
<td>普通单元格</td>
</tr>
</table>
<thead></thead>、<tbody></tbody>、<tfoot></tfoot>
作用：分块加载，用户体验比较好
三、html表单标签(重点)
1、form标签：<form></form>
属性：
name:表单名称
action:提交的路径地址
method:提交方式（get和post）
get和post的区别（重点）：
(1)get提交将数据加在地址栏的后面，格式?name=value&name=value；post提交将数据封装在请求体中
?username=zhangsan&password=123&sex=male&hobby=football&hobby=paiqiu&city=bj#
(2)get提交相对不安全；post提交相对安全
(3)get提交有大小限制，根据浏览器不同而不同；post不限制大小
示例：
<form>
<table>
<!--form里面嵌套table-->
</table>
</form>
2、input标签：<input type=" "/>
type属性:根据type属性实现各种不同功能的表单项；
text：普通的文本输入框；
name：username value="张三"<!--张三是默认值-->
password：密码输入框；特点是显示的是掩码
radio：单选按钮
name：如果想让一组单选按钮互斥，就用指定同意name属性值，需要加value属性值；
checked：默认被选中；
checkbox：复选框；
name：组的概念，需要加value属性值。
checked：默认被选中；
file：上传文件的控件
button：普通按钮，没有任何内置的功能；
submit：内置功能，点击会按照action地址提交
reset：重置，点击会清空之前填写的内容
image：图片按钮，功能类似与submit
src：加载图片
alt:图片的提示文字
hidden:隐藏表单，作用是在提交数据的时候，服务器需要这个数据，但是不需要用户看到。
注意：name属性必须要写。
3、select标签(<select></select>)：下拉菜单
属性：
name;表单项的名称
option标签：可选项（下拉菜单之间的级联）
属性：
value，表单项的值
selected：默认被选中
4、textarea:文本域标签
属性：
cols：列数
rows：行数
注意：默认的文本值在标签体当中
四、html框架标签及其他
1、框架标签
frameset:
属性：
rows；按行划分
cols：按列划分
划分格式： rows="120,*"
frame:
属性：
name：名称，方便target根据name值进行定位
src:加载的页面地址；
2、其他标签
<meta>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link>
<link rel="stylesheet" type="text/css" href="./styles.css">
href：引入css文件的地址
<script>
<script type="text/javascript" src=""></script>
src：js的文件地址
3、特殊字符
空格
> 大于号
< 小于号
© 版权符号
® 注册符号
