HTML5基础

来源：互联网发布：戴荃悟空抄袭知乎编辑：程序博客网时间：2024/04/29 19:42

页面的组成：

HTML：页面结构

CSS:页面样式表现

JavaScript：交互行为

一.Html常用标记

（一）.常见形式

<html>

<head>

<title>文档头部分</title>

</head>
<body>

正文部分

</body>

</html>

1.<HEAD></HEAD>是HTML文档的头部标签, 在浏览器窗口中，头部信息是不被显示在正文中的,在此标签中可以插入其它标记, 用以说明文件的标题和整个文件的一些公公属性。若不需头部信息则可省略此标记，良好的习惯是不省略。
2.<TITLE>和</TITLE>是嵌套在<HEAD>头部标签中的，它被显示在浏览器窗口的标题栏。
3.<BODY> </BODY>标记一般不省略，标签之间的文本是正文，是在浏览器要显示的页面内容。

（二）.基本标签

1.页头标签（<head>）常包含的标签

（1）doctype标签

(1)<meta>标签
a.设置页面字符编码：<meta charset="UTF-8"/> （字符编码有：UTF-8,GBK,Big5,GB2312）
b.设置描述信息：<meta name="description" content="内容"/>
c.设置关键字：<meta name="keywords" content="内容"/>
d.设置页面跳转：<meta http-equiv="Refresh" content="5;url=http://www.phpchian.com">
(2)<title>标签
其作用：定义浏览器工具栏中的标题；提供页面被添加到收藏夹时的标题；显示在搜索引擎结果中的页面标题
(3)<style>标签
<style type="text/css">
body{
background-color:red;
}
</style>
(4)<link>标签：域名预解析，可以有效的提高后续访问网站的效率。
<link rel="stylesheet" type="text/css" href="one.css"/>
(5)<script>
<script src="jquery.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
alert('####');
</script>

2.文本标签（<head>）常包含的标签

(1)文本段落
<p> 包裹段落的内容</p> 段落标记
p标签之间不会互相共用一行，会独占一行或多行的空间。
<hr/> 水平线标签，是但标签标记
(2)换行，空白的控制
<br/> 换行标记可以强制段落进行换行，不受空格和换行合并的影响。也是一个但标签
 

(6)标题元素

h1到h6标题标签：标注当前页面中的文档最重要的核心主题的文本。

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
<h1>定义了最大的标题元素，<h6>定义了最小的 HTML自动在一个标题元素前后各添加一个空行。

(7)水平线

<hr>是个空标签

(6)注释

(7)字体设置

<font></font> 用于控制文本在网页上的显示。可以指定size（大小）、color（颜色） style（样式）等属性。

(8)图片

<img src="angry.gif" alt="Angry" />
Src:所显示图像的 URL。
Alt:定义图像的简短描述（即图像的替代文本）。不超过 1024 个字符。
border:定义图像的边框
height :定义图像的高度
width :定义图像的宽度
a.浏览器可以显示的图像格式有jpeg，bmp，gif （ie到7.0开始支持png格式）
b.其中bmp文件存储空间大，传输慢，不提倡用
c.jpeg图像支持数百万种颜色，即使在传输过程中丢失数据，也不会在质量上有明显的不同，占位空间比gif大

(9)插入多媒体: <embed>

<embed src=“../music1.mp3” autostart =true /false
loop=true/false/6 / hidden=true/false >

(10)<b>加粗</b>

(11) <i>斜体</i>

(12)<div>标记

<div>是块级元素，以<div>标记开始，以</div>标记结束。该标记用来定义页面中的一个特殊区域，区域内可包含文字、图片、表格或下级<div>等。使用<div>标记可方便的将若干页面元素组成一个集合，以方便统一设置集合的显示位置及所有元素的样式。

(13)<span>标记

<span>标记也是一个块级元素，它与<div>标记的功能相似，也用来标记页面中一个特殊的区域。一般情况下对于较大的页面区域需要使用<div>进行定义，而<span>标记常被用在某段落或更小的区域中。

(14)body标签

在<body>和</body>中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等设置。
<body>标签有自己的属性，可控制整个页面的显示方式。
属　性描　　述
Background设定页面背景图像
Bgcolor 设定页面背景颜色
Leftmargin设定页面的左边距
Topmargin设定页面的上边距

（三）HTML中常见的字符实体

空格 &nbsp
小于号(<) &lt
大于号(>) &gt
和号(&) &amp
引号(") &quot
版权(©) &copy
注册商标(®) &reg
商标(TM) &trade
乘号(×) &times
除号(÷) &divide

（四）.超级链接

<a href=链接目标 title=“注释” target=“打开链接窗口的形式”>
打开链接窗口的形式有：
a.blank 在新窗口打开
b.self 在自身窗口打开
c.parent 在上一级窗口打开，框架会经常使用
d.top在浏览器的整个窗口中打开

(1)链接到同一文档的各个部分（局部连接）
eg:
<HTML>
<HEAD><TITLE>使用链接</TITLE></HEAD>
<BODY>
<A HREF = #Internet>互联网</A><BR><BR>
<A HREF = #HTML>HTML简介</A><BR><BR>
<A HREF = #Consistency>多样化和统一性</A><BR><BR>

<A name = Internet>互联网</A><BR>
<P>互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过TCP/IP传输协议绑定在一起。</P>
<A name = HTML>HTML简介</A><BR>
<P>超文本标记语言是Web用来创建和识别文档的标准语言。虽然它不是标准通用标记语言 (SGML) 的子集，但与它有着某种程度上的关联。SGML是一种文档格式语言表示方法。</P>
<A name = Consistency>多样性和统一性</A><BR>
<P>万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。 </P>
<BR><BR><BR><BR><BR><BR>
</BODY>
</HTML>
(2)链接到另一文档中某个特定位置
eg:
<HTML>
<HEAD>
<TITLE>主文档</TITLE>
</HEAD>
<BODY>
<A HREF=sg_1.12.html#Internet>互联网</A>
<BR>
<BR>
<A HREF= sg_1.12.html#HTML>HTML简介</A>
<BR>
<BR>
<A HREF=sg_1.12.html#Consistency>多样性和统一性</A>
</BODY>
</HTML>
(3)使用电子邮件（E-mail链接）
<A HREF="mailto:thisperson@mymail.com">我的电子邮件</A>
(4)空链接：就是没有目标端点的链接
<a href="#">显示内容</a>

二.表布局

1.创建表

<TABLE>

<TR> ——行

<TD>数据单元格1</TD>——单元格
<TD>数据单元格2</TD>
<TD>数据单元格3</TD>

</TR>
<TR>

<TD>数据单元格4</TD>
<TD>数据单元格5</TD>
<TD>数据单元格6</TD>

</TR>

</TABLE>

2.与表相关标记

<table></table> 表标记
<tr></tr> 行标记
<td></td> 单元格标记
<caption></caption> 标题标记
<th></th> 列标记(定义标题栏，文字加粗)

3.Table 标签的属性:

4.合并单元格

a.在 <TH> 或 <TD> 标记中使用 COLSPAN 属性，可以设置单元格所跨的列数，例如COLSPAN=3表示跨3列。
b.在 <TH> 或 <TD> 标记中使用 ROWSPAN 属性，可以设置单元格所跨的行数，例如ROWSPAN=3表示跨3行。

5.增加单元间隔和单元填充

a. CELLSPACING 属性定义单元格之间的间距（以像素为单位）。
b. CELLPADDING 属性定义表的单元格边界与单元格内容之间的间距（以像素为单位）。
eg:
<TABLE BORDER = 2 CELLSPACING = 2 CELLPADDING = 6>

6.单元格中数据对齐方式

a.水平对齐方式
Align = left
Align = center
Align = right
b.垂直对齐方式
Valign = top
Valign = middle
Valign = bottom
eg：
<TD ALIGN = right VALIGN = bottom>数据单元格 1</TD>

三.框架

框架（frame）最主要的功能是用来分割页面窗口，使每个“小窗口”能显示不同的HTML文件（aspx页面也可以）
1.框架基本结构
使用框架结构，可以在一个浏览器窗口中装载多个HTML文件，即每个网页占据一个框架。而多个框架可以同时显示在同一个浏览器窗口中，它们组成了一个最大的框架。
2.框架的基本语法
<frameset cols = 列划分方式 rows = 行划分方式>
<frame src = HTML文件1 name = 框架名1>
<frame src = HTML文件2 name = 框架名1>
……
<frame src = HTML文件n name = 框架名1>
</frameset>

四.表单

<FORM action=“http://www.sohu.com” method=“post”>
ACTION = “URL” 指定提交后由服务器上哪个处理程序处理
METHOD =“post或get” 指定向服务器提交的方法:一般为post或get方法, post方法比较安全

0 0

HTML5基础

页面的组成：

一.Html常用标记

（一）.常见形式

<html>

<head>

<title>文档头部分</title>

</head>

<body>

正文部分

</body>

</html>

1.<HEAD></HEAD>是HTML文档的头部标签, 在浏览器窗口中，头部信息是不被显示在正文中的,在此标签中可以插入其它标记, 用以说明文件的标题和整个文件的一些公公属性。若不需头部信息则可省略此标记，良好的习惯是不省略。

2.<TITLE>和</TITLE>是嵌套在<HEAD>头部标签中的，它被显示在浏览器窗口的标题栏。

3.<BODY> </BODY>标记一般不省略，标签之间的文本是正文，是在浏览器要显示的页面内容。

1.页头标签（<head>）常包含的标签

(1)<meta>标签

a.设置页面字符编码：<meta charset="UTF-8"/> （字符编码有：UTF-8,GBK,Big5,GB2312）

b.设置描述信息：<meta name="description" content="内容"/>

c.设置关键字：<meta name="keywords" content="内容"/>

d.设置页面跳转：<meta http-equiv="Refresh" content="5;url=http://www.phpchian.com">

版权(©) &copy

注册商标(®) &reg

乘号(×) &times

除号(÷) &divide