Java Web 01_HTML4&&HTML5基础标签语法

HMTL基础

1.什么是HTML

Hyper Text Markup Language (超文本标记语言)标记又俗称标签(tag)，一般格式：

html 复制代码

<tagName></tagName> 如
<h1></h1>

标签里还可以有属性(Attribute)：

html 复制代码

<tagName Atrribute = "value" /> 如
<meta charset="utf-8" />

还有一些特殊非成对出现标签：

html 复制代码

<hr />  <br />

HTML是由浏览器解析执行文档的基本结构

<! DOCTYPE html> ---引用的HTML5规范

html 复制代码

<html>
   <head>            --头部：包含标签title、meta
     <meta charset="utf-8" />
   <title></title>
</head>
   <body>         ---主体


</body>
</html>

meta

html 复制代码

<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: 预留格式标签

注释

html 复制代码

<!-- 注释的内容 -->

4.特殊符号

空格

> 大于符号

< 小于符号

" 双引号

5.图像标签

html 复制代码

<img 
  src="图片地址"
  alt="图片加载失败后的提示"
  title="鼠标悬停至图片上的提示"
  width="宽度"
  height="高度"
/>

加载图像地址的两种方式：

html 复制代码

1、	相对路径：<img src="img/one.png或者../img/one.png"/>
2、	绝对路径：<img src="https://www.baidu.com/one.png">

7.超级链接

html 复制代码

<a href="链接地址" target="目标窗口">图像|文本 </a>

目标窗口：

_self: 当前窗口打开，默认

_blank: 新的窗口中打开

如果页面在使用frameset / frame / iframe的场景下才使用如下：

_parent: 在父级窗口中打开

_top: 在顶级窗口中打开

_自定义名称：在指定的特定窗口中打开

三种用法：

html 复制代码

页面链接
<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.无序列表

适用于呈现一些逻辑上有相关性的数据

html 复制代码

<ul>
   <li></li>
<ul>
ul里设置type属性定义标签
disc: 实心圆点
circle: 空心的圆圈
square:  实心的正方形

4.有序列表

适用于呈现一些逻辑上有相关性且有顺序的数据

html 复制代码

<ol>
   <li></li>
</ol>

设置type属性的类型

1: 阿拉伯数字

a: 小写字母

A: 大写字母

i: 小写罗马数字

I: 大写的罗马数字
定义列表

适用于有主题描述的信息

html 复制代码

<dl>
   <dt>主题</dt>
   <dd>描述</dd>
</dl>

注意：

有序列表与无序列表可以嵌套使用，ul的下级是li,li上级是ul。

9.表格标签--重点

html 复制代码

<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: 跨行）
注意：在合并后，相应单元格的行和列的数量要发生改变。