HTML+CSS(3)

最新推荐文章于 2020-12-05 22:33:10 发布

敏儿啦

最新推荐文章于 2020-12-05 22:33:10 发布

阅读量354

点赞数

分类专栏： html+css 文章标签： html css

本文链接：https://blog.csdn.net/xiaomin_er/article/details/105962265

版权

html+css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.CSS添加省略号单行添加省略号

width 必须有一个固定的宽
white-space:nowrap  不让内容折行
overflow：hidden 隐藏溢出的内容
text-overflow:ellipsis 添加省略号

  div{width: 100px;
  border:1px solid black;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;}
   
  <div> 测试文字测试文字测试文字测试文字测试文字测试文字测试文字</div>

2.CSS Sprite

特性：CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式，它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。
好处：可以减少图片的质量，网页的图片加载速度快
减少图片的请求的次数，加快网页的打开

3.CSS圆角

border-radius:50% 圆
border-radius:20px
border-radius:10px 20px;(左上右下角，右上左下角)
border-radius:10px 20px 30px 40px;(左上，右上，右下，左下)
椭圆 border-radius:10px / 20px;
半圆

div{width: 100px;
height: 50px;
background-color: red;
border-radius: 50px 50px 0 0;}

4.PC端布局：

通栏：自适应浏览器的宽度
版心：固定一个宽度，并且让容器居中

5.HTML与XHTML区别？

DOCTYPE文档及编码
元素大小写: HTML允许大写 XHTML只允许小写
属性布尔值: XHTML必须写完整
属性引号: XHTML必须加引号
图片的alt属性: XHTML必须要加alt属性
单标签写法: XHTML必须闭合
双标签闭合: XHTML双标签必须闭合

6.strong和b,em和i?

strong和em都是表示强调的标签，表现形态为文本加粗和斜体。b和i标签同样也表示文本加粗和斜体
表现形态都是 文本加粗 和 文本斜体
区别在于，strong和em是具备语义化的，而b和i是不具备语义化的
b i简化选择器的操作例如，一直写span，无法区分，还要加选择器，比较复杂

7.引用标签

blockquote:引用大段的段落解释
q:引用小段的短语解释
abbr:缩写或首字母缩略词全称写在title中
address:引用文档地址信息
cite:引用著作的标题

8.iframe嵌套页面

iframe元素会创建包含另外一个文档的内联框架（即行内框架）
可以引入其他的html到当前html中显示
主要是利用iframe的属性进行样式的调节

属性：

frameborder 规定是否显示框架周围的边框
width height 定义iframe的宽度和高度
scrolling 规定是否在iframe中显示滚动条
src 规定在iframe中引入的url
srcdoc 规定在iframe中显示的页面内容

 <style>
    iframe{width: 100%;}
  </style>
  <iframe srcdoc="<h1>hello world</h1>" src="https://www.taobao.com" frameborder="1" width="400px" height="400px" scrolling='no'></iframe>

[注]

当同时存在srcdoc src时，识别先写的那个
可以为iframe添加样式

应用场景： 钓鱼网站（不好）
数据传输共享代码局部刷新第三方介入等

9.br与wbr?

br标签表示换行操作，而wbr标签表示软换行操作。
提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用wbr元素来添加Word Break Opportunity（单词换行时机）

10.pre与code?

pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。
只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用code标签。虽然code标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码
pre code结合使用针对网页中的程序代码的显示效果

11.map与area?

定义一个客户端图像映射。图像映射指带有可点击区域的一幅图像。area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。
area元素的href属性定义区域的url，shape属性来定义区域的形状，coords属性定义热区的坐标
给特殊图像添加链接，area能添加的热区的形状：矩形、圆形、多边形

 <img src="./img/star.jpg" alt="" usemap="#star">
  <map name="star">
    <area shape="rect" coords="205 83 386 173" href="https://www.taobao.com" alt="">
    <area shape="circ" coords="300 120 50" href="" alt="">
    <area shape="poly" coords="305 99 233 156 256 250 172 197" href="" alt="">
  </map>

12.embed与object?

embed和object都表示能够嵌入一些多媒体，如flash动画、插件等。基本使用没有太多区别，主要是为了兼容不同的浏览器而已。
object需要配合param元素一起完成
给flash和一些插件进行渲染操作的标签

	 <!-- <embed src="./img/flash.swf" type=""> -->
    <object data="" type="">
      <param name="movie" value="./img/flash.swf">
    </object>

13.video标签与audio标签？

audio标签表示嵌入音频文件，video标签表示嵌入视频文件。
默认控件时不显示的，可通过controls属性来显示控件。
为了能够支持多个备选文件的兼容支持，可以配合source标签.
引入音频与视频的标签，术语H5的功能 controls显示控件 loop自动播放 autoplay自动播放

<audio src="./img/xxx.mp3" controls loop autoplay></audio>
<video src="./img/yyy.mp4" controls loop autoplay></video>
<video>
  <source src="./xxx.ogv" type=""></source>
  <source src="./yyy.mp4" type=""></source>

14.文字注解与文字方向

ruby标签定义ruby注释（中文注音或字符）,rt标签定义字符（中文注音或字符）的解释或发音。
bdo标签可覆盖默认的文本方向第二种实现方式是css的方式

<style>
    span{direction: rtl;unicode-bidi: bidi-override;}
  </style>
<ruby>韩<rt>han</rt></ruby>
<p>
  <bdo dir="rtl">你好呀</bdo>
</p>
<p>
  <span>你好呀</span>
</p>

15.扩展link标签

添加网址标题栏前的小图标

<link rel="stylesheet" type="text/css" href="xxx.css">
<link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">
<link rel="dns-prefetch" href="//static.360buyimg.com">  <!--dns解析加快速度-->

16.meta扩展学习

meta添加一些辅助信息

<meta name="description" content="大连美团网选.....">
  <meta name="keywords" content="大连美食，大连酒店，大连团购">
  <meta name="renderer" content="webkit">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta http-equiv="refresh" content="3" url=''>
  <meta http-equiv="expires" content="Web,20 Jun 2019 22:33:00 GMT">

17.HTML5新语义化标签

header 页眉
footer 页脚
main 主体
hgroup 标题组合
nav 导航

注：header footer main在一个网页中只能出现一次

 <header>
    <hgroup>
      <h1>主标题</h1>
      <h2>副标题</h2>
    </hgroup>
    <nav>
      <ul>
        <li>首页</li>
        <li>论坛</li>
        <li>关于</li>
      </ul>
    </nav>
  </header>
  <main></main>
  <footer></footer>

article: 独立的内容
aside： 辅助信息的内容
section： 区域
figure： 描述图像或视频
figcaption: 描述图像或视频的标题部分

<main>
    <article>
      <section>
        <ul>
          <li>
            <figure>
              <img src="../xxx.jpg" alt="">
              <figcaption>
                描述图像或视频的标题部分
              </figcaption>
            </figure>
          </li>
        </ul>
      </section>
      <section></section>
    </article>
    <aside></aside>
  </main>

datalist: 选项列表
details/summary: 文档细节/文档标题
progress/meter: 定义进度条/定义度量范围
time: 定义日期或时间
mark: 带有记号的文本

 <section>
        <input type="text" list='elems'>
        <datalist id="elems">
          <option value="a"></option>
          <option value="abc"></option>
          <option value="abd"></option>
          <option value="ddd"></option>
          <option value="ccc"></option>
        </datalist>
      </section>

<details open>
          <summary>HTML</summary>
          <p>超文本标记语言</p>
        </details>
<progress min="0" max="10" value="8"></progress>
        <meter min='0' max='100' value="80" low='10' high='60'></meter>
        <p>今天是<time title='2-14'>情人节</time></p>
        <p>今天是<mark>情人节</mark></p>

18.表格扩展

添加单线： border-collapse:collapse
隐藏空单元： empty-cells:hide
斜线分类： border/rotate
列分组： colgroup/col 针对列操作

美化表单控件： 1.label+ :checked 2.position+opacity

        label input{display: none;}
        label input:checked+div{background-position: 0 0;}
        label div{height: 28px;
        width: 28px;
        background:url('./img/checkbox.png');}
    <label>
        <input type="checkbox">
        <div></div>
    </label>

 .upload{width: 86px;height: 34px;position: relative;}
 .upload div{width: 100%;height: 100%;background: url(./img/upload.png);}
 .upload input{width: 100%;height: 100%;position: absolute;left:0;top: 0;opacity: 0;}
   <div class="upload">
       <input type="file">
       <div></div>
   </div>

新的input控件

email： 电子邮件地址输入框
url: 网址输入框
number: 数值输入框
range: 滑动条
date/month/week: 日期控件
search: 搜索框
color: 颜色控件
tel: 电话号码输入框（在移动端会默认调起数字键盘）
time: 时间控件

<form action="https://www.baidu.com">
        <!-- <input type="email"> -->
        <!-- <input type="url"> -->
        <!-- <input type="number"> -->
        <!-- <input type="range" min='0' max='10' value='8'> -->
       <!--  <input type="date"> -->
       <!-- <input type="month"> -->
       <!-- <input type="week"> -->
       <!-- <input type="search"> -->
       <!-- <input type="color"> -->
       <!-- <input type="tel"> -->
       <input type="time">
        <input type="submit">
</form>

新的表单属性：

autocomplete: 自动完成默认on 可选off/on
autofocus: 获取焦点
required: 不能为空
pattern: 正则验证

<form action="https://www.baidu.com">
   <input type="text" name="username" autocomplete="off" autofocus required pattern="\d+">
   <input type="submit">
</form>

method: 数据传输方式 get/post 默认get请求
enctype: 数据传输类型 application/x-www-form-urlencoded字符串形式
multipart/form-data二进制数据流 text/plain
name/value: 数据的键值对

  <form action="./data.php" method="POST" enctype="application/x-www-form-urlencoded">
        <input type="text" name="username">
        <input type="submit">
    </form>

<?php
    $username=$_POST['username'];
    echo $username;
?>

表单扩展->扩展标签

fieldset: 表单内元素分组
legend: 为fieldset元素定义标题
optgroup: 定义选项组

 <fieldset>
        <legend>登录</legend>
        <p>
            用户名：<input type="text">
        </p>
        <p>
            密&nbsp;码：<input type="password">
        </p>
    </fieldset>
    <select name="" id="">
        <optgroup label='水果'></optgroup>
        <option value="">苹果</option>
        <option value="">香蕉</option>
        <optgroup label="蔬菜"></optgroup>
        <option value="">黄瓜</option>
        <option value="">茄子</option>
    </select>

敏儿啦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS(3)

1.CSS添加省略号单行添加省略号width 必须有一个固定的宽white-space:nowrap 不让内容折行overflow：hidden 隐藏溢出的内容text-overflow:ellipsis 添加省略号div{width: 100px;border:1px solid black;white-space: nowrap;overflow: hidden;text-ov...
复制链接

扫一扫