页面结构分析
- header :标题头部区域
- footer :标记脚部区域的内容
- section:Web页面中的一块独立区域
- article: 独立的文章内容
- aside :相关内容或应用,常用于侧边栏
- nav :导航类辅助内容
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
内联框架iframe
相当于页面里面还有页面
<iframe src="https://www.baidu.com" frameborder="0" width="500px" height="400px"></iframe>
联合a标签使用:
(name:框架标识名)
iframe的src不填写内容,设置了name的名字,而是在a标签里填写了访问地址,且用target关键字将要跳转的页面放到iframe中。
<iframe src="" name="hello" frameborder="0" width="300px" height="250px"></iframe>
<a href="https://www.baidu.com" target="hello">点击跳转</a>
点击之后:
表单form
post和get提交
action:表单提交的位置,可以是网站,也可以是一个请求处理地址
method:post,get 提交方式
get方式提交:我们可以在url中看到我们提交的信息,不安全,搞笑
post方式提交:比较安全,可以传输大文件
value:默认初始值
maxlength="8"限定最长字符
size=“文本框的长度”
<h1> 注册</h1>
<form action="1.我的第一个网页.html" method="post">
<p>名字:<input type="text" name="username" value="呵呵哒"></p>
<p>密码:<input type="password" name="pwd"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
单选框
想要有默认的一项,可以在其中写checked,该项即可被默认选中
input type=“radio”
value:单选框的值
name:表示组
<p>性别:
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
</p>
多选框
input type=“checkbox”
想要有默认的一项,可以在其中写checked,该项即可被默认选中
<p>爱好:
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby">敲代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
</p>
按钮
input type=“button” 普通按钮
input type=“image” 图像按钮
input type=“submit” 提交按钮
input type=“reset” 重置(清除表格)
input type=“file” 文件域(可以上传文件)
input type=“email” 可简单判断输入的邮件号是否合法
input type=“url” 可简单判断输入的网址是否合法
input type=“number” 可用max 和 min 关键字设置上下限,还可用step关键字进行修饰,使得输入框中有上下的按钮。如:
<input type="number" name="number" step="1" max="10" min="0" size="10">
input type=“range” 滑块。和调节音量的方式一样。可设置max min step
input type=“search” 搜索框
下拉框(select)
想要有默认的一项,可以在其中写selected,该项即可被默认选中(如下面的俄罗斯)
<p>下拉框:
<select name="这里定义列表的名称" >
<option value="这里是选项的值">中国</option>
<option value="els" selected>俄罗斯</option>
<option value="dg">德国</option>
</select>
</p>
文本域(textarea)
cols是列数,rows是行数
<p>反馈:
<textarea name="textarea" id="" cols="30" rows="10"></textarea>
</p>
表单的使用
readonly
在标签中加入该关键字之后就为只读,无法更改
disabled
在标签中加入该关键字之后就为禁用,无法使用
hidden
在标签中加入该关键字之后就为隐藏,虽然无法看见,但是确实存在
增强鼠标的可用性
用label之后,点击文字即可定位到for指向的id处的标签,增强了鼠标的可用性
<p>
<label for="mark">点击我</label>
<input type="text" id="mark">
</p>
表单的初级验证
placeholder=“。。。” 提示信息
可用在输入框中,在。。。处填写你想要告诉用户的内容。如在登录的输入框中写
placeholder=“请输入用户名”
required 非空判断
该关键字用在标签当中,是不能为空的意思。
pattern=“。。。” 正则表达式
这需要在百度上搜索你需要的正则表达式填入此中,然后限制输入的内容。