web前端学习-第二天

基础标签

标题标签 h1-h6

h1-h6 语义越来越轻
页面上只有一个h1标签

		<h1 id="head">我是h1</h1><!--标题标签-->
		<h2>我是h2</h2>
		<h3>我是h3</h3>
		<h4>我是h4</h4>
		<h5>我是h5</h5>

段落标签 p

一段一段文字的时候使用

		<h3>登鹳雀楼</h3>
		<p>白日依山尽</p>
		<p>黄河入海流</p>
		<p>欲穷千里目</p>
		<p>更上一层楼</p>

链接标签 a

页面间的跳转
页面内的跳转

		<a href="http://www.baidu.com" title="点击前往百度" target="_blank">百度</a>
		<a href="#head">回到顶部</a>

href：目的地，跳转后的URL地址
title：鼠标悬停显示的内容
target：设置跳转的方式
_self：在当前页面中打开；（默认值）
_blank：在新的页面里打开

图片标签

上一级目录：…/
当前目录：./

<img src="./img/妮蔻.png" alt="图片加载失败" title="妮蔻">

src:设置显示
alt:当图片加载失败的时候，显示的内容

列表标签

顺序：order
没有顺序：unorder
列表：list
项目（一项一项）：item

有序 ol

选择你的身高(单位：cm)
		<ol type="I" start="2">
			<li>160以下</li>
			<li>160~170</li>
			<li>170~180</li>
			<li>180+</li>
		</ol>

type：计数方式（A ~ Z，a~z，1-2-3-4，I、II、III、IV，等）
start：开始的序数

无序 ul

不能有的坏习惯
		<ul type="square">
			<li>黄</li>
			<li>赌</li>
			<li>毒</li>
		</ul>

（1） 每一个项目前面有一些符号
（2） 可以通过type属性去设置符号的类型（方块，圆）

表单标签

表单

什么是表单：手机用户编写的信息并将其信息提交给后台服务器
就是将数据丢给后台：
你的后台在哪里：URL 地址 ->action
提交的方式：get/post ->method

<form action="#" method="get">

</form>

get与post的区别
（1） get的不安全，数据在URL中
（2） get传输的数据量较小，浏览器对URL地址的长度有限制的
（3） get的效率高

文本输入框 text

文本:<input type="text" name="name" />

密码框 password

<input id="pwd" type="password" name="pwd" />

label

一般和input标签配合使用，点击label的时候，队友input的可以获取焦点

<label for="pwd">密码:</label>

提交 submit

<input type="submit" value="提交按钮">

普通按钮 button

<input type="button" value="我是按钮">

重置按钮 reset

<input type="reset" value="重置按钮">

单选按钮

		性别：
			<input type="radio" name="sex">男
			<input type="radio" name="sex">女

多选按钮（复选框）

		爱好：
			<input type="checkbox" name="like">黄
			<input type="checkbox" name="like">赌
			<input type="checkbox" name="like">毒

下拉列表 select

			地址：
				<select name="addr">
					<option>南昌</option>
					<option>九江</option>
					<option>上饶</option>
					<option>萍乡</option>
					<option>宜春</option>
					<option>赣州</option>
				</select>

文件选择 file

头像：<input type="file">

button按钮

	<input type="button" value="input按钮"><br>
	<button>button按钮<img src="img/妮蔻.png" alt=""></button>

Button标签的按钮，按钮上内容可以是任意内容（图片，文字）
Input标签的按钮，按钮的内容只能是文字

隐藏域

这个标签是隐藏的，看不到
不喜欢被人看到，但是程序的运行需要用到它