html标签

html标签

<h1~h6>

特点：h1最大，h6最小、独占一行、默认加粗 在页面中显示一次

   <h1>我是一级标题</h1>    
    <h2>标题二级标签</h2>
    <h3>标题三级标签</h3>
    <h4>标题四级标签</h4>
    <h5>标题五级标签</h5>
    <h6>标题六级标签</h6>

<p></p>段落标签：<p> HTML 元素表示文本的一个段落。在视觉媒体中，段落通常表现为用空行和/或首行缩进与相邻段落分隔的文本块，但 HTML 段落可以是相关内容的任何结构分组，如图像或表格字段。

 <p>html即超文本标记语言，是 WWW 的描述语言，由 Tim Berners-lee提出。设计 HTML 语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起。下面是html是什么的介绍，希望对您有所帮助。</p>

<hr>水平线标签：

属性："size"设置线的大小

           “color”:设置线的颜色

            "algin":对齐方式

            "noshade":阴影效果  默认有：“阴影”

 <hr  width="" size="" align="" color=""  noshade />
   

  <img src="" alt="">图片标签：用于添加图片

                          src:属性是必须的，它包含了你想嵌入的图片的路径。

                         alt:属性包含一条对图像的文本描述，这不是强制性的，但对无障碍而言，它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果由于某种原因无法加载图像，普通浏览器也会在页面上显示 alt 属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期。

 <img src="" alt="">

<a href=""></a>超链接标签："href":超链接地址

• a元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或任何其他 URL 的超链接。

• <a> 中的内容应该指明链接的目标。如果存在 href 属性，当 <a> 元素聚焦时按下回车键就会激活它。

• target="_blank":新窗口打开

 <a href="#">

<title></title>标题标签：用于显示标题

<title>小米商城</title>

  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />用于显示浏览器最上方的log小圆圈

<hr>换行标签：用于换行

<hr>

1.标题标签
        <title></title>

<title>绵绵网站</title>
（description:描述）

（keywords:关键字）

(&.nbsp;添加空格，直接添加空格，无论有多少个空格都会被识别为一个空格位置)

2.超链接（a标签）
         <a href=""></a>

 <a href="http://www.baidu.com" target="_blank" title="百度一下，你就知道">百度</a>
    超链接标签可以给文字添加超链接，也可以给图片添加超链接

 <a href="https://www.baidu.com"><img src="../img/baidu.gif" alt=""></a>
超链接有4个状态：
        1.未访问：蓝色

        2.访问（点击过）：紫色

        3.鼠标悬浮的颜色：是什么就是什么（不一定）

        4.按着不动：红色

3.图片标签
 <img src="" alt="">

<img src="./img/bilibili.avif" alt="bilibili" title="这是哔哩哔哩的图片" width="300">

 src=""中间写图片的URL地址（来源）
alt=" "1. 中间写的是替换文本（图片显示不出来时所显示的内容）2.关键词，alt要与内容保持一致

title=" " 鼠标悬停所展示的内容

wight=" " 图片的宽  * * * *图片的宽，高 只需要设置一个即可，会自动成原比例缩放

（.jpg：颜色识别高）

（.png：半透明）

（.gif：动图）

热点地图：

 <img src="../img/clothes.png" alt="" usemap="#text">
    <map name="text" id="text">
        <area shape="rect" coords="323,53,501,215" href="http://www.baidu.com" alt="" target="_blank">
        <area shape="circle" coords="407,437,107" href="http://www.jd.com" alt="" target="_blank">
        <area shape="poly" coords="97,177,226,181,307,261,275,330,270,507,167,497,54,514,38,327,12,248,97,177" href="http://www.taobao.com" alt="" target="_blank">
    </map>
 shape="rect" 形状为矩形的    coords ="左上角,右上角"
 shape="circle" 形状为圆形的  coords=" 圆心,半径"

 shape="poly" 形状为多边形  coords="每个角的位置"

4.标题标签
 <h1></h1>  ：在页面中只能出现一次（SEO优化）
 

 <h2></h2>
 
  <h3></h3>
 
  <h4></h4>
 
  <h5></h5>
 
  <h6></h6>

h2-h6标签 可以有多个

特点：1.h1最大，h6最小

           2.独占一行

           3.默认加粗

文本标签

5.段落标签
<p></p>

<h1>加强文化和自然保护示</h1>
    <p>为世界文明百花园增添了绚丽的色彩。</p>
    <p>推动构建人类命运共同体作出新的更大贡献。</p>
 p段落标签 每段独占一行 且每段之间有空隙
6.水平线标签  （自带阴影）
< hr width="" size="" align="" color="" noshade / >

noshade： noshade 没有阴影

align：对齐方式

size：水平线的大小（粗细）

7.换行标签(强制换行)
        （用来输入空行，而不是分割段落）

<br/>
8.无意义标签

<div></div>
 
<span></span>

  div 独占一行，能设置宽高

 span  与其他在一行显示，不能设置宽高

9.文本标签
加粗（粗体）：
<b></b>

<strong></strong>

斜体：
<i></i>
<em></em>

<i></i>
<em></em>

下划线：
<u></u>
<ins></ins>

<u></u>
<ins></ins>

删除线：
<del></del>

<del></del>

上标：
 

eg： <div>x<sup>2</sup></div>

下标：


eg：<div>H<sub>2</sub>O</div>

10.列表标签
     1>无序列表:
                disc:默认（实心黑圆点）  square：矩形黑   circle：空心黑圆

<ul type="disc|square|circle">
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>6</li>
</ul>

        2>有序列表
                        start表示从第几个开始

<ol type="a|A|i|I" start="num">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>6</li>
</ol>

 3>自定义列表
 

 <dl>
        <dt></dt>
        <dd></dd>
    </dl>

图文并茂：

<figure>
    <figcaption>这是一张图</figcaption>
    <img src="1.png" width="200">
</figure>

6.相对路径与绝对路径
1>  . / 同级目录

2>  . . /  上一级目录 

3>   /   根目录（服务器环境下）

                (在vscode中，谁被拉为根目录，谁就是根目录)

锚点链接

                2.链接到锚点，同一页面<a href="#锚点名称"></a>

                                        不同页面<a href="url地址#锚点名称"></a>

eg：

<div class="box">
        <a href="#user" >用户评价</a>
        <a  href="#information">参数信息</a>
        <a href="#image" >图文详情</a>
    </div>
    <div class="one">
        <a name="user"></a>
    </div>
 
    <div class="two">
        <a name="information"></a>
    </div>
 
    <div class="three">
        <a name="image" ></a>
    </div>
不同页面跳转
<a href="./4-maodian.html#user" target="_blank">我想去maodian的用户评价</a>
<a href="./4-maodian.html#information" target="_blank">我想去maodian的参数信息</a>
<a href="./4-maodian.html#image" target="_blank">我想去maodian的图文详情</a>

8.实体字符
空格 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
× 乘号 &times;
 除号 &divide;
￥ 元 &yen;

表格

在过去表格标签⽤的⾮常多，很多⽹站都是⽤表格标签进⾏布局，展示数据的。

• table：表格

• tr：table rows ⾏

• td：table dock 单元格

表格标签之间是相互嵌套的。table>tr>td 如果我们需要添加表头的语义，可以使⽤⼀个新的标签，th标签，th：table head 表示表头单元格，替换的是td的位置，table>tr>th

<table>
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

表格的宽和⾼默认是按照内容的尺⼨⾃适应调整的。我们可以通过给table标签和td标签设置width/heigh属性的⽅式来指定表格/单元格的宽/⾼。 如果给td设置width和height，会修改当前单元格的宽和⾼，但不会影响这个表格的宽和高。

1. 属性

border：表格边框

cellpadding：单元格内的空间

cellspacing：单元格之间的空间

align：内容⽔平对⻬⽅式

valign：内容垂直对⻬⽅式

<table border="1" width="600px" height="200px" cellpadding="0" cellspacing="0" align="center">
    <tr align="center" valign="middle">
        <td>疾⻛剑豪</td>
        <td>中单</td>
        <td>狂⻛绝息斩</td>
        <td>6300</td>
    </tr>
    <tr>
        <td>疾⻛剑豪</td>
        <td>中单</td>
        <td>狂⻛绝息斩</td>
        <td>6300</td>
    </tr>
    <tr>
        <td>疾⻛剑豪</td>
        <td>中单</td>
        <td>狂⻛绝息斩</td>
        <td>6300</td>
    </tr>
</table>

1. 合并单元格

rowspan：合并列方向单元格

colspan：合并行方向单元格 属性值是⼀些数字，表示合并单元格的数量 上边线在同⼀⾏的，就算在同⼀⾏

<table border="1">
    <tr>
        <td colspan="2">UZIYYDS</td>
        <td>adc</td>
        <td>我去洗个澡</td>
        <td>4800</td>
    </tr>
    <tr>
        <td>孤⼉索</td>
        <td>疾⻛剑豪</td>
        <td>中单</td>
        <td>狂⻛绝息斩</td>
        <td rowspan="2">6300</td>
    </tr>
    <tr>
        <td>⼈⻢</td>
        <td>战争之影</td>
        <td>打野</td>
        <td>⻢踏⻜箭</td>
    </tr>
</table>

1. 表格分区

标题：caption 表头：thead 页脚：tfoot 主体：tbody 语义化标签。 tfoot的位置在thead与tbody之间 这四个表格分区标签本身没有任何样式，仅仅是⼀个区块划分标记罢了

<table width="600" border="1" align="center" cellpadding="0" cellspacing="0">
  <caption>学生信息表</caption>
  <thead>
  <tr align="" valign="" bgcolor="">
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
    <th>班级</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <td>章三</td>
    <td rowspan="2">男</td>
    <td>19</td>
    <td>java</td>
  </tr>
  <tr>
    <td>大张伟</td>
    <td>18</td>
    <td rowspan="2">python</td>
  </tr>
  <tr>
    <td>章子怡</td>
    <td>女</td>
    <td>19</td>
  </tr>
  </tfoot>
</table>

table 元素表示一个表格的声明 tr 元素表示表格的一行 td 元素表示一个单元格 默认的 table 表格是没有边框的 border属性表示增加一个边框 th 为表格添加标题单元格 实际作用就是内部文字居中加 td th均属于单元格，包含2个属性 colspan rowspan colspan 表示合并 一行所在 列合并 rolspan 表示合并 一列所在 行合并

面试题：请阐述table的缺点

a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。 b. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱 d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。 e. 不够语义

table表格布局案例：蓝色理想

表单

<input type="text"  >：文本框

<input type="text" placeholder="输入账号" name="usernanme">
placeholder：提示信息"

<textarea ></textarea>：多行文本框

<textarea name="" id="" ></textarea>

<input type="password" >：密码框

<input type="password" >
属性：
maxlength 最大输入字符
minlength 最小输入字符

lable标签:当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

<form>
  <label for="male">男</label>
  <input type="radio" name="sex" id="male" />
</form>

<input type="checkbox" >：复选框

<input type="checkbox" value="苹果" name="hoddy[]" id="apple">苹果

lable与复选框案例

<label for="apple">
                    <input type="checkbox" value="苹果" name="hoddy[]" id="apple">苹果
                </label>
                <label for="orange">
                    <input type="checkbox" value="橘子" name="hoddy[]" id="orange">橘子
                </label>
                <label for="banner">
                    <input type="checkbox" value="香蕉" name="hoddy[]" id="banner">香蕉
                </label>
                <label for="pear">
                    <input type="checkbox" value="梨" name="hoddy[]" id="pear">梨
                </label>
                <label for="bigbanner">
                    <input type="checkbox" value="大香蕉" name="hoddy[]" id="bigbanner">大香蕉
                </label>

<select name="" id="" >

                    <option</option>

                    <option v> </option>

                </select>：下拉列表

<select name="vacti" id="" >
                    <option value="七月">七月</option>
                    <option value="八月">八月</option>
                </select>
<select name="month" id="">
                    <option value="6号">6号</option>
                    <option value="7号">7号</option>
                </select>
                <select name="yuar" id="">
                    <option value="1011年">1011年</option>
                    <option value="2033年">2033年</option>
                </select>

<input type="radio" >单选按钮

<label for="man">
                    <input type="radio" name="man" value="已婚" id="man">已婚
                </label>
                <label for="girl">
                    <input type="radio" name="man" value="未婚" id="girl">未婚
                </label>

日期表单：<input type="date" name="dtae" id="">

<input type="date" name="dtae" id="">

时间表单：

按钮

普通 type="button" 配合js完成⼀些操作
重置 type="reset" 重置表单数据 有默认的按钮标题。
提交 type="submit" 提交表单

• 表格与表单综合案例

• <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
          table,td {
              border: 1px solid#dbe0dd;
          }
  
          table {
              border-spacing: 0;
          }
          tr{
              background-color:#cacaca ;
          }
      </style>
  </head>
  
  <body>
      <form action="https://www.baidu.com" method="get">
          <table>
              <tr>
                  <td>姓名</td>
                
                      <td><input type="text"  name="usernanme">
                  
                  </td>
              </tr>
              <tr>
                  <td>密码(10位数以内)</td>
                      <td>
                          <input type="password" name="password"  minlength="10">               
                  </td>
              </tr>
              <tr>
                  <td>确定密码</td>
                  <td>                 
                          <input type="password" name="pw">
                  </td>
              </tr>
              <tr>
                  <td>性别</td>
                  <td>
                        <label for="man">
              <input type="radio" name="man" value="男" id="man">男
          </label>
          <label for="girl">
              <input type="radio" name="man" value="女" id="girl">女
          </label>
                  </td>
              </tr>
              <tr>
                  <td>出生日期</td>
                  <td>
  
                      <input type="text" id="b" style="width: 40px;" name="year">年
                      <input type="text" id="c" style="width: 40px;" name="month">月
                      <input type="text" id="s" style="width: 40px;" name="day">日
                  </td>
              </tr>
              <tr>
                  <td>所在系</td>
                  <td>
                      <select name="oo" id="">
                          <option value="">请选择</option>
                          <option value="软件工程" >软件工程</option>
                          <option value="计算机与艺术设计系">计算机与艺术设计系</option>
                          <option value="计算机网络" >计算机网络</option>
                      </select>
                  </td>
              </tr>
              <tr>
                  <td>专业</td>
                  <td>
                      <select name="tt" id="">
                          <option value="电子商务" >电子商务</option>
                          <option value="软件工程" >软件工程</option>
                          <option value="计算机与艺术设计系" >计算机与艺术设计系</option>
                          <option value="计算机网络" >计算机网络</option>
                      </select>
                  </td>
              </tr>
              <tr>
                  <td>上传个人照片</td>
                  <td><input type="file" name="photo" accept="image/*">
                      <input type="text" placeholder="浏览...." style="width: 80px;">
                  </td>
              </tr>
              <tr>
                  <td colspan="2">个人简历</td>
              </tr>
              <tr>
                  <td colspan="2"><textarea name="many" id="" style="width: 300px;height: 50px; display: block; 
                  margin-left: auto; 
                  margin-right: auto; ">
                  </textarea>
                  </td>
              </tr>
              <tr>
                  <td colspan="2">个人爱好</td>
              </tr>
              <table style="width: 479px;">
                  <tr>
                      <td colspan="2" align="center">
                          <label for="apple">
                              <input type="checkbox" value="苹果" name="hoddy[]" id="apple" class="a1">苹果
                          </label>
                          <label for="orange">
                              <input type="checkbox" value="橘子" name="hoddy[]" id="orange" class="a1">橘子
                          </label>
                          <label for="banner">
                              <input type="checkbox" value="香蕉" name="hoddy[]" id="banner" class="a1">香蕉
                          </label>
                          <label for="pear">
                              <input type="checkbox" value="梨" name="hoddy[]" id="pear" class="a1">梨
                          </label>
                          <label for="bigbanner">
                              <input type="checkbox" value="大香蕉" name="hoddy[]" id="bigbanner" class="a1">大香蕉
                          </label>
                          <br>
                          <label for="apple1">
                              <input type="checkbox" value="苹果" name="hoddy[]" id="apple1" class="a1">苹果
                          </label>
                          <label for="orange1">
                              <input type="checkbox" value="橘子" name="hoddy[]" id="orange1" class="a1">橘子
                          </label>
                          <label for="banner1">
                              <input type="checkbox" value="香蕉" name="hoddy[]" id="banner1" class="a1">香蕉
                          </label>
                          <label for="pear1">
                              <input type="checkbox" value="梨" name="hoddy[]" id="pear1" class="a1">梨
                          </label>
                          <label for="bigbanner1">
                              <input type="checkbox" value="大香蕉" name="hoddy[]" id="bigbanner1" class="a1">大香蕉
                          </label>
                      </td>
                  </tr>
                  <tr>
                      <td colspan="2" align="center">
                          <input type="submit">
                          <input type="reset">
                      </td>
                  </tr>
              </table>
          </table>
      </form>
  </body>
  
  </html>

  readonly和disable属性

• readonly

  readonly 属性规定输入字段为只读,但其value值仍会被表单提交 readonly属性只针对text、password和textarea有效

  disabled

  disabled属性规定禁用该表单元素，其value值不会被表单提交 disabled属性对所有表单元素均有效，包括select, radio, checkbox, button等 使用disabled属性后表单元素背景会变成灰色

表单控件属性

fieldset

fieldset元素可将表单内的相关元素分组

<form>
  <fieldset>
    <legend>输入相关信息</legend>
    username: <input type="text" />
    password: <input type="password" />
  </fieldset>
</form>

效果图

frameset框架集

frameset框架集：进行跳转 （以弃用，不经常用）

属性：

• rows 行数

• cols 列数

• frameborder 0/1 规定是否显示框架边框

• border 设置边框粗细

• <frameset  rows| cols="10%,*，20%" >
       <frame  name="" src=""  noresize="noresize"  scrolling="yes/no/auto" />
       <frame  name="" src="" >
  </frameset>

frame属性

• noresize 规定无法调整框架的大小

• scrolling yes/no/auto 规定框架是否出现滚动条

• <frameset  rows| cols="10%,*，20%" >
       <frame  name="" src=""  noresize="noresize"  scrolling="yes/no/auto" />
       <frame  name="" src="" >
  </frameset>

  案例：

• 注意

• src='' '':地址均为创建的html

•  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  
      <frameset rows="30%,*">
          <noframes>
      <body>
        浏览器是否匹配进行判断
      </body>
      </noframes>
      <frame src="./头部.html"  scrolling="no"
      noresize="noresize" frameborder="0" name="a"></frame>
       <frameset cols="10%,*">
      <frame src="./导航条.html"  noresize="noresize"  frameborder="0" name="b" ></frame>
      <frame src="./添加学生.html"  name="c" ></frame>
      <frame src="./快递小哥.html" name="c" ></frame>
      <frame src="./个人简历.html"  name="c" ></frame>
      <frame src="./春夏秋冬.html"  name="c" ></frame>
       </frameset>
      </frameset> 
      
  
  </html>

  注：

• src='' '':和上面src的地址一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            line-height: 50px;
        }
        h1{
         margin:0 auto;
        }
    </style>
</head>
<body>
    <div>
    <h1>菜单</h1>

  </div>
    <ul>
        <li><a href="./添加学生.html" target="c">添加学生</a></li>
        <li><a href="./快递小哥.html" target="c">删除学生</a></li>
        <li><a href="./个人简历.html" target="c">修改学生</a></li>
        <li><a href="./春夏秋冬.html" target="c">查询学生</a></li>
       
    </ul>
</body>
</html>

效果如图：

1. iframe内连框架【了解】

2. <iframe name="" src="" frameborder="0|1" width="" height="" scrolling="no|auto|yes"></iframe>

   iframe跳转

3. eg

4. <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
   </head>
   <body>
       <h1>iframe</h1>
       <ul>
           <li><a href="https://www.csdn.net/" target="b"  style="color: blue;">CSDN表单</a></li>
           <li><a href="./用户名.html" target="b" style="color:#7d6b8a ;">用户名</a></li>
           <li><a href="./春夏秋冬.html"  target="b" style="color: orangered;">form表单</a></li>
           <li><a href="./快递小哥.html" target="b"  style="color: blue;">table表单</a></li>
       </ul>
       <iframe src="" frameborder="0" width="100%" height="500px" name="b"></iframe>
       <iframe src="" frameborder="0"  width="100%" height="500px" name="b"></iframe>
       <iframe src="" frameborder="0" width="100%" height="500px"  name="b" ></iframe>
       <iframe src="" frameborder="0" width="100%" height="500px" name="b" ></iframe>
   </body>
   </html>

   

CSS

简介

1. 介绍

• CSS是Cascading Style Sheets的英文缩写,即层叠样式表

• Html【Hyper Text Markup Language】

• CSS语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).

• CSS是用于布局与美化网页的

• CSS能实现内容与样式的分离，方便团队开发

• CSS是由W3C的CSS工作组产生和维护的

  • 1996年W3C正式推出了CSS1

  • 1998年W3C正式推出了CSS2

  • 2007年W3C正式推出了CSS2.1

  • 2011年W3C正式推出了CSS3,目前仍在持续完善中

1. CSS语法

CSS 由选择器、属性、属性值组成

选择器{ 样式属性名1：样式属性值1; 样式属性名2：样式属性值2; ..... }

选择器通常是指需要改变样式的 HTML 元素 属性是指希望设置的样式属性 属性和值之间用冒分开，多个属性之间加分号隔开 CSS是大小写不敏感的,在CSS语法中推荐使用小写

如：body{color:red；font-size:20px} <!-- 设置了页面为字体颜色为红色，字体大小为20像素 -->

1. CSS注释

CSS里面的注释使用C语言编程中一样的约定方法去指定，注释的内容会被浏览器忽略，可用于为样式表加注释及调试使用。 CSS注释格式如下：

div{ /* 设置宽度为200px */ width:200px; }

1. CSS中的颜色值

   如:#ffcc00 十六进制 0-F

   如:#fc0

   如:rgb(255,204,0,)

   如rgb(100%,80%,0%)

   1. 十六进制表示方式 #rrggbb

   2. 简单十六进制表示方式；#rgb

   3. rgba表示方式； rgba(x,x,x,a) 其中x是一个0-255的整数值

   4. 百分比实现rgb形式；rgb(x%,x%,x%) 其中x是一个0-100的整数值

   5. 颜色英文单词表示方式 如:red

2. CSS长度单位

• 相对长度单位：

  • px 像素（Pixel）

  • % 百分比

  • em : Element meter 根据文档字体计算尺寸

  • rem :Root element meter 根据根文档（ body/html ）字体计算尺寸

  • ex : 文档字符“x”的高度

  • ch : 文档数字“0”的的宽度

  • vh : View height 可视范围高度

  • vw : View width 可视范围宽度

• 绝对长度单位： in英寸（Inch） pt 点（Point） cm 厘米（Centimeter） mm 毫米（Millimeter） 换算比例：1in = 2.54cm = 25.4 mm = 72pt

• calc：calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度 calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 “+”, “-“, “ *”, “/” 运算； calc()函数使用标准的数学运算优先级规则； calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小 calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小calc：calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度 calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 “+”, “-“, “ *”, “/” 运算； calc()函数使用标准的数学运算优先级规则； calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小 calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小

案例一：使用vh和vw实现div占满整个页面

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100vw;
            height: 100vh;
            background-color: aqua;
        }
</style>
<div class="box"></div>

案例二：使用calc实现左侧固定，右侧自适应效果

sd

<style>
  *{
    margin: 0;
    padding: 0;
  }
  .box{
    overflow: hidden;
    background-color: antiquewhite;
  }
  .left{
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
  }
  .right{
    width: calc(100% - 200px);
    height: 300px;
    background-color: green;
    float: left;
  }
</style>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

css文本属性

CSS ⽂本属性可定义⽂本的外观。 通过⽂本属性，您可以改变⽂本的颜⾊、字符间距，对⻬⽂本，装饰⽂本，对⽂本进⾏缩进等等。

text-indent 属性将⻚⾯上的段落的第⼀⾏进行缩进(首行缩进)，这是⼀种最常⽤的⽂本格式化效果。 取值：

注意：样式应用的最后一行文字不会生效（如果只有一行，那第一行同样是最后一行）

• ：⽤⻓度值指定⽂本的缩进。可以为负值。

• ：⽤百分⽐指定⽂本的缩进。可以为负值。

  p {
      text-indent:20px; 
  }
  p {
      text-indent:20%; 
  }

  text-align属性设置⽂本⽔平对⻬⽅式。 取值：

• left：内容左对⻬。

• center：内容居中对⻬。

• right：内容右对⻬。

• justify：内容两端对⻬，对最后⼀⾏⽆效

  li-01 {
      text-align:left;
  }
  li-02 {
      text-align:right;
  }
  li-03 {
      text-align:center;
  }
  li-04 {
      text-align:justify;
  }

  案例：解决justify的问题

  <!-- 如果只有一行文字
  方法一 -->
  <p class="test">
      只有一行很短的文字
  </p>
   <style>
      p.test {
          width: 100%;
          border: 1px solid #f00;
          text-align-last: justify;
      }
  </style>
  <!-- 如果有多行文字 -->
  <p class="test">
     只有一行很短的文字
  </p>
  <!--方法二
  使用伪元素：
  需要使用after，将伪元素放在需要两端对齐的元素后面，作为第二行
  设定after的width为100%，生成第二行
  设置为行内快元素，设置的width才有效
  -->
  <style>
      p.test {
          text-align: justify;
      }
      p.test:after {
          content: "";
          display: inline-block;
          width: 100%;
      }
  </style>
  <p class="test">
      只有一行很短的文字
  </p>

  文本换行

• word-wrap 属性设置⽂本内部⻓单词或URL换⾏ 取值

• normal 默认值（浏览器保持默认处理）。

• break-word 在⻓单词或 URL 地址内部进⾏换⾏。

 word-break

word-break 属性设置⾃动换⾏的处理⽅法 取值：

• normal 使⽤浏览器默认的换⾏规则。

• break-all 允许在单词内换⾏。

• keep-all 只能在半⻆空格或连字符处换⾏

 white-space 不允许文字换行

nowrap:文本不会换行，文本会在在同一行上继续，直到遇到 < br >标签为止。 

text-overflow 当文本溢出包含元素时剪切文字 

ellipsis 显示省略符号来代表被修剪的文本。

<style>
  .box{
    width: 300px;
    border: 1px solid #f00;
    white-space: nowrap;
    /*溢出隐藏*/
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
<div class="box">
  这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本
</div>

案例：单行/多行文本省略 

 

<!-- 案例：单行文本省略 -->
<style>
  ul{
    width: 400px;
  }
  li{
    width: 100%;
    float: left;
    /* 不让文字换行 */
    white-space: nowrap;
    /*溢出隐藏 */
    overflow: hidden;
    /*添加省略符号 */
    text-overflow: ellipsis;
  }
</style>
<ul>
  <li>中财办副主任：慈善捐赠是自愿行为，不能搞“逼捐”</li>
  <li>念！首位歼-10女飞行员余旭牺牲5周年 曾驾机飞越天安门</li>
  <li>外交部：中美双方正就元首会晤的具体安排保持密切沟通</li>
  <li>今年以来多地出生人口降幅超一成 专家：育龄妇女数量减少是源头</li>
  <li>俄媒：美国驻也门使馆人员被扣为“人质”，美国国务院回应</li>
</ul>

多行文本

 

<!-- 多行文本省略 -->
<style>
  ul{
    width: 200px;
  }
  li{
    width: 100%;
    margin-top: 30px;
    margin-left: 30px;
    /* 标签变为弹性盒子 */
    display: -webkit-box;
    /*按照垂直方向排序 */
    -webkit-box-orient: vertical;
    /*保留对应的行数 */
    -webkit-line-clamp: 2;
    /*多余的行数隐藏 */
    overflow: hidden;
  }
</style>
</head>
<body>
    <ul>
        <li>1.中财办副主任：慈善捐赠是自愿行为，不能搞“逼捐”</li>
        <li>2.念！首位歼-10女飞行员余旭牺牲5周年 曾驾机飞越天安门</li>
        <li>3.外交部：中美双方正就元首会晤的具体安排保持密切沟通</li>
        <li>4.今年以来多地出生人口降幅超一成 专家：育龄妇女数量减少是源头</li>
        <li>5.俄媒：美国驻也门使馆人员被扣为“人质”，美国国务院回应</li>
    </ul>
 </body>

 

 文字阴影

text-shadow 属性向文本设置阴影。

语法：text-shadow: x-shadow y-shadow blur color;

x-shadow	必需。水平阴影的位置。允许负值。
**y-shadow	必需。垂直阴影的位置。允许负值。
**blur	可选。模糊的距离。
**color	可选。阴影的颜色。

 

/* 单层阴影 */
p.info {
    text-shadow: -5px -5px 3px black;
    font-size: 50px;
}
/* 多层阴影 */
p {
    text-shadow: 5px 5px 3px red,8px 8px 3px orange,11px 11px 3px yellow,14px 14px 3px green,17px 17px 3px yellowgreen,20px 20px 3px greenyellow,23px 23px 3px blue;
    font-size: 50px;
}
/* 正阴影 */
div {
    text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 40px #ff00de,0 0 70px #ff00de;
    font-size: 50px;
}

盒子阴影

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4625853_8xrgorr44tl.css">
    <style>
        .t:hover{
            /* 盒子阴影 */
            /* width: 300px;
            height: 300px; */
            /* border: 1px solid gold; */
            /* font-size: 30px; */
            /* 外阴影 */
             /* box-shadow: 0px  2px 20px 6px  rebeccapurple;  */
             /* 第一个参数：水平距离  右边为负值    左边为正值
                第二个参数：垂直距离  上边为正直    下边为负值
                第三个参数：模糊半径
                第四个参数：阴影大小
                第五个参数：阴影颜色
              */
              /* 内阴影 */
              box-shadow:inset 0px  5px 15px 6px red;  
            
        }
        .t{
            width: 300px;
            height: 300px;
        }
        .u{
            /* 文字阴影 */
            font-size: 30px;
            text-shadow: 20typx 1px red;
        }
        span{
            /* 文字描边 */
            font-size: 100px;
             -webkit-text-stroke: 1px rebeccapurple;
            color: transparent;
        }
        .y{
            width: 500px;
            height: 500px;
            border: 1px solid red;
            /* 单行文本对齐方式 */
            /* text-align: center; */
            /* line-height: 500px; */
            /* 多行文本对齐方式 */
            display: table-cell;
            vertical-align: middle;
        }
        .icon-wechat{
            font-size: 200px;
        }
    </style>
</head>

<body>
    <div class="t">
       <p class="u">高艺浩</p>
       <span>观音莲</span>
    </div>
  <div class="y">
    比如，当前热映《长清湖》超越了《你好，李焕英》票房，这是很不容易的。
    要知道当初《你好，李焕英》不仅拥有天时（影院放开不久），还有人和。
    贾玲与刘德华互联网上频繁互动，为影片上映做好了预热，不大卖都难。
  </div>
   <span class="icon-wechat"></span>
</body>

</html>

 

text-stroke 

是用来为文本添加描边效果的css属性，但请注意，它并非标准CSS属性，而是WebKit（如Safari和Chrome）浏览器专有的CSS扩展属性，为了兼容其他浏览器，通常会配合 -webkit-text-stroke 和 -moz-text-stroke 等私有前缀属性一起使用

-webkit-text-stroke: stroke-width color;
-moz-text-stroke: stroke-width color;

 

• stroke-width 规定文本描边的宽度，可以用长度单位（如 px、em 等）指定。

<style>
.container1 {
    -webkit-text-stroke: 1px red;
}
.container2 {
    -webkit-text-stroke: 0.06em red;
}

</style>
<div class="container container1">1像素宽的红色描边</div>
<div class="container container2">0.06em的红色描边</div>

镂空文字

.container {
    font-size: 36px;
    color: transparent;
}
.container1 {
    -webkit-text-stroke: 1px red;
}

拓展1：多行/多行文本垂直居中

单行文本垂直居中

<style> .box{ width: 300px; height: 300px; border: 1px solid #f00; line-height: 300px; } </style> <div class='box'> 比如，当前热映《长清湖》超越了《你好，李焕英》票房 </div>

多行文本垂直居中

<style> .box{ width: 300px; height: 300px; border: 1px solid #f00; /* 将div修改为table单元格的特性 */ display: table-cell; /* 垂直居中 */ vertical-align: middle; } </style> <div class='box'> 比如，当前热映《长清湖》超越了《你好，李焕英》票房，这是很不容易的。要知道当初《你好，李焕英》不仅拥有天时（影院放开不久），还有人和。贾玲与刘德华互联网上频繁互动，为影片上映做好了预热，不大卖都难。 </div>