zoukankan      html  css  js  c++  java
  • HTML-常用标签

      部分内容转自:https://www.cnblogs.com/liwenzhou/p/7988087.html

    ★head内常用标签

    <title></title>			定义网页标题
    <style></style>			定义内部样式表
    <script></script>		定义JS代码或引入外部JS文件
    <link/>				引入外部样式表文件
    <meta/>				定义网页原信息

    ★body内常用标签

    ◇基本标签

    <b>加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除</s>
    
    <p>段落标签</p>
    
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
    
    <!--换行-->
    <br>
    
    <!--水平线--><hr>

    ◇特殊字符

    &nbsp;    空格
    &gt;    >
    &lt;    <
    &amp;    &
    &yen;    ¥
    &copy;    版权
    &reg;    注册

    ◇div标签和span标签

    div标签: 另起一行开始渲染 【块级标签】
    span标签:不需要另起一行渲染 【行内标签】

    块级标签:另起一行开始渲染
    行内标签:不需要另起一行

    标签嵌套:
    块级元素【可以】嵌套行内元素及部分块级元素
    行内元素【不能】嵌套块级元素

    注意:p标签不能块级标签,也不能包含p标签

    ◇img标签

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

    ◇超链接标签

    <a href="超链接">点我跳转</a> 
    target="_blank"        在新标签页打开目标网页
    target="_self"        在自己的标签页打开目标网页 【默认】    
    a可传参数
    绝对URL - 指向另一个站点(比如 href="http://www.jd.com)
    相对URL - 指当前站点中确切的路径(href="index.htm")
    锚URL     - 指向页面中的锚(href="#top"
    href属性

    ◇编号

    无序号编号

    <ul type="disc">
      <li>第一项</li>
      <li>第二项</li>
    </ul>
    disc    (实心圆点,默认值)
    circle    (空心圆圈)
    square    (实心方块)
    none    (无样式)
    type属性

    有序号编号

    <ol type="1" start="2">
      <li>第一项</li>
      <li>第二项</li>
    </ol>
    1     数字列表,默认值
    A     大写字母
    a     小写字母
    Ⅰ    大写罗马
    ⅰ    小写罗马
    type属性

    标题编号

    <dl>
      <dt>标题1</dt>
      <dd>内容1</dd>
      <dt>标题2</dt>
      <dd>内容1</dd>
      <dd>内容2</dd>
    </dl>    

    ◇表格

    <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:         单元格横跨多少列(即合并单元格)
    table可传参数

    ◇form标签

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


    表单能够包含:
      1,input系列标签,比如文本字段、复选框、单选框、提交按钮等等。
      2,textarea、select、fieldset和 label标签

    <form> </form>
    action            规定向何处提交表单的地址(URL)(提交页面)
    autocomplete    规定浏览器应该自动完成表单(默认:开启)
    enctype            规定被提交数据的编码(默认:url-encoded)
    method            规定在提交表单时所用的 HTTP 方法(默认:GET)    --> post get
    name            规定识别表单的名称(对于 DOM 使用:document.forms.name)
    novalidate        规定浏览器不验证表单
    accept-charset    规定在被提交表单中使用的字符集(默认:页面字符集)
    target            规定 action 属性中地址的目标(默认:_self)
    form可传参数

    ◇input标签

    <input type="属性名">
    name:                                表单提交时的“键”,注意和id的区别
    value:                                表单提交时对应项的值
        type="button", "reset", "submit"时,    为按钮上显示的文本年内容
        type="text","password","hidden"时,        为输入框的初始值
        type="checkbox", "radio", "file",        为输入相关联的值
    checked:                            radio和checkbox默认被选中的项
    readonly:                            text和password设置只读
    disabled:                            禁用
    input可传参数
    type元素会根据不同的 type 属性,变化为多种形态
        
    type属性值      表现形式         对应代码
            
    text           单行输入文本    <input type=text" />
    password    密码输入框           <input type="password"  />
    date        日期输入框        <input type="date" />
    checkbox    复选框            <input type="checkbox" checked="checked"  />
    radio        单选框            <input type="radio"  />
    submit        提交按钮        <input type="submit" value="提交" />
    reset        重置按钮        <input type="reset" value="重置"  />
    button        普通按钮        <input type="button" value="普通按钮"  />
    hidden        隐藏输入框        <input type="hidden"  />
    file        文本选择框        <input type="file"  />
    type属性

    补充:和input标签绑定使用的 label

    ◇select标签

    <select name="city" id="city">
        <option value="1">北京</option>
        <option selected="selected" value="2">上海</option>
        <option value="3">广州</option>
        <option value="4">深圳</option>
    </select>
    multiple:布尔属性,设置后为多选,否则默认单选
    select可传参数
    disabled:禁用
    selected:默认选中该项
    value:定义提交时的选项值
    option可传参数

    补充:<optgroup label="分组名"></opgroup>

    ◇textarea标签

    <textarea name="memo" id="memo" cols="30" rows="10">
      默认内容
    </textarea>
    name:名称
    rows:行数
    cols:列数
    disabled:禁用    
    textarea可传参数
  • 相关阅读:
    GridView怪问题,更新时读取不到编辑后的值
    又过了一周
    虚惊一场
    [Joomla] 利用configuration.php存储简单数据
    [Joomla] Phoca Gallery 2.7去版权的方法
    SL还能做什么?
    [Joomla] Joomla 1.5不支持PHP 5.3
    [ecshop] 库项目的添加过程
    [Joomla] 著名CMS系统Joomla的后台图文解说
    了解Joomla
  • 原文地址:https://www.cnblogs.com/sunch/p/9603806.html
Copyright © 2011-2022 走看看