HTML基础之补充
html补充内容
1、<!DOCTYPE html>文档类型说明
注意：一定要出现在第一行，看到这个标签说明是html5语言
2、<head lang="">告诉读者当前网站是中文的还是英文的还是其他语言的
en代表英文
zh-CN代表中文
3、<del>xxx</del>或者<s>xxx</s>删除线标签
4、<u>xxx</u>或者<ins>xxx</ins>下划线标签
5、div和span的区别
div标签相当于一个大盒子，例如<div>xxx</div>abc 注意：abc在最终的页面上是不会显示的“说的抽象一点，div一行只能有一个”
span标签相当于一个小盒子，“说的抽象一点，span一行可以有多个”
例如：
<span>百度</span>
<span>腾讯</span>
<span>新浪</span>
最终显示在页面上是： 百度 腾讯 新浪
6、路径问题
1）、相对路径（经常使用）
相对路径：以引用文件所在的位置为参考基础，而建立出的目录路径
2）、绝对路径(很少使用）
绝对路径：指目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径。如D:\web\img\logn.gif
7、关于超链接的链接方式
具体介绍，请看图
8、<label>xxx</label>
<label>标签一般和表单配合使用，为input元素定义标注。
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点转到或者选择对应的表单元素上，用来增加用户体验。使用语法为：
<label for="sex1">
<input type="radio" name="man" id="sex1"/>
<img src="img/man.jpg" />男
</label>
<label for="sex2">
<input type="radio" name="man" id="sex2"/>
<img src="img/women.jpg" />女
</label>
9、其它特殊标记
10、综合实例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>圣诞节的那些事</h1>
<p>1.圣诞是怎样由来的</p>
<a href="#youlai"><p>2.圣诞老人的由来</p></a>
<a href="#shuyoulai"><p>3.圣诞树的由来</p></a>
<h2>圣诞是怎样由来的</h2>
<p>圣诞节是基督教世界最大的节日。一般认为12月25日作为圣诞节可能开始于公元336年的罗马教会。4世纪初，1月6日是罗马帝国东部各教会纪念耶稣降生和受洗的双重节日，即上帝通过耶稣向世人显示自己。 这一天又是罗马历书的冬至节，意味着万物复苏的开始。可能由于这个原因，罗马教会才选择这一天作为圣诞节。后来，因为各地教会使用的历书不同，具体日期不能统一，于是就把12月24日到第二年的1月6日定为圣诞节节期（Christmas Tide），各地教会可以根据当地具体情况在这段节期之内庆祝圣诞节。 在欧美许多国家里，人们非常重视这个节日，把它和新年连在一起，而庆祝活动之热闹与隆重大大超过了新年，成为一个全民的节日。12月24日平安夜、12月25日圣诞节的主要纪念活动都与耶稣降生的传说有关 。</p>
<img src="img/t1.gif" />
<h2 id="youlai">圣诞老人的由来</h2>
<p>圣诞节当然少不了<a href="demo.html">圣诞老人</a>，根据圣经记载，书中并没有提起这一号人物。到底他是如何成为圣诞的主角之一呢？</p>
<img src="img/t2.jpg" />
<p>相传在一千六百多年前，荷兰巴里地方有一个老人，名叫尼古拉斯，他一生最爱帮助贫穷的人家。其中有一次他帮助三个贫穷的少女，送她们三袋金子以逃过被卖的不幸。</p>
<p>到了一八二二年，由荷兰传教士把这位伟大慈善家的故事传到美国，装扮圣诞老人渐渐地流行于世界各国。根据调查，以上故事还有下文；当尼古拉斯偷偷把其中一袋金子送给其中一名女子时，他把金子从其中一个窗户扔进去，恰好掉进晾在壁炉上的一只长袜中。于是，将礼物放在圣诞袜子的送礼方法便传到至今。</p>
<p>在平安夜里，孩子总会把一双双色彩缤纷的袜子挂在床头，然后在袜子旁边放杯热牛奶让圣诞老人喝，以让劳苦功高的圣诞老人解渴，并送份大礼给自己。?</p>
<h2 id="shuyoulai">圣诞树的由来</h2>
<p>圣诞一直是庆祝圣诞节不可少的装饰物，如果家中没有圣诞树，就大大减少了过节气氛。关于圣诞树的来源有多种不同的传说。</p>
<p>其中一个是说：大约在十六世纪，圣诞树最先出现在德国，德国人把长青的松柏枝拿到屋中去摆设，将之成为圣诞树。后来，由德国人马丁路德把蜡烛放在树林中的枞树枝，然后点燃蜡烛，使它看起来像是引导人们到伯利恒去。而近今日，人们已经改用粉色的小灯泡了。</p>
<p>另一个传说记载。在很久以前，曾有一位农民，在圣诞节那天遇到一个穷苦小孩，他热情地接待了这个儿童。儿童临走时折下一根松枝插在地上，松枝立即变成一棵树，上面都挂满礼物，以答谢农民的好意。</p>
<p>圣诞树真正出现在圣诞节时，首先见于德国，之后又传入欧洲和美国，并以其优美的姿态，成为圣诞节不可缺少的装饰。圣诞树的种类繁多，有天然松柏圣诞树、也有人造圣诞树及白色圣诞树。 每棵圣诞树上都挂满琳琅满目的装饰品，但每棵树的顶端必定有个特大的星星，象征三博士跟随该星而找到耶稣，而且也只有该家庭的一家之主可以把这棵希望之星挂上。</p>
<img src="img/t3.jpg">
<p>更多内容可以 百度一下</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>圣诞老人 （西方文化的传说人物）</h1>
<p>圣诞老人（Santa Claus）别称Saint Nick、Kris Kringle、Father Christmas或Santa（爱尔兰英语的Santy），一位专门在圣诞节前夜时悄悄赠送礼物给小孩子的神秘人物，是节日主题的代表角色之一。他普遍被认为是基督教的圣人圣·尼古拉斯（Saint Nicholas）的衍生形象。 传说每到12月24日晚上，有个神秘人会乘驾由9只驯鹿拉的雪橇在天上飞翔，挨家挨户地从烟囱进入屋里，然后偷偷把礼物放在好孩子床头的袜子里，或者堆在壁炉旁的圣诞树下。他在一年中的其他时间里，都是忙于制作礼物和监督孩子们的行为。 虽然没有人真的见过神秘人的样子，但是人们会装扮成他的样子来给孩子送上礼物。他通常被描述为一位老人，头戴红色帽子，大大的白色胡子，一身红色棉衣，脚穿红色靴子的样子，拿着装有礼物的大袋子，因为总在圣诞节前夜出现派发礼物，所以习惯地称他为“圣诞老人”。</p>
<img src="img/oldman.jpg" />
</body>
</html>
最终效果：
综合实例2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册网</title>
</head>
<body>
<h3>青春不常在，抓紧谈恋爱</h3>
<form action="" method="get" >
<table width="600px">
<tr>
<td>姓名</td>
<td><input type="text" name="username" value="请输入名字" /></td>
</tr>
<tr>
<td>性别</td>
<td>
<label for="sex1">
<input type="radio" name="man" id="sex1"/>
<img src="img/man.jpg" />男
</label>
<label for="sex2">
<input type="radio" name="man" id="sex2"/>
<img src="img/women.jpg" />女
</label>
</td>
</tr>
<tr>
<td>生日</td>
<td>
<select>
<option>--请选择年--</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
</select>
<select>
<option>--请选择月--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
<select>
<option>--请选择日--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td><input type="text" name="area" value="请输入所属地区" /></td>
</tr>
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="hyzk"/>未婚
<input type="radio" name="hyzk"/>已婚
<input type="radio" name="hyzk"/>离婚
</td>
</tr>
<tr>
<td>学历</td>
<td><input type="text" name="xl" value="请输入学历" /></td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" value="likelx" name="fumeide" />妩媚的
<input type="checkbox" value="likelx" name="keaide" />可爱的
<input type="checkbox" value="likelx" name="xiaoxianrou" />小鲜肉
<input type="checkbox" value="likelx" name="laolarou" />老腊肉
<input type="checkbox" value="likelx" name="douxihuan" />都喜欢
</td>
</tr>
<tr>
<td>自我介绍</td>
<td><textarea>请输入自我介绍</textarea></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="zhuce" value="免费注册" />
<input type="reset" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" checked="checked" />
我同意注册条款和加入标准
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#">我是会员，立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<dl>
<dt><h3>我承诺</h3></dt>
<dd>年满18周岁，单身</dd>
<dd>抱着严肃的态度</dd>
<dd>真诚寻找另一半</dd>
</dl>
</td>
</tr>
</table>
</form>
</body>
</html>
最终效果：
html常见的基础知识大概就这么多，为了自己学习的高效，以及日后复习查阅，写此文章，如果有误，请批评指正。本篇博客是自己学习笔记的整理，仅供学习交流，切勿用于商业用途，如有侵权，请联系博主删除，博主QQ：1105810790
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
