• html 常用的body标签归纳


     块级元素与行内元素的区别: 

      所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。
      这两个元素是专门为定义CSS样式而生的。

      块元素可以写入高和款,行内元素则根据自有内容和浏览器窗口比例自适应调节宽和高

     

    1 标题标签

      块元素

        <h1>标题1</h1>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <h4>标题4</h4>
        <h5>标题5</h5>
        <h6>标题6</h6>

    2  常用小标签

        <!--换行-->
        <br>
        <!--水平线--><hr>
        <b>加粗</b>
        <i>斜体</i>
        <u>下划线</u>
        <s>删除</s>
        <p>段落标签</p>

    3 特殊字符 

         空格   &nbsp;    
         大于 &gt;    
         小于  &lt;    
         人民币符号 &yen;
         & &amp;
         版权 &copy;
         注册 &reg;

     4 div标签和span标签

      div标签用来定义一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。
      span标签用来定义内联(行内)元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。

      p标签不能包含块级标签,p标签也不能包含p标签。

    5  img标签

      <img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

    6 a标签

      超链接标签

      所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。

      <a href="http://www.oldboyedu.com" target="_blank" >点我</a>

    href属性指定目标网页地址。该地址可以有几种类型:

    • 绝对URL - 指向另一个站点(比如 href="http://www.jd.com)
    • 相对URL - 指当前站点中确切的路径(href="index.htm")
    • 锚URL - 指向页面中的锚(href="#top")

       

    target:

    • _blank表示在新标签页中打开目标网页
    • _self表示在当前标签页中打开目标网页

    对超链接下划线设置

    使用代码"text-decoration"
    语法: 
    text-decoration : none || underline || blink || overline || line-through 

    text-decoration参数: 
    none :  无装饰
    blink :  闪烁
    underline :  下划线
    line-through :  贯穿线
    overline :  上划线

    7 列表 

    1.无序列表

    <ul type="disc">
      <li>第一项</li>
      <li>第二项</li>
    </ul>

    type属性:

    • disc(实心圆点,默认值)
    • circle(空心圆圈)
    • square(实心方块)
    • none(无样式)

    2.有序列表

    <ol type="1" start="2">
      <li>第一项</li>
      <li>第二项</li>
    </ol>

    type属性:

    • 1 数字列表,默认值
    • A 大写字母
    • a 小写字母
    • Ⅰ大写罗马
    • ⅰ小写罗马

    3.标题列表

    复制代码
    <dl>
      <dt>标题1</dt>
      <dd>内容1</dd>
      <dt>标题2</dt>
      <dd>内容1</dd>
      <dd>内容2</dd>
    </dl>
    复制代码

    8 表格

        表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
    表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。
    表格的基本结构:

        

    <table>
      <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>爱好</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>1</td>
        <td>Egon</td>
        <td>杠娘</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Yuan</td>
        <td>日天</td>
      </tr>
      </tbody>
    </table>
    

    属性:

    • border: 表格边框.
    • cellpadding: 内边距
    • cellspacing: 外边距.
    • 像素 百分比.(最好通过css来设置长宽)
    • rowspan: 单元格竖跨多少行
    • colspan: 单元格横跨多少列(即合并单元格)

    9 form 表单 

      功能:

      表单用于向服务器传输数据,从而实现用户与Web服务器的交互

      表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等。

      表单还可以包含textarea、select、fieldset和 label标签。

      

    from django.conf.urls import url
    from django.shortcuts import HttpResponse
    
    
    def upload(request):
        print("request.GET:", request.GET)
        print("request.POST:", request.POST)
    
        if request.FILES:
            filename = request.FILES["file"].name
            with open(filename, 'wb') as f:
                for chunk in request.FILES['file'].chunks():
                    f.write(chunk)
                return HttpResponse('上传成功')
        return HttpResponse("收到了!")
    
    urlpatterns = [
        url(r'^upload/', upload),
    ]
    

    10 input

      <input> 元素会根据不同的 type 属性,变化为多种形态。

      type属性:

      <input type=text" />   单行输入文本

      <input type="password"  />   密码输入框

      <input type="date" />   日期输入框

      <input type="checkbox" checked="checked"  />    复选框

      <input type="radio"  />       单选框

      <input type="submit" value="提交" />   提交按钮

      <input type="reset" value="重置"  />     重置按钮

      <input type="button" value="普通按钮"  />    普通按钮

      <input type="hidden"  />      隐藏输入框

      <input type="file"  />        文件选择框

      <input type='email' />      可对内容检查是否符合Email格式的字符串

       属性说明:

    • name:表单提交时的“键”,注意和id的区别
    • value:表单提交时对应项的值
      • type="button", "reset", "submit"时,为按钮上显示的文本年内容
      • type="text","password","hidden"时,为输入框的初始值
      • type="checkbox", "radio", "file",为输入相关联的值
    • checked:radio和checkbox默认被选中的项
    • readonly:text和password设置只读
    • disabled:所有input均适用
    • placeholder:  占位符,效果是input框里面有浅色的无法选中的字符

    11  select标签 

    <form action="" method="post">
      <select name="city" id="city">
        <option value="1">北京</option>
        <option selected="selected" value="2">上海</option>
        <option value="3">广州</option>
        <option value="4">深圳</option>
      </select>
    </form>
    

      属性说明:

    • multiple:布尔属性,设置后为多选,否则默认单选
    • disabled:禁用
    • selected:默认选中该项
    • value:定义提交时的选项值,值由选定option值决定

    12 label标签

      定义:<label> 标签为 input 元素定义标注(标记)。

      

      

    说明:

    1. label 元素不会向用户呈现任何特殊效果。
    2. <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
    <form action="">
      <label for="username">用户名</label>
      <input type="text" id="username" name="username">
      <label for="username">
        <input type="text" id="username" name="username">用户名
      </label>
      
    </form>

    13 textarea 多行文本

    <textarea name="memo" id="memo" cols="30" rows="10">
      默认内容
    </textarea>

    属性说明:

    • name:名称
    • rows:行数
    • cols:列数
    • disabled:禁用
  • 相关阅读:
    (译)linux系统关于命令echo的15个例子
    linux之grep实例讲解
    linux grep练习
    (译)"usermod"命令使用完全指导---15个练习例程截图
    linux分区,文件系统,目录结构概述
    Linux 配置YUM
    Linux 强制安装rpm 包
    $LANG、$NLS_LANG 记录一下
    Oracle性能诊断艺术-相关脚本说明
    datafile相关(add、rename、drop)
  • 原文地址:https://www.cnblogs.com/yuanji2018/p/9735887.html
Copyright © 2020-2023  润新知