html基础知识点
1 Html 超文本标记语言，全称：hypertext markup language，用于创建网页的标准标记语言 2 3 通用： 4 目前不区分大小写，html4建议小写，xhtml强制小写 5 属性值包含在引号内，建议双引号，单引号不限制，如果属性值本身带有双引号则必须用单引号 6 <!--注释的用法--> 7 <!DOCTYPE html> 8 声明为html5文件 9 <!--XHTML与 HTML 相比最重要的区别： 10 文档结构 11 XHTML DOCTYPE 是强制性的 12 <html> 中的 XML namespace 属性是强制性的 13 <html>、<head>、<title> 以及 <body> 也是强制性的 14 元素语法 15 XHTML 元素必须正确嵌套 16 XHTML 元素必须始终关闭 17 XHTML 元素必须小写 18 XHTML 文档必须有一个根元素 19 属性语法 20 XHTML 属性必须使用小写 21 XHTML 属性值必须用引号包围 22 XHTML 属性最小化也是禁止的 --> 23 24 25 <!--元素： 26 大多标签：属性+开放标签+闭合标签 27 空标签：只有属性，无需闭合标签--> 28 29 <!--CSS（cascading style sheets 级联样式表） 30 html4开始引入 31 加入html方式 32 内部样式--元素内style属性 33 内部样式表--head中<style type="text/css">内部样式表</style> 34 外部引入--head中<link rel="stylesheet" type="text/css" href="外部引入地址">--> 35 36 <!--根元素 37 其他所有元素包含在内--> 38 <html> 39 40 <!--头部--> 41 <head> 42 包含所有的头部标签元素 43 可以插入脚本（scripts）样式文件（css）及各种meta信息 44 可以在头部添加的标签元素有meta,title,base,script,noscript,link,style 45 <meta name="author" content="sunyue"> 46 描述一些基本的元数据 47 描述，关键词，作者，最后修改时间，编码类型 48 <meta http-equiv="refresh" content="30"> 49 定义如何显示内容或重新加载页面，每三十秒刷新重新载入页面 50 <meta charset="gbk"> 51 utf-8 52 国际通用编码 53 用以解决国际上多字符的一种编码 54 英文为1字节8位，中文为3字节24位 55 通用性强 56 57 gbk 58 国家编码 59 包含所有中文字符 60 通用性差 61 占用数据库相对utf-8较小 62 360默认gbk 63 <title></title> 64 定义浏览器工具栏标题 65 添加收藏时显示标题 66 显示在搜素引擎结果页面的标题 67 <base href="/Users/icourt/Desktop/工作/测试文件/" target="_blank"> 68 定义页面所有链接的默认链接地址 69 与图片结合 70 <img src="42k.jpg" width="50" height="50"> 71 图片标签 72 stc属性为图片地址+名称 73 width=“” 宽 74 height=“” 高 75 border=“” 边框 76 <a href="https://music.163.com/#"></a> 77 链接标签 78 可嵌套图片 79 href属性为指定链接地址，可以走base，也可以重新定义 80 <a href="https://music.163.com/" target="_blank"></a> 81 target属性,可以走base，也可以重新定义 82 _self 83 _parent 84 _blank 85 _top 86 <link rel="stylesheet" type="text/css" href="mystyle.css"> 87 定义文档与外部资源之间的关系 88 通常用于连接样式表 89 href属性 90 rel属性 91 用于指定当前文件与链接文件之间的关系 92 只有用了href属性才能使用rel属性 93 type属性 94 文件类型 95 默认text 96 <style type="text/css"> 97 body {background-color:yellow} 98 p {color:blue} 99 </style> 100 可以直接添加样式渲染 101 type是必须，唯一值为text/css 102 <script type="text/javascript"></script> 103 定义客户端脚本 104 </head> 105 106 <body> 107 108 <!--链接--> 109 <div> 110 <a href="https://music.163.com/#"></a> 111 链接标签 112 可嵌套图片 113 href属性为指定链接地址 114 <a href="https://music.163.com/" target="_blank"></a> 115 target属性 116 _self 117 _parent 118 _blank 119 _top 120 121 122 <a id="tips001">被链接的位置</a> 123 <a href="#tips001">跳转到本页当前链接位置</a> 124 <a href="https://www.runoob.com/html/html-links.html#footer">跳转非本页的链接位置</a> 125 id属性 126 定义元素的唯一id 127 双引号里面只能填写一个 128 html文档属性标记 129 </div> 130 131 <!--图像--> 132 <div> 133 <img src="图像引用地址" alt="预备文本" height="30px" width="30px" align="bottom" usemap="picturemap"> 134 src属性 135 source源 136 引用地址 137 alt属性 138 预备的可替换的文本 139 当浏览器无法加载出图片时展示 140 height 宽度 141 width 高度 142 默认属性值为像素 px 143 align属性 144 对齐 145 属性值 146 top 147 middle 148 bottom 149 usemap属性 150 定义客户端图片映射 151 通过name和id进行连接 152 <!--每加载一个页面需要加载一个页面加其所包含所有图片的文件数 153 注意插入图片的路径--> 154 <map name="picturemap" id="picturemap"> 155 <area shape="rect" coords="" href=""> 156 </map> 157 定义图像地图 158 通过name和id进行连接映射图片 159 160 area必须在map内 161 shape属性，coords属性 162 circ 圆形--x,y,r,圆心坐标，半径 163 rect 矩形--x1,y1,x2,y2,对点坐标 164 poly 多边形--x1,y1,x2,y2,x3,y3....每一点坐标 165 属性值会对coords产生影响，如无默认矩形 166 </div> 167 168 <!--文本--> 169 <div> 170 <!--<p></p> 171 段落 172 块级元素 173 浏览器自动在段前短后自动插入空行--> 174 <br/> 175 换行 176 没有关闭标签的空元素 177 加/保险 178 所有非标签连续的换行空格都会被浏览器过滤成一个空格 179 180 <hr/> 181 创建水平线 182 没有关闭标签的空元素 183 加/保险 184 <h1>最大</h1> 185 <h2></h2> 186 <h3></h3> 187 <h4></h4> 188 <h5></h5> 189 <h6>最小</h6> 190 标题 191 浏览器自动在段前短后插入空行 192 不要为了加粗增大字体设置标题，浏览器会根据标题进行网页的结构和内容索引 193 194 <b></b> 195 定义粗体文本 196 加粗标签 197 bold 198 <strong></strong> 199 定义加重语气 200 效果同b标签 201 202 <i></i> 203 定义斜体文本 204 斜体标签 205 italic 206 <em></em> 207 定义着重语气 208 效果同i标签 209 210 <big></big> 211 定义大号字 212 <small></small> 213 定义小号字 214 215 <sub></sub> 216 定义下标 217 <sup></sup> 218 定义上标 219 <!--字符实体 220 显示结果 描述 实体名称 实体编号 221 空格   222 < 小于号 < < 223 > 大于号 > > 224 & 和号 & & 225 " 引号 " " 226 ' 撇号 ' (IE不支持) ' 227 ￠ 分 ¢ ¢ 228 £ 镑 £ £ 229 ¥ 人民币/日元 ¥ ¥ 230 € 欧元 € € 231 § 小节 § § 232 © 版权 © © 233 ® 注册商标 ® ® 234 ™ 商标 ™ ™ 235 × 乘号 × × 236 ÷ 除号 ÷ ÷ 237 --> 238 </div> 239 240 <!--表格--> 241 <div> 242 <table border="1px" cellpadding="10px"> 243 <!--表格标签 244 默认无边框 245 border属性 246 定义边框宽度 247 默认像素px 248 cellpadding属性 249 定义单元格内边距 250 默认像素px 251 cellspacing属性 252 定义单元格间边距 253 默认像素px--> 254 <caption>表格的标题</caption> 255 <!--必须直接放到table之后 256 每个表格只支持一个--> 257 <colgroup> 258 <col span="1" style="background-color: red"> 259 </colgroup> 260 <!--对列进行分组，便于应用样式 261 位置在caption之后，其余标签之前 262 进行多个分组应用col标签--> 263 264 <!--定义表格的各个部分--> 265 <p> 266 <thead> 267 <!--位置在colgroup之后，tfoot之前 268 至少包含一个tr标签 269 当多页面表格被打印时，打印在每一页的页眉页脚 270 thead,tbody,tfoot三者可结合使用--> 271 <tr>页眉</tr> 272 </thead> 273 <tfoot> 274 <!--位置在thead之后,tr和tbody之前 275 至少包含一个tr标签 276 当多页面表格被打印时，打印在每一页的页眉页脚 277 thead,tbody,tfoot三者可结合使用--> 278 <tr>页脚</tr> 279 </tfoot> 280 <tbody> 281 <!--位置在tfoot之后,tr之前 282 至少包含一个tr标签 283 当多页面表格被打印时，打印在每一页的页眉页脚 284 thead,tbody,tfoot三者可结合使用--> 285 <tr>主体</tr> 286 </tbody> 287 </p> 288 289 <th rowspan="3">表头,默认加粗居中</th> 290 <!--表头单元格标签 291 rowspan属性/colspan属性 292 合并几行/列单元格 293 属性值合并单元格数目--> 294 <tr align="right" height="30"> 295 <!--行标签，除标题行外第一行--> 296 <td width="10">该行第一个单元格的数据</td> 297 <td>该行第二个单元格的数据</td> 298 <td>可以包含文本，图片，列表，段落，表单，水平线，表格</td> 299 </tr> 300 <tr> 301 <!--行标签，除标题行外第二行--> 302 <td>该行第一个单元格的数据</td> 303 <td>该行第二个单元格的数据</td> 304 <td>表格足够强大</td> 305 </tr> 306 <tfoot> 307 <tr>页脚</tr> 308 </tfoot> 309 </table> 310 </div> 311 312 <!--列表--> 313 <div> 314 <ul style="list-style-type: square;"> 315 <li>无序列表第一个选项 316 <ul> 317 <li>嵌套列表第一项</li> 318 <li>嵌套列表第二项</li> 319 </ul></li> 320 <li>无序列表第二个选项</li> 321 </ul> 322 <ol> 323 <li>有序列表第一个选项</li> 324 <li>有序列表第二个选项</li> 325 </ol> 326 <ol start="50" type="a/A/i/I"> 327 <li>有序列表第50个选项</li> 328 <li>有序列表第51个选项</li> 329 </ol> 330 </div> 331 332 <!--区块布局--> 333 <div> 334 <!--块级元素 335 以新行开始或结束 336 div，p，h1，ul，table--> 337 <div> 338 块级元素 339 组合其他标签的容器 340 可与css组合，用于大批量内容格式化 341 可用于文档布局，属性margin 342 可用table，div布局 343 <!--table和div布局的优缺点 344 table: 345 内容自适应，开发时间相对较短 346 布局变更需要重写，不便于维护 347 数据嵌套，网页浏览速度相应较慢 348 div： 349 内容非自适应，需要考虑兼容，每个容器都需要定义样式，开发时间相对较长 350 布局变更方便，便于维护扩展 351 网页浏览速度快--> 352 </div> 353 <!--内联元素 354 span,a,img不以新行开始或结束--> 355 <span> 356 内联元素 357 文本的容器 358 可与css组合，为部分文本设置格式 359 </span> 360 <iframe src="https://www.runoob.com/html/html-iframes.html" width="" height="" frameborder="0">定义一个内联框架</iframe> 361 </div> 362 363 <!--表单--> 364 <div> 365 <form action="url" method="get/post" enctype="text/plain"> 366 <!-- 367 accept HTML5 不支持。规定服务器接收到的文件的类型。（文件是通过文件上传提交的） 368 MIME_type 369 accept-charset 规定服务器可处理的表单数据字符集。 370 character_set 371 action 规定当提交表单时向何处发送表单数据。 372 URL 373 autocompleteNew 规定是否启用表单的自动完成功能。 374 on 375 off 376 enctype 规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method="post" 的情况） 377 application/x-www-form-urlencoded 378 multipart/form-data 379 text/plain 380 method 规定用于发送表单数据的 HTTP 方法。 381 get 382 post 383 name 规定表单的名称。 384 text 385 novalidateNew 如果使用该属性，则提交表单时不进行验证。 386 novalidate 387 target 规定在何处打开 388 _blank 389 _self 390 _parent 391 _top 392 --> 393 姓名：<input type="text" name="name"><br> 394 <!-- 395 accept 规定通过文件上传来提交的文件的类型。 (只针对type="file") 396 audio/* video/* image/* MIME_type 397 align HTML5已废弃，不赞成使用。规定图像输入的对齐方式。 (只针对type="image") 398 left 399 right 400 top 401 middle 402 bottom 403 alt 定义图像输入的替代文本。 (只针对type="image") 404 text 405 checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio") 406 checked 407 disabled disabled 属性规定应该禁用的 <input> 元素。 408 disabled 409 form 属性规定 <input> 元素所属的一个或多个表单 410 form_id form 411 formaction 属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image") 412 URL 413 formenctype 属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。 414 application/x-www-form-urlencoded 415 multipart/form-data text/plain 416 formmethodNew 定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image") 417 get 418 post 419 formnovalidate formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。 420 formnovalidate 421 formtarget framename 规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image") 422 _blank 423 _self 424 _parent 425 _top 426 heightNew 规定 <input>元素的高度。(只针对type="image") 427 pixels 428 listNew 429 datalist_id 430 属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。 431 max 432 number 433 date 434 属性规定 <input> 元素的最大值。 435 maxlength 436 number 437 属性规定 <input> 元素中允许的最大字符数。 438 min 439 number 440 date 441 属性规定 <input>元素的最小值。 442 multiple 443 multiple 444 属性规定允许用户输入到 <input> 元素的多个值。 445 name 446 text 447 name 属性规定 <input> 元素的名称。 448 pattern 449 regexp 450 pattern 451 属性规定用于验证 <input> 元素的值的正则表达式。 452 placeholder 453 text 454 placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息 。 455 readonly 456 readonly 457 readonly 属性规定输入字段是只读的。 458 required 459 required 460 属性规定必需在提交表单之前填写输入字段。 461 size 462 number 463 size 属性规定以字符数计的 <input> 元素的可见宽度。 464 src 465 URL 466 src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image") 467 stepNew 468 number 469 step 属性规定 <input> 元素的合法数字间隔。 470 type type 属性规定要显示的 <input> 元素的类型。 471 button 472 checkbox 473 color 474 date 475 datetime 476 datetime-local 477 email 478 file 479 hidden 480 image 481 month 482 number 483 password 484 radio 485 range 486 reset 487 search 488 submit 489 tel 490 text 491 time 492 url 493 week 494 value 指定 <input> 元素 value 的值。 495 text 496 widthNew 497 pixels 498 width 属性规定 <input> 元素的宽度。 (只针对type="image") 499 --> 500 密码：<input type="password" name="password"> 501 单选选项：<input type="radio" name="tip001">单选选项001 502 <input type="radio" name="tip002">单选选项002 503 点击选项也可以选中：<input id="001" type="radio" name="tip001"><label for="001">单选选项001</label> 504 <input id="002" type="radio" name="tip002"><label for="002">单选选项002</label> 505 多选选项：<input type="checkbox" name="tips001">多选选项001<input type="checkbox" name="tips001">多选选选项002 506 <select name="下拉选项"> 507 <option value="下拉选项001">下拉选项001</option> 508 <option value="下拉选项002">下拉选项002</option> 509 </select> 510 <input type="reset" value="重置表单"> 511 <input type="submit" value="提交表单"> 512 <input type="button" value="新创建的按钮"> 513 <button type="button" onclick="">按钮</button> 514 515 516 </form> 517 </div> 518 519 <!--颜色--> 520 <div> 521 <p style="background-color:#FFFF00">通过十六进制设置背景颜色</p> 522 <p style="background-color:rgb(255,255,0)">通过 rbg 值设置背景颜色</p> 523 <p style="background-color:rgb(0,0,0,0)">通过 rbg 值设置背景颜色，最后一位设置透明度</p> 524 <p style="background-color:yellow">通过颜色名设置背景颜色</p> 525 <!-- 526 颜色值由十六进制来表示红、绿、蓝（RGB）。 527 每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)。 528 十六进制值的写法为 # 号后跟三个或六个十六进制字符。 529 三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。 530 531 141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，再加124）。 532 提示: 17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。--> 533 </div> 534 </body> 535 </html>
