一:html标签
HyperText Markup Language:超文本标记语言,编写网页的语言,解释型语言(写出来代码直接就能运行)
那么什么是编译型语言呢,比如C语言。 C源代码 ---> 编译 ---> 二进制文件 ---> 计算机解释执行
源代码是纯文本
放在Web根目录下,以html和htm为后缀
html语言的运行环境是浏览器
标记语言
尖括号里面包含关键字
标签
标签中有属性,属性对应属性值
单标签
双标签
html文档结构
头部:文档控制信息,包括整个页面的说明和编码等等
身体:真正显示文档内容的部分
<html>
<head>
<titile>
</title>
<meta charset="utf-8">
</head>
<body>
主体代码
</body>
</html>
常用标签:
<title></title> 浏览器标签页标题
<meta charset="utf-8"> 告诉浏览器我的编码格式是utf-8
<h1></h1> 标题
<p><p> 段落
<br/> 换行标签
<span>文字</span> 完成对文字的控制
<div></div> 块级元素
<a href="http://www.xxx.com" target="_blank">点我进入下一页面</a>
超链接,从一个页面跳转到另一个页面,"_blank":在新的标签页打开。不写target就是在当前页面打开
绝对路径:"http://www.baidu.com"
相对路径:"./login.html"
<img src=""> 在页面中引入图片资源
src="" 可以写绝对路径也可以找相对路径
注释:
<!--
注释内容
-->
特殊字符,html实体
空格
< <
> >
& &
" "
二:html表格
基本表格
定义3行3列
<table> 定义表格
<tr> 定义行
<td colspan = "2">xxx</td> 定义列,colspan横跨2列,然后要记得删除一列,要不然会有“表格挤出去”的情况
<td></td>
<td></td> 若有colspan则这行注释
</tr>
<tr>
<td rowspan="2">xxx</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td> # 若有rowspan则这行注释
<td></td>
<td></td>
</tr>
</table>
三:html表单
什么是表单?
搜索框
登录框
文件上传
注册
留言板
向服务器提交信息
搜集用户信息
交互
信息双向交流
读写执行:
读取 获取信息
写入 发出信息
小技巧
管理控制台
查看器
DOM 文档对象模型 树形结构
浏览器构造的
控制台
可以执行js代码
调试器
不做前端,略过
网络
页面的网络连接
存储
存储了页面的Cookie信息等
表单本身是一个框架,表单里面会有很多控件(元素)
<form></from>
action 数据提交到服务器的url
如果为空,提交到当前页面,也可以采用绝对路径和相对路径
method 提交方法
get:url中有显示,url长度限制2KB
post:上传文件等等,http 请求正文中
enctype:
application/x-www-form-urlencoded: 默认值 特殊字符等都可以被提交
multipart/form-data: 上传文件时使用,必须要写
表单元素:
<input /> 单标签
type 属性
text 文本框
password 密码框
radio 单选框 可以追加name属性,进行分组,达到多选一的效果
checkbox 复选框
reset 重置按钮
file 文件域
hidden 隐藏内容
下拉列表
<select>
<option></option>
</select>
文本域:
<textarea></textarea>
可以输入回车换行符号
案例:
做出如下效果图
页面源码:
<html>
<head>
<title>表单</title>
<meta charset="utf-8">
</head>
<body>
<h1>用户注册页面</h1>
<form
action="#"
method="post"
enctype="multipart/form-data"
>
用户名:<input name="user" type="text" /><br />
头像上传:<input type="file" name="head_img">
<br />
密 码:<input name="passwd1" type="password" /><br />
确认密码:<input name="passwd2" type="password" /><br />
<!-- name:分组,checked:默认选项 -->
<!-- 前端页面传入后台服务器的时候,sex = 1 -->
性别:<input name="sex" value="1" type="radio" checked="checked">男<input name="sex" value="2" type="radio">女<br />
爱好:<input name="aihao1" value="cf" type="checkbox">吃饭
<input name="aihao2" value="sj" type="checkbox">睡觉
<input name="aihao3" value="dyx" type="checkbox">打游戏
<!-- 传入后台服务器的时aihao1=cf aihao2=sj aihao3=dyx,而不是把吃饭睡觉打游戏传入后台 -->
<br />
出生年月:<input type="text" name="year" size=4 />年
<select name="month">
<option value="0" selected="selected">[选择月份]</option> <!-- selected默认选项 -->
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
<option>...</option>
</select>
月
<input type="text" name="day" size=2 />日
<br />
<input type="reset" /> <!--重置按钮-->
<input type="submit" name="submit" value="提交">
同意注册协议:
<textarea name="xieyi"></textarea>
</body>
</html>
四:html iframe
iframe
在一个页面中内嵌另一个页面
<html>
<head>
<title>iframe test page</title>
<meta charset="utf-8">
</head>
<body>
<iframe src="https://www.baidu.com">
</iframe>
</body>
</html>
案例:
源代码:
<html>
<head>
<title>iframe test page</title>
<meta charset="utf-8">
</head>
<body>
<a href="http://www.baidu.com" target="my_iframe">百度</a>
<a href="http://www.qq.com" target="my_iframe">腾讯</a>
<a href="http://www.souhu.com" target="my_iframe">搜狐</a>
<iframe
name="my_iframe"
width="100%"
height="100%"
>
</iframe>
</body>
</html>
五:CSS
层叠样式脚本
HTML CSS 都是前端内容
HTML 四梁八柱
CSS 装修公司
提倡html和css分离
CSS样式
元素内容的颜色 color
元素内容的背景色 background-color
字体大小 font-size
RGB颜色查询网站:www.sojson.com/rgb.html
RGB颜色 [0-255][0-255][0-255]
比如:白色:255255255 #ffffff
黑色:000 #000000
案例:
<html>
<head>
<title>CSS</title>
<meta charset="utf-8">
</head>
<body>
<span style="color:#ffffff;background-color:black">测试文字内容</span>
</body>
</html>
css与html的三种组合方式:
1)内联方式
把样式表写在标签内部做为标签中的style的属性值
<span style="color:#ffffff;background-color:black">测试文字内容</span>
2)内部样式
把样式表写在<head>标签内
<html>
<head>
<style type="text/css">
span { #标签选择器
background-color:yellow;
}
.aaa{ # 类选择器
color:black;
background-color:red;
font-size:40px;
}
#xxx{ # id选择器
color:red;
}
</style>
</head>
<body>
<span>测试<span class="aaa">文字</span>内容内<span id="xxx">容</span>内容</span>
</body>
</html>
选择器:标签,类,id(优先级从低到高)
3)外部样式
<style type="text/css">
span { #标签选择器
background-color:yellow;
}
.aaa{ # 类选择器
color:black;
background-color:red;
font-size:40px;
}
#xxx{ # id选择器
color:red;
}
</style>
在htnl的head标签内
<head>
<link rel="stylesheet" type="text/css" href="这里写css文件的路径,可以是相对路径也可以是绝对路径">
</head>