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> 定义文档 ...
随机推荐
- LNMP构建动态网站WordPress
LNMP构建动态网站wordpress 一.部署LNMP架构 1.安装nginx #配置nginx源 cat>/etc/yum.repos.d/nginx.repo<<-EOF [N ...
- Centos安装php php-fpm 以及 配置nginx
下载php源码包 http://www.php.net/downloads.php 安装php .tar.bz2 cd php- ./configure --prefix=/usr/local/php ...
- redis分页
模仿的https://www.cnblogs.com/dee0912/p/4612183.html 第一步连接redis后进行添加数据 require_once '../redis/redis.php ...
- 越狱解决iphone4s外放无声音
删除iphone中/System/Library/PrivateFrameworks/IAP.framework/Support/目录下的iapd文件 进入/SYSTEM/Library/Launch ...
- Python两大佬互相撕逼 技术何苦为难技术?
最近两天 Python 圈发生了一件大事,两个 Python 大佬撕逼了起来了. 不,其实是一个大佬(刘志军)被怼. 事情是这样的. 背景 人物介绍: 董明伟:公众号「Python 之美」的作者,似乎 ...
- 哈希长度扩展攻击(Hash Length Extension Attack)利用工具hexpand安装使用方法
去年我写了一篇哈希长度扩展攻击的简介以及HashPump安装使用方法,本来已经足够了,但HashPump还不是很完善的哈希长度扩展攻击,HashPump在使用的时候必须提供original_data, ...
- 迷茫<第三篇:再到北京>
这是2016年初春,三月的北京仍带着丝丝的冷意,我再次来到了这座熟悉又陌生的城市.我是早上6点钟到的北京西站,坐火车过来的,一夜未眠,眼睛很疲劳.这次过来和上次回长沙一样,下了火车先把行李寄存在朋友家 ...
- 在 .NET Core 中结合 HttpClientFactory 使用 Polly(中篇)
译者:王亮作者:Polly 团队原文:http://t.cn/EhZ90oq声明:我翻译技术文章不是逐句翻译的,而是根据我自己的理解来表述的(包括标题).其中可能会去除一些不影响理解但本人实在不知道如 ...
- 安装VM-tools
win10系统 VMware12 Ubuntu64位安装VM-tools时所遇到的提示信息: open-vm-tools are available from the OS vendor and VM ...
- Listen 指令
L:44