HTML基础篇三

HTML基础篇三

一、文本域 textarea

语法
<textarea></textarea>
属性
name：控件的名字
cols：指定文本域的列数，变相设置宽度
rows：指定文本域的行数，变相设置高度
readonly：只读
placeholder：提示语句

例：

邮箱：<input type="email" placeholder="请填写您的邮箱"/><br />
个性：<textarea rows="10" cols="6"readonly="readonly"></textarea><br />

效果：

二、选项框

两个部分
下拉选项框 滚动列表
语法：
创建下拉列表 <select></select>
创建滚动列表 <option></option>
属性：
select的：
name：控件的名字
size：设置默认显得选项数量 如果取值大于1的话则为滚动列表
multiple：形成滚动效果 多选
option的：
selected：默认项

例：

<select size="4" >
    <option>1997</option>
    <option>1998</option>
    <option selected="selected">1999</option>
    <option>2000</option>
    <option>2001</option>
    <option>1999</option>
    <option>2000</option>
    <option>2001</option>
   </select><br /><br /><br />
   <select size="1" multiple="multiple" >
    <option>1997</option>
    <option>1998</option>
    <option selected="selected">1999</option>
    <option>2000</option>
    <option>2001</option>
    <option>1999</option>
    <option>2000</option>
    <option>2001</option>
   </select><br />

效果：

三、关联文本控件

lable元素
作用：
关联文本于控件
用法：
第一步：
使用lable元素将我们需要关联的文字括起来
第二部：
在要关联的控件上加上一个id
第三部：
在lable元素上使用for属性值填我要关联的控件的id

例：

<input type="checkbox" id="cbox"><label for="cbox">我已同意</label><br />

效果：

四、button元素

语法：
<button></button>
注意： button 放在form表单里面那么就是个提交按钮,放在之外就是一个普通按钮。
ps：
button中间是可以放置图片
input控件也可以使用图片 type为image 也是提交的作用

例：

<!--  input控件也可以使用图片 type为image 也是提交的作用-->
   <input type="image" src="img/u=1565159813,1282564728&fm=15&gp=0.jpg"  /><br />
   <!--button中间是可以放置图片-->
   <button><img src="img/u=1565159813,1282564728&fm=15&gp=0.jpg" /></button><br />

效果：

五、浮动框架

作用：
可以在一个浏览器窗口中同时显示多个页面文档
语法：
<iframe>内容 </iframe>
注意：
必须是成对的标记,当浏览器不支持的时候 将显示标签中间的内容。
属性：
src：网页url 可以自己的html页面也可以是网上的页面
width：宽度
height：高度
frameborder：浮动框架的边框

例：

<iframe src="index.html" width="500px" height="500px">这个不支持</iframe>
  <iframe src="https://www.baidu.com" width="400px" height="400px"></iframe>
  <iframe src="https://www.amap.com" width="500px" height="500px" frameborder="0"></iframe>

效果：

六、摘要和细节

作用：
允许将页面某部分内容进行展示或者收缩
语法：
第一步：定义一个摘要
<details></details>
第二步：确认标题
<summary></summary>
第三步：写内容

例：

<details>
   <summary>易烊千玺</summary>
   <p> Don't Tie Me Down </p>
   <p>I Adore You </p>
   <p>Nothing to Lose </p>
   <p>Unpredictable</p> 
  </details>
  <details>
   <summary>小鬼</summary>
   <p> 01 别叫我达芬奇 《lil ghost 2.0》</p>
   <p>02 good night 《good night》 </p>
  </details>

效果：

七、度量元素

作用：
用于显示静态比例的信息
语法:：
<meter>文本</meter>
属性：
min：度量范围的最小值 默认为0
max: 度量范围的最大值 默认为0
value:当前显示的度量值

例：

<meter min="4" max="10" value="5">dfe</meter>

效果：

八、时间元素

作用：
用于关联时间的不同表现形式
语法：
<time>文本</time>
属性：
datetime： 关联的日期时间，可以只关联日期，也可以只关联时间
如果同时要关联时间和日期的话用T分隔
ps:
方便用于JS获取时间，在我们页面中是没有任何其他作用的。

例：

<mark>明年的<time datetime="2020-02-14T13:14:14">情人节</time>，我请你吃饭</mark>

效果：
明年的情人节，我请你吃饭

九、高亮文本

作用： 将页面中某部分文本，以特殊背景颜色显示出来
ps： 它只有这一个颜色。
例：

<mark>明年的<time datetime="2020-02-14T13:14:14">情人节</time>，我请你吃饭</mark>

效果：
明年的情人节，我请你吃饭