HTML is about meaning
时间:2022-06-13
本文章向大家介绍HTML is about meaning,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
HTML标签本身的意义是为了传递对于一个document元素的含义,所以再考虑使用正确的标签表达内容之前,考虑你的网页看起来怎么样为时过早,请将注意力集中到每一个你使用的HTML标签上。
你需要根据你书写的内容及本文本身的含义,来选择与之匹配的HTML标签。
Structure elements: 组织页面
你可以使用结构元素来组织页面的主要部分,这些部分通常包含其他的HTML元素。
下面是一个典型的网页需要包含的主要部分:
-
<header>
作为页面的第一个元素,包含logo和tagline。 -
<nav>
作为跳转到其他不同的页面的超链接集合。 -
<h1>
作为页面的标题。 -
<article>
作为页面的内容模块,比如blog的一个post。 -
<footer>
作为页面的最后一个元素,位于最底部。
Text elements: 定义内容
在结构元素中,通常需要寻找一些文本元素来达到定义内容的目的。
你将主要使用如下标签:
-
<p>
作为段落 -
<ul>
作为无序列表 -
<ol>
作为有序列表 -
<li>
作为列表单元 -
<blockquote>
作为引用
Inline elements: 区分文本
因为文本标签通常会很长,并且会有不同的内容,行内元素使你可以将一些关键部分从文本中区分出来。
有很多的行内元素可以使用,但是你会经常用到以下几个:
-
<strong>
作为关键字 -
<em>
作为强调字 -
<a>
作为超链接 -
<small>
作为次要字 -
<abbr>
作为缩写
尝试阅读下面的HTML代码,你就可以很容易的理解每一个元素的用途。
<article>
<h1>Main title of the page</h1>
<h2>A subtitle</h2>
<p>
Something something an other stuff and some <em>emphasis</em> and even <strong>important</strong> words.
</p>
<p>
Another paragraph.
</p>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<blockquote>
Once said
</blockquote>
</article>
<aside>
<h3>My latest posts</h3>
<ul>
<li><a href="#">One</a></li>
<li><a href="#">One</a></li>
<li><a href="#">One</a></li>
</ul>
</aside>
Generic elements 演变标签
当没有显而易见的具有语义的标签来匹配相关内容,但你仍然要插入一些标签来达到格式化和分组化的目的,你可以使用一到两个下面的具有演变性的标签:
我理解的演变的意思是这些标签可以通过css样式来变成不同职能的其他标签
-
<div>
作为块级元素组 -
<span>
作为行内元素组
尽管这些标签没有任何的实际意义,但它们与css配合使用将十分有用。
Don’t overthink semantics 不要想太多
大约有100多种语义标签供你使用。如果可以选择合适的元素来使用,那将是十分不错的选择。
但是不要花费太多的事情太考虑这件事,仅仅从现在开始,有选择地使用上面所提供的标签,你的网页将会变得更好。
- MySQL服务无法正常启动的解决方法(1053错误)
- 获取局域网内所有用户和IP
- CLR和.Net对象生存周期
- PHP从数据库提取并显示数据的典型代码
- ThinkPHP导出CSV、Excel
- 使用HttpClient的优解
- 浅谈 EF CORE 迁移和实例化的几种方式
- Python标准库10 多进程初步 (multiprocessing包)
- .NET CORE——Console中使用依赖注入
- EntityFramework Core 自动绑定模型映射
- Python标准库09 当前进程信息 (os包)
- Dapper连接与事务的简单封装
- 数据可视化的秘密
- EntityFramework Core 学习扫盲
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Android的八种对话框的实现代码示例
- Android使用RecyclerView实现今日头条频道管理功能
- Liunx(centos8)下的yum的基本用法和实例(推荐)
- Android中LeakCanary检测内存泄漏的方法
- Linux 查看磁盘IO并找出占用IO读写很高的进程
- Android实现简单的拨号器功能
- Android调用系统自带浏览器打开网页的实现方法
- Linux之删除带有空格的文件(不是目录)
- Android自定义AvatarImageView实现头像显示效果
- 如何使用win10内置的linux系统启动spring-boot项目
- Android 实现单线程轮循机制批量下载图片
- Android开发之项目模块化实践教程
- Linux centos7 下安装 phpMyAdmin的教程
- 简单学习Android TextView
- Android 滑动返回Activity的实现代码