H5基础知识 您所在的位置:网站首页 亿图图表如何合并单元格 H5基础知识

H5基础知识

2023-03-12 18:02| 来源: 网络整理| 查看: 265

H5基础知识 0. HTML概念

HTML:超文本标记语言(Hyper Text Markup Language)。是用来描述网页的一种语言。 HTML不是一种编程语言,而是一种标记语言(markup language)。 标记语言是一套标记标签(markup tag)。

1. 标签语言化

目的:

方便代码的阅读和维护; 同时让浏览器或是爬虫可以很好地解析,从而更好分析其中的内容; 使用语义化标签会具有更好的搜索引擎优化。

根据标签的语义,在合适的地方给一个最为合理的标签,让结构更清晰。

1.1 HTML标签格式 html标签是由尖括号包围的关键字,如:、、等; html标签通常是成对出现,如 ,第一个是开始,第二个有斜线的是结束; 有些标签是单独呈现的,如:、、等; 标签里面带有若干属性,也有不带的。

标签语法: 内容部分

2. HTML文档结构

在这里插入图片描述

DOCTYPE html>:声明为html5文件,必须是html文档的第一行,在标签之前; :文档开始和结束的标记,是HTML页面的根元素; :定义文档开头部分,包含文档元(meta)数据,配置信息等,是给浏览器看的; :定义了网页标题,在浏览器标题栏显示; :之间的内容是可见的网页主体内容。 2.1 head内常用标签 名字 描述 内容 定义网页标题 内容 定义内部样式 内容 定义JS代码或引入外部JS文件 (单标签) 引入外部样式表文件 (单标签) 提供有关页面的元信息

meta标签: 标签永远位于head元素内部;元数据总是以名称/值的形式被成对传递的。 meta标签组成:

http-equiv属性:相当于http的文件头作用,向浏览器传回一些有用的信息,正确显示网页内容,与之对应的属性值content,content中的内容是各个参数的变量值; name属性:主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎查找信息和分类信息用的。 2.2 body常用标签 名字 描述 内容 内容 加粗(XHTML推荐使用strong) 内容 ` 内容 斜体(XHTML推荐使用em) 内容 下划线 内容 `内容 删除(XHTML推荐使用del)

内容

段落标签 内容 作为标题使用,h1, h2…h5依据重要性递减 内容 < /div> 定义一个块级元素 内容 < /span> 定义内联(行内)元素 插入图片

a标签

定义超链接:用于从一张页面链接到另一张页面(比如百度); 锚:用于从页面当前位置跳转至指定锚点,博客的目录经常用到(比如内容 内容); 它最重要的属性是href,指示链接的目标。所有的浏览器都支持a标签。 2.2.1 列表 无序列表 里面只能包含li,没有顺序,布局中最常用。基本语法如下:

     第一项      第二项

type属性 描述 disc 实心圆点(默认值) circle 空心圆圈 square 实心方块 none 无样式 有序列表 里面只能包含li,有顺序,使用情况较少。基本语法如下:

     第一项      第二项

type属性 描述 1 数字列表(默认值) A 大写字母 a 小写字母 I 大写罗马 i 小写罗马

start是从数字几开始

3.自定义列表 定义列表常用于对术语或名词进行解释和描述,里面有2表兄弟,dt和dd。基本语法如下:

     名词1      名词1解释1      名词1解释2      … …      名词2      名词2解释1      名词2解释2      … …

table标签:定义表格; tr标签:定义行,必须嵌套在table标签中; td标签:定义单元格,必须嵌套在tr标签中。 2.2.2 表格

创建表格的基本标签table、tr、td,缺一不可。基本语法如下:

            单元格内的文字       … …            … …

2.2.2.1 表格常用属性 属性名 作用 常用单位 border 设置表格的边框(默认值为0,无边框) 像素值(px) cellspacing 设置单元格与单元格边框之间的空白间距 像素值 cellpadding 设置单元格内容与单元格边框之间的空白距 像素值 width 设置表格的宽度 像素值 height 设置表格的高度 像素值 align 设置表格在网页中的水平对齐方式 left、center、right 2.2.2.2 表格结构

在使用表格进行布局时,可以将表格划分为头部、主体和页脚,如下所示:

:用于定义表格标题;

caption标签必须紧随table标签之后。且只能对每个表格定义一个标题,通常这个标题会被居中于表格之上。

:用于定义表格的头部;

必须位于table标签中,一般包含网页的logo和导航等头部信息。

3.:用于定义表格的表头;

只需用表头标签th替代相应的单元格标签td即可。一般位于表格的一行或第一列,并且文本加粗剧中。

:用于定义表格的主体。

必须位于table标签中,一般包含网页中除头部和底部之外的其他内容。

:用于定义表格的页脚(脚注或表注)。

必须位于table标签中,与thead和tbody元素结合起来使用。

总结:thead元素用于对HTML表格中的表头内容进行分组,而tbody元素用于对HTML表格中的主体内容进行分组,tfoot元素用于组合HTML表格中的表注内容。

2.2.2.3 合并单元格

合并属性:

属性名 作用 rowspan 跨行合并 colspan 跨列合并

合并顺序: 遵循先上、后下、先左、后右的顺序。 合并步骤:

确定是跨行合并还是跨列合并; 找到目标单元格,写上合并方式和要合并的单元格数量; 删除多余的单元格(删除的个数=合并的个数-1)。 2.2.3 表单标签

作用:标签用于定义表单区域,收集用户输入的数据,向服务器传输这些数据。 完整的表单通常由表单控件、提示信息、表单域3个部分构成。基本语法如下: 在这里插入图片描述

action属性:表单数据提交的地址; method属性:表单发生提交操作的时候的请求方式,有get和post; enctype属性:编码类型。 2.2.3.1 input控件

input标签是表单标签中最重要的标签。input标签是个单标签。 input标签在使用时,type、name、value这三个属性是最常用的。

type属性:规定input标签的类型; type属性值 描述 button 生成按钮 radio 生成单选按钮 submit 生成提交按钮 text 生成文本框 file 生成浏览按钮 hidden 生成隐藏的输入字段 password 生成密码输入框 checkbox 生成复选框 image 生成图片形式的提交按钮 reset 生成重置按钮 name属性:定义input元素的名称。在进行前后端交互时,可以根据这个名称找到对应的标签,是前端和后端交互时非常重要的属性; 3.value属性:规定input元素的值,在获取表单数据时获取的就是value属性的值。 3. HTML5新增标签 3.1 新的语义和结构元素 属性名 描述 内容 定义导航链接 内容 定义文章标签 内容 定义媒介内容的分组 内容 定义对话框或窗口 内容 定义命令的列表或菜单 内容 进度条的标签 3.2 新多媒体元素 属性名 描述 内容 定义图形 内容 定义音频内容 内容 定义视频 内容 定义多媒体资源 内容 定义嵌入的内容 内容 为诸如video和audio元素之类的媒介规定外部文本轨道 3.3 新表单元素 属性名 描述 detalist 定义选项列表 keygen 规定用于表单的密钥生成器字段 output 定义不同类型的输出


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有