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> 定义文档 ...
随机推荐
- django 模型层(2)
Django 模型层(2) 多表操作---模型之间的关系 1 一对一:作者----作者详细信息 2 一对多:书籍----出版社 3 多对多:书籍----作者 一 创建模型(主键(id)自动创建) 没 ...
- 2018/05/14 03:56:10 [error] 12959#0: *42285845507 client intended to send too large body: 1664288 bytes
Syntax: client_max_body_size size; Default: client_max_body_size 1m; Context: http, server, location ...
- linux 基础(一)
最近公司涉及到自动化部署的问题,本人见识了后端使用linux命令niu的飞起,一直听说linux,今天开始研究研究linux 首先是下载: 1.要先安装虚拟机2.再安装Ubuntu虚拟机 需要下载Ub ...
- jquery.amaran jquery提示类使用
<script src="ing/js/jquery-1.8.3.min.js"></script> <link rel="styleshe ...
- Centos7.x做开机启动脚本
cat /etc/centos-release CentOS Linux release 7.4.1708 (Core) uname -r 3.10.0-693.11.1.el7.x86_64 vim ...
- Django组件 之 分页器(paginator)
--------------------------------------------------------------------------------路虽远,行则将至. 事虽难,做则必成. ...
- Entity Framework Core系列之DbContext
前言: EF Core DbContext表示与数据库的会话,并提供与数据库通信的API,具有以下功能: 数据库连接 数据操作,如查询和持久化 更改追踪 模型构建 数据映射 对象缓存 事务管理 数据库 ...
- 毕业季,我的Linux求职之路
秋招终于告一段落了,本硕的七年求学之路也快画上了句号.回首求职的这一段日子,痛苦并快乐着.感谢所有陪伴着我走过这一段路程的同学,所有的辛酸都值得铭记.求职的过程中在网上看了很多的求职经验,现在想写一篇 ...
- 关于JAVA中string直接初始化赋值和new的区别,是否可以联系到int[]的情况
String str1 = "ABC"; String str2 = new String("ABC"); String str1 = “ABC”;可能创建一个 ...
- springboot使用多数据源以及配置
1. 首先在application中配置数据源地址 my.datasource.koi.type=com.alibaba.druid.pool.DruidDataSource my.datasourc ...