day02 html常用高级标签

       通过前一天的学习，开始真正感受到这门语言的有趣之处，做任何事物都需要提起自己的兴趣，继而有动力去坚持，有目标去追逐。
        个人非常喜欢绘制，设计，架构一类的事物，那样对创新对idea有一定的挑战。html是架构一个网页的工具，各种标签就像一双手把你想要的结构描绘呈现出来。
        接着昨天的标签学习：

1、图片插入

<img src=""  alt="图片占位符" title="图片提示图">

添加图片路径：
1、网上url
2、本地的绝对路径
3、本地的相对路径

2、a标签(anchor)

1)超链接 hyperText reference

 <a href="" target="_blank">   </a>

2)定点、置顶

	<div id="demo1"></div>
	<div id="demo2"></div>
	<a href="#demo1">find demo1</a>
	<a href="#demo2">find demo2</a>

3)打电话 发邮件

	<a href="tel:15019535933" > call me </a>     
	<a href="mailto:2496964724@qq.com"> maittome </a>

4)协议限定符

3、表单标签

< form > 元素

HTML 表单用于收集用户输入。

• 前端给后端发送数据需要数据名和数据值。

	<form> </from>

表单元素

指不同类型的 input 元素、select 元素、复选框、单选按钮、提交按钮、等等。

< input > 元素

< input > 元素是最重要的表单元素，有不同的 type 属性。

类型	描述
text	定义常规文本输入。
radio	定义单选按钮输入（选择多个选择之一）
submit	定义提交按钮（提交表单）

文本输入框以及提交按钮

<input type="text"> 定义用于文本输入的单行输入字段
<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。
例：

	<form method="get" action="">
		username:<input type="text" name="username">
		password:<input type="password" name="password">
		<input type="submit" value="提交" >
	</form>

单选框

<input type="radio"> 定义单选按钮。
单选按钮允许用户在有限数量的选项中选择其中之一：

	<form>
		1、贝克汉姆<input type="radio" name="Star" value="贝克汉姆">
		2、詹姆斯<input type="radio" name="Star" value="詹姆斯">
		<input type="submit" >
	</form>

复选框

<input type="checkbox"> 定义多选按钮。
多选按钮允许用户在已有的选项中选任意个选项：

	<form>
		1、贝克汉姆<input type="checkbox" name="Star" value="贝克汉姆">
		2、詹姆斯<input type="checkbox" name="Star" value="詹姆斯">
		3、成龙<input type="checkbox" name="Star" value="成龙">
		<input type="submit" >
	</form>

默认选中

	checked="checked"

	<form>
		male:<input type="radio" name="SEX" value="male" >
		female:<input type="radio" name="SEX" value="female" checked="checked">
		<input type="submit">
	</form>

< select >元素

<option> 元素定义待选择的选项。
列表通常会把首个选项显示为被选选项，能通过添加 selected 属性来定义预定义选项。

	<form>
		<select name="province">
			<option value="Beijing">北京</option>
			<option value="Shanghai">上海</option>
			<option value="Guangzhou" selected>广州</option>
		</select>
		<input type="submit">
	</form>

< button > 元素

<button> 元素定义可点击的按钮。

<button type="button" onclick="alert('Hello World!')">点击</button>

< textarea > 元素

<textarea> 元素定义多行输入字段（文本域）。

<form>
	<textarea name="message" rows="10" cols="30">
		这里可输入多行文本。
	</textarea>
</form>

用户输入关键字框小功能

<form>
	username<input type="text" name="username" value="请输入关键字" style="color: #999" onfocus="if(this.value=='请输入关键字'){this.value='';this.style.color='#424242'}" onblur="if(this.value==''){this.value='请输入关键字';this.style.color='#999'}">
	password<input type="password" name="password" value="请输入密码" style="color:#999" onfocus="if(this.value=='请输入密码'){this.value='';this.style.color='#424242'}" onblur="if(this.value==''){this.value='请输入密码';this.style.color='#999'}">
	<input type="submit" >
</form>

       通过实现了一个网页输入框常有的一个小功能，我明白了真正的编程=思想逻辑＋编辑工具。将脑子里想要实现的创新功能的思想量化出来，通过编程工具转化为计算机语言。
       编程的思想非常重要，没有看一眼就能建成的大楼，都是在编程的过程中发现问题解决问题，不断地完善过程，最后得到用户体验满意度的提升。

                                                    				  2018.9.14