HTML的语义化，你需要深入了解

有关HTML的一些基础课程，很多网站都有讲，于我而言，真正实践起来，我只要求我能够让它表现出我所想要的结果即可。然而，这种要求，对于后期的维护与测试，真的是。。。。。。想起日前我们所做的这个项目，那里面的jsp代码，感觉有些看不下去，各种标签混杂一起，而且经常使用的是无实义的比如div，看起来真是头疼！所以，此番我做一个总结，方便日后做项目时，知道该如何规范好自己的代码，做到严谨。

HTML，XHTML的区别：

HTML，HyperText Mark-up Language，是构成网页文档的主要语言。指的是html4，不过html5已经很火了。

XHTML，EXtensible HyperText Mark-up Language，较于html，它更加严格。

XHTML标签必须闭合；
XHTML标签及属性必须小写；
XHTML标签属性必须用引号；
XHTML id属性代替name属性；

div和span

div是块元素，包含行内元素，不与其他的元素同行；span是行内元素，可与其他元素同行；
div大结构的划分；span应用样式；

语义化

所谓语义化，就是将标签的语义理解，放在它应该在的位置。

图片语义化：

figure和figcaption：figure元素用于图片和图注，figcaption用于图注的文字；

表格语义化：

标签	说明
table	表格
caption	标题
thead	表头
tbody	表身
tfoot	表尾
tr	行
th	表头单元格
td	表格单元格

表单语义化：

label标签，它的for属性为所关联表单元素的id。for有两个作用：绑定label和表单；增强鼠标可用性，即点击文本，表单元素也可获得焦点。
fieldset和legend，fieldset给表单进行分组，legend用于某一组表单的标题；

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>html</title>
 6     </head>
 7     <body>
 8         <form action="" method="post">
 9             <fieldset>
10                 <legend>登陆系统</legend>
11                 <p>
12                     <label for="name">账号：</label><input type="text" id="name" name="name" />
13                 </p>
14                 <p>
15                     <label for="pwd">密码：</label><input type="password" id="name" name="name" />
16                 </p>
17                 <input type="checkbox" id="remenber" name="remenber" /><label for="remenber">记住我</label>
18                 <input type="submit" value="登陆" />
19             </fieldset>
20         </form>
21     </body>
22 </html>

其效果显示：

相对也是比较好看的。

用多了自然也就熟悉了~

转载于:https://www.cnblogs.com/zxcjj/p/6654455.html

HTML的语义化，你需要深入了解相关推荐

表单高级应用和语义化
type="hidde" 隐藏域 disable 禁用什么是表单语义化符合W3C规范语义化的标签结构合理.代码简洁分组<fieldset><legend ...
html 的基本结构、标签（分类、关系）、文档类型、页面语言、字符集、语义化
结构代码 <!DOCTYPE html> <html><head> <meta charset="UTF-8"><title& ...
说说你对 HTML 语义化的理解?
(1)什么是语义化? 基本上都是围绕着几个主要的标签,像标题( H1~H6 ).列表(li).强调(strong em)等等根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读 ...
HTML语义化：HTML5新标签——template
一.前言当我们使用String-base的模板引擎(如Handlebars.js等)时,要么就通过外部文件存放模板文本,需要时再通过XHR或script标签加载进来:要么通过<script t ...
html5语义化标签大全
常见的语义化标签有 <article>.<section>.<nav>.<aside>.<header>.<footer> 详细 ...
HTML5语义化标签综合基础案例,HTML5语义化标签综合案例
HTML 标签声明必须是 HTML 文档的第一行,位于标签之前. 声明不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令. 请始终向 HTML 文档添加 ...
h5的语义化部分_H5 部分新语义化标签
1.header 页眉 2.footer 页脚 3.main 主体 4.hgroup 标题组合 5.nav 导航注:以上标签结构中只能出现一次 6.article 独立的内容 7.aside ...
HTML5学习之语义化标签
一.为什么HTML5要引入新语义标签在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...
Semver(语义化版本号)扫盲
最近Github 10周年在朋友圈里沸沸扬扬刷屏,小编在工作中却惊讶的发现不少同事对版本号中的beta和rc没有概念,使用npm install package@next时,也不清楚next代表的含义 ...
前端基础：web语义化
web语义化一.什么是web语义化? web语义化包含两方面,一是html标签语义化,简单来说就是要用合适的标签来表述适当的内容,标题用<h1>~~<h6>标签,段落用< ...

HTML的语义化，你需要深入了解

HTML的语义化，你需要深入了解相关推荐

最新文章

热门文章