分享程序员开发的那些事...
更新时间：2022-06-07 08:39:32
web前端学习 10节
HTML 学习如何搭建页面结构和内容 (盖房子 毛坯房)
CSS 学习如何美化页面 (装修)
JavaScript 学习如何给页面添加动态效果
jQuery JS语言框架,简化原生JS开发
Bootstrap 前端框架对html/css/JavaScript/jQuery进行封装,目的是提高前端页面的开发效率
项目页面
HyperTextMarkupLanguage: 超文本标记语言
超文本:指不仅仅是纯文本 还包括各种字体效果和多媒体(图片,音频,视频)
标记语言格式: <开始标签 属性=‘xxx’>标签体</结束标签>
学习HTML主要学习有哪些标签 以及标签的使用方式.
###创建HTML页面
###常见的文本标签
内容标题h1-h6 align=“left/right/center”;
独占一行, 字体加粗, 自带上下间距
段落标签p
独占一行,自带上下间距
水平分割线hr
加粗 b
斜体 i
小字 small
删除线 s
下划线 u
换行 br 在html页面中回车不是换行 只能识别成一个空格
###列表标签
无序列表 ul:type(控制图标) li
有序列表 ol:type(序号类型) start(起始值) reversed(降序) li
列表嵌套: 有序列表和无序列表可以任意无限嵌套
###图片标签img
src:路径
相对路径:访问站内资源时使用
页面和文件同级目录:直接写图片名
文件在页面的上一级:…/图片名
文件在页面的下一级:文件夹名/图片名
绝对路径:访问站外资源时使用
图片盗链,节省本站资源,但有可能找不到图片(原网站的图片路径发生改变则找不到该图片)
alt: 图片不能正常显示时显示的文本
title: 鼠标在图片上悬停时显示的文本
width/height: 两种赋值方式:1. 像素 2. 百分比
支持的图片格式: jpg/jpeg png gif
###超链接a
a标签包裹文本是文本超链接,包裹图片是图片超链接
href:路径 可以指向页面也可以指向其它文件(如果浏览器支持浏览此文件则直接浏览,如果不支持则下载)
页面内部跳转: 回到顶部<a href="#top">回到顶部</a>
###表格标签table
相关标签: table tr td th caption
属性: table:border边框 cellspacing单元格间距 cellpadding单元格距内容的距离 td:colspan跨列 rowspan跨行
###表单
作用: 获取用户输入的各种信息并提交给服务器
学习表单主要学习的就是表单中有哪些控件(文本框 密码框 提交按钮 单选 多选 下拉选等)
1.列表练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul type="square"> <li>裴擒虎</li> <li>上官婉儿</li> <li>吕布</li> <li>马超</li> <li>苏烈</li> </ul> <ol type="1" start="10" reverse="reversed"> <li>打开冰箱门</li> <li>把大象装进去</li> <li>关上冰箱门</li> <li>该吃饭了</li> </ol> <ul> <li>凉菜 <ol> <li>拍黄瓜</li> <li>芥末鸭掌</li> <li>花毛一体 <ul> <li>花生</li> <li>毛豆</li> </ul> </li> </ol> </li> <li>热菜 <ol> <li>红烧肉</li> <li>水煮鱼片</li> <li>地锅鸡</li> </ol> </li> </ul> </body> </html>
显示效果：
2.超链接练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <a id="top" href="01第一个页面.html">01第一个页面</a> <a href= "http://www.baidu.com">百度</a> <a href="1.jpg">图片</a> <a href="http://www.tmooc.cn"><img width="20%" height="20%"src="1.jpg"></a> <img width="20%" height="20%" src="../imgs/1.jpg"> <img width="20%" height="20%" src="../imgs/2.jpg"> <img width="20%" height="20%" src="../imgs/3.jpg"> <img width="20%" height="20%" src="../imgs/4.jpg"> <img width="20%" height="20%" src="../imgs/5.jpg"> > <!-- #代表当前页面--> <a href="#top" >回到顶部</a> </body> </html>
显示效果：