HTML&CSS基础学习笔记1.21-语义化标签
语义化标签
“语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息,让网页能够被机器理解,最终让人类受益。
HTML 标签语义化是让大家直观的认识标签和属性的用途和作用,很明显<hx>看起来很像标题,因为拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字,起到了强调的作用。
HTML标签语义化的设计思维其实就是给某块内容用上一个最恰当最合适的标签,这样一来,不管是谁都能看懂这块内容是什么。
例如:
<main>标签:表示文档中的主要内容。<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。
查看下面这两段html和css代码,体会下里面的许多语义化的标签吧:
body {
text-align: center;
} ul {
list-style-type: none;
} ul li {
display: inline-block;
margin-right: 20px;
} article {
margin-top: 50px;
} section {
margin: 30px 0 50px;
} aside {
position: fixed;
top: 30%;
width: 30%;
padding: 10px;
color: white;
background-color: rgba(0, 0, 0, .3);
} footer {
height: 10%;
}
更多学习内容,就在码芽网http://www.mayacoder.com/lesson/index
部分页面显示的结果如下:
HTML&CSS基础学习笔记1.21-语义化标签的更多相关文章
- HTML&CSS基础学习笔记1.5-添加常用标签
代码如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UT ...
- HTML&CSS基础学习笔记—创建列表
创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...
- HTML&CSS基础学习笔记1.11—导航栏
上文我们介绍到的<a>标签,由于<a>标签可以用来跳转,所以我们可以拿<a>标签来生成网页的导航栏. 其实在实际运用中,<a>标签就经常会被用来生成导航 ...
- CSS基础学习笔记
一. CSS介绍 1. CSS概述:CSS(Cascading Style Sheets)指层叠样式表,极大提高了工作效率. 2. 基础语法: 属性大于1个之后,属性之间用分号隔开 如果大于1个单词, ...
- HTML&CSS基础学习笔记1.7-高亮文本及组合使用
HTML提供了<mark>标签可以让你的文本高亮,这样看起来更加醒目.<mark>标签内的文本会呈现特殊的样式,它和<em>,<strong>一样也是一 ...
- HTML&CSS基础学习笔记1.16-单元格间距和表格主体
上一篇讲html学习笔记,讲过了合并单元格,那么今天就来介绍下如何控制单元格的间距,以及表格主体的相关知识. 单元格间距 在上个知识点的显示结果中你可能发现了,单元格与单元格之间有一小段空白.这是由& ...
- HTML+CSS基础学习笔记(4)
一.认识CSS样式 1.定义 CSS全称:层叠样式表(Cascading Style Sheets) 主要作用:定义HTML内容在浏览器内的显示样式,比如文字大小.颜色.字体加粗等 优点:通过定义某个 ...
- HTML&CSS基础学习笔记1.6-html的文本操作标签
文本也许是HTML里最常见的元素了,所以我们有必要对HTML的文本操作标签做下认识. 1. <em>,<i>内的文字呈现为倾斜效果: 2. <strong>,< ...
- HTML&CSS基础学习笔记1.32-选择器是什么
选择器是什么 选择器是CSS样式为了定位页面上的任意元素的一种方法. 选择器主要分为:元素标签选择器.通用选择器.类选择器.ID选择器.属性选择器.组合选择器.伪类选择器.伪元素选择器. 先做个了解, ...
随机推荐
- VHDL学习之TEXTIO在仿真中的应用
TEXTIO 在VHDL 仿真与磁盘文件之间架起了桥梁,使用文本文件扩展VHDL 的仿真功能.本文介绍TEXTIO 程序包,以一个加法器实例说明TEXTIO 的使用方法,最后使用ModelSim 对设 ...
- SQL viewId 比较好看的 Id
有时候我们希望 Id 要好看一些,比如 Id=1 -> Id=T000001 refer : http://www.kodyaz.com/t-sql/custom-sequence-string ...
- PL/SQL 0.几秒出结果,SQL效率一定高吗?
今天开发问我一个问题,PL/SQL很快出结果了,为什么应用还是很慢 create index F_AGT_SAVB_ACCTINFO_H_idx4 on F_AGT_SAVB_ACCTINFO_H ( ...
- 【转】Linux中断处理学习笔记
原文网址:http://www.cnblogs.com/GT_Andy/archive/2011/06/21/2086100.html 1.Linux中断的注册与释放: 在<linux/inte ...
- [LeetCode] 134. Gas Station 解题思路
There are N gas stations along a circular route, where the amount of gas at station i is gas[i]. You ...
- MKMapView and Zoom Levels: A Visual Guide
原帖:http://troybrant.net/blog/2010/01/mkmapview-and-zoom-levels-a-visual-guide/ So, how exactly does ...
- css浮动+应用(瀑布流效果的实现)
首先是index.html文件: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- ajax取返回值的方法
var check_res; //ajax核对手机验证码 function smsverify(){ var ajaxurl = APP_ROOT+"/index.php?ctl=ajax& ...
- 获取当前位置信息-ios
locationManager= [[CLLocationManager alloc] init];//位置管理器 locationManager.desiredAccuracy = kCLLocat ...
- 二十六个月Android学习工作总结
1.客户端的功能逻辑不难,UI界面也不难,但写UI花的时间是写功能逻辑的两倍. 2.写代码前的思考过程非常重要,即使在简单的功能,也需要在本子上把该功能的运行过程写出来. 3.要有自己的知识库,可以是 ...