HTML基础知识
HTML基础知识
<html></html> 创建一个HTML文档 <head></head> 设置文档标题和其它在网页中不显示的信息 <title></title> 设置文档的标题 <h1></h1> 最大的标题 <pre></pre> 预先格式化文本 <u></u> 下划线 <b></b> 黑体字 <i></i> 斜体字 <tt></tt> 打字机风格的字体 <cite></cite> 引用,通常是斜体 <em></em> 强调文本(通常是斜体加黑体) <strong></strong> 加重文本(通常是斜体加黑体) <font size="" color=""></font> 设置字体大小从1到7,颜色使用名字或RGB的十六进制值 <BASEFONT></BASEFONT> 基准字体标记 <big></big> 字体加大 <SMALL></SMALL> 字体缩小 <STRIKE></STRIKE> 加删除线 <CODE></CODE> 程式码 <KBD></KBD> 键盘字 <SAMP></SAMP> 范例 <VAR></VAR> 变量 <BLOCKQUOTE></BLOCKQUOTE> 向右缩排 <DFN></DFN> 述语定义 <ADDRESS></ADDRESS> 地址标记 <sup></SUP> 上标字 <SUB></SUB> 下标字 <xmp>...</xmp>固定寬度字体(在文件中空白、換行、定位功能有效) <plaintext>...</plaintext>固定寬度字體(不執行標記符號) <listing>...</listing> 固定寬度小字體 <font color=00ff00>...</font>字體顏色 <font size=1>...</font>最小字體 <font style ='font-size:100 px'>...</font>無限增大 格式标志标签 <p></p> 创建一个段落 <p align=""> 将段落按左、中、右对齐 <br> 换行 插入换行符 <blockquote></blockquote> 从两边缩进文本 <dl></dl> 定义列表 <dt> 放在每个定义术语词前 <dd> 放在每个定义之前 <ol></ol> 创建一个标有数字的列表 <ul></ul> 创建一个标有圆点的列表 <li> 放在每个列表项之前,若在<ol></ol>之间则每个列表项加上一个数字, 若在<ul></ul>之间则每个列表项加上一个圆点 <div align=""></div> 用来排版大块HTML段落,也用于格式化表 <MENU> 选项清单 <DIR> 目录清单 <nobr></nobr> 强行不换行 <hr size='9' width='80%' color='ff0000'>水平線(設定寬度) <center></center> 水平居中 链接标志表格标志 <a href="URL"></a> 创建超文本链接 <a href="mailtEMAIL"> </a> 创建自动发送电子邮件的链接 <a name="name"></a> 创建位于文档内部的书签 <a href="#name"></a> 创建指向位于文档内部书签的链接 <BASE> 文档中不能被该站点辨识的其它所有链接源的URL <LINK> 定义一个链接和源之间的相互关系
HTML标签使用实例
(1)div标签 【没有任何意义的盒子】
Div是Html标签之一,div具有分割内容作用,div与CSS样式可让网页实现各种样式效果。
在html中使用最多的布局标签为div,加上对网页设置css样式,所以通常我们就说div+css制作即使有div标签+css样式实现网页布局重构。
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>div 演示</title> <style type="text/css"> .yangshi{ color:#F00;}/* 设置颜色为红色 */ .yangshi2{ color:#0F0;}/* 设置颜色为绿色 */ </style> </head> <body> <div class="yangshi">设置我颜色为红色</div> <div class="yangshi2">设置我颜色为绿色</div> </body> </html>
(2)SPAN标签 【 一个普通的内联标签】
span在html中常用的布局标签,与div标签区别在于,span随内容而占用高宽空间(紧贴内容),而一对div标签却占用一行。
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>div 演示</title> </head> <body> <span>我是span标签</span> <span>我是span标签,我们是兄弟</span> </body> </html>
(3)a标签 【超链接标签】
如果a标签内没有此元素,默认是在浏览网页中重新载入对应链接网页
_blank :新建标签窗口页,设置此属性,点击锚文本后对应新建标签网页窗口卡打开对应地址
_parent:父级打开网页,此属性可以理解为本页网页从新载入锚文本的网页,针对html框架iframe网页中,整个网页将重新载入打开目标网址地址
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>div 演示</title> </head> <body> <a target="_blank" href="https://www.baidu.com/">我是a标签,超链接标签,点击我会进行跳转 </a> <br> <a target="_parent" href="https://www.baidu.com/">我是a标签,超链接标签,点击我会进行跳转 </a> </body> </html>
(3)br标签 【强行换行标签】
如果有地方需要强制换行,那我们使用br标签即可。
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>div 演示</title> </head> <body> <soan>hello world</soan> <br> <span>good</span> </body> </html>
(4)p标签 【段落标签】
常常使用段落标签,让文章条理段落上下分割清晰,同时也对搜索引擎优化(SEO),让搜索引擎感到你的网页内容段落清晰更加友好清晰。
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>div 演示</title> </head> <body> <p>今人不见古时月,今月曾经照古人。</p> <p>古人今人若流水,共看明月皆如此。</p> </body> </html>
br标签的p标签的区别总结:
其次,区别<br />是只需一个单独使用,而<p>和</p>是一对使用
再次,br标签是小换行提行,p标签是大换行(分段)各行作用。
(5)H标签 【标题标签】
在一个网页中可以适当使用h1 h2 h3 h4标签,有利于网页的重点部分突出,同时也利于搜索引擎排名,但切记滥用多用H1 H2 H3 H4标签,适当使用即可,一切从用户体验出发来使用。如果需要控制这些标题 标签的大小、背景、宽度、高度、CSS加粗与否都可以通过DIV CSS来实现对其样式重新定义。
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>div 演示</title> </head> <body> <h1>1</h1> <h2>2</h2> <h3>3</h3> <h4>4</h4> <h5>5</h5> <h6>6</h6> </body> </html>
在没有赋予H1 H2 H3 H4标签任何CSS样式时候,字体大小h1大于h2大于h3大于h4如下案例截图
(6)px、em、pt 标签 【单位标签】
px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的国内推荐;
em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸,国外使用比较多;扩展阅读:html em标签,html em强调标签
pt单位名称为点(Point),绝对长度单位一般老版本的table使用长度大小单位但是现在基本上没有使用。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #i1{ font-size: 10px; } #i2{ font-size: 10em; } #i3{ font-size: 10pt; } </style> </head> <body> <span id="i1">11</span> <span id="i2">22</span> <span id="i3">33</span> </body> </html>
(7)b标签【内容将被加粗显示】
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <b>你好</b> </body> </html>
(8)em标签【强调内容】
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> 我是 <em>em标签</em> </body> </html>
(9)i标签【斜体标签】
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> 我是 <i>i标签</i> </body> </html>
(10)u标签【下化线标签】
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> 我是 <u>u标签</u> </html>
(11)s标签【贯穿标签】
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> 我是 <s>s标签</s> </html>
(12)img标签【图像】
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!--<img src="图片路径" width="宽度" height="高度" alt="图片描述" />--> <img src="http://cdn2.oldboyedu.com/Public/Uploads/weblogo/1499239092.png" width="175" height="47" alt="" /> </body> </html>
(13)上标标签,下标标签【文字上飘,文字下飘】
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <sub>上</sub> <sup>下</sup> </body> </html>
(14)nobr标签【强行不换行】
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>nobr标签实例</title> <style> ul{ border:1px solid #000; width:200px;} li{ width:200px; line-height:22px} </style> </head> <body> <ul> <li><nobr>第一排内容文字多加nobr标签测试内容</nobr></li> <li><nobr>第二排内容文字多加nobr标签不能排下</nobr></li> <li>第三排内容文字多没有加nobr标签</li> <li>第四排 文字少能排下</li> </ul> </body> </html>
(15)hr标签【分割线】
Hr水平线特点是100%宽度水平分割线,并且独占一行,hr水平线将与上下内容一定距离。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>nobr标签实例</title> </head> <body> <span>你好</span> <hr> <span>谢谢</span> </body> </html>
(16)form标签【通过这个可以对数据进行提交】
Method的值为get时,是通过URL传内容与参数,这个时候我们通过网址URL能看见自己填写内容提交处理
Method的值为post时,是通过类似缓存传填写内容与参数,而URL是不能看到form表单填写内容提交内容。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>nobr标签实例</title> </head> <body> <!--<form action="跳转的" method="请求方式"></form>--> <form action="https://www.baidu.com" method="get"> <input type="submit"> </form> </body> </html>
(17)laber标签【放在input标签附近,点击文字时会把鼠标移动到选择框】
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>nobr标签实例</title> </head> <body> <!--<form action="跳转的" method="请求方式"></form>--> <form action="" method="get"> 性别:<br /> <input name="sex" id="man" type="radio" value="" /> <label for="man">男</label> <input name="sex" id="woman" type="radio" value="" /> <label for="woman">女</label> </form> </body> </html>
(18)input标签【输入框、单选框、多选框、提交按钮、普通按钮】
Type为表单控件样式
type="text" 输入框控件,用于输入内容如用户名、密码之类内容输入框控件
type="submit" 按钮控件,用于提交、重置动作
type="checkbox" 多选复选框控件,用于多选题、多选功能(进入了解 html checkbox多选框)
type="radio" 单选框,用于单选,唯一选择功能
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>nobr标签实例</title> </head> <body> <form action="" method="get"> <label for="text">type="text" 输入框</label> <input name="" type="text" id="text" size="22" /> <hr> <label for="checkbox">type="checkbox" 多选复选框</label> <input name="" type="checkbox" id="checkbox" value="" /> <hr> <label for="radio">type="radio" 单选框</label> <input name="" type="radio" value="" id="radio" /> <hr> <label for="submit">type="submit" 按钮</label> <input name="" type="submit" value="提交" id="submit" /> <hr> <label for="button">type="button" 按钮</label> <input type="button" value="button" id="button"> </form> </body> </html>
(19)textarea标签【可拖动的文本输入框】
Name 为传值命名
Cols 为字符宽度(每行输入文字多少宽度),跟具体数字
Rows 为行数,默认输入框区域显示高度,跟具体数字
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>nobr标签实例</title> </head> <body> <form action="" method="get"> <label>内容输入:</label> <textarea name="DIVCSS5" cols="30" rows="4"> heelo world </textarea> </form> </body> </html>
(20)select标签【下拉选择框】
select 我下拉列表菜单标签
Option为下拉列表数据标签
Value 为Option的数据值(用于数据的传值)
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>nobr标签实例</title> </head> <body> <form action="" method="get"> <label>1、普通下拉列表菜单</label> <select name=""> <option value="0">hello</option> <option value="1">word</option> </select> </form> </body> </html>
(21)多选标签【可以进行多个选择】
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>nobr标签实例</title> </head> <body> <form action="" method="get"> 您喜欢的水果?<br /><br /> <label><input name="Fruit" type="checkbox" value="" />苹果 </label> <label><input name="Fruit" type="checkbox" value="" />桃子 </label> <label><input name="Fruit" type="checkbox" value="" />香蕉 </label> <label><input name="Fruit" type="checkbox" value="" />梨 </label> </form> </body> </html>
(22)单选标签【只能选择一个】
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>nobr标签实例</title> </head> <body> <form action="" method="get"> 您最喜欢水果?<br /><br /> <label><input name="Fruit" type="radio" value="" />苹果 </label> <label><input name="Fruit" type="radio" value="" />桃子 </label> <label><input name="Fruit" type="radio" value="" />香蕉 </label> <label><input name="Fruit" type="radio" value="" />梨 </label> <label><input name="Fruit" type="radio" value="" />其它 </label> </form> </body> </html>
(23)font标签【html标签样式】
<font color="#FF0000">www.divcss5.com 颜色</font>
Font color设置文本颜色为红色“#FF0000” ,你可能想了解css字体颜色:css color
<font size="6">www.divcss5.com 文字大小</font>
Font size设置文本文字大小尺寸为6 ,你可能想了解css字体大小:css font-size
<font face="微软雅黑">微软雅黑 字体</font>
Font face设置文本字体为“微软雅黑” ,你可能想了解css字体设置: css font-family
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>nobr标签实例</title> </head> <body> <font color="red">好好学习</font> </body> </html>
(24)iframe标签【内嵌】
Src值为被嵌入网页地址
Scrolling 是否有滚动条,yes有,no无,auto 根据被显示html自动显示或隐藏
Width宽度
Height高度
高度宽度可以为百分比,可以为具体高宽数值,不需要跟单位。
通常需要设置高度、宽度具体数值。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>nobr标签实例</title> </head> <body> <iframe src="http://www.baidu.com" frameborder="0" scrolling="yes" width="800px" height="800px"></iframe> </body> </html>
(25)table表格【tr、td、th】
<table>表格布局篇,认识html表格基础语法,认识table表格结构语法,
通过html table tr td、html table tr th表格实例掌握表格认识html表格table样式布局。
同时table的样式可以通过CSS样式控制其各式各样的样式。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>nobr标签实例</title> </head> <body> <table border="1px"> <tr> <th>121</th> <th>212</th> <th>313</th> </tr> <tr> <td>11</td> <td>22</td> <td>33</td> </tr> <tr> <td>11</td> <td>22</td> <td>33</td> </tr> </table> </body> </html>
(26)dl dt dd认识及dl dt dd使用方法
<dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
...
</dl>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>nobr标签实例</title> </head> <body> <h1>一个定义列表:</h1> <dl> <dt>百度网站</dt> <dd>网址为www.baidu.com</dd> <dt>div 老男孩</dt> <dd>网址为www.oldboyedu.com</dd> </dl> </body> </html>
(27)ol li有序列表【有序列表】
通常我们使用li标签都是使用无序ul li列表标签。一般情况无论是有序列表(ol li)还是无序列表(ul li)我们都将CSS样式初始化,使用时候重新赋予CSS样式
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>nobr标签实例</title> </head> <body> <ol> <li>内容一</li> <li>内容二</li> <li>内容三</li> </ol> </body> </html>
(28)ul li列表标签【无序列表】
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>nobr标签实例</title> </head> <body> <ul> <li>11</li> <li>22</li> <li>33</li> </ul> </body> </html>
(29)title标签【标题】
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>nobr标签实例</title> <base target="_blank" href="https://www.baidu.com"> </head> <body> </body> </html>
(30)link标签【链接外部标签】
link 标签的内容结构解释
href 值为外部资源地址这里是收藏夹图标地址
rel 定义当前文档与被链接文档之间的关系,这里是外部icon图标属性
type 规定被链接文档的 MIME 类,这里是值为image/x-icon
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>nobr标签实例</title> <link href="img/divcss5.css" rel="stylesheet" type="text/css" /> </head> <body> </body> </html>
(31)script标签【链接外部js】
链接外部JS时候script 标签的内容结构解释
src的值为外部资源地址,这里是js文件的地址,相当于link标签href链接外部css文件一样CSS引用
type规定被链接文档的 MIME 类,这里是值为text/javascript
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>nobr标签实例</title> <script src="HTML.html"></script> </head> <body> </body> </html>
(32)mate标签【网页显示字符集网页编码】
简体中文:<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 中文:<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 繁体中文:<meta http-equiv="Content-Type" content="text/html; charset=BIG5" /> 英 语:<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 2、网页制作者信息 <meta name="author" content="Evance" /> 3、网页关键字声明(搜索引擎优化地方) <meta name="keywords" content="abc,xxx,defg,xyz" /> 4、网页简介说明(搜索引擎优化地方) <meta name="description" content="简介内容如本页div+css教程之meta标签说明-www.divcss5.com" /> 5、防止别人在框架里调用你的页面<meta http-equiv="Window-target" content="_top" /> 6、自动跳转(此标签用法可以让网页在多少秒后自动从当前页面跳转到另外一个网页页面或网站) <meta http-equiv="Refresh" content="5;URL=http://www.divcss5.com" /> Content后跟值为当前页面在多少时间跳转; Url值为跳转到具体网页网站 7、网页告诉搜索机器人向导对此网页操作(用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引) <meta name="robots" content="all" /> content的参数有all,none,index,noindex,follow,nofollow。默认是all。如果在一个页面不加入此标签默认情况下content="all"意思是搜索并收录抓取爬行此网页及此网页指向页面。
(33)head标签【head位于html网页的头部,<html>后<body>前的标签,并以<head>开始以</head>结束的一html标签】
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>nobr标签实例</title> <script src="HTML.html"></script> </head> <body> </body> </html>
(34)style标签【放置css样式】
首先<style></style>是一对有开始与结束的闭合标签。 1、放置CSS样式 <style type="text/css"></style>中间用于放CSS样式代码。 在HTML中CSS代码只有放置在其<style type="text/css">标签内才能生效。 2、放置JS代码 <style type="text/javascript"></style> 在HTML中JS代码一般放入<style type="text/javascript">标签内
(35)body标签【body是html网页结构最重要的标签,也叫主体内容标签,一般网页内容均放入此标签组之间】
1)、body内容标签,在HTML只能使用或出现一次 2)、通常网页内容都是放入body标签内容 3)、网页内容开始与结束标签 4)、通常我们在IE内容区看到的内容,都是放入在<body></body>之间 5)、可以这样理解,我们要让内容在IE浏览器中显示,当然不能任意到处放,这里html规范规定有它的html语言语法,这个时候body标签解决了这样要求与规范!