标题标签HTML提供<hn>系统标签, 用于修饰标题.包含: <h1>, <h2>,...,<h6>. 其中<h1>定义最大的标题,<h6>定义最小的标题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Demo02-标题标签</title></head><body> <h1>我是h1修饰的一级标题</h1> <h2>我是h2修饰的二级标题</h2> <h3>我是h3修饰的三级标题</h3> <h4>我是h4修饰的四级标题</h4> <h5>我是h5修饰的五级标题</h5> <h6>我是h6修饰的六级标题</h6></body></html><!--* 项目描述: 学习HTML标签 之 标题标签* 作 者: chain.xx.wdm* 备 注: * 加了标题的文字会加粗,字号也会变大* 一个标题独占一行-->段落标签段落标签<p></p> p标签会自动在其前后创建一些空白.(是单词paragraph缩写, 意为段落)标签语义: 可以把HTML文档分割为若干段落<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Demo03-段落标签</title></head><body> <p> 田馥甄正式出道前曾参加中视《我猜我猜我猜猜猜》人不可貌相之无厘头美少女单元[3]，后又于2000年参加中视《电视大国民》之残酷舞台单元的歌唱比赛并获得一万元奖金.</p> <p> 不久之后，该节目制作单位再次询问田馥甄是否愿意再参加宇宙唱片（华研唱片前身）与节目《电视大国民》残酷舞台单元合办之《宇宙2000实力美少女争霸战》选秀比赛</p></body></html><!--* 项目描述: 学习HTML标签 之 段落标签* 作 者: chain.xx.wdm* 备 注: * 文本在一个段落中分根据浏览器窗口的大小自动换行* 段落和段落之间保有空隙* 表示空格. 手动在代码中加空格是不会在浏览器中生效的-->换行标签在HTML中, 一个段落中的文字会从左到右依次排列, 直到浏览器窗口的右端, 然后才自动换行如果希望某段文本强制换行显示, 就需要使用换行标签<br/>.(单词break的缩写,意为打断,换行).标签语义: 强制换行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Demo03-段落标签</title></head><body> <p> 田馥甄正式出道前曾参加中视《我猜我猜我猜猜猜》人不可貌相之无厘头美少女单元[3]<br/>后又于2000年参加中视《电视大国民》之残酷舞台单元的歌唱比赛并获得一万元奖金.</p> <p> 不久之后，该节目制作单位再次询问田馥甄是否愿意再参加宇宙唱片（华研唱片前身）与节目《电视大国民》残酷舞台单元合办之《宇宙2000实力美少女争霸战》选秀比赛</p></body></html><!--* 项目描述: 学习HTML标签 之 段落标签* 作 者: chain.xx.wdm* 备 注: * <br/>是个单标签* <br/>标签只是简单地开始新的一行.与段落标签<p></p>不一样, 段落标签会插入一些垂起码的间距-->字体标签<font>标签使用color,size属性规定文本中字体的颜色, 大小属性值描述colorrgb(x,x,x) / colorname规定文本的颜色sizenumber规定文本的大小<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Demo04-字体标签</title></head><body> <font color="red">我的字体</font> <hr> <font color="green">Hebe</font>这名字有着“青春女神”的意义，在<font color="red">S.H.E</font>团体里代表着“自信”，代表颜色为绿色<br/> 其后S.H.E成为华人地区具有<font size="5px">代表性、指标性、影响力、知名度、唱片销售量、演唱会票房</font>和销售(量)口碑的女子演唱团体之一。</body></html><!--* 项目描述: 学习HTML标签 之 字体标签* 作 者: chain.xx.wdm* 备 注: -->文本格式化标签为文字设置粗体, 斜体,或下划线等效果, 使文字以特殊的方式显示语义标签加粗<strong></strong>倾斜<em></em>删除线<del></del>下划线<ins></ins>图片标签在HTML标签中, <img src="图片URL路径"/>标签用于定义HTML页面中的图像属性属性值说明srcURL路径(必有属性)指定需要显示图片的URL(路径)alt文本图片无法显示时的替代文本title文本提示文本.鼠标放到图像上时提示的文字width像素设置图像的宽度,单位是像素pxheight像素设置图像的高度,单位是像素pxborder像素设置图像的边框,单位是像素px<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Demo06-图片标签</title></head><body> <img src="img/xix.jpg" width="200px" title="我希宝" border="5px" alt="看不到希宝了"/></body></html><!--* 项目描述: 学习HTML标签 之 图片标签* 作 者: chain.xx.wdm* 备 注: * <img/>是个单标签-->列表标签描述标签属性属性取值有序列表oltype1 / A / a / I / i无序列表ultypecircle空心圆 / square方块 / disc实心圆列表项litype与上面两个一致<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Demo07-列表标签</title></head><body> <ol type="a"> <!-- 有序列表 --> <li>选项一</li> <li>选项二</li> <li>选项三</li> </ol> <hr> <ul type="disc"> <!-- 无序列表 --> <li type="circle">希宝</li> <li>乌冬面</li> <li>毛毛</li> </ul></body></html><!--* 项目描述: 学习HTML标签 之 列表标签* 作 者: chain.xx.wdm* 备 注: * -->超链接标签HTML标签中, <a></a>标签用于定义超链接,作用是从一个页面链接到另一个页面超链接标签语法<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>超链接标签属性属性描述href用于确定需要跳转到的的页面的路径target打开页面的方式target: blank- 在新窗口中打开href确定的页面; self-使用href确定的页面替换当前的页面(默认方式)超链接分类分类举例外部链接百度内部链接网站内部页面之间的相互链接.例如首页空链接如果当时没有确定链接的目标时,首页下载链接如果href里面的地址是一个文件或压缩包,会下载这个文件网页元素链接在网页中的各种网页元素,如文本,图像等都可以添加超链接锚点链接当我们点击链接时,可以快速定位到页面中的某个位置(表格标签HTML表格由<table>标签以及一个或多个<tr>,<th>或<td>标签组成<table> <tr> <td>单元格内数据</td> </tr></table><table></table>: 用于定义表格的标签<tr></tr>: 用于定义表格中的行,必须嵌套在<table></table>标签中<td></td>: 用于定义表格中的单元格,必须嵌套在<tr></tr>标签中td指表格数据(table data),即数据单元格的内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Demo10-表格标签</title></head><body> <table border="2px" width="30%" bgcolor="yellow" cellspacing="2" align="center"> <tr bgcolor="red"> <th>姓名</th> <th>年龄</th> <th>地址</th> </tr> <tr align="center"> <td>4</td> <td>5</td> <td rowspan="2">6</td> </tr> <tr> <td colspan="2" align="center">7</td> </tr> </table> <hr/> <table bgcolor="skyblue" border="2px" cellspacing="0" width="40%" height="200px" algin="center"> <tr bgcolor="orange"> <th>姓名</th> <th>年龄</th> <th>地址</th> </tr> <tr align="center"> <td>乔峰</td> <td>30</td> <td>丐帮</td> </tr> <tr align="center"> <td align="right">段誉</td> <td>25</td> <td>大理</td> </tr> </table></body></html><!--* 项目描述: 学习HTML标签 之 表格标签* 作 者: chain.xx.wdm* 备 注: -->
