zoukankan      html  css  js  c++  java
  • html知识点一

    网络三剑客:html、css、js

     

    列表属性:

    <!DOCTYPE html>
    <html>
      <head>
        <title>标题</title>
        <meta charset="UTF-8"/>
      </head>
     
      <body>
     
        显示空格&nbsp空格内容<br>换行<br> <!--圆角情况下的空格可用-->
        
        <a href="http://www.baidu.com" title="光标选择展示标题" target="_blank">百度一下</a> <!--超链接,属性:可自定义(data-....)target="_blank":打开新窗口-->
        
        <!--div标签可以看成一个可以存放标签的容器-->
        <div>我是div元素</div>    <!--换行-->    <!--块级元素,占据整行-->
        
        <!--使用span标签来组合内联元素,以便通过css来美化它-->
        <span>我是span元素</span>  <!--不换行-->  <!--内联元素-->
        
        <hr /> <!--划线,单标签-->
        
        <h1>主题内容标签,块级元素,双标签</h1>
        <h2>主题内容标签,块级元素,双标签</h2>
        <h5>主题内容标签,块级元素,双标签</h5>
        <h6>主题内容标签,块级元素,双标签</h6>
        
        <p>段落,块级元素,双标签</p>
        
        <ul>
          <li>无序列表标签</li>
          <li>无序列表标签</li>
          <li>无序列表标签</li>    
        </ul>
        
        <ol>
          <li>有序列表标签</li>
          <li>有序列表标签</li>
          <li>有序列表标签</li>    
        </ol>
        
        
        <dl>   <!--定义列表-->
          <dt>标题</dt>
          <dd>
            详情......
          </dd>
        </dl>
        
        <img src="C:UsersliuguanDesktop微微吗.png" alt="说明信息" width="100" height="100" /> <!--加载图片“./:当前目录;../:上一级目录”-->
        <img src="C:UsersliuguanDesktop微微吗.png" alt="说明信息" width="30%" height="30%" />  <!--百分比:相对于body页面的比例,自由缩放-->
        
        <!--对图片的某个区域加超链接,也可以整体加链接<a href=""><img str="" /></a>-->
        <img src="C:UsersliuguanDesktop微微吗.png" usemap="#image" /> <!--被加链接的图片,被map标签所作用的图片 usemap="#id名称"-->
        <map id="image" name="image"> <!--id:保持唯一性;name:保持兼容性-->
          <area shape="rect" coords="100,100,177,177" href="http://www.baidu.com" alt="链接说明信息" target="_blank" />  <!--shape:定义连接的形状,常用值(rect,circle);coords:确定区域坐标位置(左上角右下角的相对坐标);href:链接地址;alt:说明信息-->          
        </map>
       
      </body>
    </html>

    HTML 表格
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>标题</title>
        </head>
        <body>
            <table border="1"><!--表格:tr行,td列,th表头单元格(加粗)属性:cellpadding(单元格大小)cellspacing(单元格间距大小)-->
                <tr><th>姓名</th><th>性别</th><th>年龄</th><th>部门</th></tr>
                <tr><th>刘冠</th><td> 男 </td><td> 23 </td><td>信心中心</td></tr>
                <tr><th>刘冠</th><td> 男 </td><td> 23 </td><td>信心中心</td></tr>
            </table>    <!--td属性:colspan(规定单元格可横跨的列数,向后顶)rowspan(规定单元格可横跨的行数,向下顶)-->
        </body>
    </html>

  • 相关阅读:
    anchor-free : CornerNet 和 CenterNet 简要笔记
    图像分割中的loss--处理数据极度不均衡的状况
    python 装饰器
    python3 新特性
    VSCode Eslint+Prettier+Vetur常用配置
    JS lodash学习笔记
    JS 高端操作整理
    Vue 组件通信
    Vue 搭建vue-element-admin框架
    小程序 HTTP请求封装
  • 原文地址:https://www.cnblogs.com/ArmoredTitan/p/7299949.html
Copyright © 2011-2022 走看看