前端授课总结

一、网页目录结构、页面结构

<!--html5的头文件-->
<!DOCTYPE html>
<!--整个页面的主体标签-->
<html>
	<!--页面的头标签,主要存放对页面的一些设置,一般不会在页面中表现出来-->
	<head>
		<!--引入css文件-->
		<link rel="stylesheet" href="css/index.css" />
		<!--设置页面的编码类型-->
		<meta charset="utf-8">
		<!--页面的标题-->
		<title>主页</title>
	</head>
	<!--页面的主题,页面的内容全部在这里书写-->
	<body>

		<p>你好</p>
	</body>
</html>

二、常见标签

mate

link

form

<!--表单-->
		<!-- 属性action定义表单提交的方向 -->
		<form action="page1.html" method="get" >
			<!-- 隐藏的input -->
			<input type="hidden" name="message" value="login" />		<br />
			<span> 用户名</span>
			<input type="text" name="fname">		<br />
			<span> 密码:</span>
			<input type="password" name="password" />		<br />
			
		<!-- 	多选框 -->
			<input type="checkbox" name="checkbox" value="1" />这是第一个		<br />
			<input type="checkbox" name="checkbox" value="2" />这是第二个		<br />
			<input type="checkbox" name="checkbox" value="3" />这是第三个		<br />
			<input type="file" value="上传" />
			
			<!-- 复选框 -->
			<select>
			  <option value ="saab">Volvo</option>
			  <option value ="saab">Saab</option>
			  <option value="saab">Opel</option>
			  <option value="saab">Audi</option>
			</select>
			
			<!-- 类型为按钮 -->
			<input type="button" value="按钮" />
			<!-- 类型为提交按键 -->
			<input type="submit" value="提交" />
			
		</form>

列表

<!-- 表格 -->
		<table>
			<tr>
				<th >第一行</th>
				<th>第一行,第二列</th>
			</tr>
			<tr>
				<th>第二行,第一列</th>
				<th>第二行,第二列</th>
			</tr>
		</table>

三、标签中的属性

属性就是定义标签所具有的特性,样式为 value="key"
例子

<!--对inpt标签进行定义类型 type 为 password 名称 name 为password-->
<input type="password" name="password" />

四、相对路径

对于路径 ./指当前文件目录下(不加./也指当前目录文件夹下)
../指返回上一级目录文件

<img src="image/1.jpg" >
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值