HTML进阶

一.iframe元素

框架页

通常用于在网页中嵌入另一个页面

iframe 可替换元素，iframe的src属性表示的是网页的地址，frameborder表示边框

可替换元素的特点

1. 通常行盒
2. 通常显示的内容取决于元素的属性
3. CSS不能完全控制其中的样式
4. 具有行块盒的特点（宽高都可以设置）

如果需要点击链接网页在新加的iframe元素的窗口中显示，则需要在iframe中添加name属性给它起名字，然后再需要该跳转样式的网页中添加target属性，且跳转其名字

嵌入其他网站视频
1.scrolling是否自动生成滚动条
2.framespacing为iframe元素边框到内部的空隙

二. 在页面中使用flash

嵌入flash的两个元素

1）object

可以添加子元素param表示参数，来装一些未知信息
eg：quality表示参数质量（放在name属性中），value表示水平，可以使用high
属性：
1.data:表示资源位置
2.type:用来描述资源是什么类型

标准格式MIME
MIME(Multipurpose Internet Mail Extensions)
多用途互联网邮件类型：
比如，资源是一个jpg图片，MIME：image/jpeg

2）embed

属性：用src属性表示资源的位置，他不需要写子元素，可以直接在属性中设置quality等值

它们都是可替换元素，默认行盒，所有调整都可用

为了提高兼容性可以写成

 <object data="./example.swf" type="application/x-shockwave-flash">
            <param name="quality" value="high">
            <embed src="./example.swf" type="application/x-shockwave-flash">
        </object>

套起来

三.表单元素

一系列元素，主要用于收集用户数据

1. input元素

输入框

• type属性：输入框类型

type: text， 普通文本输入框
type：password，密码框
type: date, 日期选择框，兼容性问题，改不了样式
type: search, 搜索框，兼容性问题
type: number，数字输入框

min,max表示输入数字的范围，step表示每点一次增加多少

type: checkbox，多选框
type: radio，单选框

设置name，使浏览器识别几个选项为一个组，从而实现单选。
设置checked，可以设置最开始默认选择的内容

type：range，滑块
type：color，颜色选择器

• value属性：输入框的值,即会在文本框中显示的内容（比如，请输入账号）
• placeholder属性：文本框没有内容时显示提示的文本，（只要在文本框值输入东西之前的内容就会消失）

input元素还可以制作按钮
当type值为reset、button、submit时，input表示按钮。

2. select元素

下拉列表选择框

1.通常和option元素（子元素）配合使用，option中的元素会成为选择框下面的内容，可以使用布尔属性将option中的某个元素设置为选择框中默认的内容

2.如果要给select下面的元素进行分组，则可以在select元素中添加子元素optgroup，在optgroup中设置label属性，设置分组的名字，再在optgroup元素下面设置子元素option

3.如果要在选择栏中多选则在select中设置multiple，打开页面后按中Ctrl可以进行多选，或者先选择一个再点击shift键进行多选

3.textarea元素

文本域，多行文本框
属性：
1.cols：表示有多少列
2.rows：表示有多少行

最好使用css来控制宽高，该元素没有空白折叠。

4.按钮元素

button(更加灵活)

type属性：reset、submit、button，默认值submit
建议设置属性为type=button

5.表单状态

readonly属性：布尔属性，是否只读，不会改变表单显示样式

 用户账号
            <input type="text" value="aaaa" readonly>
        </p>

这样的情况用户账号中直接出现aaaa且不可以被更改

disabled属性：布尔属性，是否禁用，会改变表单显示样式。会变得无法选择和点击。

6.配合表单元素的其他元素

1）label（重点）

可以理解它为一个表单元素的标签
普通元素，通常配合单选和多选框使用

• 显示关联

可以通过for属性，让label元素关联某一个表单元素，for属性书写表单元素id的值，并且在input里面加上id，这样之后就可以让前面的按钮和后面的文字相关联。这样之后点击文字也可以进行选择

 <input id="radMale"  name="gender"  type="radio">
<label for="radMale">男</label>  

• 隐式关联
  可以直接将input放到label元素中

<label >
        <input type="radio" name="gender">
        男
    </label>

2）datalist（了解）

(相当于搜索框中的提示词)
默认样式中有display：none，所以在页面上不显示

数据列表

该元素本身不会显示到页面，通常用于和普通文本框配合（id关联），先给datalist设置上id，然后在input当中加上属性list，填上id

 <p>
        请输入你常用的浏览器
        <input list="userAgent" type="text">
    </p>
    <datalist id="userAgent">
        <option value="Chrome">谷歌浏览器</option>
        <option value="Fire fox">火狐浏览器</option>
    </datalist>

3)form元素

通常，会将整个表单元素，放置form元素的内部，作用是当提交表单时，会将form元素内部的表单内容以合适的方式提交到服务器。
要求表单必须写上name属性

form元素对开发静态页面没有什么意义。
属性：
1.action：提交页面，如果不写会提交给当前页面
2.method：提交方式1)GET 2)POST

4）fieldset元素

表单分组
将同类的元素放入该元素中，可以为这几个元素加上一个边框表示一类。
可以加一个子元素legend来补充该类元素的相关信息（该信息会放在边框上）

四.美化表单元素

新的伪类

1. focus

元素聚焦时的样式（可以理解为文本框（或其他元素）被选中了）

:focus{outline: blue auto 5px;}

表示所有元素都加了focus样式。auto表示外边框的样式，自动的，浏览器会根据实际情况进行设置。当设置auto时，再在后面设置宽度等是无效的

文本框聚焦使用点击，其他的使用tab进行切换进行聚焦。该聚焦可以调整顺序，在需要聚焦的元素中添加属性tabindex=“1”，来进行调整。默认情况是从上到下。

• 如果希望单独进行设置，可以进行覆盖

   :focus{
            outline: blue auto 5px;
        }
        input:focus{
            outline: none;
            outline-offset：0；
        }

在单独进行设置时记得添加outline-offset：0，这表示外边框的偏移量，如果focus值为auto则不用设置，否则需要单独进行设置

2. checked

单选或多选框被选中的样式（只有单选和多选框有），但是使用

 input:checked{
            color: red;
        }

但是这样进行设置，单选框并不会发生变化，直接使用该伪类选择器可以操作的影响的很少，通常会像下面这样使用

<style>
        input:checked+label{
            color: red;
        }
    </style>

<input id="redmale" name="gender" type="radio">
        <label for="redmale">男</label>
        <input name="gender" type="radio">
        <label for="redmale">女</label>

这种形式表示选中下一个label元素，点击后会使“男”“女”变色

常见用法

1. 重置表单元素样式

input,textarea,button,select{
    border: none;
input:focus,
textarea:focus,
button:focus,
select:focus{
    outline: none;
};
}

将原有样式清除，更加方便我们书写新的样式
-设置body元素style为text-align: center，该样式表示行盒居中，包括图片等等

2. 设置textarea(多行文本框)是否允许调整尺寸

css属性resize：

• both：默认值，两个方向都可以调整尺寸
• none：不能调整尺寸
• horizontal: 水平方向可以调整尺寸
• vertical：垂直方向可以调整尺寸

3. 文本框边缘到内容的距离

调整方法：
1）padding
2)text-indent（首行缩进）
这个只能控制左边，不能控制右边，只有第一个文字缩进
3）控制单选和多选的样式
4. 控制单选和多选的样式
实际上是先做出来一个选中的样式，然后将选项和样式相关联，将原先的样式隐藏，从而实现选择的效果。
连接方式：在label中添加span，不可以是div（label中不允许加div）
利用伪类样式checked

五.表格元素

在css技术出现之前，网页通常使用表格布局。

后台管理系统中可能会使用表格。

前台：面向用户

后台：面向管理员。对界面要求不高，对功能性要求高。

表格不再适用于网页布局原因——表格的渲染速度过慢。

• 注：
  1.border-collapse表示表格折叠方式（separate表示边框分离，collapse表示折叠，即相邻合并）
  2.colspan表示跨越多少列（进行单元格的合并，前面的空白列清除后使用下面样式）rowspan表示跨越多少行，下一行可以不写了

   <td colspan="5">合计：XXX</td>

rowspan表示跨越多少行，下一行可以不写了
3.

   tbody tr:nth-child()

even表示偶数，odd表示奇数

六. 其他元素

1. abbr

缩写词

<p>
       <abbr title=".....全称">css</abbr> 是用于为页面添加样式的
    </p>

2. time

提供给浏览器或搜索引擎阅读的时间

<p>
        <time datetime="2019-5-1">今年五月</time>
        我录制了html和css的课程</p>

3. b （bold）

以前是一个无语义元素，主要用于加粗字体

4. q

一小段引用文本（页面中只会多一个双引号）

5. blockquote

大段引用的文本（只是会形成一个新的盒子包起来）

q和blockquote都有cite属性，表示链接的地址网页

6. br

无语义
主要用于在文本中换行（直接放在文本后面）

7. hr

无语义
主要用于分割（多一个横线，即分割线）

8. meta

还可以用于搜索引擎优化（SEO），更大几率被搜索到

9. link

链接外部资源（CSS、图标）

    <link rel="icon" href="123.ico">

在网页搜索图标在线制作，然后使用上面样式，图片出现在title标题上，也可以在根目录将图标名字改为favico.ico
rel属性：relation，链接的资源和当前网页的关系
（stylesheet样式表）

type属性：链接的资源的MIME类型