一、Html的基本结构:

网页的文本、图片等信息;

二、Head部分:用于表示网页的元数据即描述网页的基本信息

其常用标签及属性有:

1、title标签:浏览器标签页显示的标题

2、meta标签:其常用属性

①charset:设置文档的字符集编码格式。HTML5中设置字符集编码:

常见的字符集编码格式:

a.GB-2312:国标码,简体中文

b.GBK:扩展的国标码

c.UTF-8:万国码 Unicode 常用

②http-equiv属性:将我们的信息写给浏览器看,让浏览器按照这里面的要求执行,可选属性值:Content-Type(文档类型) refresh(网页定时刷新) set-cookie(设置浏览器cookie缓存) 需要配合content属性使用。(http-equiv属性只是表明需要设置哪一部分,具体的设置内容,放到content属性中)

③name属性:使用方法同“http-equiv”。将我们的信息写给搜索引擎看

常用且需要掌握的属性值:author(作者) keywords(网页关键字) description(网页描述) 这两个属性设置,网页必不可少。

3、link标签:链接网页图标(title前的小logo),其常用属性有:

①rel属性:声明链接文件的类型,此处选icon

②type属性:可以省略

③href属性:表示图片的路径地址

三、body部分:网页的文本、图片等信息

标签的分类:

块级标签:显示为块,前后隔一行(自动换行)

行级标签:按行从左往右逐一显示。

1、 常见的块级标签:

......

:标题标签,自动加粗,h1最大,h6最小。


:水平线标签,添加一条水平线。


:换行标签,

:引用标签,cite属性,表明引用的来源,一般引用网址

浏览器默认首行缩进。

:预格式标签,用于重载代码。浏览器默认显示样式:1、显示为等宽字体。 2、代码中的换行、

空格等元素能在浏览器中显示。

【补充】html 文件中空格的表示:

2、 基于布局的块级标签

列表:无序列表、有序列表、定义列表

①有序列表:

列表项:

②无序列表:

③定义列表(实现图文混排):

列表标题:

一般只有一项

列表描述项:

可以有很多项

3、组合标签:

用于显示图片及图片标题

他有两个子标签:图片

图片的标题

例如:

探险家 伊泽瑞尔

4、分区标签:

5、常见的行级标签

<1>span(文本):无实际意义,用于包裹某部分文字,修改特定样式,例如:

这是span中的文字

img(图片):其常用属性:①src:表示引用图片的地址。

路径地址的写法:相对路径:以当前文件为最准,去寻找图片地址

a、与文件处于同一层的图片,直接写图片名

b、图片在当前文件下一层:文件名/图片名

c、图片在当前文件上一层:../图片名

绝对路径:file:///盘符:/文件夹/图片名,但 是严禁使用

图片网址:网络上的图片链接,但是一般不用

②height和width:图片的高度和宽度。可以用CSS样式代替

③title:图片标。当鼠标指上之后显示的文字

④alt:当图片无法显示的时候,显示的文字

<2>em(倾斜强调)

<3>strong(加粗强调)

<4>b(加粗)

<5>i(倾斜)

Strong、em、b、i的区别

1、Strong、em都表示强调,Strong为粗体,em为斜体,而Strong的强调 程度逗比em高

2、Strong和b都能加粗,em和i都能倾斜,,但是Strong和em多了一层强调的语义 。H5要求标签尽可能实现语义化。

<6>q(短引用)

<7>small/big(缩小/放大字体):small和big分别是缩小和扩大字体,都可以多层嵌套直至上限或下限

<8>a(超链接)

1、href:超链接的路径,可以是网络链接,也可以是本地文件。

2、target:跳转页面打开的位置。_self自身页面,_blank新页面。

3、title:鼠标指在超链接上显示的名称。

4、Rel(被链接是当前的前/后一篇):指定被链接文档与当前文档的关系,搜索引擎 会利用该属性 获取更多的有关链接的信息:

rel="prev"被链接文档是当前文档的前一篇文 档,

rel="next"被链接文档是当前文档的后一篇文档,

rel="icon"被链接文档是当前文档的图标

rel="stylesheet"被链接文档是当前文档的样式表

5、Rev(当前是被链接的前/后一篇)

锚链接:

①本页面锚链接:a、设置锚点:

b、跳转锚点:#name名

①页面间锚链接:a、在即将跳转页面的指定位置设置锚点

b、跳转锚点:页面地址.html#name名

页面间锚链接

功能性链接: mailto用于给指定邮箱发送邮件

file:///e:/aaa.png打开本地文件

tencent://message/?uin=1315618220 给指定QQ发送息

<9>s标签,有误文本:删除线

这是S标签中的文字

<10>cite标签:浏览器显示为倾斜,常用于书、画作、作品的引用

这是cite中的文本

<11>code:计算机代码,不保留代码格式

<12>bdo:表示文本方向,属性:dir="ltr"表示从左往右,dir="rtl"表示从右往左

1234567

kbd:表示需要用户用键盘输入的内容,浏览器显示为等宽字体

请输入“Esc”推迟系统

<13>sup:上标文本,sub:下标文本

x6

© © 空格

© © 空格

<14>u:下划线

这是下划线

mark:高亮或标记文本,浏览器显示为黄色背景

mark

HTML5中常见的列表标签包括,介绍几个常用的HTML5标签相关推荐

  1. 7.HTML中常见的列表元素有哪些,任务7——HTMl表单、列表等使用

    1.有序列表.无序列表.自定义列表如何使用?写个简单的例子.三者在语义上有什么区别?在哪些情况下使用哪种(重要)? 如何嵌套? 列表,顾名思义,是HTML中表示一组项目的列表,包括:有序列表.无序列表 ...

  2. html5干货,干货:详解HTML5中常见的五大全局属性

    HTML5中新增了"全部属性"的概念.所谓全局属性它是指可以对任何元素都可以使用的属性,今天为大家详细介绍三种常见的全局属性. contentEditable属性 contentE ...

  3. HTML5中常见的新语义化标签

    header:头部(页面中只能出现一次) main :主体(页面中只能出现一次) footer:尾部(页面中只能出现一次) hgroup:标题组合(主标题+副标题) <hgroup>< ...

  4. 基于MThings配置MODBUS数据中常见的几种时间概念介绍(超时时间、间隔时间、轮询时间)

    超时时间: 主机使用,主机请求发出后,依据该时间判定从机回复的最大时间范围,超出该时间后,主机判定请求超时.如果超时时间设置过小,从机可能会在超时时间范围外才能回复请求,此时可能会导致总线中持续的报文 ...

  5. 没有什么效果的html标签,你知道却不常用的HTML标签(一)

    作为了一个前端 帅小伙/靓姑娘,开发的时候总是会和 HTML 标签打交道.一来二往的就熟悉的开始使用 div + css 的布局了,今天介绍一篇很早以前就出现,但是没有太多人(我认识的人使用的不是很多 ...

  6. html中aside怎么调整位置,HTML5中的aside标签怎么用?HTML5aside侧边栏的具体使用方法你知道吗?...

    HTML5中的aside标签怎么用?HTML5aside侧边栏的具体使用方法你知道吗?本篇文章主要讲解了HTML5中的aside标签的定义和用法,还有HTML5中aside元素的详解和注意事项. HT ...

  7. html5 session 缓存,关于HTML5中的sessionStorage的会话级缓存使用

    sessionStorage作为HTML5的Web Storage的两种存储方式之一. 用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据会被 ...

  8. python3 获取文件夹中的文件列表

    问题 获取文件系统中某个目录下的所有文件列表. 解决方案 使用 os.listdir() 函数来获取某个目录中的文件列表,比如: import osfile_name = os.listdir('/U ...

  9. Java命令学习系列(零)——常见命令及Java Dump介绍

    Java命令学习系列(零)--常见命令及Java Dump介绍 一.常用命令: 在JDK的bin目彔下,包含了java命令及其他实用工具.  jps:查看本机的Java中进程信息.  jstack ...

最新文章

  1. 32位系统 和 64位系统 C 程序中 为什么 指针的内存大小的不一样
  2. 【以太坊】Ethereum交易过程及ethereumjs-tx的应用
  3. CodeAction_beta02 斐波那契 (多维DP)
  4. 定时备份_如何将电脑中的文件进行定时备份?
  5. Mac下Unity5x的下载
  6. CentOS文件权限管理
  7. 二值化处理c语言程序,数字信号处理c语言程序集
  8. LeetCode 280. 摆动排序
  9. java包的基本使用
  10. ASP.NET中使用JSON方便实现前台与后台的数据交换
  11. CPU上跑深度学习模型,FPS也可以达100帧
  12. android权限允许,android – 允许多次运行时权限
  13. Python Flask Web 第二课 —— 请求-响应循环
  14. POST 方式上传图片
  15. JavaScript原理(一)
  16. 云端服务器与传统的独立主机服务器有什么区别
  17. 计算机桌面都有说明,电脑重启后桌面所有的图标都没了怎么解决
  18. 量子计算机用什么传导信息,量子是如何传递信息的?
  19. python求加速度_【掌控】mpython-加速度-水平仪 - DF创客社区 - 分享创造的喜悦
  20. oracle安装实训心得,oracle实训总结

热门文章

  1. .NET Core实战项目之CMS 第九章 设计篇-白话架构设计
  2. 打造自己的.NET Core项目模板
  3. .Net Core 2.1 通用主机(Core 在控制台应用程序中的应用)
  4. .NET Core Community 首个千星项目诞生:CAP
  5. 重磅消息-Service Fabric 正式开源
  6. 使用Mono将C#编译运行至WebAssembly平台
  7. Docker~从Dockerfile到Container的过程
  8. .NET 使用 RabbitMQ 图文简介
  9. 理解 .NET Platform Standard
  10. java java 大端_Java 大小端转换