版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
1、1关于简单的标签HTML是超文本标记语言，用来制作静态网页<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><h1><font size="12" face="微软雅黑" color="red">helloworld</font></h1><p><fon
2、t size="6" color="red">xx鸡排</font><br />/块级标签 font描述字体炸鸡 | 烤串 | 烤鱿鱼<br />copyright ©2007"xx炸鸡"ALL RIGHT;</p></body></html>2标签<!DOCTYPE html><html><head><m
3、eta charset="UTF-8"><title></title><style>.boxwidth: 200px;height:400px;.topwidth: 200px;height: 200px;.bottomwidth: 200px; height: 200px;</style></head><body><h1><font color="red" size="6">我们看到了什么</font></h1&g
4、t;<div class="box"><div class="top"><img src="img/IMG_7611.PNG" align="textbottom" width="90%" height="100%"/> 底</div><div class="bottom"><img src="img/IMG_7611.PNG" align="texttop&q
5、uot; width="90%" height="100%"/>顶</div></div></body></html><html><head><meta charset="utf-8" /><title></title></head><body><p><img src="img/IMG_7611.PNG" width="250px" heig
6、ht="300px" alt="美女" >底部对齐</p><br />/块级元素<img src="img/IMG_7611.PNG" width="250px" height="300px"/><font style="vertical-align: top;">顶部对齐</font><pre>预格式化文件</pre><ol>/有序标签<li>苹果</li
7、><li>李子</li><li>荔枝</li><li>梨</li></ol><ul>/无序标签<li>肉：<ul type="square"><li>羊肉</li><li>鸡肉</li><li>牛肉</li><li>猪肉</li></ul></li></ul></body></html>关于绝对路
8、径与相对路径 ./跳出当前文件夹标签的属性<html><head><meta charset="UTF-8"><title></title></head><body><a href="#helpme">锚标记</a><p><a name="helpme">这是标记，快速找到相当于书签</a></p><a href="mailto：www.12306">
9、;qq邮箱</a><!-电子邮件链接-><marquee scrolldelay="90" >水平滚动</marquee><!-表示滚动延迟时间，默认值为90表示滚动的方向，默认为从右向左-><marquee scrolldelay="200" direction="up" onmouseover="this.stop()" onmouseout="this.start()" align="center">
10、;一只小小鸟</marquee></body></html>3 表格<html><head><meta charset="utf-8" /><title></title></head><body><table border="1" cellspacing="0" cellpadding="0" bordercolor="red">/表格设定好了几行几列之后就不能在增
11、加行列能合并<tr align="center" >/tr设置居中全部居中改变样式<td ><img src="img/IMG_7612.png" width="50px" height="50px"/></td><td colspan="3">肉类食品</td>/跨3列<td colspan="3">蔬菜食品</td></tr><tr align="c
12、enter" ><td rowspan="3">菜品种类</td>/都在td上操作合并第一个td把后面的都撑开了<td rowspan="3">鸡肉</td><td rowspan="3">鱼肉</td><td> 芹菜</td><td> 土豆</td><td> 西红柿</td></tr><tr align="center" bgcolor=
13、"aqua" ><td > 蘑菇</td><td> 豆角</td><td> 洋葱</td>/跨行被挤掉</tr><tr align="center" ><td> 大蒜</td><td> 辣椒</td><td> 豆芽</td></tr></table></body></html>个人简历<html><head>&l
14、t;meta charset="UTF-8"><title></title></head><body><table border="1"cellspacing="0" cellpadding="0"><tr align="center"><td colspan="7"> <font size="6"><b>个人简历</b></
15、font></td></tr><tr align="center"><td>姓名</td><td width="15%"></td><td>性别</td><td width="15%"></td><td>出生年月</td><td colspan="2"></td></tr><tr align="cente
16、r"><td>民族</td><td></td><td>政治面貌</td><td></td><td>学历</td><td colspan="2"></td></tr><tr align="center"><td>学制</td><td></td><td>身高</td><td></td>
17、;<td >毕业院校</td><td colspan="3" width="26%"></td></tr><tr align="center"><td>专业</td><td></td><td>户籍</td><td colspan="4"></td></tr></table></body></html>5
18、 综合html运用<html><head><meta charset="UTF-8"/><title>HTML <p> 标签</title><style type="text/css">bodybackground-color: deepskyblue;tableborder: 1px solid #666666;border-width: 1px;thborder: 1px solid #666666;trborder: 1px solid #66666
19、6;height: 40px;tdborder: 1px solid #666666;</style></head><body class="html" id="tags"><div id="wrapper"><div id="maincontent"><h1>HTML <p> 标签</h1><div><h2>定义和用法</h2><p><p&a
20、mp;gt; 标签定义段落。</p><p>p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p></div><div><h2>实例</h2><p>以下代码标记了一个段落：</p><pre><p>This is some text in a very short paragraph</p></pre><p><a href="./tiy/t.as
21、p-f=html_paragraphs1.htm" tppabs=" （在页面下部，您可以找到更多实例。）</p></div><div><h2>浏览器支持</h2><p>所有主流浏览器都支持 <p> 标签。</p></div><div><h2>HTML 与 XHTML 之间的差异</h2><p>在 HTML 4.01 中，所有 p 元素的呈现属性均不被赞成使用。</p><p>在 X
22、HTML 1.0 Strict DTD 中，所有 p 元素的呈现属性均不被支持。</p></div><div><h2>可选的属性</h2><table class="dataintable"><tr><th width="20%">属性</th><!小标题整个页面是100%-><th width="20%">值</th><th width="55%">描述<
23、;/th><th width="5%">DTD</th> </tr><tr><td><a href="att_p_align.asp.htm" tppabs=" title="HTML <p> 标签的 align 属性">align</a></td><td><ul><li>left</li><li>right</li><
24、li>center</li><li>justify</li></ul></td><td><p><span class="deprecated">不赞成使用。</span>请使用样式取代它。</p><p>规定段落中文本的对齐方式。</p></td><td>TF</td></tr></table></div><div><h2>标准属性&
25、lt;/h2><pre>id, class, title, style, dir, lang, xml:lang</pre><p>如需完整的描述，请访问<a href="html_ref_standardattributes.asp.htm" tppabs="</div><div><h2>事件属性</h2><pre>onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, o
26、nmouseout, onkeypress, onkeydown, onkeyup</pre><p>如需完整的描述，请访问<a href="html_ref_eventattributes.asp.htm" tppabs="</div><div class="example"><h2>TIY 实例</h2><dl><!-非表格定义标签有层次的分级-><dt><a href="./tiy/t.asp-f=html_pa
27、ragraphs1.htm" tppabs="<dd>此例演示：段落元素中的文字如何被浏览器显示。</dd><dt><a href="./tiy/t.asp-f=html_paragraphs2.htm" tppabs="<dd>本例演示段落元素的某些缺省的行为。</dd><dt><a href="./tiy/t.asp-f=html_poem.htm" tppabs="<dd>本例演示 HTML 格式化的某些问题。&l
28、t;/dd></dl></div><div><h2>延伸阅读：允许的段落用法</h2><p>可以只在块（block）内指定段落，也可以把段落和其他段落、列表、表单和预定义格式的文本一起使用。总的来讲，这意味着段落可以在任何有合适的文本流的地方出现，例如文档的主体中、列表的元素里，等等。</p><p>从技术角度将，段落不可以出现在头部、锚或者其他严格要求内容必须只能是文本的地方。实际上，多数浏览器都忽略了这个限制，它们会把段落作为所含元素的内容一起格式化。</p></div&g
29、t;</div></div></body></html>6关于字体<html><head><meta charset="UTF-8" /><meta name="Keywords" content="Hello,World!" /><meta name="Description" content="第一张网页！" /><title>这是我的第一张网页！</title>
30、;</head><body><p align="center">春晓</p><p align="center">春眠不觉晓，</p><p align="center">处处闻啼鸟。</p><p align="center">夜来风雨声，</p><p align="center">花落知多少。</p><!-块级元素-><b>加粗&l
31、t;/b><br><i>倾斜</i><br><u>下划线</u><br><s>删除线</s><br><strong>加粗</strong><br><small>小字号</small><br><strike>删除线</strike><br><p><font face="微软雅黑" size="7" >字
32、体定义,微软雅黑，7号</font></p><p><font face="仿宋" size="5">字体定义，仿宋，5号</font></p><p><font face="楷体" size="1">字体定义，楷体，1号</font></p>H<sub>2</sub>O<br />M<sup>2</sup></body><
33、/html>7 多媒体<html><head><meta charset="UTF-8"><meta name="keywords" content="key" /><meta name="Description" content="" /><title>audio</title></head><body><!-属性： src:文件路径； controls:是否显示控件,如播放
34、、暂停和音量控件； autoplay:是否允许自动播放； muted:静音的； loop:是否循环播放； 特殊用法多源： <audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的。 audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式； 注意： 1、音频源文件如果是绝对路径，那么必须通过互联网可访问； 音频文件如果是相对路径，那么它必须被包含在项目内部； 2、audio标记对内可以嵌入文字等多种形式的内容； -><audio src="audio
35、/xpg.mp3" controls="controls" autoplay="autoplay" muted="muted" loop="loop">您的浏览器不支持audio标记。</audio><!-描述：第二种写法：多源。audio标记中不写src属性，而在audio标记中间嵌入source标记。-><audio controls="controls" autoplay="autoplay" muted="mut
36、ed" loop="loop"><source src="song.ogg" type="audio/ogg"> <source src="song.wav" type="audio/vnd.wave"><source src="song.mp3" type="audio/mp3">您的浏览器不支持audio标记。</audio><!-video多源 -><video wid
37、th="800" height=""><source src="myvideo.mp4" type="video/mp4"></source><source src="myvideo.ogv" type="video/ogg"></source><source src="myvideo.webm" type="video/webm"></source><
38、object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf"><param name="movie" value="myvideo.swf" /><param name="flashvars" value="autostart=true&file=myvideo.swf" /></ob
39、ject>当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a></video></body></html>9链接<html><head><meta charset="UTF-8"><title></title><!- 描述： 标签定义两个连接文档之间的关系。 属性： href： 目标文档或资源的 URL。 rel： relation，定义当前文档与目标文档之
40、间的关系。 type： 规定目标 URL 的 MIME 类型。 -> <link rel="stylesheet" type="text/css" href="css/body.css"/></head><body bgcolor="deepskyblue" alink="" vlink="" link="">/html超链接文字有默认颜色，link未访问超链接的颜色 vlink已访问过超链接的颜色 alink鼠标点击超链接时的颜色 写在body内<!- 描述： <a> 标签可定义锚。锚 (anchor) 有两种用法：通过使用 href 属性，创建指向另外一个文档的链接
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论