您现在的位置： 万盛学电脑网 >> 程序编程 >> 网页制作 >> DivCSS教程 >> 正文
HTML基本进修条记
作者：佚名 责任编辑：admin 更新时间：2022-06-22
html基本|条记
颠末1天多的费力奋战，终于把html（Hypertext markup language）的基本教程给看完了。
这次为了xml而看了这“迂腐”的技能，照旧有点收成的。。总体来说，固然不是很纯熟，可是看懂一样平常的html网页源文件已经不是题目了。闲来无事，就写写条记吧，说说感觉也好！
1总体架构
html给我的感受是很尺度，很著名目标。最首要的代码特点就是标志成对的呈现，固然有些可以省略，可是提议除非过分啰嗦照旧把前后都加上去吧！作为一个完备的html网页，老是有头部，主体和末了3大部门，别离用<head></head>,<body></body>和</html>暗示。其它，一个重要特征就是可以自界说气魄沤背通CSS），这长短常利便的，相同于编程说话的类的成果吧！同时，还可以嵌入其他script来加强其交互成果。而对付相等重要的标志，壹贝偾由头部标识和属性所构成。（<标识 属性1 属性2 属性3...>）看来，进修html是进修其他网页剧本说话的基本吧，同时对付进修可视化网页计划也是有辅佐的（这么说应该不外分吧！）！，下面就让我们一路来具体说明各个部门的组成元素。
2常见标志先容
着实大大都html网页的标志不多，就只有10几个吧！（看到这里，好！）这里首要先容一下常见的节制文件的外面和机关的标志！
<h>:从<h1>到<h6>所标识的字体依次减小，一样平常来说，<h1>用来标志文件问题<h2>用来标志一章的问题<h3>用来标志章节的问题，<h6>则是来作为小字印刷，如版权信息等等。
<p>和<br>:根基相同于回车键的成果，而<p>可以插入空格，同时也可以附带属性，如<p align=right>结果<p>（缺省环境是左对齐，左对齐许多分列方法的缺省环境）
<div>:固然相同于<p>,也可以行使align属性，可是在行使气魄威风凛凛表格时成果强盛。（气魄威风凛凛表格见后）
<hr>:可以发生一条程度线，对付组织名目是很有辅佐的。
在这里应该说一说逻辑标志和物理标志的不同：物理标志表白信息的外面，而逻辑标志表白信息的语义。从合用范畴来说，行使逻辑标志更值得保举，由于逻辑标志暗示的是本质特征，不随赏识器的变革而变革！
逻辑标志：<cite><dfn><strong><code><ins><del>（注：各人可以本身测试一下，看看有什么结果，个中ins和del是很有效的标志，出格是在多人相助开拓的时辰，看字面应该知道这两个是干嘛的吧！）
物理标志：<i><t><tt><big><small><sub><sup><strike>（注：各人测试吧，下手最重要◎）
3链接
链接是超文本（Hypertext）名目标重要实现方法，而行使的就是锚（Anchor）（，以是缩写也就是<a>）,
一个典范的锚标志的界说：<a href="方针页面">激活热区</a>（注：href：hypertext reference,就是链接到那边），此刻分环境先容：
1）外部链接
1。1非当地文件：<a href="http://www.zsu.edu.cn">中山大学</a>（这个很明明，不消表明白）
1。2其他情势的非当地资源：<a href="ftp://ftp.zsu.edu.cn">中山大学</a>（ftp资源）
<a href="mailto:[email protected]">我的email</a>（email信息）
1。2当地文件：<a href="另一个网页.html">另一网页？</a>（统一文件夹的，虽然也可以给出完备路径咯）
<a href="../另一个网页.html">另一网页？</a>（上一级别文件夹的）
（注：../暗示上一级文件夹，同样../../就暗示上上一级）
2）内部链接
什么是内部链接，就是在统一个网页里边的链接！这样做是为了停止网页太大而造成的赏识贫困！
步调：起主要界说一个引用方针锚，然后在另一处界说被锚引用的方针！看例子吧◎
<a herf="#top">top</a>（个中＃top界说了该锚）
<a>top</a>（这里就引用了该锚）
(注：这种要领最常见的应用就是网页上常常看到的网页最下边的“返回顶部”了)
4图像
行使图像：<img src="图像文件">（注：图像文件路径与链接路径沟通）。在这里可以插手提醒属性<alt>，如<img src="http://www.webjx.com/htmldata/2005-06-01/图片.gif" alt="图片">（注：看看有什么结果，假如图片不存在，会奈何呢？）
1）对齐方法：缺省是左对齐，可以行使<div align=..>举办变动。
2）高度和宽度：<img src="http://www.webjx.com/htmldata/2005-06-01/图片.gif" height=34mm width=34mm>（注：看大白了吧！不外应该留意的一点是，在ie里边高度和宽度的比例应该与源图沟通，否则就表现不了，已在我的机子上测试过了）
3）附近地区和边框：<img src="图像文件" border＝4 hspace=5 vspace=5>（注：很简朴吧，测试一下吧！尚有，边框默认环境是没有的，可是对付有链接的图来说，有个框框照旧很好的）
5列表
1）无序列表：无序，就是没有出格的序号，也就是划一哦。。下面看个例子吧。
<ul><li>内容1<li>内容2<li>内容3</ul>（注：对付ul，可以添加属性type，属性值有disc,square,circle，这样就可以改变序号了◎）
2）有序列表：这个虽然就是前面有序号咯。
<ol><li>内容1<li>内容2<li>内容3</ol>（注：对付ol，同样可以添加type属性，属性值可所以1，a，A，i，I，呵呵，本身测试一下。）其它，对付ol，可以从喜好的序号开始排序，用的属性就是ol的start和li的value了，很大白吧：）
3）列表嵌套：嵌套，相同于树状菜单的对象。可以行使<ul><ul></ul></ul>(ol也一样)相同的名目举办行使。
4）界说列表：首要有dl，dt，dd，别离代表界说标识，头部和内容，行使要领：
<dl><dt>头部<dd>界说的内容</dl>（注：dt和dd不必要竣事标志）
6表单
1）界说一个form：界说一个form标志，用于确定发送动静的范例和处理赏罚方法，个中必需的属性就是action了。<form action="http://zsu.edu.cn/..." method="post">（注：method用于声名传送数据的方法，尚有get方法，不外此刻常用post）。相同的有，<form action="mailto:[email protected]" method="post">
2)大部门的form都是在<input>中处理赏罚的。如下面所示：
请输入名字<input type="text"><p>
请输进口令<input type="password"><p>
请提着名贵意见<textarea rows=3 cols=20 >
</textarea><p>
<input type="submit" value="Submit form">
<input type="reset" value="Clear data">
本身可以修改一部属性并举办测试◎
3）复选框和单选框
<input type="checkbox" value="check1">check1
<input type="checkbox" checked value="check2">check2
<input type="checkbox" checked value="check3">check3<p>（这是复选框）
<input type="radio" value="radio1">radio1
<input type="radio" checked value="radio2">radio2
<input type="radio" value="radio3">radio3<p>（这是单选框）
4）下拉菜单和转动菜单
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select><p>（下拉菜单）
<select multiple size=5>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select><p>（转动菜单，就是比下拉菜单多了个multiple属性和name属性，而size属性是无关紧要）
7帧布局
什么是帧布局，就是在一个完备网页里边分页，当一个页的url产生变革，其他的可以稳固：）行使帧布局可以使得网页越发多变，内容越发富厚，不外也会带来必然的贫困，由于它打乱了原本的根基操纵法则。
怎样成立一个帧布局？如下面的例子所示。
<html>///留意：没有body的哦。。
<head>
<title>帧布局</title>
</head>
<frameset rows="50%,*" cols="50%,*">//界说了网页的分页布局，包罗了行数和列数
<frame src="doc1.html">//引用网页的根基写法
<frameset rows="40%,50%">//界说了一个嵌套的帧
<frame src="doc2.html">
<frame src="doc3.html" scrolling="y
- 上一个程序编程： 以HTML为基本进修DIV+CSS
- 下一个程序编程： [Mugeda HTML5技能教程之16]案例说明：建造跨屏互动游戏｜概念评
