zoukankan      html  css  js  c++  java
  • 前端标签基础

    0.body内常用标签

    <hn>: n的取值范围是1~6; 从大到小. 用来表示标题.
    
    <p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
    
    <b> <strong>: 加粗标签.
    
    <strike>: 为文字加上一条中线.
    
    <em>: 文字变成斜体.
    
    <sup>和<sub>: 上角标 和 下角表.
    
    <br>:换行.
    
    <hr>:水平线
    
    特殊字符:
          &lt; &gt;&quot;&copy;&reg;
    
    

    1.导入css文件地址

    <link rel="stylesheet" href="01.css"/>  
    

    2.重定向content=“时间;URL=转向的地址URL”

    <meta http-equiv="refresh" content="3;URL=https://www.baidu.com">
    什么是URL?
    URL是统一资源定位器(Uniform Resource Locator)的缩写,也被称为网页地址,是因特网上标准的资源的地址。
    URL举例
    http://www.sohu.com/stu/intro.html
    http://222.172.123.33/stu/intro.html
    
    URL地址由4部分组成
    第1部分:为协议:http://、ftp://等 
    第2部分:为站点地址:可以是域名或IP地址
    第3部分:为页面在站点中的目录:stu
    第4部分:为页面名称,例如 index.html
    各部分之间用“/”符号隔开。
    

    3.a标签链接标签

    <a href="02.html" target="_blank">首页</a> ## 新打开个网页
    <a href="02.html" target="_self">首页</a> ## 原网页
    <a href="#h1">首页</a> ##	回到首页的锚点 将锚点定到顶部<h1 id="h1">我是标题1</h1>
    

    4.div和span

    <div></div> : <div>只是一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现. 
    <span></span>: <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.
    块级元素与行内元素的区别
    所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。
    这两个元素是专门为定义CSS样式而生的。
    

    5.img标签

    <img src='图片路径' alt = '图片未加载成功时的提示' title='鼠标悬浮时提示信息'
     width='宽度' height='高度'>
    

    6.列表

    无序列表
    <ul type='disc'>
    	<li>第一行<li>
    	<li>第二行<li>
    </ul>
    type属性:
    	disc:实心圆
    	circle:空心圆圈
    	square:实心方块
    	none:无样式
    	
    -------------------------------------------------------------------------------	
    有序列表
    <ol type="1" start="2">
    	<li>第一行<li>
    	<li>第二行<li>
    </ol>
    type属性:
    	1 数字列表,默认值
    	A 大写字母
    	a 小写字母
    	I 大写罗马
    	i 小写罗马
    	
    --------------------------------------------------------------------------------
    标题列表
    <dl>
      <dt>标题1</dt>
        <dd>内容1</dd>
      <dt>标题2</dt>
        <dd>内容1</dd>
        <dd>内容2</dd>
    </dl>
    --------------------------------------------------------------------------------
    表格
    <table>
      <thead> ## table_head
        <tr> ## 标签定义 HTML 表格中的行。row
          <th>序号</th> ##表头单元格 - 包含表头信息(由 th 元素创建)
          <th>姓名</th>
          <th>爱好</th>
        </tr>
      </thead>
      <tbody>    
    <tr>
           <td>1</td> ## 标准单元格 - 包含数据(由 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:单元格横跨多少列(即合并单元格)
    
    标签的总结:
    块级元素:块级大多为结构性标记
    
      <h1>...</h1>  标题一级
    
      <h2>...</h2>  标题二级
    
      <h3>...</h3>  标题三级
    
      <h4>...</h4>  标题四级
    
      <h5>...</h5>  标题五级
    
      <h6>...</h6>  标题六级
    
      <hr>  水平分割线
    
      <p>...</p>  段落
    
      <ul>...</ul>  无序列表
    
      <ol>...</ol>  有序列表
    
      <dl>...</dl>  定义列表
    
      <table>...</table>  表格
    
      <form>...</form>  表单
    
      <div>...</div>
    
    行内元素:行内大多为描述性标记
    
      <span>...</span>
    
      <a>...</a>  链接
    
      <br>  换行
    
      <b>...</b>  加粗
    
      <strong>...</strong>  加粗
    
      <img >  图片
    
      <i>...</i>  斜体
    
      <em>...</em>  斜体
    
      <del>...</del>  删除线
    
      <u>...</u>  下划线
    
      <input>...</input>  文本框
    
      <textarea>...</textarea>  多行文本
    
      <select>...</select>  下拉列表
    
  • 相关阅读:
    jquery笔记
    JavaScript 运动框架 Step by step(转)
    js中获取页面元素方法总结
    图片缩放效果IE和火狐兼容模式
    js循环运动效果实现
    网页捕捉错误
    (图文介绍)Virtualbox下实现Ubuntu虚拟机和win7主机文件共享(很简单,亲自试用,按此步骤一般都会成功)
    FFT算法实现(fft算法)快速傅里叶变换算法实现
    $_SESSION跨页面问题
    暂别ACM,转移阵地
  • 原文地址:https://www.cnblogs.com/oxtime/p/11648578.html
Copyright © 2011-2022 走看看