微博 RSS订阅 微信
网站地图

农成学PHP-第四讲：HTML基本知识讲解

既然是做web开发，那么肯定跟网页打交道是必不可少的，所以了解一下html页面的基本知识也是有必要的。农成这教程当然只是简单的介绍一下一些基本的html知识，如要成为前端页面布局的高手，那么你就要去挖掘一下比较牛逼的div+css布局教程了。

什么是HTML?

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言: Hyper Text Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

上面讲到的让大家了解下HTML的基本知识。下面就通过一个基本的例子来看下html基本构造吧！

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>我的第一个HTML页面</title>
<link rel=”stylesheet” href=”common/css/idangerous.swiper.css”><!– 引进外部的css –>
<script src=”common/js/iscroll.js” type=”text/javascript”></script><!– 引进外部js –>
<!– 内部css –>
<style type=”text/css”> 
.show{
text-align:center;
}
</style>
</head>
<body>
<div class=”show”>
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<p>这是一个段落。下面有水平线</p>
<hr><!– 这是一个注释 –>
<p>这是另外一个段落。</p>
<a href=”http://www.lnctime.com” target=”_blank”>这是一个链接</a>
<br><!– 这是一个注释 –>
<label>这是图片标签</label>
<img src=”http://www.lnctime.com/wp-content/uploads/2015/01/旅游.jpg” width=”104″ height=”142″ alt=”这是图片标记”><!– 这里也可以引进内部css–>
</div>
<!– 表格展示 –>
<label>表格展示</label>
<table border=”1″ align=”center”>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table><br>
<!– 无序列表 –>
<small>无序列表</small>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>tongy</li>
<li>Mike</li>
<li>Linongcheng</li>
</ul>
<!– 有序列表 –>
<div class=”ol”>
<small>有序列表</small>
<ol>
<li>Coffee</li>
<li>Milk</li>
<li>tongy</li>
<li>Mike</li>
<li>Linongcheng</li>
</ol>
</div>
<!– css样式展示 –>
<div style=”opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF”></div>
<div style=”font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;”></div>
<div style=”opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007″></div>
<h3>Look! Styles and colors</h3>
<div style=”letter-spacing:12px;”>Manipulate Text</div>
<div style=”color:#40B3DF;”>Colors
<span style=”background-color:#B4009E;color:#ffffff;”>Boxes</span>
</div>
<div style=”color:#000000;”>and more…</div>
<hr>
<pre>div样式展示</pre>
<div id=”container” style=”width:500px”>
<div id=”header” style=”background-color:#FFA500;”>
<h1 style=”margin-bottom:0;”>Main Title of Web Page</h1>
</div>
<div id=”menu” style=”background-color:#FFD700;height:200px;width:100px;float:left;”>
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</div>
<div id=”content” style=”background-color:#EEEEEE;height:200px;width:400px;float:left;”>
Content goes here
</div>

<div id=”footer” style=”background-color:#FFA500;clear:both;text-align:center;”>
Copyright © http://www.lnctime.com
</div>
</div>

</body>
</html>

最终的效果→→→→

附录：

按字母顺序排列

New : HTML5新标签

标签 描述
<!–…–> 定义注释
<!DOCTYPE> 定义文档类型
<a> 定义超文本链接
<abbr> 定义缩写
<acronym> 定义只取首字母的缩写，不支持HTML5
<address> 定义文档作者或拥有者的联系信息
<applet> HTML5中不赞成使用。定义嵌入的 applet。
<area> 定义图像映射内部的区域
<article>New 定义一个文章区域
<aside>New 定义页面的侧边栏内容
<audio>New 定义音频内容
<b> 定义文本粗体
<base> 义页面中所有链接的默认地址或默认目标。
<basefont> HTML5不支持，不赞成使用。定义页面中文本的默认字体、颜色或尺寸。
<bdi>New 允许您设置一段文本，使其脱离其父元素的文本方向设置。
<bdo> 定义文字方向
<big> 定义大号文本，HTML5不支持
<blockquote> 定义长的引用
<body> 定义文档的主体
<br> 定义换行
<button> 定义一个点击按钮
<canvas>New 定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形
<caption> 定义表格标题
<center> HTML5不支持，不赞成使用。定义居中文本。
<cite> 定义引用(citation)
<code> 定义计算机代码文本
<col> 定义表格中一个或多个列的属性值
<colgroup> 定义表格中供格式化的列组
<command>New 定义命令按钮，比如单选按钮、复选框或按钮
<datalist>New 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<dd> 定义定义列表中项目的描述
<del> 定义被删除文本
<details>New 用于描述文档或文档某个部分的细节
<dfn> 定义定义项目
<dialog>New 定义对话框，比如提示框
<dir> HTML5不支持，不赞成使用。定义目录列表。
<div> 定义文档中的节
<dl> 定义列表详情
<dt> 定义列表中的项目
<em> 定义强调文本
<embed>New 定义嵌入的内容，比如插件。
<fieldset> 定义围绕表单中元素的边框
<figcaption>New 定义<figure> 元素的标题
<figure>New 规定独立的流内容（图像、图表、照片、代码等等）。
<font> HTML5不支持，不赞成使用。定义文字的字体、尺寸和颜色。
<footer>New 定义 section 或 document 的页脚。
<form> 定义了HTML文档的表单
<frame> 定义框架集的窗口或框架
<frameset> 定义框架集
<h1> to <h6> 定义 HTML 标题
<head> 定义关于文档的信息
<header>New 定义了文档的头部区域
<hr> 定义水平线
<html> 定义 HTML 文档
<i> 定义斜体字
<iframe> 定义内联框架
<img> 定义图像
<input> 定义输入控件
<ins> 定义被插入文本
<kbd> 定义键盘文本
<keygen>New 规定用于表单的密钥对生成器字段。
<label> 定义 input 元素的标注
<legend> 定义 fieldset 元素的标题。
<li> 定义列表的项目
<link> 定义文档与外部资源的关系
<map> 定义图像映射
<mark>New 定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。
<menu> 不赞成使用。定义菜单列表。
<meta> 定义关于 HTML 文档的元信息。
<meter>New 定义度量衡。仅用于已知最大和最小值的度量。
<nav>New 定义导航链接的部分
<noframes> 定义针对不支持框架的用户的替代内容。HTML5不支持
<noscript> 定义针对不支持客户端脚本的用户的替代内容。
<object> 定义内嵌对象
<ol> 定义有序列表。
<optgroup> 定义选择列表中相关选项的组合。
<option> 定义选择列表中的选项。
<output>New 定义不同类型的输出，比如脚本的输出。
<p> 定义段落。
<param> 定义对象的参数。
<pre> 定义预格式文本。
<progress>New 定义运行中的进度（进程）。
<q> 定义短的引用。
<rp>New <rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
<rt>New <rt> 标签定义字符（中文注音或字符）的解释或发音。
<ruby>New <ruby> 标签定义 ruby 注释（中文注音或字符）。
<s> 不赞成使用。定义加删除线的文本。
<samp> 定义计算机代码样本。
<script> 定义客户端脚本。
<section>New <section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<select> 定义选择列表（下拉列表）。
<small> 定义小号文本。
<source>New <source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<span> 定义文档中的节。
<strike> HTML5不支持，不赞成使用。定义加删除线文本。
<strong> 定义强调文本。
<style> 定义文档的样式信息。
<sub> 定义下标文本。
<summary>New <summary> 标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。
<sup> 定义上标文本。
<table> 定义表格。
<tbody> 定义表格中的主体内容。
<td> 定义表格中的单元。
<textarea> 定义多行的文本输入控件。
<tfoot> 定义表格中的表注内容（脚注）。
<th> 定义表格中的表头单元格。
<thead> 定义表格中的表头内容。
<time>New 定义日期或时间，或者两者。
<title> 定义文档的标题。
<tr> 定义表格中的行。
<track>New <track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。
<tt> 定义打字机文本。
<u> 不赞成使用。定义下划线文本。
<ul> 定义无序列表。
<var> 定义文本的变量部分。
<video>New <video> 标签定义视频，比如电影片段或其他视频流。
<wbr>New 规定在文本中的何处适合添加换行符。

未经允许不得转载：微信信息发源地 » 农成学PHP-第四讲：HTML基本知识讲解

赞 (1)
分享到：更多 ()
标签：

相关推荐

评论 0

评论前必须登录！

登陆 注册