从0开始学习HTML5+CSS3(1)

3 篇文章 0 订阅

写在前面的话:之前学过一点基础的HTML,寒假思考人生的时候觉得还是要把这个捡起来,就买了本书从头开始学习。看了这么久的书,总结了一些笔记,慢慢发出来,可能没有案例,因为发案例挺麻烦的。
第一章,就从最基础的开始吧。

第一章 HTML5基础

HTML元素

一、结构元素

用于构建网页文档的结构,多指块状元素

div:在文档中定义一块区域,即包含框、容器。
ol:根据一定的排序进行列表。
ul:没有排序的列表。
li:每条列表项。
dl:以定义的方式进行列表。
dt:定义列表中的词条。
dd:对定义的词条进行解释。
del:定义删除的文本。
ins:定义插入的文本。
h1~h6:标题1到标题6,定义不同级别的标题。
p:定义段落结构。
hr:定义水平线。
header:表示页面中一个内容区块或整个页面的标题。
footer:表示整个页面或页面中一个内容区块的脚注。(包含创作者的姓名、创作日期以及创作者联系信息)
section:表示页面中一个内容区块,如章节、页眉、页脚或页面中的其他部分。可与h1、h2等元素结合使用,标示文档结构。
nav:表示页面中导航链接的部分。
main:表示网页中的主要内容。
aside:表示article元素的内容之外的、与article元素的内容相关的辅助信息。
figure:表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。
article:表示页面中的一块与上下文不相关的的独立内容

二、内容元素

定义了元素在文档中的语义,一般指文本格式化元素,他们多是行内元素。

span:在文本行中定义一个区域,即行内包含框。
a:定义超链接。
abbr:定义缩写词。
address:定义地址。
dfn:定义术语,以斜体显示。
kbd:定义键盘键。
samp:定义样本。
var:定义变量。
tt:定义打印机字体。
code:定义计算机源代码。
pre:定义预定义格式文本,保留源代码格式。
blockquote:定义大块内容引用。
cite:定义引文。
q:定义引用短语。
strong:定义重要文本。
em:定义文本为重要。

三、修饰元素

定义文本的显示效果

b:视觉提醒,显示为粗体。
i:语气强调,显示为斜体。
center:定义文本居中。
font:定义文字的样式、大小和颜色。
s/strike:定义删除线。
br:定义换行。
u:非文本注解,显示下划线。
big:定义较大文本。
small:表示细则一类旁注,文本缩小显示。
sup:定义上标。
sub:定义下标。
bdi/bdo:定义文本显示方向。

四、功能元素

video:定义视频,比如电影片段或其他视频流。
audio:定义音频,比如音乐或其他音频流。
embed:用来插入各种多媒体,格式可以是MIDI、WAV、AIFF、AU、MP3等。
mark:主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。例如在搜索结果中向用户高亮显示搜索关键词。
dialog:定义对话框或窗口。
dbi:定义文本的文本方向,使其脱离其周围文本的方向设置。
figcapton:定义figure元素的标题。
time:表示日期或时间,也可以同时表示两者。
canvas:表示图形,如图表和其他图像。这个元素本身没有行为,仅提供一块画布,但它把一个绘图API展现给客户端JavaScript,以使脚本能够把想绘制的东西绘制到这块画布上。
output:表示不同类型的输出,比如脚本的输出。
source:为媒介元素(如video和audio)定义媒介资源。
menu:表示菜单列表。当希望列出表单控件时使用该标签。
ruby:表示ruby注释。
rt:表示字符(中文注音或字符)的解释或发音。
rp:在ruby注释中使用,以定义不支持ruby元素的浏览器所显示的内容。
wbr:表示软换行。与br的区别:br元素表示此处必须换行;而wbr元素的意思是浏览器窗口或父级元素的宽度足够宽(没必要换行)时,不进行换行,而当宽度不够时,主动在此处进行换行。
command:表示命令按钮,如单选按钮、复选框或按钮。
details:表示用户要求得到并且可以得到的细节信息。可与summary元素配合使用。summary元素提供标题或图例。标题是可见的,用户单击标题时,会显示出细节信息。summary元素应该是details元素的第一个子元素。
summary:为details元素定义可见的标题。
datalist:表示可选数据的列表,与input元素配合使用,可以制作出输入值的下拉列表。
datagrid:表示可选数据的列表,它以树形列表的形式来显示。
Keygen:表示生成秘钥。
progress:表示运行中的进程,可用其来显示JavaScript中耗费时间的函数进程。
meter:度量给定范围(gauge)内的数据。
track:定义用在媒体播放器中的文本轨道。

五、表单元素

tel:<input type=”tel”/> 表示必须输入电话号码的文本框。
search:<input type=”search”/> 表示搜素文本框。
url:<input type=”url”/> 表示必须输入URL地址的文本框。
email:<input type=”email”/> 表示必须输入电子邮件地址的文本框。
datetime:<input type=”datetime”/> 表示日期和时间文本框。
date:<input type=”date”/> 表示日期文本框
month:<input type=”month”/> 表示月份文本框
week:<input type=”week”/> 表示周几文本框
time:<input type=”time”/> 表示时间文本框
datetime-local:<input type=”datetime-local”/> 表示本地日期和时间文本框
number:<input type=”number”/> 表示必须输入数字的文本框
range:<input type=”range”/> 表示范围文本框
color:<input type=”color”/> 表示颜色文本框

注:
① HTML将元素分类方式分为行内元素块状元素行内块状元素三种。可用display属性将三者任意转换。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值