HTML和CSS
- 网页组成部分
- 结构html:Hyper Text Markup Language,超文本标记语言
- 表现css：Cascading Style Sheets,层叠样式表
- 行为javaScript(jQuery)
- 一个良好的网页，需要结构表现行为，解耦。
- HTML语法
- HTML有两种标签，一种叫有开始有结束的标签，另外一种叫自结束标签
- HTML标签不区分大小写
- HTML标签可以嵌套，但不能交叉嵌套
- HTML标签必须正确关闭
- HTML属性必须有值，且必须加双引号
- HTML注释不能嵌套
- 常用标签
-
<.!-- 注释 -->
-
标题标签
- 语法：h1-h6
-
div标签
- 语法：div
- 作用：无实际意义，布局
-
段落标签
- 语法：p
-
转义字符
- 语法：以&开头，以；结束
- 常用
- 空格：  ;普通空格（No-Break Space）
- &emsp ;中文空格（全角空格 EM space）
- 大于号：> ;
- 小于号：< ;
- 版权符：© ;
-
列表
- 有序
- < ol >
< li >< /li >
< /ol > - 无序
< ul >
< li >< /li >
< /ul >
-
-
重点标签
- 插入图片
- 语法：<.img src=“路径” alt=“路径有误时的提示文本” title=“鼠标悬停时的提示文本”>
- 路径问题
- 目标文件与当前文件在同包，直接查找目标文件
- 目标文件与当前文件不在同包，先找目标文件的父包，再找目标文件。
- 返回上一级： 。。/
- 插入图片
-
超链接
* 语法：< a href=“链接路径” target=“链接以何种方式打开（_self|_blank）”>文本
<a href="pages/target.html" target="_blank">
跳转到目标页面，目标页面有美女！
</a>
表格
* 语法
< table >
< tr >
< th >< /th > | < td >< /td >
< /tr >
跨行跨列
排列方式：align
边框：border
跨行：rowspan
跨列：colspan
<h1>三行三列</h1>
<table border = "3" width = "500px" height = "300px">
<tr align = "center">
<th>行1列1</th>
<th>行1列2</th>
<th>行1列3</th>
<th>行1列4</th>
</tr>
<!--align:排列是意思，center表示居中-->
<tr align = "center">
<td colspan = "2" rowspan = "2">行2列1</td>
<!-- <td>行2列2</td> -->
<td>行2列3</td>
<td>行2列4</td>
</tr>
<tr align = "center">
<!-- <td>行3列1</td> -->
<!-- <td>行3列2</td> -->
<td>行3列3</td>
<td>行3列4</td>
</tr>
</table>
表单
* 语法
< 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:唯一
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<!-- * 使用form标签制作表单
* 使用input标签制作表单项
* type:表单项类型
* text:文本框
* password:密码框
* reset:重置
* submit:提交
* name:名称，有name属性，才可以提交数据到目标位置
* value:值
* checked:默认选中（radio|checkbox）
* 使用select option制作表单项
* action属性:表单提交的路径（位置）
* method属性:表单提交方式
* get
* post
-->
<form action="success.html" method="post">
用户名：<input type="text" name="username"/><br/><br/>
密码：<input type="password" name="pwd"/><br/><br/>
性别：<input type="radio" name="gender" value="man" />男
<input type="radio" name="gender" value="woman" checked="checked"/>女<br/><br/>
爱好：<input type="checkbox" name="hobby" value="basketball" />篮球
<input type="checkbox" name="hobby" value="football"/>足球
<input type="checkbox" name="hobby" value="volleyball" checked="checked"/>排球
<br/><br/>
喜欢的明星：<select name="star">
<option value="fbb">范冰冰</option>
<option value="zy">杨颖</option>
<option value="zzy">章子怡</option>
</select>
<br/>
<br/>
<input type="reset">
<input type="submit">
</form>
</body>
</html>
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS基本语法</title>
<link href = "demo.css" rel = "stylesheet">
<style type="text/css">
/* p{color:red} */
.font_green{color:green}
#font_size{
font-size:36px;
color:blue
}
</style>
</head>
<body>
<!-- css:cascading style sheets(层叠样式表)
* 语法：选择器{声明;声明2}
* 选择器
标签选择器：p|h2
类选择器：
定义：.类名{}
调用：class="类名"
ID选择器：
定义：#ID名{}
调用：id="ID名"
* 颜色值
* red|green|blue
* #ff0000 = #f00 = red 取值范围:0-ff
* rgb(255,0,0) 取值范围:0-255
* css嵌入方式
* 行内
style属性
eg:style="color:blue"
* 内部
style标签
eg:
<style type="text/css">
p{color:red}
</style>
* 外部
定义：xxx.css文件
使用：<link href="demo.css" rel="stylesheet">
* 优先级：就近原则
行内>内部>外部
-->
<p>努力，加油！！！</p>
<p class = "font_green">努力学习</p>
<p id = font_size>每一天</p>
</body>
</html>
