- web前端学习 10节
- HTML 学习如何搭建页面结构和内容 (盖房子 毛坯房)
- CSS 学习如何美化页面 (装修)
- JavaScript 学习如何给页面添加动态效果
- jQuery JS语言框架,简化原生JS开发
- Bootstrap 前端框架对html/css/JavaScript/jQuery进行封装,目的是提高前端页面的开发效率
- 项目页面
HTML
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>
显示效果：
3.表格练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- border边框
cellspacing单元格间距
cellspacing单元格距内容的距离-->
<table align="center" border="1" cellspacing="10" cellpadding="10">
<caption>表格标题</caption>
<!-- tr表示行 th表头 td表示列 -->
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>28</td>
</tr>
<tr>
<td>2</td>
<td>尼古拉赵四</td>
<td>29</td>
</tr>
</table>
<table border="" cellspacing="" cellpadding="">
<!--colspan跨列-->
<tr><td align="center"colspan="2">1-1</td><td rowspan="2">1-3</td></tr>
<tr><td rowspan="2">2-1</td><td>2-2</td></tr>
<tr><td align="center"colspan="2">3-2</td></tr>
</table>
</body>
</html>
显示效果：
4.表单练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- action服务器地址 method提交方式 -->
<form action="http://www.tmooc.cn" method="get">
<!-- 文本框 name是对传递过去的参数做介绍 id唯一标识
value值设置文本框的值-->
名字：<input type="text" name="username"
placeholder="请输入用户名" id="" value=""/>
<br/>
密码：<input type="password" name="pwd"
placeholder="请输入您的密码" id="" value=""/>
<hr>
性别：<input type="radio" checked="checked" name="gender" id="" value="m" />男
<input type="radio" name="gender" id="" value="f" />女
<hr>
<!-- 多选和单选类似 -->
爱好: <input type="checkbox" checked="checked" name= "hobby" id=""
value="cy" />抽烟
<input type= "checkbox" name="hobby" id=""
value="hj" />喝酒
<input type="checkbox" name= "hobby" id=""
value="tt" />烫头
<!-- label扩充点击范围 -->
<input type="checkbox" name="hobby" id="dbj" value="dbj"/>
<label for="dbj">大保健</label>
<hr >
<!-- 日期选择器 -->
生日：<input type="date" name="birthday" id="birthday" />
<input type="submit" value="注册"/>
<hr >
<!-- 文件选择器 -->
靓照：<input type="file" name="pic" id="pic" />
</form>
</body>
</html>
显示效果：
5.图片练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- alt：图片不能显示时显示文本 -->
<img alt="这显示不出来" src="a1.jpg">
<!-- title：鼠标悬停时显示的文本 -->
<img width="100" height="100" title="这是个头像" src="../2.jpg">
<img width="100" height="100" src="abc/3.png">
<img width="20%" height="20%" src="../imgs/4.jpg">
<!-- 绝对路径访问站外资源，又称为图片盗链
好处：节省本站资源
坏处：有可能找不到图片-->
<img width="20%" height="20%" src="http://cdn.tmooc.cn/bsfile//courseImg///280c6025caa14649ba86b3561db92066.jpg">
</body>
</html>
显示效果：\
未完待续…
下一节链接:
Web前端基础（02）
