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属性。