Mr.Zhou

高级标签

# 高级标签

假设我们有一个页面

<html>
<head></head>
<body>
    <div style="width: 100px;height:100px;background-color:red;">
    </div>
</body>
</html>

现在向 div 中填充文本，讲道理由于我们的 div 盒子的边界是100px 应该是能够在边界换行展示对吧？但是现实不一样

<html>
<head></head>
<body>
    <div style="width: 100px;height:100px;background-color:red;">
        abcdefghijklmnopqrstuvwxyz
    </div>
</body>
</html>

我们观察到他独自一行展示并且超出了我们div 的边界。这是为什么呢？ 我们将英文换成中文试试

<html>
<head></head>
<body>
    <div style="width: 100px;height:100px;background-color:red;">
        周始很帅周始很帅周始很帅周始很帅
    </div>
</body>
</html>

诶！我们发现现在又能够换行展示了， 这些都是有原因的，我们说汉字能够区分出他是否是一个汉字对吧，但是英文单词呢？是不是很难区分，因为我们的浏览器并没有这么的智能，他并不知道你想要表达的是什么意思，所以需要你进行协助对吧，怎么协助呢？

<html>
<head></head>
<body>
    <div style="width: 100px;height:100px;background-color:red;">
        abcde      fghij klmno pqrst uvw        xyz
    </div>
</body>
</html>

如上述代码所示，我们需要加空格，而且我们发现就算空格多很多个，最后显示的还是一个 空格表示的是：单词分隔符，他的作用就是用来分隔英文单词从而让浏览器知道我们写的是英文中的什么内容，不然的话，浏览器就会认为你那是一个单词，一个单词的话我不能拆分。 空格和回车表示的内容相同 那我们怎么展示空格呢？ HTML编码：$nbsp; 这个  仅表示空格 相同的如果你在文本中想要展示一个标签是不行的，因为会被解析成标签 小于：< --> less than 大于：> --> great than

换行标签

接下来标签将默认放到 body 中！

# 有序列表

    <ol>
        <li>速度与激情</li>
        <li>复仇者联盟</li>
        <li>鬼灭之刃</li>
        <li>赛马娘</li>
    </ol>

ol 有几个属性 1、排序类型 type 他接受 5 中类型 分别是 1、a、A、i、I( 大写i ) 意思是按照什么东西排序 默认是1也就是按照阿拉伯数字排序， a 是按照小写字母排序 A 是按照大写字母排序 i 是按照罗马数字排序 I 是按照大写的罗马数字排序

    <ol type="A"  start="2">
        <li>速度与激情</li>
        <li>复仇者联盟</li>
        <li>鬼灭之刃</li>
        <li>赛马娘</li>
    </ol>

2、从第几个开始 start 默认是第一个

    <ol type="A"  start="2">
        <li>速度与激情</li>
        <li>复仇者联盟</li>
        <li>鬼灭之刃</li>
        <li>赛马娘</li>
    </ol>

3、倒序 reversed

    <ol type="A" reversed="reversed">
        <li>速度与激情</li>
        <li>复仇者联盟</li>
        <li>鬼灭之刃</li>
        <li>赛马娘</li>
    </ol>

**注意：如果 reversed 和 start 同时使用，假设你使用 A 类型排序，如果排到最后一个也就是 A 的时候不够了，将会从阿拉伯数字计算。

    <ol type="A" reversed="reversed" start="2">
        <li>速度与激情</li>
        <li>复仇者联盟</li>
        <li>鬼灭之刃</li>
        <li>赛马娘</li>
    </ol>

顺序是 B - A - 0 - （-1）

# 无序列表

    <ul>
        <li>速度与激情</li>
        <li>复仇者联盟</li>
        <li>鬼灭之刃</li>
        <li>赛马娘</li>
    </ul>

无序列表只能修改一个属性，就是前面排序的东西，默认是一个小实心圆对吧 通过 type 属性来修改，他有三种类型 discircle circle square ，默认是discircle

    <ul type="square">
        <li>速度与激情</li>
        <li>复仇者联盟</li>
        <li>鬼灭之刃</li>
        <li>赛马娘</li>
    </u>

# 图片标签

   <img src=“”>

能够引入三种路径

  • 网络上的url
  • 本地的绝对路径
  • 本地的相对路径

还有几个属性

  • alt 图片占位符，图片无法展示时的文字
  • title 图片提示，图片鼠标悬停的时候

# 超链接标签

 <a href=“” target=“_blank”> www.baidu.com </a>
  • href 超链接的目标地址
  • target ”blank“ 是在一个新的窗口打开 锚点 通过 href 记录 标签的 ID a 标签的功能
  • 超链接
  • 锚点
  • 电话
      <a href=“tel:13888888888”>click</a>
  • 邮件
      <a href=“mailto:13888888888@qq.com”>click</a>
  • 协议限定符
      <a href=“javascript:alert(‘hello’)”>click</a>

# form 表单

    <form action="" method="get">
        <input type="text">
        <input type="password">
        <input type="radio">

        <input type="submit">
    </form>

输入框：

<input type=“text” />

密码框：

<input type=“password” >

单选框：

<input type=“radio”>

复选框：

<input type=“checkbox” checked=“checked” />

下拉框：

<select>
  <option></option>
</select>

# 注释

  <!-- hello world -->

【面试合集】