HTML5中有哪些元素?
(一)与结构相关的元素1)section元素。
表示页面中的内容块,如章节、页眉、页脚或页面的其他部分。它与h1、h2…等元素结合起来标记文档结构。
. 2)文章元素。
表示页面中与上下文无关的独立内容,例如博客中的一篇文章。
. 3)旁置元素。
表示与文章元素之外的文章元素的内容相关的辅助信息。
. 4)标题元素。
指示页面中内容块或整个页面的标题。
. 5) HGroup元素。
用于加速整个页面或页面中一个内容的标题是组合的。
. 6)页脚元素。
代表整个页面或页面中内容块的标注。
. 7)导航元素。
表示页面中导航的链接部件。
. 8)图形元素
代表文档中的一段或者一节的标签为?
section标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。 HTML 4.01 与 HTML
5 之间的差异
section标签是 HTML 5 中的新标签。
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>北国风光</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<style type=”text/css” media=”screen, projection”>
body {
line-height:1;
color:#333;
}
ol, ul, h1 {
margin:0;
padding:0;
list-style:none;
}
a {
color: #933;
text-decoration: none;
}
a:hover {
color: #DF3030;
}
nav h1 {
text-align:center;
}
nav h1 img {
width:90%;
}
nav ul {
border-top: 1px solid #999;
}
nav li {
text-align: center;
border-bottom:1px solid #ccc;
line-height:60px;
}
nav li a {
display:block;
}
nav li a:hover {
background-color:#e4e4e4;
}
section {
font-size:14px;
font-family:”宋体”;
}
section h2 {
font-size:18px;
text-align:center;
font-family:”黑体”;
font-weight:lighter;
}
section span {
padding:0 10px;
background-color:#FFF;
}
section li {
text-align:center;
}
section li img {
width:98%;
border-radius:5px;
}
section article {
border-top: 1px solid #999;
margin-top:20px;
padding-bottom:20px;
}
.clear {
clear:both;
line-height:5px;
}
footer {
clear:both;border-top: 1px solid #999;
font-size: 12px;
text-align: center;
padding: 10px 0;
font-family:Arial, Helvetica, sans-serif;
color:#666;
}
@media (max-width: 400px) {
nav li {
float:left;
width:32%;
margin-left:1%;
}
section {
clear:both;
padding:20px 0;
}
section li {
margin:10px 2px;
}
section li span {
display:block;
text-align:center;
font-size:12px;
}
}
@media (min-width:400px) and (max-width: 600px) {
nav li {
float:left;
width:32%;
margin-left:1%;
}
section {
clear:both;
padding:20px 0;
}
section li {
float:left;
margin:10px 2px;
width:48%;
}
section li span {
display:block;
text-align:center;
font-size:12px;
}
}
@media (min-width:600px) and (max-width:900px) {
nav {
float:left;
width:35%;
}
section {
float:left;
width: 65%;
padding:20px 0;
}
section li {
float:left;
margin:10px 2px;
width:48%;
}
section li span {
display:block;
text-align:center;
font-size:12px;
}
}
@media (min-width: 900px) {
nav h1 {
float:left;
width:35%;
height:200px;
}
nav ul {
float:left;
width: 65%;
}
nav li {
float:left;
width:32%;
margin-left:1%;
}
section {
float:left;
width: 65%;
padding:20px 0;
}
section li {
float:left;
margin:10px 2px;
width:32%;
}
section li span {
display:block;
text-align:center;
font-size:12px;
}
}
</style>
</head>
<body>
<nav>
<h1 id=”logo”><a href=”#”><img src=”images/logo.jpg” alt=”北国风光”></a></h1>
<ul>
<li><a href=”#”>名词来历</a></li>
<li><a href=”#”>北国雾凇</a></li>
<li><a href=”#”>风光图片集</a></li>
</ul>
</nav>
<section>
<article>
<h2 ><span>风光图片集</span></h2>
<ol>
<li> <a href=”#”> <img src=”images/Scene1.jpg” alt=””> <span>图片1</span> </a> </li>
<li> <a href=”#”> <img src=”images/Scene2.jpg” alt=””> <span>图片2</span> </a> </li>
<li> <a href=”#”> <img src=”images/Scene3.jpg” alt=””> <span>图片3</span> </a> </li>
<li> <a href=”#”> <img src=”images/Scene4.jpg” alt=””> <span>图片4</span> </a> </li>
<li> <a href=”#”> <img src=”images/Scene5.jpg” alt=””> <span>图片5</span> </a> </li>
<li> <a href=”#”> <img src=”images/Scene6.jpg” alt=””> <span>图片6</span> </a> </li>
</ol>
<p ></p>
</article>
<footer> 北国风光© 2011</footer>
</section>
</body>
</html>
css外部样式表怎么写?
1、首先我们我们新建一个记事本,并将记事本的名字改为“引入外部css文件和外部js文件.html”,并回车键确定,以使文件转化为浏览器可以打开的html网页文件。
2、我们编写一个html5的声明标签—<!DOCTYPEhtml>,以使浏览器能认识到我们的文档是一个html5的文件,这样就可以快速的正确解读,以提高浏览的体验。
3、我们写一个<title>的标签,将网页的题目写入进去,让网页的标题显示为“引入外部css文件和外部js文件”。
4、我们用<meta>标签设置字符的编码格式为:UTF-8,以使浏览器能够正确的显示我们的网页。
5、我们写一个<body>标签,用来包含网页的主体部分。
6、我们写几个标签以便在外部css文件样式表中,为其设置样式。
7、我们新建一个css文件,把txt的文件后缀名改为css即可,之后打开就可以写入css代码了。
8、我们用标签选择器为<p>标签、<p>标签和<span>标签的内容设置样式。
9、我们使用,<link>标签将我们编写的css文件样式表文件其引入到我们当前的html文件中来。
10、我们鼠标右击在弹出的下拉菜单中,我们选择“在浏览器中打开”这一项。
11、我们看到我们编写的样式被应用到了标签中文字上,说明我们的css外部样式表文件引入成功。
htmlrow标签使用方法?
列表标签:
html 中有有序列表(ol),无序列表(ul)和自定义列表(dl)。不管何种列表,其中只能涵盖列表项标签(li),dl 标签除外。
html全称为HyperText Mackeup Language,译为超文本标记语言,不是一种编程语言,是一种描述性的标记语言,用于描述超文本中内容的显示方式。比如字体什么颜色,大小等。
超文本:音频,视频,图片称为超文本。
标记 :<英文单词或者字母>称为标记,一个HTML页面都是由各种标记组成。
作用:编写HTML页面。
注意:HTML语言不是一个编程语言(有编译过程),而是一个标记语言(没有编译过程),HTML页面直接由浏览器解析执行。
2、HTML的历史:
我们专门来对XHTML做一个介绍。
XHTML介绍:
XHTML:Extensible Hypertext Markup Language,可扩展超文本标注语言。
XHTML的主要目的是为了取代HTML,也可以理解为HTML的升级版。
HTML的标记书写很不规范,会造成其它的设备(ipad、手机、电视等)无法正常显示。
XHTML与HTML4.0的标记基本上一样。
XHTML是严格的、纯净的HTML。
编写XHTML的规范:
(1)所有标记元素都要正确的嵌套,不能交叉嵌套。正确写法举例:<h1><font></font></h1>
(2)所有的标记都必须小写。
(3)所有的标记都必须关闭。
双边标记:<span></span>
单边标记:<br> 转成 <br /> <hr> 转成 <hr />还有<img src=“URL” />
(4)所有的属性值必须加引号。<font color="red"></font>
(5)所有的属性必须有值。<hr noshade="noshade">、<input type="radio" checked="checked" />
(6)XHTML文档开头必须要有DTD文档类型定义
3、HTML的网络术语:
网页 :由各种标记组成的一个页面就叫网页
主页(首页) : 一个网站的起始页面或者导航页面
标记: <p>称为开始标记 ,</p>称为结束标记,也叫标签。每个标签都规定好了特殊的含义。
元素:<p>内容</p>称为元素.
属性:给每一个标签所做的辅助信息。
xhtml: 符合XML语法标准的HTML。
dhtml:dynamic,动态的。javascript + css + html合起来的页面就是一个dhtml。
http:超文本传协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP 邮件传输协议,ftp:文件传输协议。
4、HTML的编辑工具:
NotePad:记事本。
EditPlus:语法高亮显示。技巧: 根据颜色判断单词是否出错 (不是100%)。不好的地方:没有代码提示。
UltraEdit:根据颜色判断单词是否出错,可以显示2进制数据。
Sublime:新一代的代码编辑器。
dw(dreamweaver,专业工具) :建立WEB站点和应用程序的专业工具。它将布局功能、开发工具、代码编辑组合在一起。有代码提示。
5、计算机编码介绍:
计算机只能处理二进制的数据,其它数据,比如:0-9、a-z、A-Z,这些字符,我们定义一套规则来表示。假如:A用110表示,B用111表示等。
ASCII码:
美国发布的,用1个字节(8位二进制)来表示一个字符,共可以表示2^8=256个字符。
美国的国家语言是英语,只要能表示0-9、a-z、A-Z、特殊符号。
ANSI编码:
每个国家为了显示本国的语言,都对ASCII码进行了扩展。用2个字节(16位二进制)来表示一个汉字,共可以表示2^16=65536个汉字。例如:
中国的ANSI编码是GB2312编码(简体),对6763汉字进行编码,含600多特殊字符。另外还有GBK(简体)。
日本的ANSI编码是JIS编码。
台湾的ANSI编码是BIG5编码(繁体)。
GBK:
对GB2312进行了扩展,用来显示罕见的、古汉语的汉字。现在已经收录了2.1万左右。并提供了1890个汉字码位。K的含义就是“扩展”。
Unicode编码(统一编码):
用4个字节(32位二进制)来表示一个字符,想法不错,但效率太低。例如,字母A用ASCII表示的话一个字节就够,可用Unicode编码的话,得用4个字节表示,造成了空间的极大浪费。A的Unicode编码是0000 0000 0000 0000 0000 0000 0100 0000
UTF-8(Unicode Transform Format)编码:
根据字符的不同,选择其编码的长度。比如:一个字符A用1个字节表示,一个汉字用2个字节表示。
毫无疑问,开发中,都用UTF-8编码吧,准没错。
6、HTML颜色介绍:
颜色表示:
纯单词表示:red、green、blue、orange、gray等
10进制表示:rgb(255,0,0)
16进制表示:#FF0000、#0000FF、#00FF00等
RGB色彩模式:
自然界中所有的颜色都可以用红、绿、蓝(RGB)这三种颜色波长的不同强度组合而得,这就是人们常说的三原色原理。
RGB三原色也叫加色模式,这是因为当我们把不同光的波长加到一起的时候,可以得到不同的混合色。例:红+绿=黄色,红+蓝=紫色,绿+蓝=青
在数字视频中,对RGB三基色各进行8位编码就构成了大约1678万种颜色,这就是我们常说的真彩色。所有显示设备都采用的是RGB色彩模式。
RGB各有256级(0-255)亮度,256级的RGB色彩总共能组合出约1678万种色彩,即256×256×256=16777216
二、HTML的规范
HTML是一个弱势语言
HTML不区分大小写
HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符,比如dos系统)
HTML的结构:
声明部分:主要作用是用来告诉浏览器这个页面使用的是那个标准。是HTML5标准。
head部分: 不会显示在页面上,作用是告诉服务器一些页面的额外信息。
body部分:我们所写的代码必须放在此标签內。
目前,IE浏览器是完全不支持H5的,支持最好的是Opera浏览器,可以支持95%以上;其次是google,可以支持一部分H5。
HTML5怎么添加下划线?
在Markdown中,
中划线
很简单
语法:
效果:
下划线也不难,
html和行内CSS就可以解决
:
方案1:一楼说的u标签是不错,是快速添加下划线,但是它有两个缺点:
HTML5 规范建议开发者尽量使用其他元素替代 u 元素。
u标签的下划线自定义程度低,只有黑色一种颜色(可能是我不知道怎么做吧,求指导)
方案2(推荐):由于方案1的不完美,因此我个人建议那些喜欢高颜值排版的朋友,可以使用html的
span标签
、设置行内CSS的
border-bottom属性
来添加下划线。这种方式自定义程度最高。
语法:效果:
标签页中新增了哪些内容?
html5新增的一些语义话标签,可以使用比如头部可以使用header标签,导航nav,主体部分可以使用section,底部footer,中间文章article。
p,ul li标签都是使用比较频繁的标签,span,i,em可以对文字进行单独的描述,表示等。
<article>标签定义外部的内容,比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。
<canvas> 标签定义图形,比如图表和其他图像,这个 HTML 元素是为了客户端矢量图形而设计的。
它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
标签定义元素的细节,用户可进行查看,或通过点击进行隐藏与 <legend> 一起使用,来制作 detail 的标题,该标题对用户是可见的,当在其上点击时可打开或关闭 detail。