html cavens标签,HTML之常用标签

HTML之常用标签

介绍了前端中常用的标签，讲解了行内元素和块元素的区别，同时重点解释了语义化的意义！

html标签

html控制页面结构，良好的页面结构有利于seo优化

html常用标签

.g-doc section{

margin: 10px;

padding: 10px;

border: 1px solid #ddd;

box-shadow: 1px 1px 5px #aaa;

}

.g-doc table{

border: 1px solid #ddd;

border-collapse: collapse;

}

.g-doc table caption{

font-size: 1.2em;

font-weight: bold;

}

.g-doc table td,

.g-doc table th{

padding: 0.3em 0.6em;

border: 1px solid #ddd;

}

文字标签

静夜思

床前明月光，疑是地上霜

举头望明月，低头思故乡

---

静夜思

床前明月光，疑是地上霜
举头望明月，低头思故乡

文字标签

我是粗体

我是斜体

H₂SO₄是硫酸的化学式！

原价：￥6.5/kg

hello world!

我是span标签

我wo是shi谁shui

实体字符集

我是实体字符集：< hello word! >

超链接标签

百度一下  

回到顶部  

下一章  

表格标签

书名得分

html指南90javascript手册80css秘密85平均分85

列表

• 项目一
• 项目二

---

1. 项目一
2. 项目二

---

html手册

用来学习html的百科全书！

javascript指南

用来学习javascript的百科全书！

表单标签

Text

Password

Search

Number

Url

Tel

Email

File

Range

Color

Time

Date

Radio

CheckBox

Button

Reset

Sumbit

Hidden

---

请选择一项

选项1

选项2

请输入查询内容：

小车

大车

Button

---

登录框

用户名

密码

多媒体标签

框架标签iframe

布局标签

• div
• span
• header
• main
• footer
• menu
• nav
• aside
• article
• section
• time
• address

块元素、行内元素、行内块元素

我是块元素：block

我是块元素：block

我是行内元素：inline

我是行内元素：inline

我是行内元素：inline

我是行内元素：inline

.parent{

height: 120px;

width:100%;

border: 1px solid #000;

}

.parent p,

.parent span,

.parent input{

width:45%;

height: 25%;

padding: 5px;

margin: 5px;

color: #fff;

background-color: crimson;

}

补充延伸

html语义化

语义化的定义？

语义化是指根据内容的结构化(内容语义化)，选择合适的标签(代码语义化)，便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。

为什么要重视语义化？

有利于SEO，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重。

在没有CSS的情况下也能呈现较好的内容结构与代码结构。

方便其他设备的解析(如屏幕阅读器、盲人阅读器、移动设备)。

便于团队开发和维护，语义化更具可读性！

写html代码时的建议？

去掉css样式后，依然能很好的呈现内容！

不要使用纯样式标签(如b和u标签)，而使用css设置！

熟悉html5新增的语义化标签，如header、footer、hgroup、nav、aside、article、section等！

seo优化

待完成

优雅降级

noscript

当浏览器不支持脚本或者禁用脚本时显示，使用如下

本页面需要浏览器支持(启用)JavaScript

canvas

当浏览器不知canvas标签时显示，使用如下

Your browser does not support the HTML5 canvas tag.

video

当浏览器不支持video标签时显示， 使用如下

您的浏览器不支持 video 标签。

ie提示

判断ie版本决定是否显示，使用如下