前端三要素
html(搭建页面的骨架) css(修饰页面) js(交互)
html
1.开发环境搭建
编辑器:vscode 代码编写的地方
sublime 体积小,运行速度快
idea
文本编辑器 没有代码提示以及插件
浏览器:火狐 代码执行的地方
谷歌
IE
部署环境:apache 代码部署的地方
三拨人
w3c 制定规范或者标准
浏览器厂商 火狐,谷歌,微软等
程序员 使用者
2.介绍
作用:搭建页面的骨架
html:超文本标记语言
html文件的后缀名:.htm ,html
3.html文档结构
utf-8
unicode 万国码
big5 大5码
<!-- 文档的声明 html5的文档-->
<!DOCTYPE html>
<!-- html文档的根元素 -->
<html lang="en">
<!-- 头部 定义了一些文档的配置 -->
<head>
<!-- 定义文档的字符集 -->
<meta charset="UTF-8">
<!-- 定义IE浏览器的兼容性 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 定义了响应式 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 文档的标题 -->
<title>hello</title>
</head>
<body>
<div>hello</div>
<div>你好</div>
hello world!
</body>
</html>
4.语法
注释
<!-- --> (快捷键ctrl+/)
注释内容不会被就蓝旗解析
作用 :
可以记录你的编程思路
便于后期代码的维护
元素
开始标签+结束元素+内容+属性 (双标签元素)
开始标签+属性 (单标签元素)
属性
写在开始标签中
属性 = 属性名 + 属性值
属性名与属性值使用等号分隔 属性值是用引号(双引号或者单引号)包起来
核心属性 : 每一个元素都可以拥有
id : 元素的唯一值(JS)
tilte : 提示信息
class : 类名(CSS选择器)
style : 定义一些样式
特有属性 : 某些元素特有的属性
charset : 设置字符集
src :路径
alt :
空白,实体
空白 : 无论有多少空格,浏览器都会按一个空格来处理
实体 :
空格 :
< : <
" : "
& : &
> : >
' : '
5.块级元素(搭建页面的骨架)
特点 :
独占一行空间
默认宽度为父元素的100%,高度由内容或者子元素决定
块级元素可以设置宽高
div : 无意义的块级元素(没有任何的默认样式)
p : 段落标签 默认有一个margin-top和nargin-botoom
h1-h6 :标题 默认由字体大小和字体宽度,外边距
ul 无序列表
子元素 li
ol 有序列表
子元素 li
dl 列表
dt 标题
dd 列表项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>块级元素</title>
</head>
<body>
<div class="top" style="width: 30px;height: 30px;background-color:cornflowerblue;">123</div>
<div class="botoom" style="width: 30px;height: 30px;background-color:cornflowerblue;">234</div>
<p>普通标签</p>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
</ul>
<ol>
<li>html</li>
<li>css</li>
<li>js</li>
</ol>
<dt>
<dt>前端</dt>
<dd>html</dd>
<dd>css</dd>
<dd>js</dd>
<dt>后端</dt>
<dd>java</dd>
</dt>
</body>
</html>
6.行内元素(装饰性)
特点
共享一行空间,如果一行放不下,则换行显示
默认宽度,高度 : 由内容决定
默认不能设置宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内元素</title>
</head>
<body>
<span id="top">我是一个行内元素</span>
<span>我也是一个行内元素</span>
<a href="https://www.baidu.com">百度一下</a>
<a href="./块级元素.html">块级元素</a>
<!--<div style="height: 2000px;">yuan</div>
<a href="#top">回到顶部</a>-->
<a href="mailto:1669581194@qq.com">发邮件给tom</a>
<strong>cctv</strong>
<i>cctv</i>
<u>cctv</u>
<sub>cctv</sub>
<sup>cctv</sup>
<img width="500px" height="300ox" src="./IMG_20210730_114423.jpg" alt="图片被偷了">
</body>
</html>
span : 无意义的行内元素
a : 超链接
超链接(绝对路径,相对路径)
锚点
为目标元素定义一个ID值,写一个a标签,给a标签的href属性写上目标元素的ID值(#id值)
发送邮件
href="mailto:邮箱地址"
img 图片
src : 图片的路径
alt :当图片加载失败的时候替代图片的文字
width : 宽度
height : 高度
7.元素的使用策略
使用块级元素搭建页面的骨架,使用行内元素去装饰
不知道使用什么元素的时候就用div
不知道用什么行内元素的时候就用span
8.路径
绝对路径 :
以/ 根目录 开始
相对路径 ;
以./ 当前目录 ../ 上级目录 开始
9.h5新增的语义化标签
作用: 能够更好的阅读代码
有助于搜索引擎搜索
<header>hello</header>
<div class="header">hello</div>
header
nav : 导航
功能元素
10.表格
作用 : 用来展示数据
table : 根元素 border:边框 width:宽度 cellspacing:单元格和单元格的距离 cellpadding:单元格和内容的距离 bgcolor:背景颜色
thead : 表头
tr : 行
th : 单元格
tbody : 表体
tr : 行
td : 单元格 colspan:跨列数 rowspan:跨行数
课程表案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>课程表</title>
</head>
<body>
<table border="1" width="100%" cellspacing='0px' cellpadding='20px'>
<thead>
<tr>
<th colspan="6">Web2106课程表</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td></td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr>
<td>第一节课</td>
<td>html</td>
<td>html</td>
<td>html</td>
<td>html</td>
<td>html</td>
</tr>
<tr>
<td>第二节课</td>
<td>css</td>
<td>css</td>
<td>css</td>
<td>css</td>
<td>css</td>
</tr>
<tr>
<td>第三节课</td>
<td>js</td>
<td>js</td>
<td>js</td>
<td>js</td>
<td>js</td>
</tr>
<tr>
<td>第四节课</td>
<td>vue</td>
<td>vue</td>
<td>vue</td>
<td>vue</td>
<td>vue</td>
</tr>
<tr>
<td>第五节课</td>
<td>晚自习</td>
<td>晚自习</td>
<td>晚自习</td>
<td>晚自习</td>
<td>晚自习</td>
</tr>
</tbody>
</table>
</body>
</html>
简历案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简历表</title>
</head>
<body>
<table border="1" width=1000px height=1000px cellspacing='0px' cellpadding='10px'>
<thead>
<tr>
<th colspan="7">大学生求职简历表格</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>姓名</td>
<td > </td>
<td>性别</td>
<td > </td>
<td>民族</td>
<td > </td>
<td rowspan="5" > </td>
</tr>
<tr>
<td>出生日期</td>
<td></td>
<td>体重</td>
<td></td>
<td>身高</td>
<td></td>
</tr>
<tr>
<td>婚姻状况</td>
<td></td>
<td>健康状况</td>
<td></td>
<td>政治面貌</td>
<td></td>
</tr>
<tr>
<td>专业</td>
<td></td>
<td>毕业时间</td>
<td></td>
<td>学历</td>
<td></td>
</tr>
<tr>
<td>毕业学校</td>
<td colspan="2"></td>
<td>籍贯</td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="7" >特长及爱好</td>
</tr>
<tr>
<td>英语水平</td>
<td colspan="6"></td>
</tr>
<tr>
<td>计算机水平</td>
<td colspan="6"></td>
</tr>
<tr>
<td>获奖情况</td>
<td colspan="6"></td>
</tr>
<tr>
<td>特长爱好</td>
<td colspan="6"></td>
</tr>
<tr>
<td colspan="7">专业背景</td>
</tr>
<tr>
<td>时间</td>
<td colspan="2">院校</td>
<td colspan="2">专业</td>
<td colspan="2">学历</td>
</tr>
<tr>
<td></td>
<td colspan="2" height=15px></td>
<td colspan="2"height=15px></td>
<td colspan="2"height=15px></td>
</tr>
<tr>
<td></td>
<td colspan="2"height=15px></td>
<td colspan="2"height=15px></td>
<td colspan="2"height=15px></td>
</tr>
<tr>
<td>专业课程</td>
<td colspan="6"></td>
</tr>
<tr>
<td colspan="7">获取经验</td>
</tr>
<tr>
<td>时间</td>
<td colspan="3">地区或单位</td>
<td colspan="3">实践内容</td>
</tr>
<tr>
<td></td>
<td colspan="3"height=15px></td>
<td colspan="3"height=15px></td>
</tr>
<tr>
<td></td>
<td colspan="3"height=15px></td>
<td colspan="3"height=15px></td>
</tr>
<tr>
<td colspan="7">联系方式</td>
</tr>
<tr>
<td>通讯地址</td>
<td colspan="3"></td>
<td>联系电话</td>
<td colspan="2"></td>
</tr>
<tr>
<td>电子邮箱</td>
<td colspan="3"></td>
<td>QQ号码</td>
<td colspan="2"></td>
</tr>
<tr>
<td>自我评价</td>
<td colspan="6"></td>
</tr>
<tr>
<td>其他</td>
<td colspan="6"></td>
</tr>
</tbody>
</table>
</body>
</html>
11.表单
作用:收集用户信息,与后台交互
http 超文本传输协议
基于请求和响应的这种模式
报文:请求报文,响应报文
请求报文:请求行,请求头,请求体
请求行:请求方式,请求的地址(URL),协议的版本
请求头:一个一个的键值对
请求体:请求参数
get请求的请求参数不放在请求体中,拼接到URL上
post请求参数放在请求体中
响应报文:响应行,响应头,响应体
响应行:协议的版本,状态码
响应头:一个一个的键值对
响应体:相应的内容
form : (单行,多行文本输入框,单选按钮,多选按钮,下拉菜单)
表单控件
input表单控件
input控件用于接受来自用户的数据
type属性,用于设定控件类型,取值如下:
text : 当行文本框
password : 密码框,输入的内容将会被遮挡
checkBox : 复选框,必须使用value属性来描述该组件提交的值,使用checked属性
radio : 单选按钮,必须使用value属性来描述该控件所提交的值
submit : 提交按钮
reset : 重置按钮
file : 文件按钮,该控件用于选中文件系统中的某个文件
hidden : 隐藏按钮,该控件不显示在页面中,但是其值会被提交
image : 图像按钮,必须使用src来加载图片,使用alt来声明替代文件
button : 普通按钮
input表单控件
input控件用于接受来自用户的数据,其他可用属性如下
name : 用于设定控件名和提交数据的属性名
value : 用于控件的值初始化,可选 涉及到用户输入时,当涉及到选择时必须选
checked : 单选框,复选框默认选中属性
disabled : 表示禁用组件,禁用的组件也不能被提交
size : 当前控件的初始宽度,这个宽度以像素为单位,除非控件为text,password等
maxlength : 指定可以输入的字符的最大值,适用于控件类型为text,password
select 下拉菜单
option : 下拉菜单的每一项
textarea : 多行文本域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form</title>
</head>
<body>
<!-- 表单开始 -->
<form action="http//172.0.0.1:9090/api" method="POST">
<label >用户名 :</label>
<input type="text" name="username">
<!-- 密码隐藏 -->
<label >密码:</label>
<input type="password" name='password'>
<!-- 单选 -->
<label >性别:</label>
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<!-- 多选 -->
<label >爱好:</label>
<input type="checkbox" name="hobby" value="b">篮球
<input type="checkbox" name="hobby" value="f">足球
<input type="checkbox" name="hobby" value="s">游泳
<input type="checkbox" name="hobby" value="r">阅读
<!-- 下拉菜单 -->
<label >毕业院校:</label>
<select name="school">
<option value="shanxi">山西大学</option>
<option value="taiyuan">太原理工</option>
<option value="keji">太原科技</option>
<option value="zhongbei">中北大学</option>
</select>
<!-- 多行文本域 -->
<label >备注信息:</label>
<textarea name="common" cols="30" rows="10"></textarea>
<!-- 提交按钮 -->
<input type="submit" value="login">
<!-- 重置 -->
<input type="reset" value="重置">
<!-- 文件 -->
<input type="file">
<!-- 隐藏 -->
<input type="hidden">
<!-- 图片按钮 -->
<input type="image" src="../day01/IMG_20210730_114423.jpg" width="50px" height="40px">
<form action="http:localhost:8090/queryPhoto">
<input type="submit" value="查询">
</form>
</form>
<!-- 表单结束 -->
</body>
</html>