HTML的主体内标签
1 <!DOCTYPE html> 2 <html lang="ch-zn"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="keyword" content="HTML"> 6 <meta name="description" content="学习HTML的各种标签"> 7 <title>学习HTML标签</title> 8 <style></style> 9 <link rel="stylesheet" href=""> 10 <script></script> 11 </head> 12 <body> 13 14 <!--输入h1*4 用TAB键可自动补全 且乘以4的效果为4个<h1></h1>--> 15 <h1>我是最大标题 属于块级标签 </h1> 16 <h2>我是二级大标题 宽度为浏览器宽度 所以我独占一行</h2> 17 <h3>我是三级标题 我和二级标题比较常见 </h3> 18 <h4>我是四级标题 我有1~6六个兄弟</h4> 19 <h5>我是五级标题 你知道吗 所有的HTML标签都默认自带三个固有属性 id class style </h5> 20 <h6>我是六级标题 我告诉你 用hr标签可以画出水平分割线</h6> 21 <hr> 22 <!--块级标签可以嵌套行内标签(内联标签) 行内标签之间可灵活嵌套--> 23 <div> 24 <b>原价<s>999</s>元 现价只要<u>99</u>元</b> 25 <p>请先用换行标签br换行</p> 26 <br> 27 <i>上面是 u下划线文本标签 s删除线文本标签 的常见应用 并且用b文本标签对文本进行了加粗<br>我就没加粗 我自己是i斜体文本标签 </i> 28 </div> 29 <hr> 30 <p>我想告诉你 div标签是块级标签 span标签是行内标签 他们都如同白纸一张 自身没有任何样式</p> 31 <hr> 32 <a id="label1">标签一 我不跳转</a> 33 <!--段落p标签 属于块级标签 和标题标签 两者并列 不能互相嵌套--> 34 <p>介绍说明img标签的两个属性:alt属性和title属性的区别是前者是在图片无法加载的时候才会显示的其值,而title是在图片正常加载鼠标划上去显示的值,虽然alt也有后者的功能,但是只是在低版本的ie浏览器才支持,高版本及标准浏览器不支持这个功能了</p> 35 <p>下面用img标签引入一张本地图片</p> 36 <!--图片img标签的 三个特有属性 src alt title--> 37 <img src="timg.jpg" alt="这是一个图标" title="点我"> 38 <p>下面用a标签做文本跳转 通过其特有的target属性 可以实现当前网页内不同位置的跳转 也可以实现从当前网页跳转到新开网页</p> 39 <!--文本a标签的两个特有属性 href target--> 40 <a href="https://wwww.baidu.com" target="_blank">跳转到百度</a> 41 <p>再 来 一 个 文 本 标 签</p> 42 <!--特殊字符   解决了html的对文本的空格问题--> 43 <p>下 面 标 签 可以 跳转到当前网页上部的标签一 借助了target的_self属性</p> 44 <a id="label2" href="#label1" target="_self">标签二 可以跳转到标签一</a> 45 <hr> 46 <p>下面我们来使用列表标签</p> 47 <p>一、带序号的列表标签 ol     orderlist 的缩写</p> 48 <p>列表的特殊属性有type :1阿拉伯数字 A大写字母 a小写字母 I大写罗马数字 i小写罗马数字</p> 49 <p>列表的特殊属性有start 序号从几开始 </p> 50 <ol type="I" start="3"> 51 <li>列表1行</li> 52 <li>列表2行</li> 53 <li>列表3行</li> 54 </ol> 55 <hr> 56 <p>二、无序号的列表标签 ul</p> 57 <p>列表的特殊属性有type : circle空心圆 square实心方块 disc实心圆点-默认值 none无样式</p> 58 <!--emmt 插件 li{无序号列表¥}*4 +TAB键--> 59 <ul> 60 <li>无序号列表1</li> 61 <li>无序号列表2</li> 62 <li>无序号列表3</li> 63 <li>无序号列表4</li> 64 </ul> 65 <hr> 66 <p>三、标题列表标签 dl</p> 67 <dl> 68 <dt>标题1</dt> 69 <dd>内容1</dd> 70 <dt>标题2</dt> 71 <dd>内容2</dd> 72 <dt>标题3</dt> 73 <dd>内容3</dd> 74 <dt>标题4</dt> 75 <dd>内容4</dd> 76 </dl> 77 <hr> 78 <p>表格标签table 表格有头部标签thead 表格有身体标签tbody</p> 79 <p>表格标签table的属性 border边框 cellpadding内边距 cellspacing </p> 80 <br> 81 <p>表格二维 tr元素定义表格行,th元素定义表头,td元素定义表格单元</p> 82 <p>列标签td 属性: rowspan将行合并 colspan将列合并</p> 83 84 <hr> 85 <p>下面,用表格展示的形式,介绍HTML中的常用特殊符号</p> 86 <table border="1"> 87 <theand> 88 <tr> 89 <th>序号</th> 90 <th>特殊字符</th> 91 <th>含义</th> 92 </tr> 93 </theand> 94 <tbody> 95 <tr> 96 <td>1</td> 97 <td>& nbsp;</td> 98 <td>空 格</td> 99 </tr> 100 <tr> 101 <td>2</td> 102 <td>& copy;</td> 103 <td>版权©</td> 104 </tr> 105 <tr> 106 <td>3</td> 107 <td>& reg;</td> 108 <td>注册®</td> 109 </tr> 110 <tr> 111 <td>4</td> 112 <td>& lt;</td> 113 <td>小于号<</td> 114 </tr> 115 <tr> 116 <td>5</td> 117 <td>& gt;</td> 118 <td>大于号></td> 119 </tr> 120 </tbody> 121 </table> 122 <hr> 123 <p>下面展示表格中单元格的合并</p> 124 <table border="1"> 125 <thead> 126 <tr> 127 <td>星期一</td> 128 <td>星期二</td> 129 <td>星期三</td> 130 <td>星期四</td> 131 <td>星期五</td> 132 <td>星期六</td> 133 <td>星期七</td> 134 </tr> 135 </thead> 136 <tbody> 137 <tr> 138 <td>学习课程1</td> 139 <td colspan="2">学习课程2</td> 140 <!--<td>学习课程3</td>--> 141 <td>学习课程4</td> 142 <td>学习课程5</td> 143 <td>学习课程6</td> 144 <td rowspan="2">学习课程7</td> 145 </tr> 146 <tr> 147 <td>写作业1</td> 148 <td>写作业2</td> 149 <td>写作业3</td> 150 <td>写作业4</td> 151 <td>写作业5</td> 152 <td>写作业6</td> 153 <!--<td>写作业7</td>--> 154 </tr> 155 </tbody> 156 </table> 157 158 </body> 159 </html>