HTML(二)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方面)
【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导航栏(
交互元素(浏览器的支持度太低)
details : 主要用于描述文档或文档某个部分的细节
dialog :用来定义对话框或窗口,且该对话框位于窗口的水平居中位置
HTML 元素嵌套规则
1、块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素
例:
<div><h1></h1><p></p></div> —— 对
<a href=”#”><span></span></a> —— 对
<span><div></div></span> —— 错
2、块级元素不能放在<p>里面包括p本身
<p><ol><li></li></ol></p> —— 错
<p><div></div></p> —— 错
3、有几个特殊的块级元素只能包含内联元素,不能再包含块级元素,这几个特殊的标签是
h1、h2、h3、h4、h5、h6、p、dt
4、a 标签可以嵌套块级元素
HTML(二)HTML元素(整体结构,块级元素,内联元素,结构元素,交互元素,元素嵌套规则)的更多相关文章
- web兼容学习分析笔记--块级、内联、内联块级元素
一.块级.内联.内联块级元素 (1)块级元素:block **独占一行 **可设置width,height,margin,padding **内部可包含块级或内联元素 (3)内联(行内)元素:inli ...
- html的块级、内联、内联块级元素基础
概念 块级:block 内联:inline 内联块级:inline-block 在html元素中,元素会有display属性 display属性默认值是block,那么该元素是块级元素. displa ...
- 学习笔记——关于HTML(含HTML5)的块级元素和行级(内联)元素总结
1.首先我们要知道什么是块级元素和行级(内联)元素? 块级(block)元素的特点: ①总是在新行上开始: ②高度,行高以及外边距和内边距都可控制: ③宽度缺省是它的容器的100%,除非设定一个宽度: ...
- #HTML 块级、内联、内联块级元素
[常用的块级元素] div,form,p,table,h1~h6,hr,dl,ol,ul,pre等 [常用的内联元素] a,img,input,span,br,select,strong,em,tex ...
- 关于HTML(含HTML5)的块级元素和行级(内联)元素总结
1.首先我们要知道什么是块级元素和行级(内联)元素? 块级(block)元素的特点: ①总是在新行上开始: ②高度,行高以及外边距和内边距都可控制: ③宽度缺省是它的容器的100%,除非设定一个宽度: ...
- 顶级、块级、内联,html元素的三大分类
学习html后, 你会了解一些基本的html元素(Element), 如p, h1~h6, br, div, li, ul, img等.如果将这些元素细分, 又可以分别归为顶级(top-level)元 ...
- css中的块级和内联元素
块级元素: 首先说明display是块级元素,会单独站一行,如 代码: <!DOCTYPE html> <html> <head lang="en"& ...
- HTML--内联元素与块级元素
>>内联元素(inline element) a,span,input,select,label,img,textarea,sub,sup,li,i,small,strong,em,b,b ...
- CSS行内元素和块级元素的居中
一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的marg ...
- C#基础-css行内元素、块级元素基础
一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...
随机推荐
- Error:Cannot run program "svn" (in directory "E:demo\Hello"): CreateProcess error=2,
file-->settings-->version controller --> subversion
- 英语口语练习系列-C22-吃东西
基础词汇 1. bill [bɪl] n. 账单:钞票:法案:鸟嘴 Bill (人名)比尔 pay the bill 付账单 telephone bill 话费单 electricity bill 电 ...
- 万物皆有始有终: Hawk5即日起停止升级迭代
从即日起,Hawk将停止升级工作,其版本号将停留在5. https://github.com/ferventdesert/Hawk Hawk已经开发和维护6年时间了,它曾经承载了开发者很多的期待.背后 ...
- ERROR in static/js/0.5d7325513eec31f1e291.js from UglifyJs
今天把vue项目打包是遇到这个问题.这是在服务器上打包时报的错误,本地打包不报错!很头疼!上网查了很多,发现有很多人和我遇到类似的问题,但是都没有解决我的问题!后来灵机一动,解决问题,这就跟大家说一下 ...
- 在Mac OS X中完善PHP环境:memcache、mcrypt、igbinary
本文环境: Mac OS X 10.8.5 Xcode 5.0 Mac OS X升级到10.8.5之后,内置的Apache升级到2.2.24,PHP升级到了5.3.26.本文以此环境为基础. 本文简介 ...
- Elastic Stack初篇-Logstash
一.Logstash简介 Logstash是一个开源数据收集引擎,具有实时管道功能.Logstash可以动态地将来自不同数据源的数据统一起来,并将数据标准化到你所选择的目的地. 二.Log ...
- 百度地图IP定位,点击地图添加marker
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- Callable,Future和FutureTask详解
1.Callable和Runnable 看Callable接口: public interface Callable<V> { /** * Computes a result, or th ...
- centos7之zabbix3.2的fping监控
zabbix通过fping检测主机网络状态 fping的官方网站:http://www.fping.org/ 官网指定的github的地址:https://github.com/schweikert/ ...
- Java多线程9:中断机制
一.概述 之前讲解Thread类中方法的时候,interrupt().interrupted().isInterrupted()三个方法没有讲得很清楚,只是提了一下.现在把这三个方法同一放到这里来讲, ...