Web前端笔记 | HTML | HTML进阶

最新推荐文章于 2024-07-09 17:50:54 发布

不想当画家的厨师不是好码农

最新推荐文章于 2024-07-09 17:50:54 发布

阅读量97

点赞数

分类专栏：前端学习日记文章标签：前端 html css

本文链接：https://blog.csdn.net/qingrumingjing1998/article/details/129141201

版权

前端学习日记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.iframe元素

框架页

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

iframe 可替换元素

通常是行盒
通常显示的内容取决于元素的属性
CSS不能完全控制其中的样式
具有行块盒的特点

<style>
  .iframe{
    width : 100%;
    height : 500px;
    
  }
</style>
/*控制a元素点击后跳转的界面再iframe中显示*/
<a href="https://www.baidu.com" target="myframe">百度</a>
<iframe name="myframe" src="https:www.baidu.com"></iframe>

2. 在页面中使用flash

object

MIME 多用途互联网邮件类型，比如资源是一个jpg图片，MIME： image/jpeg

<object data="./example.swf" type="application/x-shockwave-flash">
  <param name="quality" value="high">//画面质量为高
</object>

embed

<embed quality="high" src="./example.swf" type="application/x-shockwave-flash">

它们都是可替换元素,可以把embed嵌入到object,更好的兼容。

3. 表单元素

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

3.1 input元素

输入框

type属性：输入框类型，

type ：text(普通文本输入框)，

type ：password（密码框），

type ：date(日期选择框，兼容性问题)

type ：search(搜索框，兼容性问题)

type ：range(滑块) min max

type ：color(颜色选择框)

type ：number(数字输入框) min max step

type ：checkbox(多选框)，默认选中时checked

type ：radio(单选框) 设置name 相同的为一组 radio使一组只能选择一个

type ：file(选择文件上传)
value属性：输入框的值
placehoder属性：显示提示的文本框，文本框没有内容时显示

<input type="text" placehoder="请输入账号" >

input元素可以制作按钮，

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

<input type="reset" value="RESTET">

3.2 select元素

下拉列表选择框，通常和option元素配合使用

<select multiple>
  <optgroup label="城市">
    <option>成都</option>
    <option>北京</option>
    <option selected>哈尔滨</option>
  </optgroup>
    <optgroup label="爱好">
    <option>音乐</option>
    <option>美术</option>
    <option selected>体育</option>
  </optgroup>
</select>

3.3 textarea元素

文本域，多行文本框

<textarea clos="30" rows="10" placeholder="请输入详情"></textarea>

3.4 按钮元素

button

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

<button type="button">这是一个按钮</button>

/*图片按钮的两种实现方式*/
<button type="button">
  <img src="hashiqi.jpg" alt="">
</button>
<input type="image" src="hashiqi.jpg">

3.5 表单状态

readonly属性

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

布尔属性，是否禁用，会改变表单显示样式

3.6 配合表单元素的其他元素

label

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

显示关联

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

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

隐式关联

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

datalist

数据列表，该元素本身不会显示到页面，通常用于和普通文本框配合

<input list="userAgent" type="text">
<datalist id="userAgent">
  <option value="Chrome">谷歌浏览器</option>
  <option value="IE">ie浏览器</option>
</datalist>

form元素

通常，会将整个表单元素，放置form元素的内部，作用是当提交表单时，会将form元素内部的表单内容以合适的方式提交到服务器。

form元素对开发静态页面没有什么意义。

<form action="https://www.baidu.com" method="GET">
  账号：<input name="admin" type="text">
  密码：<input name="pwd" type="password">
  <button type="submit">提交</button>
</form>

fieldset元素

表单分组

<div>
  <fieldset>
    <legend>账号信息</legend>
    账号：<input name="admin" type="text">
    密码：<input name="pwd" type="password">
  </fieldset>
  <fieldset>
    <legend>基本信息</legend>
    姓名：<input name="admin" type="text">
    年龄：<input name="age" type="text">
  </fieldset>
  <button type="submit">提交</button>
</div>

4. 美化表单元素

4.1 新的伪类

focus

元素聚焦时候的样式，浏览器按住tab键切换聚焦的元素，可以设置tabindex修改顺序

<style>
  input:focus{
    outline : 1px solid #808c8c;
    outline-offset : 0;
  }
</style>

<a tabindex="2">lorem</a>
<input tabindex="1" type="text">
<button tavindex="3">提交</button>

checked

单选或者多选框被选中的样式

<style>
  input:checked{
    background : red;//控制背景颜色无效
  }
  input:checked+label{
    background : red;//控制兄弟元素label颜色有效
  }
</style>

4.2 常见用法

重置表单元素样式

input,textarea,button,select{
  border : none;
}
input:forcus{
  outline : none;
  outline-offset : 0;
}
input[type="text"]{
    boder : 1px solod #999;
}

设置textarea是否允许调整尺寸

CSS属性resize :

both ：默认值，两个方向都可以调整尺寸

none : 不能调整尺寸

horizontal : 水平方向可以调整尺寸

vertical : 垂直方向可以调整尺寸

textarea{
  resize : both;
}

文本框边缘到内容的距离

/*方式1 padding*/
input{
  padding : 0 10px;
}
/*方式2 使用text-indent*/
input{
  text-indent: 1em;
}

控制单选和多选的样式

自己定义单选框的样式是为div设计样式而不是直接使用radio

.radio{
  width : 12px;
  height : 12px;
  boder : 1px solid #999;
  boder-radius : 50%;
  display : inline-block;
}
.radio.checked{
  boder-color : #008c8c
}
.radio.checked::after{
  conten : "";
  display : block;
  width : 5px;
  height :5px;
  background : #008c8c;
  margin-left :3.5px;
  margin-top : 3.5px'
}

  实现效果

  ![](https://secure2.wostatic.cn/static/bb6Yoosnzjpp92MuRrtzg3/9BH}(URINJVUDVBHU](Y@}1.png?auth_key=1676958669-qiJesgSNgZFj3ygee57bp2-0-38508211ae0ecb0c787b715ebe91e024)

5. 表格元素

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

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

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

<table>
  <caption>表格标题</caption>
  <thead>
     <tr>
       <!--纵向跨越两行-->
       <th rowspan="2">列1</th>
       <th>列2</th>
     </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <!--跨越两列 两个横向单元格合并-->
      <td colspan="2">合计 : 1000</td>
    <tr>
  </tfoot>
</table>

boder-collapse : separate默认边框之间有间隔，collapse 边框无间隔

table{
  boder-collapse : collapse
}

6. 其他元素

6.1 abbr元素

缩写词

<abbr title="前端工程师">前端</abbr>打工人

6.2 time元素

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

<time datatime="2019-5-1">今年5月</time>我挣了1000万

6.3 b（bold）元素

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

我是一个<b>成功人士</b>

6.4 q元素

一小段引用文本，cite属性：从哪引用

沃兹基说过：<q>无法成功就摆烂</q>

6.5 blockquote元素

引用一大段文本，cite属性：从哪引用

<blockquote cite="https://www.baidu.com">balabalaleahaniohwfuoeghqhe3o</blockquote>

6.6 br元素

主要在文本中换行，无语义

<p>
  收货地址：<br>
  四川省<br>
  成都市<br>
  xxx街道xxx号>
</p>

6.7 hr元素

无语义，主要用分割

<p>
   线上
   <hr>
   线下
</p>

6.8 meta元素

还可以用于搜索引擎优化（SEO）

<meta name="keywords" content="前端，后端，移动端">
<meta name="autor" content="xiaolihai@qq.com">
<meta name="description" content="一个很好的页面">

6.9 link元素

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

rel属性： relation ，链接的资源和当前网页的关系

type属性：链接的资源的MIME类型可以省略不写

<link rel="stylesheet" type="text/css" href="test.css">

<!--设置网页图标的两种方式-->
<link rel="shortcut icon" type="image/x-icon" href="123.iso">
也可以将图标文件名称改为 favicon.ico 放在网页根目录