码迷,mamicode.com
首页 > Web开发 > 详细

HTML基础总结(完整版)

时间:2019-02-15 13:42:55      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:cti   view   gre   兼容   解决   水平居中   dde   lang   pat   

目录

HTML 概念介绍

【概念】

(Hyper Text Markup Language)超文本标记语言,是用来描述网页的一种语言
超文本(Hyper Text):不只包括文本,也可以包括图片、链接、音乐、视频等非文本元素
标记语言(Markup Language):标记语言是一套标记标签,HTML使用标记标签来描述网页

【标签】
单标签:<img src="" alt="" />
双标签:<b></b>

** HTML标签对大小写不敏感,但要全小写

【属性】
标签的属性
常用属性:

  • class 类
  • id 元素ID
  • style 元素的行内样式
  • title 元素的额外信息,可在工具提示中显示

【元素】
HTML元素以开始标签起始,以结束标签终止,元素的内容是开始标签与结束标签之间的内容。

【文档】
HTML文档被称为网页,由嵌套的HTML元素构成

【注释】
注释是在HTML插入的描述性文本,用来解释该代码或提示其他信息。

<!-- 注释内容 -->

ps: 注释只出现在代码中,不会在页面中显示;且注释不可嵌套


HTML 规范

一个HTML的结构和解释

<!DOCTYPE html> // 文件应以“<!DOCTYPE ......>”首行顶格开始,推荐使用“<!DOCTYPE html>”
<html>
<head>
    <meta charset="utf-8"/> // 必须声明文档的编码charset,且与文件本身编码保持一致,指定字符编码的 meta 必须是 head 的第一个直接子元素。推荐使用UTF-8编码<meta charset="utf-8">
    <title>Document</title> // 页面title是不可缺少的一项,title 必须作为 head 的直接子元素,并紧随 charset 声明之后
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="5/style.css"/> // 引入 CSS 时必须指明 rel="stylesheet"
    <link rel="shortcut icon" href="ico.ico"/> // link标签必须在head标签中引入
</head>
<body>

<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>   // 1. js引入要放在body的最下方(防止页面阻塞) 2. 移动环境或只针对现代浏览器设计的 Web 应用,如果引用外部资源的 URL 协议部分与页面相同,建议省略协议前缀。这是因为使用 protocol-relative URL 引入 CSS,在 IE7/8 下,会发两次请求。是否使用 protocol-relative URL 应充分考虑页面针对的环境
</body>
</html>

HTML元素

块级元素

【h1, h2, h3, h4, h5, h6】
含义:标题元素
注意:h1 在一个HTML中最好只出现一次(seo方面)

【hgroup】
含义:用于包括标题组
HTML5新增的标签

【p】
含义:段落元素

【div】
含义:块级空元素

【hr】
含义:分割元素

【pre】
含义:预定义格式文本
在该元素中的文本通常按照原文件中的编排,以等宽字体的形式展现出来,文本中的空白符(比如空格和换行符)都会显示出来,通常表示已排版的内容,如代码块和字符画等

【blockquote】
含义:HTML块级引用元素
代表其中的文字是引用内容。通常在渲染时,这部分的内容会有一定的缩进。若引文来源于网络,则可以将原内容的出处URL地址设置到cite特性上,若要以文本的形式告知读者引文的出处时,可以通过元素

【address】
含义:联系信息

骨架类:html body
表单类:form fieldset output legend optgroup option
列表类:ul ol li dl dd dt
HTML5新增结构标签:article aside header footer nav section
HTML5新增多媒体:figure figcaption
HTML5新增功能型:summary details

内联元素

通用容器:span
强调重要:em strong
文字间隔:i(斜体) b(粗体)
不精确文字:s(在HTML5中重新定义为有错的、过时的、不被建议使用的文本,常用于表示价格变动等)
高亮显示:mark
次要评论:small
术语处理:dfn(定义术语) abbr(缩写词)
引用:cite(表示作品标题的引用,可以是书影音画等) q(表示短引用,常用于引用别人说的话,用引号可以表达等价语义)
换行:br wbr(指定单词可以换行的位置)
上下标:sup sub
文本删改:ins(文档中插入的内容) del(文档中删除的内容)
特定时间:time(表示日期)
注音标识:ruby(ruby标签定义注音标识,多用于CJK文字,CJK是指中日韩统一表意文字(Chinese、Japanese、Korean)) rt(标记文字) tp(标记括号)

复制代码
<ruby>
    汉
    <rp>(</rp>
    <rt>hàn</rt>
    <rp>)</rp>
    语
    <rp>(</rp>
    <rt>yǔ</rt>
    <rp>)</rp>    
</ruby>

文字方向:bdi(忽略周围文字方向的文字) bdo(覆盖两种方向的设置,允许显式设置方向,并覆盖所有其他当前方向)

<p>When rendered by a browser, <bdo dir="rtl">these words</bdo> will appear as 'sdroweseht'</p>

代码:code(计算机代码) kbd(键盘码) samp(计算机例子代码) tt(打字机代码) var(变量)

结构元素

section:表示文档中的一个区域(或节),是区块级通用元素
article:表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构。
aside:表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。
nav:HTML导航栏(

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!