码迷,mamicode.com
首页 > Web开发 > 详细

html基础知识点

时间:2019-10-25 13:31:01      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:自动完成   ide   fresh   缺点   区分大小写   middle   ber   rip   高度   

  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                      空格    &nbsp;    &#160;
222                 <    小于号    &lt;    &#60;
223                 >    大于号    &gt;    &#62;
224                 &    和号    &amp;    &#38;
225                 "    引号    &quot;    &#34;
226                 ‘    撇号     &apos; (IE不支持)    &#39;
227                 ¢    分    &cent;    &#162;
228                 £    镑    &pound;    &#163;
229                 ¥    人民币/日元    &yen;    &#165;
230                 €    欧元    &euro;    &#8364;
231                 §    小节    &sect;    &#167;
232                 ©    版权    &copy;    &#169;
233                 ®    注册商标    &reg;    &#174;
234                 ™    商标    &trade;    &#8482;
235                 ×    乘号    &times;    &#215;
236                 ÷    除号    &divide;    &#247;
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>

 

 

html基础知识点

标签:自动完成   ide   fresh   缺点   区分大小写   middle   ber   rip   高度   

原文地址:https://www.cnblogs.com/feizisy/p/11737385.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!