-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
2437 lines (1175 loc) · 121 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html class="theme-next pisces use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.8.0">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">
<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
<link href="/Blog/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">
<link href="/Blog/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">
<link href="/Blog/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">
<link rel="apple-touch-icon" sizes="180x180" href="/Blog/images/apple-touch-icon-next.png?v=5.1.4">
<link rel="icon" type="image/png" sizes="32x32" href="/Blog/images/favicon-32x32-next.png?v=5.1.4">
<link rel="icon" type="image/png" sizes="16x16" href="/Blog/images/favicon-16x16-next.png?v=5.1.4">
<link rel="mask-icon" href="/Blog/images/logo.svg?v=5.1.4" color="#222">
<meta name="keywords" content="Hexo, NexT">
<meta name="description" content="锐情书卷，烹煮江山">
<meta property="og:type" content="website">
<meta property="og:title" content="二两五花肉">
<meta property="og:url" content="https://kaelinvoker.github.io/Blog/index.html">
<meta property="og:site_name" content="二两五花肉">
<meta property="og:description" content="锐情书卷，烹煮江山">
<meta property="og:locale" content="zh-Hans">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="二两五花肉">
<meta name="twitter:description" content="锐情书卷，烹煮江山">
<script type="text/javascript" id="hexo.configurations">
var NexT = window.NexT || {};
var CONFIG = {
root: '/Blog/',
scheme: 'Pisces',
version: '5.1.4',
sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
fancybox: true,
tabs: true,
motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
duoshuo: {
userId: '0',
author: '博主'
},
algolia: {
applicationID: '',
apiKey: '',
indexName: '',
hits: {"per_page":10},
labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
}
};
</script>
<link rel="canonical" href="https://kaelinvoker.github.io/Blog/">
<title>二两五花肉</title>
</head>
<body itemscope="" itemtype="http://schema.org/WebPage" lang="zh-Hans">
<div class="container sidebar-position-left
page-home">
<div class="headband"></div>
<header id="header" class="header" itemscope="" itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-brand-wrapper">
<div class="site-meta ">
<div class="custom-logo-site-title">
<a href="/Blog/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title">二两五花肉</span>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<p class="site-subtitle"></p>
</div>
<div class="site-nav-toggle">
<button>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
</button>
</div>
</div>
<nav class="site-nav">
<ul id="menu" class="menu">
<li class="menu-item menu-item-home">
<a href="/Blog/" rel="section">
<i class="menu-item-icon fa fa-fw fa-home"></i> <br>
首页
</a>
</li>
<li class="menu-item menu-item-tags">
<a href="/Blog/tags/" rel="section">
<i class="menu-item-icon fa fa-fw fa-tags"></i> <br>
标签
</a>
</li>
<li class="menu-item menu-item-categories">
<a href="/Blog/categories/" rel="section">
<i class="menu-item-icon fa fa-fw fa-th"></i> <br>
分类
</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/Blog/archives/" rel="section">
<i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
归档
</a>
</li>
</ul>
</nav>
</div>
</header>
<main id="main" class="main">
<div class="main-inner">
<div class="content-wrap">
<div id="content" class="content">
<section id="posts" class="posts-expand">
<article class="post post-type-normal" itemscope="" itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="https://kaelinvoker.github.io/Blog/Blog/2019/04/26/Html5学习/">
<span hidden itemprop="author" itemscope="" itemtype="http://schema.org/Person">
<meta itemprop="name" content="kaer">
<meta itemprop="description" content="">
<meta itemprop="image" content="/Blog/images/avatar.jpg">
</span>
<span hidden itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization">
<meta itemprop="name" content="二两五花肉">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/Blog/2019/04/26/Html5学习/" itemprop="url">Html5学习</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2019-04-26T15:59:24+08:00">
2019-04-26
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h3 id="Html5语法"><a href="#Html5语法" class="headerlink" title="Html5语法"></a>Html5语法</h3><p>沿用了Html的语法，但更为简洁，更人性化了。</p>
<p>看下面一个案例就知道了</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Html5版本声明 DOCTYPE --></span></span><br><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="comment"><!-- Html5指明语言 --></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"zh-CN"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="comment"><!-- 指明文档字符集--></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Html5语法<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">form</span> ></span></span><br><span class="line"> <span class="comment"><!-- html5增加了布尔值属性，当这个属性这样写时表示为true,删除表示为false</span></span><br><span class="line"><span class="comment"> 像以前这里就必须写上checked="checked" --></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">checked</span>></span></span><br><span class="line"> <span class="comment"><!-- html5中属性值可以是单引号页也可以是双引号 设置可以省略不写 --></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">'text'</span>></span></span><br><span class="line"> <span class="comment"><!-- 可以看到这里大小写都可以，在xthml里是不允许的 这也就是为了兼容更多的文档--></span></span><br><span class="line"> <span class="tag"><<span class="name">Ipunt</span> <span class="attr">Type</span>=<span class="string">Radio/</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span>></span><span class="tag"></<span class="name">input</span>></span></span><br><span class="line"> <span class="comment"><!-- 这个p标签的闭合标签可以省略不写，浏览器照样能解析出来 --></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>haha<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">form</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<p><strong>总结：</strong>虽然Html5允许可以省略一些闭合标签，但是为了规范我们还是要补上。</p>
<h3 id="HTML5新增及删除标签"><a href="#HTML5新增及删除标签" class="headerlink" title="HTML5新增及删除标签"></a>HTML5新增及删除标签</h3><p>新增的标签主要分为四类：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">1.结构标签</span><br><span class="line"></span><br><span class="line">2.表单标签</span><br><span class="line"></span><br><span class="line">3媒体标签</span><br><span class="line"></span><br><span class="line">4其它功能标签</span><br></pre></td></tr></table></figure>
<p>同时也废除了一些标签</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">1可以用CSS替代的标签</span><br><span class="line"></span><br><span class="line">2不在使用frame</span><br><span class="line"></span><br><span class="line">3只有个别浏览器支持的标签</span><br><span class="line"></span><br><span class="line">4其它不常用的标签</span><br></pre></td></tr></table></figure>
<h4 id="结构标签"><a href="#结构标签" class="headerlink" title="结构标签"></a>结构标签</h4><p>这些结构标签过去都是由div实现的，为了给它进行语义化的划分，HTML5中把div划分成以下的标签：</p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope="" itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="https://kaelinvoker.github.io/Blog/Blog/2019/04/19/初识CSS-二/">
<span hidden itemprop="author" itemscope="" itemtype="http://schema.org/Person">
<meta itemprop="name" content="kaer">
<meta itemprop="description" content="">
<meta itemprop="image" content="/Blog/images/avatar.jpg">
</span>
<span hidden itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization">
<meta itemprop="name" content="二两五花肉">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/Blog/2019/04/19/初识CSS-二/" itemprop="url">初识CSS(二)</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2019-04-19T11:02:34+08:00">
2019-04-19
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h3 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h3><p>本篇文章继续学习<code>CSS</code>，主要学习<code>CSS</code>的三大模块：盒子模型、浮动、定位。</p>
<h3 id="盒子模型"><a href="#盒子模型" class="headerlink" title="盒子模型"></a>盒子模型</h3><p>所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。</p>
<h4 id="看透网页布局的本质"><a href="#看透网页布局的本质" class="headerlink" title="看透网页布局的本质"></a>看透网页布局的本质</h4><p>本质就是把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。</p>
<p><code>CSS</code> 其实没有太多逻辑可言 ， 类似我们小时候玩的积木,我们可以自由的，随意的摆放出我们想要的效果。</p>
<h4 id="盒子模型-Box-Model"><a href="#盒子模型-Box-Model" class="headerlink" title="盒子模型(Box Model)"></a>盒子模型(Box Model)</h4><p>这里略过 老旧的ie盒子模型（IE6以下），对不起，我都没见过IE5的浏览器。 </p>
<p>首先，我们来看一张图，来体会下什么是盒子模型。</p>
<p><img src="box.png" alt=""></p>
<p>所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素在网页布局汇总所占的位置大小。因此，<strong style="color: #f00;">每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。</strong></p>
<p><img src="boxs.png" alt=""></p>
<h4 id="盒子边框"><a href="#盒子边框" class="headerlink" title="盒子边框"></a>盒子边框</h4><p>语法： </p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">border : border-width || border-style || border-color</span><br></pre></td></tr></table></figure>
<p>边框属性—设置边框样式（border-style）</p>
<p>边框样式用于定义页面中边框的风格，常用属性值如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">none：没有边框即忽略所有边框的宽度（默认值）</span><br><span class="line"></span><br><span class="line">solid：边框为单实线(最为常用的)</span><br><span class="line"></span><br><span class="line">dashed：边框为虚线 </span><br><span class="line"></span><br><span class="line">dotted：边框为点线</span><br><span class="line"></span><br><span class="line">double：边框为双实线</span><br></pre></td></tr></table></figure>
<h5 id="盒子边框写法总结"><a href="#盒子边框写法总结" class="headerlink" title="盒子边框写法总结"></a>盒子边框写法总结</h5><table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>设置内容</td>
<td>样式属性</td>
<td>常用属性值</td>
</tr>
<tr>
<td>上边框</td>
<td>border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色;</td>
<td></td>
</tr>
<tr>
<td>下边框</td>
<td>border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度 样式 颜色;</td>
<td></td>
</tr>
<tr>
<td>左边框</td>
<td>border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度 样式 颜色;</td>
<td></td>
</tr>
<tr>
<td>右边框</td>
<td>border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度 样式 颜色;</td>
<td></td>
</tr>
<tr>
<td>样式综合设置</td>
<td>border-style:上边 [右边 下边 左边];</td>
<td>none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线</td>
</tr>
<tr>
<td>宽度综合设置</td>
<td>border-width:上边 [右边 下边 左边];</td>
<td>像素值</td>
</tr>
<tr>
<td>颜色综合设置</td>
<td>border-color:上边 [右边 下边 左边];</td>
<td>颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)</td>
</tr>
<tr>
<td>边框综合设置</td>
<td>border:四边宽度 四边样式 四边颜色;</td>
</tr>
</tbody>
</table>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">border-top: 1px solid red; /*上边框*/</span><br><span class="line">border-bottom: 2px solid green; /*下边框*/</span><br><span class="line">border-left: 1px solid blue;</span><br><span class="line">border-right: 5px solid pink;</span><br><span class="line">border: 1px solid red;</span><br></pre></td></tr></table></figure>
<h5 id="表格的细线边框"><a href="#表格的细线边框" class="headerlink" title="表格的细线边框"></a>表格的细线边框</h5><p>以前学过的html表格边框很粗，这里只需要CSS一句话就可以美观起来。 让我们真的相信，CSS就是我们的白马王子（白雪公主）。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">table{ border-collapse:collapse; } collapse 单词是合并的意思</span><br><span class="line"></span><br><span class="line">border-collapse:collapse; 表示相邻边框合并在一起。</span><br></pre></td></tr></table></figure>
<h5 id="圆角边框-CSS3"><a href="#圆角边框-CSS3" class="headerlink" title="圆角边框(CSS3)"></a>圆角边框(CSS3)</h5><p>从此以后，我们的世界不只有矩形。radius 半径（距离）</p>
<p>语法格式：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">border-radius: 50%;</span><br></pre></td></tr></table></figure>
<h4 id="内边距（padding）"><a href="#内边距（padding）" class="headerlink" title="内边距（padding）"></a>内边距（padding）</h4><p>padding属性用于设置内边距。 是指 边框与内容之间的距离。</p>
<p>padding-top:上内边距</p>
<p>padding-right:右内边距</p>
<p>padding-bottom:下内边距</p>
<p>padding-left:左内边距</p>
<p><strong>注意</strong>：后面跟几个数值表示的意思是不一样的</p>
<table>
<thead>
<tr>
<th>值的个数</th>
<th>表达意思</th>
</tr>
</thead>
<tbody>
<tr>
<td>1个值</td>
<td>padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素</td>
</tr>
<tr>
<td>2个值</td>
<td>padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素</td>
</tr>
<tr>
<td>3个值</td>
<td>padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素</td>
</tr>
<tr>
<td>4个值</td>
<td>padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针</td>
</tr>
</tbody>
</table>
<h5 id="内边距的问题"><a href="#内边距的问题" class="headerlink" title="内边距的问题"></a>内边距的问题</h5><p>内边距会使得有宽高的盒子变大。但我们经常有需求要求盒子宽高固定，padding固定。怎么做呢？</p>
<h4 id="外边距（margin）"><a href="#外边距（margin）" class="headerlink" title="外边距（margin）"></a>外边距（margin）</h4><p>margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。</p>
<p>margin-top:上外边距</p>
<p>margin-right:右外边距</p>
<p>margin-bottom:下外边距</p>
<p>margin-left:上外边距</p>
<p>margin:上外边距 右外边距 下外边距 左外边</p>
<p>取值顺序跟内边距相同。</p>
<h5 id="外边距实现盒子居中"><a href="#外边距实现盒子居中" class="headerlink" title="外边距实现盒子居中"></a>外边距实现盒子居中</h5><p>可以让一个盒子实现水平居中，需要满足一下两个条件：</p>
<ol>
<li>必须是块级元素。 </li>
<li>盒子必须指定了宽度（width）</li>
</ol>
<p>然后就给<strong>左右的外边距都设置为auto</strong>，就可使块级元素水平居中。</p>
<p>实际工作中常用这种方式进行网页布局，示例代码如下：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.header</span>{ <span class="attribute">width</span>:<span class="number">960px</span>; <span class="attribute">margin</span>:<span class="number">0</span> auto;}</span><br></pre></td></tr></table></figure>
<h5 id="文字盒子居中图片和背景区别"><a href="#文字盒子居中图片和背景区别" class="headerlink" title="文字盒子居中图片和背景区别"></a>文字盒子居中图片和背景区别</h5><ol>
<li>文字水平居中是 text-align: center</li>
<li>盒子水平居中 左右margin 改为 auto </li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">text-align: center; /* 文字居中水平 */</span><br><span class="line">margin: 10px auto; /* 盒子水平居中 左右margin 改为 auto 就阔以了 */</span><br></pre></td></tr></table></figure>
<ol start="3">
<li>插入图片 我们用的最多 比如产品展示类</li>
<li>背景图片我们一般用于小图标背景 或者 超大背景图片</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">section</span> <span class="selector-tag">img</span> { </span><br><span class="line"> <span class="attribute">width</span>: <span class="number">200px</span>;<span class="comment">/* 插入图片更改大小 width 和 height */</span></span><br><span class="line"> <span class="attribute">height</span>: <span class="number">210px</span>;</span><br><span class="line"> <span class="attribute">margin-top</span>: <span class="number">30px</span>; <span class="comment">/* 插入图片更改位置 可以用margin 或padding 盒模型 */</span></span><br><span class="line"> <span class="attribute">margin-left</span>: <span class="number">50px</span>; <span class="comment">/* 插入当图片也是一个盒子 */</span></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">aside</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">400px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">400px</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid purple;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#fff</span> <span class="built_in">url</span>(images/sun.jpg) no-repeat;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">background-size</span>: <span class="number">200px</span> <span class="number">210px</span>; <span class="comment">/* 背景图片更改大小只能用 background-size */</span></span><br><span class="line"> <span class="attribute">background-position</span>: <span class="number">30px</span> <span class="number">50px</span>; <span class="comment">/* 背景图片更该位置 我用 background-position */</span></span><br><span class="line"> }</span><br></pre></td></tr></table></figure>
<h5 id="清除元素的默认内外边距"><a href="#清除元素的默认内外边距" class="headerlink" title="清除元素的默认内外边距"></a>清除元素的默认内外边距</h5><p>为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距： </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">* {</span><br><span class="line"> <span class="attribute">padding</span>:<span class="number">0</span>; <span class="comment">/* 清除内边距 */</span></span><br><span class="line"> <span class="attribute">margin</span>:<span class="number">0</span>; <span class="comment">/* 清除外边距 */</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><strong>注意：</strong> 行内元素是只有左右外边距的，是没有上下外边距的。 内边距，在ie6等低版本浏览器也会有问题。</p>
<p>我们尽量不要给行内元素指定上下的内外边距就好了。</p>
<h4 id="外边距合并"><a href="#外边距合并" class="headerlink" title="外边距合并"></a>外边距合并</h4><p>使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。</p>
<h5 id="相邻块元素垂直外边距的合并"><a href="#相邻块元素垂直外边距的合并" class="headerlink" title="相邻块元素垂直外边距的合并"></a>相邻块元素垂直外边距的合并</h5><p>当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。</p>
<p><img src="www.png" alt=""></p>
<p>解决方案： 避免就好了。</p>
<h5 id="嵌套块元素垂直外边距的合并"><a href="#嵌套块元素垂直外边距的合并" class="headerlink" title="嵌套块元素垂直外边距的合并"></a>嵌套块元素垂直外边距的合并</h5><p>对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。</p>
<p><img src="n.png" alt=""></p>
<p>解决方案：</p>
<ol>
<li>可以为父元素定义1像素的上边框或上内边距。</li>
<li>可以为父元素添加overflow:hidden。</li>
</ol>
<p>待续。。。。</p>
<h4 id="content宽度和高度"><a href="#content宽度和高度" class="headerlink" title="content宽度和高度"></a>content宽度和高度</h4><p>使用宽度属性width和高度属性height可以对盒子的大小进行控制。</p>
<p>width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。</p>
<p>大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">/*外盒尺寸计算（元素空间尺寸）*/</span><br><span class="line">Element空间高度 = content height + padding + border + margin</span><br><span class="line">Element 空间宽度 = content width + padding + border + margin</span><br><span class="line">/*内盒尺寸计算（元素实际大小）*/</span><br><span class="line">Element Height = content height + padding + border （Height为内容高度）</span><br><span class="line">Element Width = content width + padding + border （Width为内容宽度）</span><br></pre></td></tr></table></figure>
<p>注意：</p>
<p>1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。</p>
<p>2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。</p>
<p>3、<strong>如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding 不会影响本盒子大小</strong>。</p>
<h4 id="盒子模型布局稳定性"><a href="#盒子模型布局稳定性" class="headerlink" title="盒子模型布局稳定性"></a>盒子模型布局稳定性</h4><p>开始学习盒子模型，最大的困惑就是， 分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？</p>
<p>答案是： 其实他们大部分情况下是可以混用的。 就是说，你用内边距也可以，用外边距也可以。 你觉得哪个方便，就用哪个。</p>
<p>但是，总有一个最好用的吧，我们根据稳定性来分，建议如下：</p>
<p>按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。 </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">width > padding > margin</span><br></pre></td></tr></table></figure>
<p>原因：</p>
<ol>
<li>margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。</li>
<li>padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。</li>
<li>width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。</li>
</ol>
<h4 id="盒子阴影"><a href="#盒子阴影" class="headerlink" title="盒子阴影"></a>盒子阴影</h4><p>语法格式：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；</span><br></pre></td></tr></table></figure>
<p><img src="1498467567011.png" alt=""></p>
<ol>
<li>前两个属性是必须写的。其余的可以省略。</li>
<li>外阴影 (outset) 但是不能写 默认 想要内阴影 inset </li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">div {</span><br><span class="line"> width: 200px;</span><br><span class="line"> height: 200px;</span><br><span class="line"> border: 10px solid red;</span><br><span class="line"> /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */</span><br><span class="line"> /* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色 内/外阴影； */</span><br><span class="line"> box-shadow: 0 15px 30px rgba(0, 0, 0, .4);</span><br><span class="line"> </span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope="" itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="https://kaelinvoker.github.io/Blog/Blog/2019/04/02/初识HTML-CSS/">
<span hidden itemprop="author" itemscope="" itemtype="http://schema.org/Person">
<meta itemprop="name" content="kaer">
<meta itemprop="description" content="">
<meta itemprop="image" content="/Blog/images/avatar.jpg">
</span>
<span hidden itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization">
<meta itemprop="name" content="二两五花肉">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/Blog/2019/04/02/初识HTML-CSS/" itemprop="url">初识HTML+CSS</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2019-04-02T16:52:04+08:00">
2019-04-02
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h3 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h3><p>现在大前端的概念特别火，公司也是准备往这个方向做技术转型。所以，我就开始重拾多年前抛弃的前端知识，从头开始学起。本篇是对自己在慕课网学习<code>《初识HTML+CSS》</code>这门课程做的一个学习笔记。</p>
<h3 id="HTML学习"><a href="#HTML学习" class="headerlink" title="HTML学习"></a>HTML学习</h3><h4 id="HTML介绍"><a href="#HTML介绍" class="headerlink" title="HTML介绍"></a>HTML介绍</h4><ul>
<li><p>HTML概念</p>
<p><code>Html</code>指的是<code>HyperText Markup Language</code>超文本标记语言，它用标签来描述网页。HTML文档包含了HTML 标签及文本内容，HTML文档也叫做 web 页面。</p>
</li>
<li><p><code>Html</code>标签</p>
<p>HTML 标记标签通常被称为 HTML 标签 (HTML tag)。</p>
<p>HTML 标签是由尖括号包围的关键词，比如</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<p>HTML 标签通常是成对出现的，比如</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">b</span>></span><span class="tag"></<span class="name">b</span>></span> <span class="tag"><<span class="name">p</span>></span><span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure>
<p>标签对中的第一个标签是开始标签，第二个标签是结束标签。开始标签和结束标签中间放置内容</p>
<p>HTML标签不区分大小写，如<code><h1></code>和<code><H1></code>是一样的，但建议小写，因为大部分程序员都是用的小写</p>
<p>HTML标签可以嵌套的，但现后顺序必须是一致的</p>
</li>
<li><p>HTML元素</p>
<p>“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.</p>
<p>但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:</p>
<p>HTML 元素:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">p</span>></span>这是一个段落<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure>
</li>
<li><p>Web浏览器</p>
<p>Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。</p>
<p>浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户： </p>
<p>注：只有 <code><body></code> 标签中的内容才会在浏览器中显示。</p>
</li>
<li><p>HTML版本</p>
<p><img src="html1.png" alt=""></p>
</li>
<li><p>HTML、CSS和JavaScript之间的关系</p>
<ol>
<li><strong>HTML是网页内容的载体</strong>。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。</li>
<li><strong>CSS样式是表现</strong>。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。</li>
<li><strong>JavaScript是用来实现网页上的特效效果</strong>。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。</li>
</ol>
</li>
<li><p>HTML文件的基本结构</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span>...<span class="tag"></<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">body</span>></span>...<span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<ol>
<li><code><html></html></code>称为根标签，定义了整个HTML文档。所有的网页标签都在<code><html></html></code>中。</li>
<li><code><head></code>标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<code><title></code>、<code><script></code>、 <code><style></code>、<code><link></code>、 <code><meta></code>等标签，头部标签在下一小节中会有详细介绍。</li>
<li>在<code><body></code>和<code></body></code>标签之间的内容是网页的主要内容，如<code><h1></code>、<code><p></code>、<code><a></code>、<code><img></code>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。</li>
</ol>
</li>
<li><p>HTML注释</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><!--注释文字 --></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h4 id="认识标签"><a href="#认识标签" class="headerlink" title="认识标签"></a>认识标签</h4><ul>
<li><p>语义化</p>
<p>标签的语义化，其实就是指标签的用途。说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的<strong>标题</strong>就可以用标题标签，网页上的各个栏目的<strong>栏目名称</strong>也可以使用标题标签。文章中内容的段落就得放在<strong>段落标签</strong>中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。</p>
<p>语义化可以给我们带来什么样的好处呢？</p>
<ol>
<li><p>更容易被搜索引擎收录。</p>
</li>
<li><p>更容易让屏幕阅读器读出网页内容。</p>
</li>
</ol>
</li>
<li><p>Head标签</p>
<p><code><head></code>元素包含了所有的头部标签元素。在<code><head></code>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。</p>
<p>可以添加在头部区域的元素标签为: <code><title></code>,<code><style></code>,<code><meta></code>,<code><link></code>, <code><script></code>,<code><noscript>,</code> and <code><base></code>.</p>
<ul>
<li><p>title标签</p>
<p><code><title></code> 标签定义了不同文档的标题。<br><code><title></code> 在 <code>HTML</code>/<code>XHTML</code>文档中是必须的。<br><code><title></code>元素：</p>
<p>1.定义了浏览器工具栏的标题</p>
<p>2.当网页添加到收藏夹时，显示在收藏夹中的标题</p>
<p>3.显示在搜索引擎结果页面的标题</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><!DOCTYPE html></span><br><span class="line"><html></span><br><span class="line"> <head></span><br><span class="line"> <title>我是网页标题</title></span><br><span class="line"> </head></span><br><span class="line"> <body></span><br><span class="line"> </body></span><br><span class="line"><html></span><br></pre></td></tr></table></figure>
</li>
<li><p>base标签</p>
<p>base 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><head></span><br><span class="line"><base href="http://www.html.cn/images/" target="_blank"></span><br><span class="line"></head></span><br></pre></td></tr></table></figure>
</li>
<li><p>link标签</p>
<p>定义了文档与外部资源之间的关系。</p>
<p>link标签通常用于链接到样式表:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><head></span><br><span class="line"> <link rel="stylesheet" type="text/css" href="mystyle.css"/></span><br><span class="line"></head></span><br></pre></td></tr></table></figure>
</li>
<li><p>style标签</p>
<p>style标签定义了HTML文档的样式文件引用地址.</p>
</li>
<li><p>meta标签</p>
<p>meta标签描述了一些基本的元数据。元数据也不显示在页面上，但会被浏览器解析。</p>
<p>META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。</p>
<p>元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><head></span><br><span class="line"> <!--为搜索引擎定义关键词-- ></span><br><span class="line"> <meta name="keywords" content="HTML,CSS"/></span><br><span class="line"> <!--为网页定义描述内容--></span><br><span class="line"> <meta name="description" content="免费 web 编程"/></span><br><span class="line"> <!--为网页定义作者--></span><br><span class="line"> <meta name="author" content="HTML"/></span><br><span class="line"> <!--每30秒钟刷新当前页面--></span><br><span class="line"> <meta http-equiv="refresh" content="30"/></span><br><span class="line"></head></span><br></pre></td></tr></table></figure>
</li>
<li><p>script标签</p>
<p>script标签用于加载脚本文件，如： JavaScript。</p>
</li>
</ul>
</li>
<li><p>段落与文字</p>
<ul>
<li><p>hx标签</p>
<p>标题（Heading）是通过 <code><h1></code> -<code><h6></code> 等标签进行定义的。其中<code><h1></code> 定义最大的标题，<code><h6></code> 定义最小的标题。</p>
</li>
<li><p>p标签</p>
<p>段落是通过p标签来定义的，它可以将HTML文档分割为若干段落部分。因为p标签是块级元素，所以浏览器会自动地在段落的前后添加空行。</p>
</li>
<li><p>br标签</p>
<p>用来换行</p>
</li>
<li><p>文本格式化</p>
<p>HTML 使用标签 <code><b></code>(“bold”) 与 <code><i></code>(“italic”) 对输出的文本进行格式, 如：粗体 or 斜体</p>
<p>这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）</p>
<p>通常标签 <code><strong></code> 替换加粗标签 <code><b></code> 来使用, <code><em></code> 替换 <code><i></code>标签使用。</p>
<p>然而，这些标签的含义是不同的：</p>
<p><code><b></code> 与<code><i></code> 定义粗体或斜体文本。</p>
<p><code><strong></code> 或者<code><em></code>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。</p>
<p><img src="html2.png" alt=""></p>
<p><img src="html3.png" alt=""></p>
<p><img src="html4.png" alt=""></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">b</span>></span>这是粗体1<span class="tag"></<span class="name">b</span>></span><span class="tag"><<span class="name">br</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">strong</span>></span>这是粗体2<span class="tag"></<span class="name">strong</span>></span><span class="tag"><<span class="name">br</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">i</span>></span>这是斜体1<span class="tag"></<span class="name">i</span>></span><span class="tag"><<span class="name">br</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">em</span>></span>这是斜体2<span class="tag"></<span class="name">em</span>></span><span class="tag"><<span class="name">br</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">code</span>></span>一行代码<span class="tag"></<span class="name">code</span>></span><span class="tag"><<span class="name">br</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">small</span>></span>这是小号字体<span class="tag"></<span class="name">small</span>></span><span class="tag"><<span class="name">br</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">big</span>></span>这是大号字体<span class="tag"></<span class="name">big</span>></span><span class="tag"><<span class="name">br</span>/></span></span><br><span class="line">这是<span class="tag"><<span class="name">sub</span>></span>下标<span class="tag"></<span class="name">sub</span>></span>和<span class="tag"><<span class="name">sup</span>></span>上标<span class="tag"></<span class="name">sup</span>></span><span class="tag"><<span class="name">br</span>/></span></span><br><span class="line">这是<span class="tag"><<span class="name">ins</span>></span>插入字（字下面带下划线）<span class="tag"></<span class="name">ins</span>></span>和<span class="tag"><<span class="name">del</span>></span>删除字（字带删除线）<span class="tag"></<span class="name">del</span>></span><span class="tag"><<span class="name">br</span>/></span></span><br><span class="line">这是<span class="tag"><<span class="name">kbd</span>></span>键盘码（效果字会变小）<span class="tag"></<span class="name">kbd</span>></span><span class="tag"><<span class="name">br</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">samp</span>></span>定义计算机代码样本<span class="tag"></<span class="name">samp</span>></span><span class="tag"><<span class="name">br</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">var</span>></span>变量a<span class="tag"></<span class="name">var</span>></span><span class="tag"><<span class="name">br</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">pre</span>></span></span><br><span class="line"> 大段格式化文字</span><br><span class="line"> 大师傅似的</span><br><span class="line"> 是豆腐</span><br><span class="line"><span class="tag"></<span class="name">pre</span>></span></span><br><span class="line"><span class="tag"><<span class="name">code</span>></span>这里是代码<span class="tag"></<span class="name">code</span>></span><span class="tag"><<span class="name">br</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">abbr</span>></span>这是缩写<span class="tag"></<span class="name">abbr</span>></span><span class="tag"><<span class="name">br</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">address</span>></span>定义地址<span class="tag"></<span class="name">address</span>></span><span class="tag"><<span class="name">br</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">q</span>></span>短引用<span class="tag"></<span class="name">q</span>></span></span><br><span class="line"><span class="tag"><<span class="name">blockquote</span>></span>大量引用大量引用大量引用大量引用大量引用大量引用大量引用大量引用大量引用大量引用大量引用<span class="tag"></<span class="name">blockquote</span>></span></span><br><span class="line"><span class="tag"><<span class="name">cite</span>></span>定义引用、引证<span class="tag"></<span class="name">cite</span>></span><span class="tag"><<span class="name">br</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">dfn</span>></span>定义一个定义项目<span class="tag"></<span class="name">dfn</span>></span></span><br></pre></td></tr></table></figure>
<p>效果如下</p>
<p><img src="html5.png" alt=""></p>
</li>
<li><p>HTML区块</p>
<p>大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）；而内联元素则不会。</p>
<p>块级元素如<code><h1></code>,<code><p></code>, <code><ul></code>,<code><table></code></p>
<p>内联元素如<code><b></code>,<code><td></code>, <code><a></code>, <code><img></code></p>
<ul>
<li><p>HTML span标签</p>
<p>它是内联元素，可用作文本的容器，与 CSS 一同使用时，<code><span></code> 元素可用于为部分文本单独设置样式属性，没有语义</p>
</li>
<li><p>HTML div标签</p>
<p>HTML <code><div></code> 元素是块级元素，浏览器会在其前后显示折行，可以划分独立得逻辑单元，把相同单元的元素放在div元素里</p>
<p>如果与 CSS 一同使用，<code><div></code> 元素可用于对大的内容块设置样式属性。</p>
</li>
</ul>
</li>
<li><p>HTML字符实体</p>
<p>在 HTML 中，某些字符是预留的。</p>
<p>比如在 HTML 中不能使用小于号（<）和大于号（>）因为浏览器会误认为它们是标签，所以希望能正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。</p>
<p>字符实体类似这样：</p>
<p>比如要想显示空格，必须使用<code>&nbsp;</code> </p>
<p><img src="html6.png" alt=""></p>
</li>
</ul>
</li>
<li><p>HTML列表</p>
<p>HTML 支持有序、无序和定义列表。其中，无序列表默认使用粗体圆点（典型的小黑圆圈）进行标记；有序列表默认使用数字进行标记。</p>
<ul>
<li><p>有序列表</p>
<p>有序列表由<code><ol></code>标签开头，每个列表项由<code><li></code> 标签开头</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">ol</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>篮球<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>羽毛球<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>足球<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>乒乓球<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"></<span class="name">ol</span>></span></span><br></pre></td></tr></table></figure>
<p><img src="html7.png" alt=""></p>
</li>
<li><p>无序列表</p>
<p>无序列表由<code><ul></code> 标签开头，每个列表项由<code><li></code> 标签开头</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><ul></span><br><span class="line"> <li>篮球</li></span><br><span class="line"> <li>羽毛球</li></span><br><span class="line"> <li>足球</li></span><br><span class="line"> <li>乒乓球</li></span><br><span class="line"></ul></span><br></pre></td></tr></table></figure>
<p><img src="html8.png" alt=""></p>
</li>
<li><p>定义列表</p>
<p>定义列表由<code><dl></code> 标签开头，每个定义列表项由<code><dt></code>标签开头，每个定义列表项的定义以 <code><dd></code> 开始</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">dl</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dt</span>></span>LoL<span class="tag"></<span class="name">dt</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span>></span>英雄联盟游戏<span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dt</span>></span>DOTA<span class="tag"></<span class="name">dt</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span>></span>dota游戏<span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dt</span>></span>DNF<span class="tag"></<span class="name">dt</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span>></span>地下城与勇士<span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"><span class="tag"></<span class="name">dl</span>></span></span><br></pre></td></tr></table></figure>
<p><img src="html9.png" alt=""></p>
</li>
</ul>
</li>
<li><p>HTML表格</p>
<p>表格是由 <code><table></code> 标签来定义，每个表格的行由<code><tr></code>标签定义，每行被分割为若干单元格由 <code><td></code> 标签定义。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。</p>
<p><img src="html10.png" alt=""></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!--summary表示表格表述，不显示 border定义边框属性--></span></span><br><span class="line"><span class="tag"><<span class="name">table</span> <span class="attr">summary</span>=<span class="string">"班级表"</span> <span class="attr">border</span>=<span class="string">"1"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">caption</span>></span>班级表<span class="tag"></<span class="name">caption</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>ID<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>姓名<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>年龄<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>分数<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>1<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>张三<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>18<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>90<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>2<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>李四<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>20<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>88<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">table</span>></span></span><br></pre></td></tr></table></figure>
<p><img src="html11.png" alt=""></p>
<ul>
<li><p>表格列合并</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><table border="1"></span><br><span class="line"> <tr></span><br><span class="line"> <th>姓名></span><br><span class="line"> <!--colspan 合并列--></span><br><span class="line"> <th colspan="2">电话</th></span><br><span class="line"> </tr></span><br><span class="line"> <tr></span><br><span class="line"> <td>张三</td></span><br><span class="line"> <td>19290390932</td></span><br><span class="line"> <td>13290390932</td></span><br><span class="line"> </tr></span><br><span class="line"></table></span><br></pre></td></tr></table></figure>
<p><img src="html12.png" alt=""></p>
</li>
<li><p>表格行合并</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><table border="1"></span><br><span class="line"> <tr></span><br><span class="line"> <th>姓名</th></span><br><span class="line"> <td>Luck</td></span><br><span class="line"> </tr></span><br><span class="line"> <tr></span><br><span class="line"> <!--rowspan 合并行--></span><br><span class="line"> <th rowspan="2">电话</th></span><br><span class="line"> <td>111123123</td></span><br><span class="line"> </tr></span><br><span class="line"> <tr></span><br><span class="line"> <td>323231123</td></span><br><span class="line"> </tr></span><br><span class="line"></table></span><br></pre></td></tr></table></figure>
<p><img src="html13.png" alt=""></p>
</li>
</ul>
</li>
</ul>
<ul>
<li><p><code>thead</code>，<code>tfoot</code>,<code>tbody</code>标签</p>
<p><code><thead></code>标签用于组合 HTML 表格的表头内容，<code><tbody></code> 标签用于组合 HTML 表格的主体内容,<code><tfoot></code> 标签用于组合 HTML 表格的页脚内容。这三个元素标签要结合起来使用，用来规定表格的各个部分（页脚、表头、主体）。通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">table</span> <span class="attr">border</span>=<span class="string">"1"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">caption</span>></span>月份营业额总表<span class="tag"></<span class="name">caption</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">thead</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>Month<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>Savings<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">thead</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tfoot</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>Sum<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>$180<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tfoot</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tbody</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>January<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>$100<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>February<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>$80<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tbody</span>></span></span><br><span class="line"><span class="tag"></<span class="name">table</span>></span></span><br></pre></td></tr></table></figure>
<p><img src="html14.png" alt=""></p>
</li>
</ul>
<ul>
<li><p>HTML表单</p>
<p>表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容，指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。</p>
<ul>
<li><p><code>form</code>标签</p>
<p><code>form</code>标签用于创建供用户输入的 HTML 表单。</p>
<p><code>form</code>标签包含一个或多个如下的表单元素：</p>
<p><code>input</code>,<code>textarea</code>,<code>button</code>,<code>select</code>,<code>option</code>,<code>optgroup</code>,<code>fieldset</code>,<code>label</code></p>
<p>当表单提交的数据是是被动的，并且没有敏感信息可采用GET的方式提交</p>
<p>如果表单正在更新数据，或者是包含敏感信息时就可以用POST方式，因为它安全性更高</p>
</li>
<li><p>input标签</p>
<p>用于输入框，其输入类型是由类型属性（type）定义的</p>
<p><img src="html16.png" alt=""></p>
<p>注意<strong>:同一组</strong>的单选按钮，name 取值一定要一致</p>
</li>
<li><p>textarea标签</p>
<p><code><textarea></code>标签定义一个多行的文本输入控件。</p>
<p>文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。</p>
<p>可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">textarea</span> <span class="attr">rows</span>=<span class="string">"10"</span> <span class="attr">cols</span>=<span class="string">"20"</span>></span>哈哈，我是默认的内容<span class="tag"></<span class="name">textarea</span>></span></span><br></pre></td></tr></table></figure>
</li>
<li><p>button标签</p>
<p><code><button></code> 标签定义一个按钮。</p>
<p>在<code><button></code>元素内部，可以放置内容，比如文本或图像。这是该元素与使用 <code><input></code>元素创建的按钮之间的不同之处。</p>
<p><strong>提示：</strong>请始终为 <code><button></code> 元素规定 type 属性。不同的浏览器对 <code><button></code> 元素的 type 属性使用不同的默认值。</p>
</li>
<li><p>select标签</p>
<p><code><select></code> 元素用来创建下拉列表。</p>
<p><code><select></code> 元素中的 <code><option></code>标签定义了列表中的可用选项。 </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">form</span>></span> </span><br><span class="line"> FirstName: <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">name</span>=<span class="string">"firstName"</span> <span class="attr">value</span>=<span class="string">"Jack"</span>/></span> <span class="tag"><<span class="name">br</span>/></span></span><br><span class="line"> LastName: <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">name</span>=<span class="string">"lastName"</span> <span class="attr">value</span>=<span class="string">"mick"</span>/></span><span class="tag"><<span class="name">br</span>/></span></span><br><span class="line"> 你的姓氏：男：<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> <span class="attr">name</span>=<span class="string">"sex"</span> <span class="attr">value</span>=<span class="string">"male"</span> <span class="attr">checked</span>=<span class="string">"checked"</span>/></span> 女：<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> <span class="attr">name</span>=<span class="string">"sex"</span> <span class="attr">value</span>=<span class="string">"female"</span>/></span> <span class="tag"><<span class="name">br</span>/></span></span><br><span class="line"> 你的爱好：篮球<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"hobby"</span> <span class="attr">value</span>=<span class="string">"basktball"</span>/></span> 足球<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"hobby"</span> <span class="attr">value</span>=<span class="string">"football"</span>/></span>乒乓球<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"hobby"</span> <span class="attr">value</span>=<span class="string">"pingpang"</span>/></span><span class="tag"><<span class="name">br</span>/></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"password"</span> <span class="attr">name</span>=<span class="string">"pwd"</span>/></span><span class="tag"><<span class="name">br</span>/></span></span><br><span class="line"> <span class="tag"><<span class="name">textarea</span> <span class="attr">rows</span>=<span class="string">"10"</span> <span class="attr">cols</span>=<span class="string">"30"</span> <span class="attr">name</span>=<span class="string">"content"</span>></span>Default world<span class="tag"></<span class="name">textarea</span>></span><span class="tag"><<span class="name">br</span>/></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> <span class="attr">type</span>=<span class="string">"button"</span>></span>点我<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> 请选择最喜欢的老师:</span><br><span class="line"> <span class="tag"><<span class="name">select</span> <span class="attr">name</span>=<span class="string">"teacher"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"mick"</span>></span>Mick<span class="tag"></<span class="name">option</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"jack"</span>></span>Jack<span class="tag"></<span class="name">option</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"marry"</span>></span>Marry<span class="tag"></<span class="name">option</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">select</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"submit"</span> <span class="attr">value</span>=<span class="string">"提交"</span>/></span></span><br><span class="line"><span class="tag"></<span class="name">form</span>></span></span><br></pre></td></tr></table></figure>
<p><img src="html15.png" alt=""></p>
<p>表单提交的方式默认是Get，所以请求参数是会放到url中的</p>
<p>如上面提交后<code>url</code>变为<code>file:///C:/Users/Administrator.DESKTOP-EPLRDTE/Desktop/new.html?firstName=Jack&lastName=mick&sex=male&pwd=123&content=Default+world&teacher=jack</code></p>
</li>
</ul>
</li>
<li><p>HTML链接</p>
<p>HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面</p>
<ul>
<li><p>a标签</p>
<p>HTML使用标签 <code><a></code>来设置超文本链接。</p>
<p>超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。</p>
<p>当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。</p>
<p>在标签<code><a></code> 中使用了<code>href</code>属性来描述链接的地址。</p>
<p>默认情况下，链接将以以下形式出现在浏览器中：</p>
<p>1.一个未访问过的链接显示为蓝色字体并带有下划线。</p>
<p>2.访问过的链接显示为紫色并带有下划线。</p>
<p>3.点击链接时，链接显示为红色并带有下划线。</p>
<p><strong>注意</strong>：如果为这些超链接设置了 <code>CSS</code>样式，展示样式会根据 <code>CSS</code> 的设定而显示。</p>
<p><code>target</code>属性：可以定义被链接的文档在何处显示，值为<code>_blank</code>链接将在新窗口中打开</p>
<p><code>id</code>属性：id属性可用于创建在一个HTML文档书签标记。书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。当某个a标签定义了id，那么其它链接可以再次指向它</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">//点击在新窗口中打开百度</span><br><span class="line"><a href="https://www.baidu.com" target="_blank" id="baidu">跳向百度</a></span><br><span class="line">//点击会跳到上面a标签的位置，并且浏览器的url后面会加上 #baidu</span><br><span class="line"><a href="#baidu">跳到上面a标签的地方</a></span><br></pre></td></tr></table></figure>
<p><code><a></code>标签还有一个作用是可以链接Email地址，使用<code>mailto</code>能让访问者便捷向网站管理者发送电子邮件。我们还可以利用<code>mailto</code>做许多其它事情。</p>
<p><img src="mail.jpg" alt=""></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><a href="mailto:[email protected][email protected]&[email protected]&subject=你好，这是标题&body=你好，这是内容" title="">发送邮件</a></span><br></pre></td></tr></table></figure>
</li>
<li><p>link标签</p>
<p><code><link></code> 标签定义文档与外部资源的关系。</p>
<p><code><link></code> 标签最常见的用途是链接样式表。</p>
<p>注意： link 元素是空元素，它仅包含属性。</p>
<p>注意： 此元素只能存在于 head 部分，不过它可出现任何次数。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>></span></span><br><span class="line"><span class="comment"><!--rel属性必需。定义当前文档与被链接文档之间的关系。 type 规定被链接文档的 MIME 类型。--></span></span><br><span class="line"><span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">type</span>=<span class="string">"text/css"</span> <span class="attr">href</span>=<span class="string">"https://public.xp.cn/down/course_demo/html/styles.css"</span>></span> </span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"><span class="tag"><<span class="name">h1</span>></span>我是通过样式文件 styles.css 渲染后显示的。<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>我也是。<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
</li>
<li><p>nav标签</p>
<p><code><nav></code> 标签定义导航链接的部分。</p>
<p>并不是所有的 HTML 文档都要使用到 <code><nav></code> 元素。<code><nav></code> 元素只是作为标注一个导航链接的区域。</p>