前端基础之HTML常用的标签和属性

文档元素
<!DOCTYPE html> 
<html>
	<head>
		<meta charset="utf-8" />
		<title>html中html标签的详细介绍</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<style>...</style>
	<body>主体</body>
</html>
  • 讲解:
  1. <!DOCTYPE html> 用于定义文档类型,在w3c规范中使用过的文档类型标记有如下所示:
1.XHTML1.1
	语法:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
	
2.XHTML 1.0 Frameset
	语法:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
	
3.XHTML 1.0 Transitional
	语法:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4.XHTML 1.0 Strict
	语法:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
5.HTML 4.01 Frameset
	语法:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	
6.HTML 4.01 Strict
	语法:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	
7.HTML 5
	语法:<!DOCTYPE html> 
  1. <html></html>此标签是告知浏览器其自身是一个 HTML 文档。
  2. <head> 标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
    文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
    下面这些标签可用在 head 部分:<base>, <link>, <meta>, <script>, <style>, 以及 <title>
  3. <meta>标签提供文档字符集、使用语言、作者等基本信息,还涉及对关键词和网页等级的设定。具体内容可以访问我的另外一篇博客meta标签相关内容详解进行了解。
  4. <title> 元素可定义文档的标题,它是 head 部分中唯一必需的元素。。
    浏览器会以特殊的方式来使用标题,并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样,当把文档加入用户的链接列表或者收藏夹或书签列表时,标题将成为该文档链接的默认名称。
  5. <body></body> 该标签定义了页面的主体部分,页面上显示的文本、图片、视频、表格等元素都是在该标签下写的。
结构元素(HTML5新增)

一、定义标题栏:header
  header 元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含其他内容,因此整个页面的标题应该放在页面的开头。
  header 定义文档的页眉,在一个网页中可以多次使用 header 元素。
  语法&案例:

<header>
  <h1>网页标题</h1>
</header>
<article>
  <header>
      <h2>文章标题</h2>
	</header>  
	<p>文章正文</p>
</article>

二、定义标题组:hgroup
  hgroup 元素可以为标题或者子标题进行分组,通常与 h1~h6 元素组合使用,一个内容块中的标题及其子标题可以通过 hgroup 元素组成一组。但是,如果文章只有一个主标题,不需要此元素。
  语法:

<header>
  <hgroup>
      <h1>主标题</h1>    
      <h2>副标题</h2>
  </hgroup>
</header>

三、定义导航块:nav
  nav 元素是一个可以用作页面导航的链接组,其中的导航元素链接到其他页面或当期页面的其他部分。只需要将主要的、基本的链接组放进 nav 元素即可。
  语法:

<nav>  语义 :定义导航栏 </nav>

四、定义侧边栏:aside
  asdie 元素用来表示当前页面或文章的附属信息部分,可以包含当前页面或主要内容相关的引用、侧边栏,以及其他类似的有别于主要内容的部分。
  主要由以下两种用法:
  1、作为主要内容的附属信息部分
  2、作

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值