html&css简介

 

1. 网页组成部分
　　* 结构html:Hyper Text Markup Language,超文本标记语言，HTML是网页内容的载体，内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

　　* 表现css：Cascading Style Sheets,层叠样式表，CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

　　* 行为javaScript(jQuery)：JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有购物网站中图片的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的

　　* 一个良好的网页，需要结构表现行为，解耦。

2.HTML简介：
　　* HTML是用来描述网页的一种语言。
　　* HTML指的是超文本标记语言 (Hyper Text Markup Language)
　　* 超文本就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素
　　* HTML不是一种编程语言，而是一种标记语言 (markup language)
　　* 标记语言是一套标记标签 (markup tag)
　　* HTML使用标记标签来描述网页

3. HTML语法
　　* HTML有两种标签，一种叫有开始有结束的标签，另外一种叫自结束标签
　　* HTML标签不区分大小写
　　* HTML标签可以嵌套，但不能交叉嵌套
　　* HTML标签必须正确关闭
　　* HTML属性必须有值，且必须加双引号
　　* HTML注释不能嵌套

3.1. 常用标签
　　* 标题标签
　　　　* 语法：h1-h6
　　* div标签
　　　　* 语法：div
　　　　* 作用：无实际意义，布局
　　* 段落标签
　　　　* 语法：p
　　* 转义字符
　　　　* 语法：以&开头，以；结束
　　　　* 常用
　　　　　　* 空格： 普通空格  中文空格
　　　　　　* 大于号：>
　　　　　　* 小于号：<
　　　　　　* 版权符：©
　　* 列表
　　　　* 有序
　　　　　　<ol>
　　　　　　　　<li></li>
　　　　　　</ol>
　　　　* 无序
　　　　　　<ul>
　　　　　　　　<li></li>
　　　　　　</ul>
3.2. 重点标签
　　* 插入图片
　　　　* 语法：<img src="路径" alt="路径有误时的提示文本" title="鼠标悬停时的提示文本">
　　　　* 路径问题
　　　　　　* 目标文件与当前文件在同包，直接查找目标文件
　　　　　　* 目标文件与当前文件不在同包，先找目标文件的父包，再找目标文件。
　　　　　　* 返回上一级： ../
　　* 超链接
　　　　* 语法：<a href="链接路径" target="链接以何种方式打开（_self|_blank）">文本</a>
　　　　* eg:<a href=""><img src=""></a>
　　* 表格
　　　　* 语法
　　　　　　<table>
　　　　　　　　<tr>
　　　　　　　　　　<th></th>|<td></td>
　　　　　　　　</tr>
　　　　　　</table>
　　　　* 跨行跨列
　　　　　　* 跨行：rowspan
　　　　　　* 跨列：colspan
　　* 表单
　　　　* 语法
　　　　　　<form action="表单提交路径" method="提交方式（get|post）">
　　　　　　　　<input>
　　　　　　　　<select>
　　　　　　　　　　<option></option>
　　　　　　　　</select>
　　　　　　</form>
　　　　* input标签中的属性：
　　　　　　type表单项的类型:text|password|radio|checkbox|reset|submit
　　　　　　file文件域
　　　　　　hidden隐藏域
　　　　　　name名称：无name，就无法提交该数据
　　　　　　value值：text|password默认值，sumbit按钮的文本值
　　　　　　checked: radio&checkbox:默认选中
　　　　　　id:唯一

4. CSS
　　* 简介：Cascading Style Sheets层叠样式表
　　* 作用：美化html
　　* 语法：选择器{声明;声明2}
　　　　　　eg: p{color:red} #id{color:#ff0000}
　　* 选择器
　　　　* 标签选择器
　　　　* 类选择器
　　　　* id选择器
　　　　* 优先级：id>类>标签
　　* css嵌入方式
　　　　* 行内：style属性中
　　　　* 内部：style标签中
　　　　* 外部：xxx.css文件中（建议使用）
　　　　* css颜色值
　　　　　　* red
　　　　　　* 十六进制：#ff0000,取值范围0-ff
　　　　　　* rgb():rgb(255,0,0),取值范围0-255