前端学习笔记day01–基本标签
W3C(World Wide Web Consortium)万维网联盟，制定标准
1.结构标准（XHTML，XML）–html
2.表现标准（CSS）–css
3.交互标准（DOM，ECMAscript）–js（JavaScript） 动态效果
标准的目的：达到表现与结构、交互的分离
HTML（Hyper Text Markup Language） 超文本标记语言
超文本：支持视频、音频、图片等多种格式
标记语言：用标签组成->浏览器解析->网页
不区分大小写
93 – 2.0 --4.0.1（曾被广泛使用）–XHTML（要求严格，没有继承前代特性）–5.0（加入了音视频、动画、阴影，是一个跨平台的版本，即跨浏览器的版本）
记事本开发难以维护，需要使用集成开发环境
常见的开发工具：HBuilder、WebStorm、EditPlus、Sublime
1.写第一个HTML程序
新建文本文档，重命名为first.html（中英文文件名都可以）。英文半角输入
文档结构：
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
显示内容123
</body>
</html>
起始标签、结束标签：<html></html>
<head> 文档头部：设置：关键字、怎么搜索等。
<body> 网页体：内容出现在主窗体里。
<title> 网页标题：内容显示在标签上。
2.HBuilder使用
（1）文件–>新建–>新建Web项目。
（2）运行程序：右键–>运行方式–>Web应用程序，或者快捷键Ctrl + R（在浏览器内运行）。建议不同的资源分门别类（不同的文件夹）储存。
（3）注释：<!--文字-->，可以换行，单行注释和多行注释使用的符号相同。注释不会降低页面解析的速度。快捷键Ctrl + /。
（4）charset 字符集，记事本字符集默认utf-8。
3.基本标签
<!DOCTYPE html>DOCTYPE文档类型，告诉浏览器执行什么样的标准；html说明文档类型为html5。
charset 字符集，默认类型utf-8。
（1）标题标签：H1–H6，字体加粗、变大（大小可以通过CSS改变），并且可以换行（独占一行）（Enter不能实现换行）。一般一个网页中H1标签只有一个；
（2）段落标签
<p></p>：换行
<br/>：换行
（3）<hr/>：水平线
段落标签练习：
<body>
<h1>人物简介</h1>
<p>
<b>李清照</b><em>（1084年3月13日~1155年5月12日）</em>
，宋代女词人，号易安居士，婉约词派代<br/>
表，有“千古第一才女”之称。早期生活优裕，金兵入据中原时，流寓南方，境遇孤苦<br/>
。所作词，前期多写其悠闲生活，后期多悲叹身世，情调伤感。形式上善用白描手法，<br/>
自辟途径，语言清丽。论词强调协律，崇尚典雅，提出词“别是一家”之说，反对对作<br/>
诗文之法作词，留有诗集《易安居士文集》、《易安词》等。
<hr/>
©西安欧鹏版权所有
</p>
</body>
4.文本标签（仅作一了解，页面效果主要通过CSS实现）
（1）<strong></strong>：强调内容（加粗）
（2）<b></b>：加粗
（3）<em></em> 、<i></i>：斜体
<body>
<!--strong 强调、加粗效果-->
陕西西安
陕西<strong>西安</strong>
<b>陕西</b>
<!--斜体-->
<em>西安</em>
<i>陕西西安</i>
</body>
5.特殊字符、转义字符
（1）< ：小于符号；
（2）> ：大于符号；
（3） ：空格；
（4）© ：版权符号 ©。
特殊字符、转义字符练习：
<body>
<!-- < -->
<
<!-- > -->
>
<!--空格-->
abv cvb
<!--版权符号©-->
©
</body>
6.图片标签
调用图片格式：<img src=”路径/图片.jpg”>。
如果图片不在同一文件夹下，需要从.html文件的当前位置来检索图片所在位置，如：
图片标签.html文件在html文件夹下，preview.jpg跟html文件夹属于同级目录，需要先向上一级目录检索，再调用图片，即<img src=”../preview.jpg”>，…表示上一级目录。
另外，还可以调整图片链接的属性：
（1）alt=”” ：当图片显示不出来时，则显示alt里的内容；如果图片正常显示，alt内容不显示。
（2）title=”” ：鼠标悬浮时的提示语。
（3）width=”” 、hight=”” ：改变图片的宽和高，单位为px，实际上只用调整其中一个属性就可以改变图片比例。
<body>
<!--相对路径，从当前文件出发，可以直接放在根目录下-->
<!--..表示上一级目录-->
<!--alt 当图片源显示不出来，则显示alt里的内容；图片正常显示时，alt内容不显示-->
<!--title 鼠标悬浮时的提示语-->
<!--width height 改变图片尺寸-->
<img src="../preview.jpg"
alt="这里是一张HALO图片"
title="光环"
width="400px"
hight="400px"/>
<!--只调整宽度或者高度，即可调整图片比例-->
</body>
7.超链接标签
功能：在页面间实现跳转。
<a></a>：建立超链接，尖括号中间输入注释文字或者图片、视频等。
<a>可以输入一些属性，必须在尖括号内输入：
（1）href=”” ：跳转命令，双引号中间是跳转的目标，可以是别的.html文件或者网页链接。
（2）href=”#” ：不刷新页面，回到页面顶部。
（3）href=”” ：刷新当前页面。
（4）onclick=”window.close()” ：当鼠标放在链接上时，箭头变为一个小手，点击时关闭页面。
（5）target=”_self” ：在原网页显示跳转的新网页，可以与href配合使用。
（6）target=”_blank” ：打开一个空白标签页，可以与href配合使用。
<body>
<!--href 超链接跳转-->
<a href="html/图片标签.html">登录</a>
<!--网络地址需要带上协议名，如http://-->
<a href="http://www.bilibili.com">B站</a>
<a href="#">返回首部</a>
<!--target-->
<!--target="_blank" 打开一个名为xxx.html的空白标签页-->
<a href="文本标签.html" target="_blank">跳转</a>
<!--target="_self" 在原网页显示跳转的新网页-->
<a href="文本标签.html" target="_self">self</a>
<!--建立在图片上的超链接-->
<a href="段落标签练习-李清照简介.html"><img src="img/u=3751077413,2443383814&fm=26&gp=0.jpg"></a>
</body>
可以去掉超链接底下的横线：
</style>
a{
text-decoration: none;
}
</style>
8.结构标签
header：头部标签。
footer：底部。
section：部分，区域。
nav：导航条。
aside：侧边栏。
aticle：一块独立的区域。
9.锚链接
在起始标签中设置id属性，作为锚点，eg:<h1 id=”xxx”>，然后在想要使用跳转的位置用<a href=”#xxx”>来跳转到本页面的锚点；如果需要跨页面跳转，则需要在#前面加上目标.html文件，如：<a href=”abc.html#xxx”>。
<body>
<!--设置唯一的id属性-->
<h2 id="selflife">个人生活</h2>
<!--跳转到锚点id-->
<a href="#selflife">3.个人生活</a>
</body>
10.无序列表
用<ul></ul>建立无序列表。<li></li>定义列表项目，相当于建立了一个容器，划出一片区域来储存其中的内容。无序列表的项目前方有一个自带的点。
<body>
<h2>热门活动 更多</h2>
<!--无序列表-->
<ul>
<li>
<img src="img/img1.png">
<p>
推荐活动 | 原创音乐现金榜T榜
</p>
</li>
<li>
<img src="img/img2.png">
<p>
推荐节目 | 《TAImusic》爆笑来袭
</p>
</li>
<li>
<img src="img/img3.png">
<p>
推荐歌单 | 继续宠爱张国荣
</p>
</li>
<li>
<img src="img/img4.png">
<p>
推荐活动 | 330金属音乐巡演 成都小酒馆音乐空间
</p>
</li>
</ul>
</body>
可以去掉无序列表前面的点：
<style>
li{
list-style: none;
}
</style>
11.有序列表
用<ol></ol>建立有序列表，<li></li>定义列表项目。无序列表的项目前方有顺序的数。
举例：将无序列表中的<ul></ul>改为<ol></ol>
（1）有序列表的type属性：
<ol type="A">
<li>早晨</li>
<li>午时</li>
<li>傍晚</li>
<li>深夜</li>
</ol>
（2）项目标记的value属性，可以修改有序数的顺序
<ol>
<li value="2">早晨</li>
<li>午时</li>
<li>傍晚</li>
<li>深夜</li>
</ol>
（3）列表的嵌套
<ol>
<li>早晨</li>
<li>午时</li>
<ol type="A">
<li>早餐</li>
<li>午餐</li>
<li>晚餐</li>
<li>夜宵</li>
</ol>
<li>傍晚</li>
<li>深夜</li>
</ol>
12.定义列表
用<dl></dl>定义列表，<dt></dt>定义列表的项（标题），<dd></dd>添加列表描述。
<dl>
<dt>软件说明：</dt>
<dd>简单介绍软件的功能及基本功能</dd>
<dt>软件界面：</dt>
<dd>用于选择软件的外观</dd>
</dl>
13.表格
（1）<table></table>定义表格。
（2）<tr></tr>定义行。
（3）<th></th>定义标题行（有加粗、居中效果）。
（4）<td></td>定义单元格。
（5）colspan=”n” ：跨列，数字为跨的列数。
（6）rowspan=”n” ：跨行，数字为跨的行数。
（7）border=”n” ：表格边框粗细，边框用width调整。
<body>
<!--table 表格,border 边框-->
<table border="1">
<!--colspan 跨列，数字为跨的列数-->
<tr>
<td colspan="3">学生成绩</td>
</tr>
<!--tr 行-->
<tr>
<!--td 单元格-->
<!--rowspan 跨行-->
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>
<!--第二行-->
<tr>
<!--td 单元格-->
<!--因为1，1跨行，所以删除了2，1，避免表格错乱-->
<td>数学</td>
<td>95</td>
</tr>
</body>
14.块元素和行内元素
（1）块元素：独占一行，可以设置行高，相当于一个容器，eg：H1-H6，p，li，tr。
（2）行内元素：不换行。设置宽高无效，靠内容填充。eg：img，a，span，strong，em。
633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
