html是什么
HTML是Hyper Text Markup Language的缩写,中文的意思是“超文本标记语言”,它是制作网页的标准语言。由于网页中不仅包含普通文本,还包含超文本,故被称作超文本描述语言。
那什么是超文本呢?所谓超文本,就是指图像、视频、动画、声音、表格、链接等多媒体的内容。
第一个网页Hello world
打开记事本,写上Hello world,然后保存为index.html,接着用浏览器把index.html打开,就看到了
Hello world,这就是一个最简单的网页。
认识标签
- 什么是标签(元素)
<!-- DOCTYPE 这个文档类型,一开始无需深究 --> <!DOCTYPE html> <html> <!-- 网页的一些设置放在head --> <head> <!-- 设置字符集 --> <meta charset="UTF-8"> <!-- 设置标题--> <title>demo</title> </head> <!-- 看得见的部分放在body --> <body> hello world </body> </html>
html、body、head、meta都是标签,不同的标签作用也不同
常用标签一
- 标题标签H1~H6
- 分割线标签 hr
- div标签
- 段落p标签
- span标签
- 块级标签和行内标签
- 换行标签 br
- 图片标签
- 列表标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 标题标签 --> <h1>这是h1标签</h1> <h2>这是h1标签</h2> <h3>这是h1标签</h3> <h4>这是h1标签</h4> <h5>这是h1标签</h5> <h6>这是h1标签</h6> <!--分割线标签--> <hr /> <!-- div标签 --> <div> 这是div标签 </div> <!-- 段落标签 --> <p> 这是段落标签,文字的上下会有间隔 </p> <!-- span标签 --> <span> 第一个span标签 </span> <span> 第二个span标签 </span> <!-- 换行标签 --> <br /> <!-- 图片标签 --> <img src="tupian.jpg"/> <!-- 列表标签,包括有序列表和无序列表 --> <h3>无序列表</h3> <ul> <li>内容1</li> <li>内容2</li> <li>内容3</li> <li>内容4</li> <li>内容5</li> </ul> <h3>有序列表</h3> <ol> <li>内容1</li> <li>内容2</li> <li>内容3</li> <li>内容4</li> </ol> </body> </html>
常用标签二:表格标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- border加上边框,width设置宽度 --> <table border width="500"> <!-- thead 表头 --> <thead> <!-- tr 行 --> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <!-- tbody 表的主体内容 --> <tbody> <!-- tr行 --> <tr> <!-- td列 --> <td>楚留香</td> <td>22</td> <td>男</td> </tr> <tr> <td>胡铁花</td> <td>20</td> <td>男</td> </tr> <tr> <td>范冰冰</td> <td>30</td> <td>女</td> </tr> </tbody> </table> </body> </html>
常用标签三:表单标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- form表单标签,用来包各种表单相关的元素 --> <form action=""> <!-- 输入元素 --> <!-- 文本域type为text,value是默认值,placeholder为提示语 --> <input type="text" value="" placeholder="请输入文字"/><br /> <!-- 密码框type=password --> <input type="password" value="" placeholder="请输入密码"/><br /> <!-- 单选按钮type=radio,必须拥有相同的name --> 男:<input type="radio" name="sex" value="" /> 女:<input type="radio" name="sex" value="" /><br /> <!-- 复选框checkbox --> 足球:<input type="checkbox" name="ball" value="" /> 篮球:<input type="checkbox" name="ball" value="" /> 羽毛球球:<input type="checkbox" name="ball" value="" /> 乒乓球:<input type="checkbox" name="ball" value="" /><br /> <!-- 按钮 --> <input type="button" name="" id="" value="按钮" /><br /> <!-- 提交按钮 --> <input type="submit" name="" id="" value="提交" /> <!--重置按钮 --> <input type="reset" name="" id="" value="重置" /> </form> </body> </html>
常用标签四:链接标签、下拉列表标签和iframe标签
链接标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p { width: 300px; line-height: 3; } </style> </head> <body> <a href="helloWorld.html">hello world</a><br /> <a href="https://www.baidu.com">百度</a><br /> <!-- 打开新页面 --> <a href="https://www.sina.com" target="_blank">新浪</a><br /> <a href="#aaa">锚点aaa</a> <p> HTML是Hyper Text Markup Language的缩写,中文的意思是“超文本标记语言”,它是制作网页的标准语言。由于网页中不仅包含普通文本,还包含超文本,故被称作超文本描述语言。 那什么是超文本呢?所谓超文本,就是指图像、视频、动画、声音、表格、链接等多媒体的内容。 HTML是网页的基本描述语言,由Tim Berners-Lee在1990年提出,其目的是方便地把一台电脑中的文本或图形,与另一台电脑中的文本或图形联系在一体,形成一个有机的整体,让人们不必考虑这些信息是在当前的电脑上,还是在网络上的其他电脑上。 HTML 不是一种编程语言,而是一种描述性的标记语言 (markup language),它使用标签来描述网页,负责将网页内容进行格式化,使内容更具逻辑性。 HTML文档不需要编译,直接由浏览器解释执行,浏览器(IE、FireFox、Chrome、Opera、Safari、UC等)软件知道HTML的语法,知道如何解释HTML文档。目前互联网上的绝大部分网页,都是使用HTML编写的。 </p> <p> HTML是Hyper Text Markup Language的缩写,中文的意思是“超文本标记语言”,它是制作网页的标准语言。由于网页中不仅包含普通文本,还包含超文本,故被称作超文本描述语言。 那什么是超文本呢?所谓超文本,就是指图像、视频、动画、声音、表格、链接等多媒体的内容。 HTML是网页的基本描述语言,由Tim Berners-Lee在1990年提出,其目的是方便地把一台电脑中的文本或图形,与另一台电脑中的文本或图形联系在一体,形成一个有机的整体,让人们不必考虑这些信息是在当前的电脑上,还是在网络上的其他电脑上。 HTML 不是一种编程语言,而是一种描述性的标记语言 (markup language),它使用标签来描述网页,负责将网页内容进行格式化,使内容更具逻辑性。 HTML文档不需要编译,直接由浏览器解释执行,浏览器(IE、FireFox、Chrome、Opera、Safari、UC等)软件知道HTML的语法,知道如何解释HTML文档。目前互联网上的绝大部分网页,都是使用HTML编写的。 </p> <p id="aaa"> 这是个锚点 </p> <a href="#">回顶部</a> <p> 那什么是超文本呢?所谓超文本,就是指图像、视频、动画、声音、表格、链接等多媒体的内容。 HTML是网页的基本描述语言,由Tim Berners-Lee在1990年提出,其目的是方便地把一台电脑中的文本或图形,与另一台电脑中的文本或图形联系在一体,形成一个有机的整体,让人们不必考虑这些信息是在当前的电脑上,还是在网络上的其他电脑上。 HTML 不是一种编程语言,而是一种描述性的标记语言 (markup language),它使用标签来描述网页,负责将网页内容进行格式化,使内容更具逻辑性。 HTML文档不需要编译,直接由浏览器解释执行,浏览器(IE、FireFox、Chrome、Opera、Safari、UC等)软件知道HTML的语法,知道如何解释HTML文档。目前互联网上的绝大部分网页,都是使用HTML编写的。 </p> </body> </html>
下拉列表标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <select name=""> <!-- 列表选项 --> <option value="xigua">西瓜</option> <option value="apple">苹果</option> <option value="xueli">雪梨</option> <option value="banner">香蕉</option> </select> </body> </html>
iframe标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <iframe src="https://www.baidu.com" width="800" height="600"></iframe> </body> </html>
常用标签五:html5新标签
- html5是什么
- Html5常用新增标签
- header头部标签
- footer底部标签
- nav导航标签
- audio音频标签
- video视频标签
- canvas画布标签
- 其他标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 头部标签 --> <header> <!-- 导航标签 --> <nav> <a href="https://www.baidu.com" target="_blank">百度</a> <a href="https://www.sina.com" target="_blank">新浪</a> <a href="https://www.qq.com" target="_blank">腾讯</a> </nav> </header> <hr /> <!-- input type=tel移动端点击输入框,弹出的数字键盘 --> <input type="tel" value="" placeholder="请输入手机号码" /><br /> <!-- 音频 --> <audio src="jiaobu.mp3" controls="controls"></audio><br /> <!-- 视频 --> <video width="800" height="400" controls="controls"> <source src="zhanlang.mp4" type="video/mp4"></source> </video><br /> <!-- 画布 --> <canvas id="myCanvas" width="200" height="100"></canvas> <hr /> <footer> 底部标签 </footer> <script type="text/javascript"> var c = document.getElementById("myCanvas"); var cxt = c.getContext("2d"); cxt.fillStyle = "#FF0000"; cxt.fillRect(0, 0, 150, 75); </script> </body> </html>
更多标签
更多标签请访问: