课程介绍
- web前端(学习如何开发网站页面)
- 数据库(学习如何对数据进行增删改查操作)
- Servlet(学习如何获取用户请求以及如何对该请求进行响应)
- vrd项目
web前端
- HTML (学习如何搭建页面结构和内容)
- CSS(学习如何美化页面)
- JavaScript (学习如何给页面添加动态的效果)
- jQuery 这是一个JavaScript语言框架, 作用是简化JavaScript代码
- Bootstrap 前端页面的综合框架, 作用:让前端页面开发变得更高效
HTML
-
Hyper Text Markup Language: 超文本标记语言
-
超文本: 不仅仅是纯文本, 还包括字体相关 以及多媒体内容(图片/音频/视频)
-
XML也是标记语言 , 区别就是 XML是可扩展标记语言, HTML里面的标签是预设好的,学习HTML实际上就是学习有哪些HTML标签 以及标签和标签之间的关系
-
创建第一个HTML页面
<!DOCTYPE html> 文档声明:告诉浏览器使用html的哪个版本解析页面
<html> 跟标签
<head> 头标签: 给浏览器看的内容在头标签里面
<meta charset="UTF-8"> 设置字符集
<title>Insert title here</title> 页面标题
</head>
<body>体标签: 给用户看的内容写在体标签内
</body>
</html>
标签
文本相关标签
- 内容标题h1-h6
特点: 独占一行,自带上下间距,字体加粗,字体大小不同 - 水平分割线 hr
- 段落标签p
特点: 独占一行,自带上下间距 - 换行br
在html中不能识别回车,回车只能识别成空格,如果需要换行使用br标签 - 加粗b 斜体i 删除线s 下划线u 小字small
列表标签
- 无序列表 ul和li
<ul type="circle"><!-- unordered list -->
<li>刘备</li><!-- list item列表 项 -->
<li>关羽</li>
<li>孙尚香</li>
<li>诸葛亮</li>
<li>刘禅</li>
</ul>
- 有序列表 ol和li
<ol type="1" start="10" reversed="reversed">
<li>Java基础</li>
<li>API</li>
<li>Web前端</li>
<li>数据库</li>
</ol>
- 列表嵌套: 有序列表和无序列表可以任意无限嵌套
<ol>
<li>凉菜
<ul>
<li>拍黄瓜</li>
<li>东北大拉皮</li>
<li>花毛一体</li>
</ul>
</li>
<li>炒菜
<ul>
<li>西红柿炒鸡蛋</li>
<li>溜肥肠</li>
<li>鱼香肉丝</li>
</ul>
</li>
<li>酒水</li>
</ol>
图片标签img
- src路径:
- 相对路径:访问站内资源使用
- 图片和页面同一目录: 直接写图片名
- 图片在页面的上级目录: …/…/图片名
- 图片在页面的下级目录: 文件夹名/图片名
- 绝对路径: 访问站外资源时使用, 称为图片盗链, 节省本站资源,但是有可能找不到图片
- alt: 图片不能正常显示时显示的文本
- title: 鼠标在图片上停止移动时显示的文本
- width/height: 设置宽高 两种方式:1. 像素 2. 上级元素百分比 如果只设置宽度 高度会自动等比例缩放
- 相对路径:访问站内资源使用
超链接a
- 如果超链接不写href属性 则就是纯文本效果
- href类似于img标签的src属性 资源路径, 如果指向的路径浏览器支持浏览则直接浏览如果不支持则下载
- 图片超链接: a标签包裹文本就是文本超链接 包裹图片就是图片超链接
- 实现页面内部跳转: 在目的地位置的元素中添加id 然后在点击的超链接里面添加 href="#xxx" 即可跳转到id对应元素的位置
- target="_blank" 在新窗口中打开页面 , 默认是从当前窗口跳转到新页面
表格标签table
- 标签: table表格 tr行 td列 th表头 caption表格标题
- 属性: table(border边框 cellspacing单元格间距 cellpadding单元格内边距) td(colspan跨列 rowspan跨行)
分区标签
-
可以把分区标签理解成是一个容器,作用就是将多个有相关性的标签放在同一个分区标签中, 便于统一管理
-
常见的分区标签有div和span
- div: 块级分区元素: 独占一行
- span:行内分区元素: 共占一行
-
如何对页面进行分区? 页面至少分为三大区,每个大区里面有多个小的分区
<div>头</div> <div>正文</div> <div>脚</div>
-
html5标准中根据分区的作用新增了一些分区元素, 目的是为了提高代码的可读性,包括:header/article/section/footer/nav导航区域
<header>头</header>
<article>正文</article> <section></section>
<footer>脚</footer>
表单form
-
表单作用: 获取用户输入的各种信息,并将信息提交给服务器
-
学习表单主要学习的就是表单中的各种控件,控件包括:文本框,密码框,单选,多选,下拉选等
-
各种控件:
<form action="https://www.baidu.com/">
<!-- type是控件的类型
name所有控件都必须写提交数据时的参数名
placeholder: 占位文本
value: 文本框的值
readonly: 只读
-->
用户名:<input type="text" name="username"
placeholder="请输入用户名"
value="abc" readonly="readonly"><br>
<!-- 密码框和文本框属性通用 -->
密码:<input type="password" name="password"
placeholder="请输入密码 "><br>
<!-- 单选和多选必须写value属性
checked 默认选中 -->
性别:<input type="radio" name="gender"
value="m" id="r1" ><label for="r1">男</label>
<input type="radio" name="gender"
value="f" id="r2" checked="checked">
<label for="r2">女</label><br>
<!-- 多选和单选属性通用 -->
爱好:<input type="checkbox" name="hobby"
value="cy">抽烟
<input type="checkbox" name="hobby"
value="hj" checked="checked">喝酒
<input type="checkbox" name="hobby"
value="tt">烫头<br>
<!-- 日期选择器 -->
生日:<input type="date" name="birthday"><br>
<!-- 文件选择器 -->
靓照:<input type="file" name="pic"><br>
<!-- 文本域 rows行 cols列 -->
自我介绍:<textarea
rows="3" cols="30" name="intro"
placeholder="说点儿啥..."></textarea><br>
<!-- 下拉选 selected默认选中-->
所在城市:
<select name="city">
<option>请选择</option>
<option value="bj">北京</option>
<option selected="selected" value="sh">上海</option>
<option value="gz">广州</option>
</select><br>
<!-- 提交按钮 -->
<input type="submit" value="注册">
<!-- 重置按钮 -->
<input type="reset" >
<!-- 自定义按钮 -->
<input type="button" value="自定义按钮">
</form>
实体引用(特殊字符)
- 空格: 如果html页面中连续出现多个空格,只能识别一个 这称为空格折叠现象,
- 小于号和大于号: < 和 >