Java Web 01_HTML4&&HTML5基础标签语法
HMTL基础
1.什么是HTML
Hyper Text Markup Language (超文本标记语言)标记又俗称标签(tag)，一般格式：
<tagName>tagName> 如
<h1>h1>
标签里还可以有属性(Attribute)：
<tagName Atrribute = “value” /> 如
<meta charset="utf-8" />
还有一些特殊非成对出现标签：
<hr /> <br />
HTML是由浏览器解析执行文档的基本结构
- —引用的HTML5规范
<html>
<head> --头部：包含标签title、meta
<meta charset=”utf-8” />
<title>title>
head>
<body> ---主体
body>
html>
- meta
<meta charset=”utf-8” />
2.常用的编码格式
gbk : 中文简体
gb2312: 中文简体
utf-8: 国际默认编码字符
ios-8859-1: 西欧编码
big5: 大五码，繁体中文。应用：台湾地区
keywords 、 description 提供给搜索引擎
3.文本排版的常用标签
h1~h6 : 标题标签
p: 段落标签
hr: 水平线
br: 换行
strong: 字体加粗标签
em: 斜体
span: 无任何特殊样式的标签
pre: 预留格式标签
注释
4.特殊符号
空格
> 大于符号
< 小于符号
" 双引号
© 版权符号
5.图像标签
<img
src=”图片地址”
alt=”图片加载失败后的提示”
title=”鼠标悬停至图片上的提示”
width=”宽度”
height=”高度”
/>
- 加载图像地址的两种方式：
1、 相对路径：<img src=”img/one.png或者../img/one.png”/>
2、 绝对路径：<img src=”https://www.baidu.com/one.png”>
7.超级链接
<a href=”链接地址” target=”目标窗口”>图像|文本 a>
目标窗口：
_self: 当前窗口打开，默认
_blank: 新的窗口中打开
如果页面在使用frameset / frame / iframe的场景下才使用如下：
_parent: 在父级窗口中打开
_top: 在顶级窗口中打开
_自定义名称：在指定的特定窗口中打开
三种用法：
页面链接
<a href=”example03.html”>图片|文本a>
锚链接：
<a href=”#help”>a>
这里的help可以是锚标记的name也可以id
功能链接：唤醒本地安装的某个外部程序
<a href=”emailto:[email protected]”>图片|文本a>
8.div标签
div是一个容器，常用与页面的布局
标签的分类
1.块级元素/块级标签：
如：div | p | hr | h1~h6
特性：独占一行，宽度没有设置的情况下由父容器100%决定
2.行级元素/行级标签：
如：span | strong | em |
特性：多个行级元素可以同属一行，其宽度由内容决定，行级元素大部分设置宽高无效，除img。
3.无序列表
适用于呈现一些逻辑上有相关性的数据
<ul>
<li>li>
<ul>
ul里设置type属性定义标签
disc: 实心圆点
circle: 空心的圆圈
square: 实心的正方形
4.有序列表
适用于呈现一些逻辑上有相关性且有顺序的数据
<ol>
<li>li>
ol>
-
设置type属性的类型
1: 阿拉伯数字
a: 小写字母
A: 大写字母
i: 小写罗马数字
I: 大写的罗马数字 -
定义列表
适用于有主题描述的信息
<dl>
<dt>主题dt>
<dd>描述dd>
dl>
注意：
有序列表与无序列表可以嵌套使用，ul的下级是li,li上级是ul。
9.表格标签–重点
<table>
<! --- 表头 -->
<thead>
<tr>
<th>th>
tr>
thead>
<! --- 主体 -->
<tbody>
<tr>
<td>td>
tr>
………
tbody>
<! --- 表脚 -->
<tfoot>
<tr>
<td>td>
tr>
tfoot>
table>
table: 表格
thead: 表头
tbody: 主体
tfoot: 表脚
tr: 行
td: 单元格
th： 单元格（一般是用于表头信息，文本信息默认加粗居中）
表格属性
width: 宽度
height: 高度
border: 边框
borderColor: 边框颜色
cellpadding: 表格填充（内）
cellspacing: 表格的间距（外）
align: 水平方向
单元格属性
align: 水平方向 left center right
valign: 垂直方向 top middle bottom
合并单元格（colspan: 跨列| rowspan: 跨行）