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>