web前端学习笔记（三）

• 网页结构

1. header：标题头部区域的内容
2. footer：标记脚部区域的内容
3. section：web页面中的一块独立区域
4. article：独立文章内容
5. aside：相关内容或应用
6. nav：导航类辅助内容

<header class="mui-bar mui-bar-nav">
			<h2 class="mui-title">head</h2>
		</header>
		<section>
			<iframe src="https://www.bilibili.com/" 
			name="mainFrame" width="800px" height="800px" f>
			</iframe>
		</section>
		<footer>
			<h2>foot</h2>
		</footer>

效果类似如下

7. iframe内联框架
   <iframe src="path" name="mainFrame"></iframe>这个框架好神奇啊！！！
   src:是填写你要跳转到的地址
   name：表示框架标识名（应该有很多后续会表示出来）

好神奇的框架啊

8. 表单

name:

password:

表单如上所示，好吧

<!-- 表单form
		 action：想要提交的地址
		 method：提交的方法有两种
				get：可以在url中看到提交的信息，不安全但高效，不可传输大文件
				post：无法查看url中提交的信息安全，可传输大文件
				-->
				
		<form action="index.html" method="get">
			<p>name:<input type="text" name="name"/></p>
			<p>password:<input type="password" name="psw" /></p>
			<p>
				<input type="submit" />
				<input type="reset" />
			</p>
		</form>

9. 表单元素格式

• type:指定元素的类型。text,password,checkbox（多选框）,radio（单选框）,submit（提交）,reset（重置）,file,hidden,image（图片按钮）,button（普通按钮）,注意默认为text
• name：指定表单元素名称
• value:元素的初始值。注意type为radio时必须指定一个值
• size:指定表单元素的初始宽度。当tpye为text或者password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
• maxlength：type为text或者password时可以输入的最大字符数
• checked：type为radio或者checkbox的时候，指定按钮是否被选中

name:

password:

性别： 男 女 欸，就不告诉你，就是玩

爱好： sleep study chatting eatting games sports

效果如上，代码如下：

<form action="index.html" method="get">
			<p>name:<input type="text" name="name" value="one2one" maxlength="15"/></p>
			<p>password:<input type="password" name="psw" /></p>
			<p>
				性别：
				<input type="radio" name="sex" id="1" value="boy" />男
				<input type="radio" name="sex" id="2" value="girl" />女
				<input type="radio" name="sex" id="3" value="unknown" />欸，就不告诉你，就是玩
			</p>
			<p>
				爱好：
				<input type="checkbox" name="hobby" id="0" value="sleep" />sleep
				<input type="checkbox" name="hobby" id="1" value="study" />study
				<input type="checkbox" name="hobby" id="2" value="chat" />chatting
				<input type="checkbox" name="hobby" id="3" value="eatting" />eatting
				<input type="checkbox" name="hobby" id="4" value="games" />games
				<input type="checkbox" name="hobby" id="5" value="sports" />sports
			</p>
			<p>
				<input type="button" name="anniu" value="long" />
				<input type="button" name="anniu" value="short" />
				<input type="button" name="anniu" value="medium" />
			</p>
			<p>
				<input type="image" src="./resourse/images/gj.jpg" width="100" height="100"/>
			</p>
			<p>
				<input type="submit" />
				<input type="reset" />
			</p>
		</form>

• 下拉框、文本域、文件域

<!-- 下拉框 -->
			<p>国家：
				<select name="apt">
					<option value ="num" selected>无</option>
					<option value ="num" >中国</option>
					<option value ="num">巴西</option>
					<option value ="num">印度</option>
					<option value ="num">南非</option>
					<option value ="num">俄罗斯</option>
				</select>
			</p>
			<p>
				<input type="submit" />
				<input type="reset" />
			</p>
			<!-- 文本域 -->
			<hr >
			<p>
				反馈：
				<textarea name="text" rows="1" cols="20" >输入内容</textarea>
			</p>
			<hr >
			<!-- 文件域 -->
			<p>
				<input type="file" name="test"/>
				<input type="button" name="uploadfile" value="上传文件" />
			</p>

国家：
无 中国 巴西 印度 南非 俄罗斯
反馈：输入内容

• 邮箱标签、url标签、数字标签、滑块标签、搜索框标签

</p>
			<!-- 邮箱验证 -->
			<p>
				mail:
				<input type="email" name="email" id="" value="" />
			</p>
			<!-- url验证 -->
			<p>
				url:
				<input type="url" name="url" id="" value="" />
			</p>
			<!-- 数字验证 -->
			<p>
				number:
				<input type="number" name="num" id="" value="" />
			</p>
			<!-- 滑块验证 -->
			<p>
				voice：
				<input type="range" name="voice" id="" value="" />
			</p>
			<!-- 搜索框验证 -->
			<p>
				search：
				<input type="search" name="find" id="" value="" />
			</p>

效果如下：
mail:

url:

number:

voice：

search：

• 表单应用
  只读 readonly
  禁用 disable
  隐藏域 hidden

name:

性别： 男 女 欸，就不告诉你，就是玩

• 表单初级验证

1. placeholder 提示信息
   search：
   
2. required 非空判断，不能为空
   number:
   
3. pattern 正则表达式

自定义正则表达式

HTML基本的入门知识就到这里了，接下来是CSS3的学习，笔者纯属记录自己的学习笔记，不喜勿喷，初次记录还请指正。