⽂本格式化标签
加粗：<strong></strong> or <b></b>
倾斜：<em></em> or <i></i>
删除线：<del></del> or <s></s>
下划线：<ins></ins> or <u></u>
注意：以上内容均推荐使⽤第⼀种，语义更强烈，表⽰强调
div 和 span 标签
均为⽆语义标签
<div> 可定义⽂档中的分区或节（division/section）。是⼀个块级元素，相当于⼀个⼤盒⼦，存放⼀⼤块内容，类似标题标签，独占⼀⾏。
<div> 标签可以把⽂档分割为独⽴的、不同的部分。它可以⽤作严格的组织⼯具，并且不使⽤任何格式与其关联。
如果⽤ id 或 class 来标记 <div>，那么该标签的作⽤会变得更加有效。但是没有必要全都⽤ id 或 class 来标记
<span> 标签被⽤来组合⽂档中的⾏内元素。相当于⼀个⼩盒⼦，不会独占⼀⾏。
图像标签
<img /> 这是⼀个单标签，标签有两个必需的属性：src 属性 和 alt 属性。
alt属性：替换⽂本，图像不能显⽰时的⽂字
title属性：提⽰⽂本，⿏标放到图像上，显⽰的⽂字
width/height：设置图像的宽度和⾼度
border：单位是像素，设置图像的边框粗细
注意：
1. 图像标签可以有多个属性，必须写在标签名的后边
2. 属性之间不分先后的顺序，标签名与属性、属性与属性之间均以空格分开
3. 属性采⽤键值对的格式，即key = “value”的格式，属性 = “属性值”
相对路径与绝对路径
相对路径：以引⽤⽂件（相对HTML页⾯的位置）所在位置为参考基础，⽽建⽴出的⽬录路径
绝对路径：⽬录下的绝对位置，直接到达⽬标位置，通常是从盘符开始的路径，或者是⽹页中图⽚的⽹址
超链接标签
圣诞老人的由来语法格式：<a href="跳转⽬标" target="⽬标窗⼝的弹出⽅式">⽂本或图像</a>
href：⽤于指定链接⽬标的url地址（必须属性）
target：⽤于指定链接页⾯的打开⽅式，其中_self为默认值，在当前窗⼝打开，_blank为在新窗⼝中打开⽅式。
外部链接：
<a href="www.baidu">百度</a>
内部链接：⽹页内部的链接，直接在href后输⼊该链接名（xxx.html）就可以
空链接：# <a href="#">这是个空链接</a>
下载链接：
如果href后边跟的是⼀个压缩包形式(.exe或者.zip等)，会下载这个⽂件
⽹页元素链接：⽂本，图像，⾳频，视频等都可以添加超链接
<a href="www.baidu"><img src="img.jpg"></a>
锚点链接：点击链接，快速定位到页⾯中的某个位置
href属性中设置属性值为#名字的形式<a href="#two">第⼆季</a>
到⽬标位置标签，⾥⾯添加⼀个id 属性 = 刚才的名字，<h3 id="two">第⼆季介绍</h3>
案例：圣诞节的那些事
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣诞节的那些事</title>
</head>
<body>
<h1>圣诞节</h1>
<a href="#from">圣诞节是怎样由来的</a><br>
<a href="#oldman">圣诞⽼⼈的由来</a><br>
<a href="#tree">圣诞树的由来</a><br>
<img src="p3.ssl.qhimgs1/sdr/400__/t01c3274df4fa682cc3.jpg"/>
<p><h3 id="from">圣诞节是怎样由来的</h3>在将临节期，教会的布置全都以蓝紫⾊为主。圣坛的桌⼱、讲台的台帷、牧师袍的肩带都是紫⾊。并且圣坛中央通常会放置⼀个⽤长青树的叶⼦作的花环，中间有五枝紫⾊的长烛，每个星期⽇，便多点上⼀枝蜡烛。到最后的圣诞夜⾥的“普世同庆”点上中间的最后⼀枝蜡烛。烛光象征着在许多年前的圣婴孩耶稣其第⼀声啼哭⾥，为这世上带来了光明。</p>
<p><h3 id="oldman">圣诞⽼⼈的由来</h3>
<a href="oldman.html"target="_blank">圣诞⽼⼈</a>其实是西元第三世纪的尼可莱斯主教。他曾冒死解救被处殛刑的政治犯、也揭发过贪婪官吏屯粮，使百姓渡过饥荒。在宗教被迫害时，被捕⼊狱，⾝上满是鞭痕、钳伤与烙印，仍坚持其信仰。⽽后半⽣留在⽶拉，设⽴孤⼉院、照顾病患、贫民。尼可莱斯⽣平事迹中，最脍炙⼈⼝的是他慷慨助⼈的⾏径和对孩童的爱⼼，这些事迹之后被⼉童⽂学家，予以丰富的想像⽽成为我们此刻所知圣诞⽼⼈故事。</p>
<p><h3 id="tree">圣诞树的由来</h3>据称，圣诞树最早出现在古罗马12⽉中旬的农神节，德国传教⼠尼古斯在公元8世纪⽤纵树供奉圣婴。随后，德国⼈把12⽉24⽇作为亚当和夏娃的节⽇，在家放上
象征伊甸园的“乐园树”，上挂代表圣饼的⼩甜饼，象征赎罪；还点上蜡烛和球，象征基督。到16世纪，宗教改⾰者马丁.路德，为求得⼀个满天星⽃的圣诞之夜，设计出在家中布置⼀颗装着蜡烛和球的圣诞树。</p>
<a href="www.baidu"target="_blank">更多内容，百度⼀下</a>
</body>
</html>
下边这是oldman.html
在这⾥插⼊代码⽚<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣诞⽼⼈</title>
</head>
<body>
<img src="pic25.nipic/20121213/2457331_102004052301_2.jpg"target="_blank"title="圣诞⽼⼈"width="200px">
<p>圣诞⽼⼈(Santa Claus)西⽅神话传说中的⼈物，在传说中西⽅圣诞节前夜时悄悄赠送礼物给⼩孩⼦，是耶稣基督诞⾠瞻礼即西⽅圣诞节的代表⾓⾊之⼀。他普遍被认为是基督教的圣⼈圣·尼古拉斯(Saint Nicholas)的衍⽣形象，圣诞⽼⼈的起源或与⼀种被称为毒蝇伞的红⽩相间蘑菇有关。</p>
<p>传说每到12⽉24⽇晚上，有个神秘⼈会乘驾由9只驯⿅拉的雪橇在天上飞翔，挨家挨户地从烟囱进⼊屋⾥，然后偷偷把礼物放在好孩⼦床头的袜⼦⾥，或者堆在壁炉旁的圣诞树下。他在⼀年中的其他时间⾥，都是忙于制作礼物和监督孩⼦们的⾏为。</p>
<p>虽然没有⼈真的见过神秘⼈的样⼦，但是⼈们会装扮成他的样⼦来给孩⼦送上礼物。他通常被描述为⼀位⽼⼈，头戴红⾊帽⼦，⼤⼤的⽩⾊胡⼦，⼀⾝红⾊棉⾐，脚穿红⾊靴⼦的样⼦，拿着装有礼物的⼤袋⼦，因为总在圣诞节前夜出现派发礼物，所以习惯地称他为"圣诞⽼⼈"。</p>
</body>
</html>
我⽤的pycharm⾥边Alt+z可以实现对⽂字的⾃动换⾏（需要下载插件）
发布评论