HTML基础
Posted qianyyue
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML基础相关的知识，希望对你有一定的参考价值。
一、html简介
1、HTML概述
（1）HTML 超文本标记语言
纯文本：只有文字
超文本：除了文字，还有图片、视频
标记：HTML根据标签解析并展示页面
（2）HTML后缀
html或者htm（htm是因为早期的操作系统只支持3位扩展名才有的）
2、一个最基本的HTML页面
<html> <head> <meta charset="UTF-8"> <title>网页标题</title> </head> <body> <p>网正文页</p> </body> </html>
3、标签用来描述网页，大小写都可以
结构：<标签名>标签内容</标签名>
<标签名/>这是自结束标签
说明：由于HTML语法不是非常的严格，所以自结束标签中的/可不写
4、元素（一个完整的标签称之为元素）
元素=标签
5、属性
<p style="" id="1001">标签内容</p>
<p style="" id="1002">标签内容</p>
6、注释
注释中的内容不会在网页中显示
格式：<!--注释内容-->
注释不能嵌套
7、鼠标右键（查看原件代码）
二、常用标签
1、<html></html>
作用：告诉浏览器，文档使用HTML编写
用法：所有网页的内容都要编写到html标签中；一个页面中html标签只能有一个；html标签中有两个子标签head和body
2、<head></head>
作用：<head>标签中内容不会在网页中直接显示，head中包含了浏览器和搜索引擎中其他不可见信息
用法：head标签作为html标签的子元素的出现，一个网页中只能有一个head
3、<title></title>
作用：<title>标签表示网页的标题，一般会在网页的标题栏上显示
4、<body></body>
作用：网页的主题（页面中能看到的内容都应该编写到body标签中）
5、<p></p>
作用：表示网页中的一个段落；段落会在页面中自成一行
6、<h1>~<h6>
作用：h1~h6都是网页中的标题标签，用来表示网页中的一个标题（h1最大，h6最小）
7、<br/>
作用：换行
注意：在HTML中，字符中写再多空格，浏览器也会当成一个空格解析；人为换行（按键盘上的enter），也会当成一个空格解析
8、<img/>
作用：显示图片
属性：src---->指向一个外部的图片的路径
width---->设置图片宽度，一般使用px作为单位
height---->设置图片高度，一般使用px作为单位（px---->像素）
alt---->图片不能显示时，对图片的描述
title---->鼠标移动到图片上时，对图片的描述
9、相对路径和绝对路径
（1）相对路径：相对于当前资源所在的路径
图片和HTML文件在同一个文件夹
图片在HTML文件的下一层目录
图片在HTML文件在上一层目录
（2）绝对路径（不要使用此种方式）
10、<a>
作用：超链接，跳转到其他页面
href：指向一个链接地址
target：设置打开页面的位置（_self当前窗口；_blank新窗口）
11、列表
（1）无序列表<ul>
（2）有序列表<ol>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网页标题</title> </head> <body> <img src="libai.jpg" width="100px" height="100px" alt="这是李白的图片 " title="我是李白"/> <img src="img/libai2.jpg" width="100px" height="100px" /> <img src="../libai3.jpg" width="100px" height="100px" /> <p> <h1>静夜思</h1> [唐] 李白<br /> 床前明月光，疑是地上霜。<br /> 举头望明月，低头思故乡。<br /> <h3>望庐山瀑布</h3> [唐] 李白<br /> 日照香炉生紫烟，遥看瀑布挂前川。<br /> 飞流直下三千尺，疑是银河落九天。<br /> <ol> <li><a href="http://www.shicimingju.com/chaxun/zuozhe/1.html" target="_self">李白的诗</a></li> <li><a href="http://www.shicimingju.com/chaxun/zuozhe/6.html" target="_blank">王维的诗</a></li> <li><a href="http://www.shicimingju.com/chaxun/zuozhe/8.html"><img src="baijuyi.jpg" width="100px" height="100px"/></a></li> </ol> </p> </body> </html>
三、表单<form></form>
1、文本框：text
2、密码框：passwd
3、提交按钮：submit
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录页面</title> </head> <body> <form> 用户名：<input type="text" /><br /> 密码：<input type="password" /><br /> <input type="submit" value="提交" /> </form> </body> </html>
4、单选按钮：radio
5、多选框：checkbox
6、下拉列表：select
7、多行文本框：textarea
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <form> 用户名：<input type="text" /><br /> 密码：<input type="password" /><br /> 性别： <input type="radio" name="sex" />男 <input type="radio" name="sex" />女 <input type="radio" name="sex" />保密 <br /> 爱好： <input type="checkbox" />乒乓球 <input type="checkbox" />羽毛球 <input type="checkbox" />足球 <br /> 城市： <select> <option>北京</option> <option>杭州</option> <option>上海</option> <option>南京</option> </select> <br /> 备注： <textarea rows="10" cols="20"></textarea> <br /> <input type="submit" value="提交" /> </form> </body> </html>
四、表格<table></table>
1、行：tr
2、列：td
3、边框border
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <form> <table border="1px"> <tr> <td>用户名：</td> <td><input type="text" /></td> </tr> <tr> <td>密码：</td> <td><input type="password" /></td> </tr> <tr> <td><input type="submit" value="提交" /></td> </tr> </table> </form> </body> </html>
五、框架<frameset></frameset>
作用：使一个窗口里能同时显示多个文档，主框架页里面没有<body>标签，取代它的是<frameset>（框架可嵌套）
1、垂直框架
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>垂直框架</title> </head> <frameset cols="30%,40%,30%"> <frame src="test.html" /> <frame src="test1.html" /> <frame src="test2.html" /> </frameset> </html>
2、水平框架
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>水平框架</title> </head> <frameset rows="30%,40%,30%"> <frame src="test.html" /> <frame src="test1.html" /> <frame src="test2.html" /> </frameset> </html>
3、混合框架
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>混合框架</title> </head> <frameset rows="20%,80%"> <frame src="test.html" /> <frameset cols="50%,50%"> <frame src="test1.html" /> <frame src="test2.html" /> </frameset> </frameset> </html>
4、导航
作用：可以将test1的文档在test2所在的窗口显示。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>混合框架</title> </head> <frameset rows="20%,80%"> <frame src="test.html" /> <frameset cols="50%,50%"> <frame src="test1.html" /> <frame src="test2.html" name="showframe"/> </frameset> </frameset> </html>
还要修改test1.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网页标题</title> </head> <body> <img src="libai.jpg" width="100px" height="100px" alt="这是李白的图片 " title="我是李白"/> <img src="img/libai2.jpg" width="100px" height="100px" /> <img src="../libai3.jpg" width="100px" height="100px" /> <p> <h1>静夜思</h1> [唐] 李白<br /> 床前明月光，疑是地上霜。<br /> 举头望明月，低头思故乡。<br /> <h3>望庐山瀑布</h3> [唐] 李白<br /> 日照香炉生紫烟，遥看瀑布挂前川。<br /> 飞流直下三千尺，疑是银河落九天。<br /> <ol> <li><a href="http://www.shicimingju.com/chaxun/zuozhe/1.html" target="showframe">李白的诗</a></li> <li><a href="http://www.shicimingju.com/chaxun/zuozhe/6.html" target="showframe">王维的诗</a></li> <li><a href="http://www.shicimingju.com/chaxun/zuozhe/8.html" target="showframe"><img src="baijuyi.jpg" width="100px" height="100px"/></a></li> </ol> </p> </body> </html>
以上是关于HTML基础的主要内容，如果未能解决你的问题，请参考以下文章