第三周周报

最新推荐文章于 2024-10-08 10:16:40 发布

~☜~

最新推荐文章于 2024-10-08 10:16:40 发布

阅读量204

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_61601160/article/details/121757751

版权

iframe元素（可设置宽高）

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

可替换元素
1.通常行盒
2.通常显示的内容取决于元素的属性
3.CSS不能完全控制其中的样式（如同CSS不能控制一张图片中的颜色等）
4.具有行块盒特点

给此元素设置一个name（类似与class），让用户想要点击并跳转的a元素的target属性取值为name的取值这时用户点击a元素，iframe元素中显示的就是用户所点击的a元素的超链接所代表的页面

在页面中使用flash

object、embed元素

它们都是可替换元素
MIME：多用途互联网邮件类型：
比如，资源是一个jpg图片，MIME:image/jpeg

<object data="(文件名)" type="（MIME）">
   <param name="(quality画面质量)" value="（high高）"><!--告诉浏览器额外的参数-->
 </object>

 <embed src="" type="">

因为浏览器的兼容性问题，通常这样写：

<object data="(文件名)" type="（MIME）">
    <param name="(quality画面质量)" value="（high高）"><!--告诉浏览器额外的参数-->
    <embed src="" type="">
  </object>

若object能识别，embed不能做object子元素所以会被直接忽略。

表单元素

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

1.input元素(改变默认时用checked)

输入框

<input type="text">

type属性：输入框类型
value属性：输入框的值（输入框中显示的东西）
placecholder属性：显示提示的文本，文本框没有内容时显示

type：
text，普通文本输入框

<input type="text" placecholder="请输入文字">

password，密码框

<input type="passworfd" placecholder="请输入密码"><!--会将输入的东西变为字符-->

date,日期选择框（内部样式不可更改）(兼容性问题)

<input type="date">

search，搜索框（兼容性问题）

<input type="search"><!--手机键盘的换行变成搜索-->

range，滑块

<input type="range" min="0" max="5"><!--看不到效果，要用js-->

color,颜色选择（内部样式不可改）

<input type="color">

number，数字输入框

<input type="number" min="0" max="100" step="20">

checkbox,多选框

<input name ="" type="chechbox">

radio,单选框

<input name="" type="radio">

设置单选框时要让选项的name设为同一个值，让浏览器知道为同一个组，才能单选

file,选择文件

<input type="file">

input元素可以制作按钮

当type值为reset（默认重置）、button、submit（默认提交）时，input表示按钮。

2.select元素

下拉列表选择框

通常和option元素配合使用

<body>
    请选择城市
 <select>
     <option>西安</option>
     <option>咸阳</option>
     <option>渭南</option>
 </select>
    
</body>

默认改为渭南:

 <select>
     <option>西安</option>
     <option>咸阳</option>
     <option selected>渭南</option>
 </select>

分组

<body>
    请选择喜欢的主播
 <select><!--加mutiple可多选-->
     <optgroup label="才艺表演">
         <option>
             某主播
         </option>
     </optgroup>
     <optgroup label="游戏主播">
         <option>xxx</option>
         <option>yyy</option>
     </optgroup>
 </select>
    
</body>

3.textarea元素（可替换元素）（无空白折叠）

文本域，多行文本框

  请填写简历：
 <textarea cols="30(一行字母个数)" rows="10（行数）"></textarea><!--CSS通过改变宽高可以改-->

4.按钮元素

button

type属性：reset、submit、button，默认值submit

5.表单状态

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

disabled属性：布尔属性，是否禁用（不可输入或点击不了等），会改变表单显示样式

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

label

普通元素，通常配合单选和多选框使用

显示关联

可以通过for属性，让label元素关联某一个表单元素，for属性书写表单元素id的值

 <input type="radio" id="radMale" name="gender">
    <label for="radMale">男</label>
    <input type="radio" id="radFemale" name="gender">
    <label for="radFemale">女</label>
    <!--点击文字也可选中-->

隐式关联

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

    <label>
        <input type="radio" name="gender">女
    </label>
    <!--点击文字也可选中-->