首页 前端知识 Java Web 01_HTML4&&HTML5基础标签语法

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

2024-02-29 12:02:01 前端知识 前端哥 149 637 我要收藏

HMTL基础

1.什么是HTML

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

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

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

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

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

<hr />  <br />

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

  • <! DOCTYPE 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:3424324@qq.com”>图片|文本</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: 跨行)

注意:在合并后,相应单元格的行和列的数量要发生改变。
转载请注明出处或者链接地址:https://www.qianduange.cn//article/2940.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!