美文网首页
畅游 HTML标签、属性

畅游 HTML标签、属性

作者: yytyff | 来源:发表于2017-02-10 21:21 被阅读0次

    a

    链接,链到一个地址
    <a href="http://jirengu.com" target="_blank" title="饥人谷">饥人谷.com</a>
    <a href="#">饥人谷.com</a>:"#"是定位到页面上的某点的
    <a href="#about">饥人谷.com</a>
    <a href="/getCourse">饥人谷.com</a>
    

    img

    展示一张图片
    ![](a.png)alt 是指如果前面的图片链接有问题,会有显示,
    还有就是对于残障人士,方便理解,收索引擎的优化有好处,以及可以知道图片是什么
    img是只闭合标签,最后不需要加 /
    

    div

    语义为“一大块”,用于给页面划分区块,让结构更清晰
    <div id="header">...</div>
    <div id="content">...</div>
    <div id="footer">...</div>
    id和class的区别,id:给一个元素取名字,去命名给元素添加标记,以至于下次可以查询
    。class代表一类的东西,不同元素可以加class
    

    ul li:无序列表

    ul: unsort list 无序列表
    用于表示并列的内容
    ul的直接子元素是li
    可以嵌套
    <ul class="nav">
      <li><a href="#">首页</a></li>
      <li><a href="#">关于</a></li>
      <li>
        <a href="#">更多</a>
        <ul>
          <li>联系</li>
          <li>地址</li>
        </ul>
      </li>
    </ul>
    

    ol li

    ol: order list 有序序列表 用于表示带步骤或者编号的并列内容 ol的直接子元素只能是li 可以嵌套
    <h2>把大象关到冰箱的步骤</h2>
    <ol>
      <li>把大象变小</li>
      <li>打开冰箱</li>
      <li>把大象塞进去</li>
    </ol>
    dl dt dd
    用于展示一系列 “标题:内容... ”的场景
     <dl>
      <dt>商品名称:</dt>
      <dd>青花瓷</dd>
      <dt>特征:</dt>
      <dd>白色</dd>
      <dd>圆口</dd>
      <dt>商品介绍</dt>
      <dd>这是一个年代久远的瓷器,很贵,易碎</dd>
    </dl>
    

    button

    按钮
    <button>点我</button>
    
    strong em span
    span 最弱,这三个都可以标记来加样式
    em 需要强调一下
    strong 很重要、强调性更强
     <p>优惠 <strong>100</strong> 元</p>
    <p>小谷 <em>2</em> 岁了</p>
    

    iframe

    用于在当前页面嵌入一个页面 注意跨域操作问题
    <iframe src="http://jirengu.com" name="myPage"></iframe>
    <p><a href="http://www.w3cschool.cc" target="myPage">W3Cschool.cc</a></p>
    

    table:做表格时用table

    用于展示表格,不要用来做布局 thead tbody tfoot可省略,
    浏览器会自动添加 border-collapse: collapse;用于合并边框
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年纪</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>姓名</th>
          <th>年纪</th>
        </tr>
        <tr>
          <td>小明</td>
          <td>18</td>
        </tr>
        <tr>
          <td>小花</td>
          <td>20</td>
        </tr>  
      </tbody>
      <tfoot></tfoot>
    </table>
    
    <table>
      <tr>
        <th>姓名</th>
        <th>年纪</th>
      </tr>
      <tr>
        <td>小明</td>
        <td>18</td>
      </tr>
      <tr>
        <td>小花</td>
        <td>20</td>
      </tr>
    </table>
    
    现在一般用这个:
    <table>
        <tr>
            <th>name</th>
            <th>sex</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>男</td>
        </tr>
        <tr></tr>
    </table>
    

    DOCTYPE meta

    <!DOCTYPE html>
    D指文档对象模型,标准模式:加上这个东西告诉浏览器该怎样去渲染,
    混杂模式:不加这个东西,浏览器以宽松的方式去渲染,在不同的浏览器以不同的方式渲染
    <html lang="zh">:告诉浏览器用了什么语言
    
    !DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="utf-8">:编码方式
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    :双核浏览器
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    用于移动端的展示合理
        <meta name="keywords" content="前端 饥人谷">
        <meta name="description" content="最有爱的前端学习社区">
    搜索引擎优化
        <title>Document</title>
    </head>
    

    块级元素和行类元素的区别

    块级元素可以占据以整行的空间,
    行类元素只占本身的宽度a链接,span,strong,img em button
    

    相关文章

      网友评论

          本文标题:畅游 HTML标签、属性

          本文链接:https://www.haomeiwen.com/subject/nnrnittx.html