今天js高级程序设计一书到货，正式开学学习web前端。
1.html文件框架
<html></html>之间的为html代码
<head></head>放在<html>中间，是选项是代码，但不是可以显示的正文，一般在<head>中间放<title></title>,<title>中间放标题
<body></body>实际显示的正文放在这里面，可以显示
<meta charset="utf-8">声明这些代码是国标码，意味着支持绝大多数的浏览器或者文字，通常放在<title></title>下面或者上面
<!DOCTYPE html>告诉浏览器我下面的代码是以html5的标准来写的，做个声明，通常放在最最最上面
下面是范例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的标题</title>
</head>
<body>我的第一个html页面
</body>
</html>2.段落
<p></p>段落，用来表示一段开始和结束
<br>断行，在一段里面让他分行
<h1></h1>第一级标题，一直可以写到<h6>,<h1>最大<h6>最小,<h1>单独成一行<h6>也是,有连续的2级<h1>的标题可以用<hgroup></hgroup>把<h>标题连在一起来告诉浏览器这里是连续的但是是2个标题
<wbr></wbr>指定这个英文单词可以被分开
下面是案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的标题</title>
</head>
<body>大师兄<hgroup><h1>第一章 毕业舞会后以后</h1><br><h2>5月13日星期六，半夜</h2></hgroup><p>“夜晚好像永远也不会结束，”kim斜躺在轻便的柳条椅里轻轻的叹息了一声。舞厅被装声称安放庄园的风格，暗色的和白色的皱纹纸带缠绕在闪烁的水晶灯上，把原本柔和的灯光，幻化成点点星光，好像在橡木地板上跳动。大多数情侣正紧紧滴相拥这随着音乐跳动，仿佛怕高中毕业晚会的最后时光就要消失在历史里。</p>
<p>On Friendship
And a youth said, "Speak to us of Friendship."
Your friend is your needs answered.
He is your field which you sow with love and reap with thanksgiving.
And he is your board <wbr>and</wbr> your fireside.
For you come to him with your hunger, and you seek him for peace.
When your friend speaks his mind you fear not the "nay" in your own mind, nor do you withhold the "ay."
And when he is silent your heart ceases not to listen to his heart;
For without words, in friendship, all thoughts, all desires, all expectations are born and shared, with joy that is unacclaimed.
When you part from your friend, you grieve not;
For that which you love most in him may be clearer in his absence, as the mountain to the climber is clearer from the plain.
And let there be no purpose in friendship save the deepening of the spirit.
For love that seeks aught but the disclosure of its own mystery is not love but a net cast forth: and only the unprofitable is caught. </p>
</body>
</html>
3.字体样式
<b></b>让字体变粗
<i></i>让字体变斜
<tt></tt>打字机的字体,等宽的西方文字字体
<small></small>让字体变小
<del></del>删掉
<ins></ins>加上
<s></s>这些内容是过时的但是不可以删除
<sup></sup>上标
<sub></sub>下标
<mark></mark>特别强调，会出把字体的空间都变成黄色
下面为案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的标题</title>
</head>
<body>大师兄<br>a<sup>2</sup>+b<sub>0</sub><hgroup><h1>第一章 毕业舞会后以后</h1><br><h2>5月13日星期六，半夜</h2></hgroup><p>“夜晚好像<b>永远也不会<i>结束</i></b>，”kim斜躺<tt>在</tt>轻便的<del>柳条椅</del><ins>里轻轻</ins>的<s>叹息</s>了<mark>一声</mark>。舞厅被装声称安放庄园的风格，暗色的和白色的皱纹纸带缠绕在闪烁的水晶灯上，把原本柔和的灯光，幻化成点点星光，好像在橡木地板上跳动。大多数情侣正紧紧滴相拥这随着音乐跳动，仿佛怕高中毕业晚会的最后时光就要消失在历史里。</p>
<p>On Friendship
And a <tt>youth</tt> <b>said</b>, "Speak to us of Friendship."
Your <small>dog</small>friend is your needs answered.
He is your field which you sow with love and reap with thanksgiving.
And he is your board <wbr>and</wbr> your fireside.
For you come to him with your hunger, and you seek him for peace.
When your friend speaks his mind you fear not the "nay" in your own mind, nor do you withhold the "ay."
And when he is silent your heart ceases not to listen to his heart;
For without words, in friendship, all thoughts, all desires, all expectations are born and shared, with joy that is unacclaimed.
When you part from your friend, you grieve not;
For that which you love most in him may be clearer in his absence, as the mountain to the climber is clearer from the plain.
And let there be no purpose in friendship save the deepening of the spirit.
For love that seeks aught but the disclosure of its own mystery is not love but a net cast forth: and only the unprofitable is caught. </p>
</body>
</html>
4.短语格式
<em></em>强调
<strong></strong>着重
<dfn></dfn>给一个定义
<code></code>代码，表达这一行是代码 但不是表达大段的源代码
<samp></samp>例子代码
<kbd></kbd>用户输入
<var></var>变量，在文章中表达这个单词这个是变量
<cite></cite>饮用，表达这个是我从别的地方引用过来的
5.特殊格式
<address></address>放地址也就是出处的
<blockquote></blockquote>缩进,大缩进
<q></q>小引用
<pre></pre>预格式化，你写的是什么就给你原原本本写出来在案例里面是把代码原原本本显示出来的
下面是案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的标题</title>
</head>
<body>
<code>
<pre>
int main(){
printf("hello");
return0;
}
</pre>
</code>
<address><blockquote>re401<br>
<q>克山<br></q>
黑龙江</blockquote></address><br>大师兄<br>a<sup>2</sup>+b<sub>0</sub><hgroup><h1>第一章 毕业舞会后以后</h1><br><h2>5月13日星期六，半夜</h2></hgroup><p>“夜晚好像<b>永远也不会<i>结束</i></b>，”kim斜躺<tt>在</tt>轻便的<del>柳条椅</del><ins>里轻轻</ins>的<s>叹息</s>了<mark>一声</mark>。舞厅被装声称安放庄园的风格，暗色的和白色的皱纹纸带缠绕在闪烁的水晶灯上，把原本柔和的灯光，幻化成点点星光，好像在橡木地板上跳动。大多数情侣正紧紧滴相拥这随着音乐跳动，仿佛怕高中毕业晚会的最后时光就要消失在历史里。</p>
<p>On Friendship
And a <tt>youth</tt> <b>said</b>, "Speak to us of Friendship."
Your <small>dog</small>friend is your needs answered.
He is your field which you sow with love and reap with thanksgiving.
And he is your board <wbr>and</wbr> your fireside.
For you come to him with your hunger, and you seek him for peace.
When your friend speaks his mind you fear not the "nay" in your own mind, nor do you withhold the "ay."
And when he is silent your heart ceases not to listen to his heart;
For without words, in friendship, all thoughts, all desires, all expectations are born and shared, with joy that is unacclaimed.
When you part from your friend, you grieve not;
For that which you love most in him may be clearer in his absence, as the mountain to the climber is clearer from the plain.
And let there be no purpose in friendship save the deepening of the spirit.
For love that seeks aught but the disclosure of its own mystery is not love but a net cast forth: and only the unprofitable is caught. </p>
</body>
</html>
6.属性
<hr>水平线,后面可以加width＝“50”类似这些都可以加,也可以让水平线靠左或靠右，如align＝“left” 或者size＝“1”，上面三个属性倾向于用css样式表做
如果想给“开心吗”注解要这样写<abbr title="很开心">开心吗<／abbr>.
<bdo></bdo>颠倒过来 如果想让皱纹纸带颠倒过来这样写，<bdo dir=rtl>皱纹纸带</bdo>
<bdi></bdi>再颠倒过来 如果想把带纸颠倒过来这样写，<bdi>纸带</bdi>
<；是 <小于号 的意思. >；是 >大于号 的意思. &；是 & 的意思. 是不可打断的空格这个空格可以写多次然后有多次不可打断的空格
下面是案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的标题</title>
</head>
<body>
a<>
& &<br>
<hgroup><h1>第一章 毕业舞会后以后</h1><br><h2>5月13日星期六，半夜</h2></hgroup><hr width="50" align="left" size="1">
<abbr title="很开心">开心吗</abbr>
<p>“夜晚好像<b>永远也不会<i>结束</i></b>，”kim斜躺<tt>在</tt>轻便的<del>柳条椅</del><ins>里轻轻</ins>的<s>叹息</s>了<mark>一声</mark>。舞厅被装声称安放庄园的风格，暗色的和白色的<bdo dir=rtl>皱纹<bdi>纸带</bdi></bdo>缠绕在闪烁的水晶灯上，把原本柔和的灯光，幻化成点点星光，好像在橡木地板上跳动。大多数情侣正紧紧滴相拥这随着音乐跳动，仿佛怕高中毕业晚会的最后时光就要消失在历史里。</p>
<p>On Friendship
And a <tt>youth</tt> <b>said</b>, "Speak to us of Friendship."
Your <small>dog</small>friend is your needs answered.
He is your field which you sow with love and reap with thanksgiving.
And he is your board <wbr>and</wbr> your fireside.
For you come to him with your hunger, and you seek him for peace.
When your friend speaks his mind you fear not the "nay" in your own mind, nor do you withhold the "ay."
And when he is silent your heart ceases not to listen to his heart;
For without words, in friendship, all thoughts, all desires, all expectations are born and shared, with joy that is unacclaimed.
When you part from your friend, you grieve not;
For that which you love most in him may be clearer in his absence, as the mountain to the climber is clearer from the plain.
And let there be no purpose in friendship save the deepening of the spirit.
For love that seeks aught but the disclosure of its own mystery is not love but a net cast forth: and only the unprofitable is caught. </p>
</body>
</html>
7.列表
<ul></ul>无序列表，会出现实心小圆点
<li></li>列表当中的项目，可以多次加入到<ul>里面
<ol></ol>有序列表，会把实心小圆点前面加上数字如1 2 3
<dl></dl>词条，有点像字典在<dl>里面可以有多个解释可以给<li>加解释. <dt>中间写需要解释的词</dt> <dd>解释的内容</dd>
下面是实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的标题</title>
</head>
<body>
<p>
<dl>
<dt>咖啡</dt>
<dd>树上长的果实</dd>
</dl>
餐后饮料有：
<ol>
<li>红茶</li>
<li>咖啡:
<ul>
<li>加糖吗</li>
<li>不加</li>
</ul>
</li>
<li>可乐</li>
</ol>
</p>
</body>
</html>8.图片
<img src=“插入图片的地址,也可以插入网站里面拷贝来的图片”/>插入图片的格式.在页面里面把图片变小这样写 <img src="插入图片的地址" witch="50%"/>还可以加height来调节图片大小 还可以加alt＝什么，让图片加载不出来的时候页面也会显示alt＝什么的什么.
<iframe src="某网站"></iframe>这个也是加图片的但这个主要加网址,可以直接点进去网站.也可以加height和witch属性.
下面是案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的标题</title>
</head>
<body>
<p>
<img src="HBuilder.png" alt="mama" height="100"/>
<iframe src="http://news.163.com"></iframe>
</p>
</body>
</html>9.链接
<a href＝"http://news.163.com">网易新闻</a> 加入超链接的格式直接点网易新闻就可以进入网易官网
<p id="here">可以给段落加id然后再在<a herf="#here">网易新闻</a>网易新闻点进去就可以直接跳转到段落里面
<a href="http://news.163.com" target="_black">网易新闻<a>这个格式可以点击网易新闻给你打开一个新的窗口新的链接
usemap可以做一个影射 地图，地图叫map.具体代码这么写 重要
<img src="HBuilder.png" width="100" height="100" usemap="#map" />
<map name="map">
<area shape="rect" coords="0,0,50,50" href="http://news.163.com" alt="news"/>
<area shape="circle" coords="75,75,25" href="http://news.163.com" alt="home" />
</map>下面是案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的标题</title>
</head>
<body>
<p>
<img src="HBuilder.png" width="100" height="100" usemap="#map" />
<map name="map">
<area shape="rect" coords="0,0,50,50" href="http://news.163.com" alt="news"/>
<area shape="circle" coords="75,75,25" href="http://news.163.com" alt="home" />
</map>
<a href="http://news.163.com" target="_blank">网易新闻</a>
<iframe src="http://news.163.com"></iframe>
<dl>
<dt>咖啡</dt>
<dd>树上长的果实</dd>
</dl>
餐后饮料有：
<ol>
<li>红茶</li>
<li>咖啡:
<ul>
<li>加糖吗</li>
<li>不加</li>
</ul>
</li>
<li>可乐</li>
</ol>
</p>
a<>
& &<br>
<hgroup><h1>第一章 毕业舞会后以后</h1><br><h2>5月13日星期六，半夜</h2></hgroup><hr width="50" align="left" size="1">
<abbr title="很开心">开心吗</abbr>
<p id="her">“夜晚好像<b>永远也不会<i>结束</i></b>，”kim斜躺<tt>在</tt>轻便的<del>柳条椅</del><ins>里轻轻</ins>的<s>叹息</s>了<mark>一声</mark>。舞厅被装声称安放庄园的风格，暗色的和白色的<bdo dir=rtl>皱纹<bdi>纸带</bdi></bdo>缠绕在闪烁的水晶灯上，把原本柔和的灯光，幻化成点点星光，好像在橡木地板上跳动。大多数情侣正紧紧滴相拥这随着音乐跳动，仿佛怕高中毕业晚会的最后时光就要消失在历史里。</p>
<p id="here">On Friendship
And a <tt>youth</tt> <b>said</b>, "Speak to us of Friendship."
Your <small>dog</small>friend is your needs answered.
He is your field which you sow with love and reap with thanksgiving.
And he is your board <wbr>and</wbr> your fireside.
For you come to him with your hunger, and you seek him for peace.
When your friend speaks his mind you fear not the "nay" in your own mind, nor do you withhold the "ay."
And when he is silent your heart ceases not to listen to his heart;
For without words, in friendship, all thoughts, all desires, all expectations are born and shared, with joy that is unacclaimed.
When you part from your friend, you grieve not;
For that which you love most in him may be clearer in his absence, as the mountain to the climber is clearer from the plain.
And let there be no purpose in friendship save the deepening of the spirit.
For love that seeks aught but the disclosure of its own mystery is not love but a net cast forth: and only the unprofitable is caught. </p>
</body>
</html>
10.表格
<table></table>在这里面写表格 <table border="1">写上这段话才会有格子线
<tr></tr>中间的内容属于一行
<td>格子里面的内容</td>是一行当中的一个格子
<th></th>里面写格子表头
<caption></caption>大表头
<td colspan="3">windows</td>这个表示让windows占3个分区
下面是实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的表格</title>
</head>
<body>
<p>前面
<table border="1">
<caption>大表头</caption>
<tr>
<th>os</th>
<th>wi7</th>
<th>lun</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="3">windows</td>
</tr>
</table>后面
</p>
</body>
</html>
16点19分完
3090
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
