阅读 116

Web前端基础(01)

  • web前端学习 10节
  1. HTML 学习如何搭建页面结构和内容 (盖房子 毛坯房)
  2. CSS 学习如何美化页面 (装修)
  3. JavaScript 学习如何给页面添加动态效果
  4. jQuery JS语言框架,简化原生JS开发
  5. Bootstrap 前端框架对html/css/JavaScript/jQuery进行封装,目的是提高前端页面的开发效率
  6. 项目页面

HTML

HyperTextMarkupLanguage: 超文本标记语言

  • 超文本:指不仅仅是纯文本 还包括各种字体效果和多媒体(图片,音频,视频)

  • 标记语言格式: <开始标签 属性=‘xxx’>标签体</结束标签>

  • 学习HTML主要学习有哪些标签 以及标签的使用方式.
    ###创建HTML页面

###常见的文本标签

  1. 内容标题h1-h6 align=“left/right/center”;
    独占一行, 字体加粗, 自带上下间距
  2. 段落标签p
    独占一行,自带上下间距
  3. 水平分割线hr
  4. 加粗 b
  5. 斜体 i
  6. 小字 small
  7. 删除线 s
  8. 下划线 u
  9. 换行 br 在html页面中回车不是换行 只能识别成一个空格
    ###列表标签
  10. 无序列表 ul:type(控制图标) li
  11. 有序列表 ol:type(序号类型) start(起始值) reversed(降序) li
  12. 列表嵌套: 有序列表和无序列表可以任意无限嵌套
    ###图片标签img
  • src:路径

    1. 相对路径:访问站内资源时使用

      • 页面和文件同级目录:直接写图片名
      • 文件在页面的上一级:…/图片名
      • 文件在页面的下一级:文件夹名/图片名
    2. 绝对路径:访问站外资源时使用
      图片盗链,节省本站资源,但有可能找不到图片(原网站的图片路径发生改变则找不到该图片)

  • 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)

文章分类
前端
文章标签