前端学习笔记|尚硅谷前端入门html+css|HTML4（三）

视频地址：尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频

---

1 表单

定义：网页中的一个交互区域，用于收集用户提供的数据

1.1 基本结构

<!--按照后端定义提交表单数据（name="wd"）-->
<form action="https://www.baidu.com/s" target="_blank" method="get">
    <input type="text" name="wd">
    <button>去百度搜索</button>
</form>

1.2 常用表单控件

1.2.1 输入框

<!--文本输入框-->
<input type="text">
<!--密码输入框）-->
<input type="password">

常用属性：

1. name：数据名
2. value：默认输入值
3. maxlength：最大可输入长度

1.2.2 单选框/多选框

<!--单选框-->
<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男
<!--多选框）-->
<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头

常用属性：

1. name：数据名，注：想要单选，多个radio的name属性值要一致
2. value：提交的数据值
3. checked：默认选中

1.2.3 隐藏域

<input type="hidden" name="tag" value="100">

用户不可见的输入区域，用于提交表单时携带固定数据，可简单地接口校验
常用属性：

1. name：数据名
2. value：真正提交的数据

1.2.4 按钮

<!--提交按钮-->
<input type="submit" value="点我提交表单">
<button>点我提交表单</button>
<!--重置按钮-->
<input type="reset" value="点我重置">
<button type="reset">点我重置</button>
<!--普通按钮-->
<input type="button" value="普通按钮">
<button type="button">普通按钮</button>

注意：

1. button 标签 type 属性的默认值是 submit ；
2. button 不要指定 name 属性；
3. input 标签编写的按钮，使用 value 属性指定按钮文字。

1.2.5 文本域

<textarea name="msg" rows="22" cols="30">我是文本域</textarea>

常用属性：

1. rows :指定默认显示的行数，会影响文本域的高度；
2. cols :指定默认显示的列数，会影响文本域的宽度；
3. 不能编写 type 属性，其他属性，与普通文本输入框一致。

1.2.6 下拉框

<select name="place">
    <option value="鲁">山东</option>
    <option value="晋" selected>山西</option>
    <option value="冀">河北</option>
</select>

常用属性：

1. name :指定数据的名称。
2. option 标签设置 value 属性，如果没有 value 属性，提交的数据是 option 中间的文字；如果设置了 value 属性，提交的数据就是 value 的值(建议设置 value 属性)
3. option 标签设置了 selected 属性，表示默认选中。

1.3 禁用表单控件

<input type="text" disabled>

1. 给表单控件的标签设置disabled即可禁用表单控件；
2. input、textarea、button、select、option都可以设置disabled属性。

1.4 label标签

label标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。两种与label关联方式如下：

1. 让label标签的for属性的值等于表单控件的id。
2. 把表单控件套在label标签的里面。

<label for="zhanghu">账户：</label>
<input id="zhanghu" type="text" name="account"><br>

<label>
密码：
<input id="mima" type="password" name="pwd"><br>
</label>

1. 给表单控件的标签设置disabled即可禁用表单控件；
2. input、textarea、button、select、option都可以设置disabled属性。

1.5 fieldset与legend标签（了解）

fieldest可以为表单控件分组、legend标签是分组的标题。

<fieldset>
   	<legend>主要信息</legend>
    <label for="zhanghu">账户：</label>
    <input id="zhanghu" type="text" name="account"><br>
    <label>
        密码：
        <input id="mima" type="password" name="pwd"><br>
   	</label>    
    性别：
    <input type="radio" name="sex" value="female">女
    <input type="radio" name="sex" value="male">男<br>
</fieldset>

1.6 表单总结

2 框架标签iframe

 <!-- 利用iframe嵌入一个普通网页 -->
<iframe src="https://www.taobao.com" width="1000" height="400" frameborder="0"></iframe>
<!-- 利用iframe嵌入一个其他内容(浏览器能打开的都可嵌入：jpg、gif、PDF、MP4、zip) -->
<iframe src="./test.jpg" width="1000" height="400" frameborder="0"></iframe>
<!-- iframe与超链接配合展示 -->
<a href="https://www.taobao.com" target="taobao">点我逛淘宝</a><br>
<iframe name="taobao" frameborder="0" width="1000" height="500"></iframe>
<!-- iframe与表单配合展示 -->
<form action="https://search.jd.com/search" target="container">
    <input type="text" name="keyword">
    <input type="submit" value="搜索">
</form>
<iframe name="container" frameborder="0" width="900" height="600"></iframe>

注意：不是所有的网页都可以嵌入部分网站有访问限制。

3 字符实体

1. 在 HTML 中我们可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容，就是 HTML 实体。比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体。
2. 字符实体由三部分组成:一个&和一个实体名称(或者一个 #和 一个实体编号)，最后加上一个分号;。
3. 常用字符实体：
   
4. 完整列表参考（MDN可查）：字符实体

4 全局属性

常用全局属性：

完整列表参考（MDN可查）：全局属性

5 meta元信息（网页的基本信息）

完整列表参考（MDN可查）：meta元信息