2018-09-17 Day21-Web前端
web标准
web前端的内容：HTML、CSS、JavaScript
web标准（万维网指定的）中规定HTML是结构标准，CSS是表现标准，JS是行为标准。
- HTML结构标准：规定了网页上能够显示的内容，比如显示文字、图片、视频、Flash、按钮、输入框等...
- CSS表现标准：规定了网页的内容的布局和样式，比如内容该显示在什么位置，内容是什么颜色、大小等...
- JS行为标准：规定网页的内容在什么情况下发生什么样的变化（动态变化）。
HTML
HTML又叫超文本标记语言（不同于编程语言）
H5：
狭义 --> 指html第5个大的版本
广义 --> 指的是 html5 + CSS3 +JavaScript
1、HTML文件结构 （由不同的标签组成）
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
内容可见
</body>
</html>
2、HTML中的标签
网页中的内容就是通过HTML中不同的标签（标记）来确定。
标签语法：
a、双标签（常规标签）：
<标签名 属性1=属性值1 属性2=属性值2 ……> 标签内容 </标签名>
b、单标签：
<标签名 属性1=属性值1 属性2=属性值2 ……>
或者
<标签名 属性1=属性值1 属性2=属性值2 ……/>
说明：
<>, </>：固定写法，html中所有的标签都是写在<>中的。
标签名：不是随便命名的，而是一些固定的值。例如p标签，a标签，h1标签……
属性：属性放在开始标签中，属性名和值之间用 = 连接，多个属性之间用空格隔开。属性可以是自定义属性，也可以是标签自带属性。
标签内容：双标签才存在标签内容，标签内容可以是任何东西。
</>：结束标签，单标签没有一个单独的结束标签。
3、基本语法
HTML语法中大小写不敏感。
文件名命名要求：由字母和数字组成，但是数字不开头，一般用小写字母。网站首页一般是 index.html
<!DOCTYPE html>：用来说明当前html文件使用的版本。其中 html 代表 html5 。
4、head标签
head标签：里面的内容一般是不可见的，一般做一些网页设置性的操作。
head标签中的内容：meta标签、title标签、link标签、style标签、script标签、base标签
5、body标签
body标签：里面的内容一般是可见的，是网页中的主体
h1标签
范围：h1 - h6
<h1>我是标题1</h1>
段落
<p>文字段落</p>
注意：html中的文字是不会因为手动的回车和空格以及缩进产生空白效果。
可以通过一些特殊的符号来产生一些特殊的效果：
--> 空格
<br/> --> 强制换行
<hr> --> 水平线
文字效果
-
加粗
b标签：单纯在样式上进行加粗
strong标签：除了将文字加粗显示外，还有强调的意义。 -
倾斜
i标签：倾斜
em标签：倾斜，有强调作用
列表
ul--无序列表
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ul>
ol--有序列表
<ol>
<li>北京</li>
<li>成都</li>
<li>大连</li>
</ol>
dl--自定义列表
<dl>
<dt>A</dt>
<!--对列表进行分组-->
<dd>1</dd>
<!--分组下的内容-->
<dd>2</dd>
<dt>B</dt>
<dd>one</dd>
<dd>two</dd>
</dl>
图片
img标签 --> 单标签
<img src="img/guidao.jpg" title="鬼刀" alt="加载失败"/>
<!--
src属性：图片地址
title属性：鼠标放上去显示信息
alt属性：用来设置图片加载失败的时候的提示信息
-->
超链接
href属性
<a href="http://www.baidu.com">百度</a>
<a href="">刷新</a>
<a href="#1">第一张</a>
<!--
href属性：跳转到目标对应的地址
如果href属性值为空，对应是刷新功能
选择器：可以跳转到对应位置（在之前标签设置id值）
-->
target属性
<a target="_self"></a>
<!--默认当前页面刷新出指定内容-->
<a target="_blank"></a>
<!--创建一个新的页面，在新的页面中刷新出指定内容-->
表格
table标签、tr标签、td标签、th标签
快捷创建表格：table>trn>trm 然后tab补全。
创建一个n行m列的表格
表格边框为1处理：边框设置为0，表格颜色和单元格颜色不同即可。
<table border="1" bordercolor="red" bgcolor="aquamarine" align="center" cellspacing="1" cellpadding="1">
<tr><th>成绩表</th></tr>
<tr>
<td>姓名</td>
<td>成绩</td>
<td>是否留级</td>
</tr>
<tr>
<td>星辰</td>
<td>90</td>
<td>否</td>
</tr>
<tr>
<td>云落</td>
<td>85</td>
<td>否</td>
</tr>
</table>
<!--
table：表格整体
border：表格边框宽度
bordercolor：表格颜色
bgcolor：背景颜色
cellspacing：单元格和单元格之间的间隙
cellpadding：单元格和内容之间的间隙
tr：行
td：单元格
th：表头
align：设置对齐方式（可以作用于表，行，单元格）
-->
复杂表格的过程：
先确定表格最多有多少行，再确定每行有多少个单元格再确定每个单元格是否有合并现象，如果有就设置单元格的colspan属性，如果有列合并就设置单元格rowspan属性。
