前端三要素
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>
1016
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
