简介
通常网页都是以html或htm后缀结尾的文件
Hyper Text Markup Language(超文本标记语言)
HTML基本标签
结构标签
<html>:根标签 <head>:网页头标签 <title></title>:网页的标题 </head>: <body></body>:网页正文 </html>
排版标签
换行标签:<br>
段落标签:<p>文本文字</p>
水平线标签:<hr>
<html> <head> <title>this is titlte</title> </head> <body bgcolor="pink">//设置背景颜色 this is text01<br /> this is text02<br /> this is text03<br /> <hr /> <hr size="500" color="blue" /> <hr size="500" color="blue" width="300" align="right" /> <p align="center">this is p1<p /> <p>this is p2<p /><br /> <p align="right">this is p3<p /> </body> </html>
块标签
<div><div/>:行级块标签,独占一行,换行
<span></span>:行内块标签,所有内容都在同一行
基本文字标签
font标签处理网页中文字的显示方式(可对属性进行赋值)
<HTML> <HEAD> <TITLE> images </TITLE> </HEAD> <BODY> <font size="6" color="blue" face="方正舒体333"><b>this is a text.</b></font> <font size="6" color="blue" face="方正舒体333"><Strong>this is a text.</Strong></font> <font size="6" color="blue" face="方正舒体333"><i>this is a text.</i></font> <font size="6" color="blue" face="方正舒体333">this is a text.</font> <h1>this is h1</h1> </BODY> </HTML>
文本格式化标签
b strong em i粗体标签、加粗、强调字体、斜体等标签
标题标签
h1、h2、h3、h4、h5、h6共6级,h7无效
<html> <head> <title>this is my first html page.</title> </head> <body> <h1>this is head 01</h1> <h2>this is head 02</h2> <h3>this is head 03</h3> <h4>this is head 04</h4> <h5>this is head 05</h5> <h6>this is head 06</h6> <h7>this is head 07</h7><br /> this is text. </body> </html>
列表标签
无序列表<ul></ul>:使用一组无序的符合定义
有序列表<ol></ol>:使用一组有序的符合定义
列表标签之间可以相互嵌套使用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <ol type="disc"> <li>打开冰箱门</li> <li>把大象装进去</li> <li>关上冰箱门</li> </ol> <ul type="disc"> <li>Java</li> <li>html5</li> <li>python</li> <li>testing</li> <li>Java</li> <li>html5</li> <li>python</li> <li>testing</li> <li>Java</li> <li>html5</li> <li>python</li> <li>testing</li> </ul> </BODY> </HTML>
图形标签
<img/>:在页面指定位置处引入一副图片
并可以对图片的地址、宽度、高度、边框、对齐方式等属性进行赋值
<HTML> <HEAD> <TITLE> html demo </TITLE> </HEAD> <BODY background="imgs/2222.jpg"> this is a test. <img src="imgs/2222.jpg" width="800" height="600" align="right" /> </BODY> </HTML>
<HTML> <HEAD> <TITLE> images </TITLE> </HEAD> alt和title用于图片无法正常显示时提示作用 <BODY> <img src="imgs/a.jpg" width="200" alt="快来看美女" /> <img src="imgs/b.jpg" width="200" title="快来看美女" /> <img src="imgs/c.jpg" width="200" title="快来看美女" /> <img src="imgs/d.jpg" width="200" title="快来看美女" /> <img src="imgs/e.jpg" width="200" title="快来看美女" /> </BODY> </HTML>
音频标签
embed:在页面指定位置处引入一个视频
<HTML> <HEAD> <TITLE> images </TITLE> </HEAD> //autoplay是音频的播放方式属性,true是播放,false是暂停 <BODY> <embed src="video/1.mp4" width="600" autoplay="false" /> <embed src="video/2.mp4" width="600" autoplay="false" /> <embed src="video/3.mp4" width="600" autoplay="false" /> <embed src="video/4.mp4" width="600" autoplay="false" /> <embed src="video/5.mp4" width="600" autoplay="false" /> <embed src="mp3/1.mp3" /> </BODY> </HTML>
source:在页面指定位置处引入一个音乐
<HTML> <HEAD> <TITLE> images </TITLE> </HEAD> <BODY> <video width="320" height="240" controls> <source src="video/1.mp4" type="video/mp4"> </video> <audio controls> <source src="mp3/1.mp3" type="audio/mpeg"> <source src="mp3/2.mp3" type="audio/mpeg"> <source src="mp3/3.mp3" type="audio/mpeg"> <source src="mp3/4.mp3" type="audio/mpeg"> Your browser does not support this audio format. </audio> </BODY> </HTML>
表格标签
普通表格:(table,tr,td)
表格的列标签(th):内容有加粗和居中效果
表格的列合并属性(colspan):同行合并多列
表格的行合并属性(rowspan):同列多行合并
表格的行合并属性(rowspan):同列多行合并
<HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <table border="1" align="center" width="80%"> <tr> <th colspan="4">score</th> </tr> <tr align="center" > <th>sid</th> <th>name</th> <th>age</th> <th>score</th> </tr> <tr align="center"> <td>9527</td> <td>tangbohu</td> <td>18</td> <td>100</td> </tr> <tr> <td>9527</td> <td>tangbohu</td> <td>18</td> <td>100</td> </tr> <tr> <td>9527</td> <td>tangbohu</td> <td>18</td> <td>100</td> </tr> <tr> <td>9527</td> <td>tangbohu</td> <td>18</td> <td>100</td> </tr> <tr> <td>9527</td> <td>tangbohu</td> <td>18</td> <td>100</td> </tr> <tr> <td>9527</td> <td>tangbohu</td> <td>18</td> <td>100</td> </tr> <tr> <td colspan="3" align="right">total</td> <td>900</td> </tr> </table> </BODY> </HTML>
链接标签
<a href="跳转页面的地址"></a>:跳转到指定的地址页面
设置跳转页面的页面打开方式:
target_blank在新窗口打开
target_self在原窗口打开
_top
_parent
指向同一页面中指定位置:
定义位置:<a name="名称"></a>
指向:<a href="#名称"></a>
<HTML> <HEAD> <TITLE> html page1</TITLE> </HEAD> <BODY> <h1>this is first page.</h1> <a href="Demo02.html" target="_blank">second page</a> <a href="#e">view</a> <a href="mailto:zhangsan@qq.com">contact us</a> <a name="top"></a> <img src="imgs/a.jpg" /> <img src="imgs/1.jpg" /> <img src="imgs/b.jpg" /> <img src="imgs/c.jpg" /> <img src="imgs/d.jpg" /> <a name="e"></a> <img src="imgs/e.jpg" /> <a href="#top">back to top</a> </BODY> </HTML>
<HTML> <HEAD> <TITLE> html page2</TITLE> </HEAD> <BODY> <h1>this is second page.</h1> <a href="Demo01.html">first page</a> <a href="Demo01.html#e">first page view</a> <img src="imgs/a.jpg" /> <img src="imgs/1.jpg" /> <img src="imgs/b.jpg" /> <img src="imgs/c.jpg" /> <img src="imgs/d.jpg" /> <img src="imgs/e.jpg" /> </BODY> </HTML>
HTML表单标签
用于收集不同类型的用户输入数据
form元素常用属性
action表示动作,值为服务器的地址,把表单的数据提交到该地址上处理
method:请求方式:get和post。get不安全、效率高。post安全、效率低
enctype:表示是表单提交的类型
默认值:application/x-www-form-urlencoded普通表单
multipant/form-data多部分表单(一般用于文件上传)
input元素
作为表单中的重要元素,可根据不同type值呈现为不同状态
<HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <form action="Demo01.html" method="POST"> username: <input type="text" name="useranme" /><p /> password: <input type="password" name="password" /><p /> file <input type="file" name="file" /><p /> sex: <input type="radio" name="sex" checked>boy <input type="radio" name="sex">girl <p /> hobby: <input type="checkbox" name="hobby">singing <input type="checkbox" name="hobby">jump jump2 <input type="checkbox" name="hobby">rap <input type="checkbox" name="hobby">basketball<p /> month: <select multiple="multiple"> <option value="0">pls select a month:</option> <option value="1">jan</option> <option value="2">feb</option> <option value="3">mar</option> <option value="4">apr</option> <option value="5">may</option> <option value="6" selected>jun</option> <option value="7">jul</option> <option value="8">aug</option> <option value="9">sep</option> <option value="10">oct</option> <option value="11">nov</option> <option value="12">dec</option> </select><p /> birth:<input type="date" name="birth" /><p /> number:<input type="number" name="number" /><p /> birth2:<input type="datetime-local" name="birth2" /><p /> aaa:<input type="time" name="aaa" /><p /> protocal:<textarea cols="30" rows="10">this is protocal.this is protocal.this is protocal.this is protocal.this is protocal.this is protocal.this is protocal.this is protocal.this is protocal.this is protocal.this is protocal.this is protocal.this is protocal.this is protocal.</textarea><p /> <input type="submit" value="register" /> <input type="reset" value="reset" /> <input type="button" value="button" /><p /> <button type="button">register</button><p /> </form> </BODY>
select元素(下拉列表)
单选下拉列表:<select></select>
默认选中属性:selected=“selected”
多选下拉列表:<select multiple="multiple"></select>
textarea元素(文本域)
多行文本框:<textarea cols="列" rows="行"></textarea>
button标签本身具有提交功能
HTML框架标签
-
通过使用框架,你可以在同一个浏览器窗口显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他框架。
-
使用框架的缺点:
-
开发人员必须同时跟踪更多的HTML文档
-
很难打印整张页面
-
框架结构标签frameset
-
框架结构标签用于定义如何将窗口分割为框架
-
每个frameset定义了一系列行或列
-
rows/columns的值规定了每行或每列占据屏幕的面积
-
<frameset rows=“”></frameset>
-
<frameset cols=“”></frameset>
-
框架标签frame
每个框架引入一个html页面
基本的注意事项
-
不能将<body></body>标签与<frameset></frameset>标签同时使用
-
加入一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在<frame>标签中加入:noresize=“noresize”
<HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <frameset rows="10%, 60%, *"> <frame src="top.html"> <frame src="center.html"> <frame src="bottom.html"> </frameset> </HTML>
<HTML> <HEAD> <TITLE> top </TITLE> </HEAD> <BODY> <h1>this is top</h1> </BODY> </HTML>
<HTML> <HEAD> <TITLE> top </TITLE> </HEAD> <BODY> < > <> <h1>this is bottom京ICP证030173号 © 2021qianfeng </h1> </BODY> </HTML>
<HTML> <HEAD> <TITLE> top </TITLE> <style> @import url(css/all.css); </style> </HEAD> <BODY> <h1>this is center</h1> </BODY> </HTML>
框架中还可以插入框架
<HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <nobody> <frameset rows="10%, 80%, *" noresize border="1"> <frame src="top.html" noresize> <frameset cols="10%, *" noresize> <frame src="left.html" noresize> <frame src="main01.html" name="mainFrame" noresize> </frameset> <frame src="bottom.html" noresize> </frameset> </nobody> </HTML>
其他标签和特殊字符
特殊字符
占位符:空格- 
其他标签