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

    一、块级标签

    标题标签<h1></h1>...<h6></h6>
    水平线<hr/>
    段落<p></p>
    换行<br/>
    引用<blockquote</blockquote>
    预格式<pre></pre>
    
    引用标签<blockquote></blockquote>
    表明标签中的文字,为引用的内容,浏览器显示为等宽字体,并缩进。
    cite属性,表明引用的来源,一般为引用的网址URL
    <blockquote cite="http://www.yt4561761.com">
    hahahahahahah
    </blockquote>
    
    预格式标签<pre></pre>
    浏览器解析时,会按照等宽字体显示,并保留标签内的空格和回车。
    常用于保留代码格式。
    <pre>yt4561761
    yt4561761
    yt4561761
    </pre>
    

      

    有序列表ol order list

    <ol>
    <li>一</li>
    <li>二</li>
    <li>三</li>
    <li>四</li>
    </ol>
    

      

    无序列表ul unorder list

    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    </ul>
    

      

    定义描述列表

    <dl>
    <dt>标题</dt>
    <dd>描述项</dd>
    </dl>
    一般情况下,标题dt只有一项。描述项dd可以有多项。
    浏览器显示时,标题顶格显示,dd缩进显示。
    <dl>
    <dt>这是dl列表的标题</dt>
    <dd>描述项1</dd>
    <dd>描述项2</dd>
    <dd>描述项3</dd>
    </dl>
    

     

    二、行级标签

     

    span 文本
    img 图片
    em 强调
    strong 强调
    q 短引用
    a 超链接
    i 倾斜
    b 加粗
    small 缩小字体
    u 下划线
    
    span(文本):用于包裹一部分文字,进行特定样式的修改。
    虞涛真<span style="color:red; font-size:36px;">酷</span>!!
    
    em(强调):浏览器显示为倾斜。
    strong(强调):浏览器显示为加粗。
    

      

    img 图片标签

    1-src属性:表示图片引用路径。
    常见路径的写法:
    ①相对路径:
    Ⅰ -当图片在当前文件下一层时:文件夹名/图片名 例如:img/abc.jpg
    Ⅱ-当图片与当前文件在同一层时:图片名 例如:src="abc.jpg"
    Ⅲ-当图片在当前文件上一层时:../图片名 例如:src="../abc.jpg"
    使用相对路径时,图片最外层只能放到网站根目录(图片必须要在项目文件夹中)
    ②绝对路径:写法file:///E:/aaa.png 但是,严禁使用
    ③网络连接:直接使用图片的网络地址,但由于图片在别的服务器,不可控,故不建议使用
    2-title:图片的标题。当鼠标指上时,显示的提示文字。
    3-alt:当图片无法加载时显示的文字。
    4-width/height:图片的尺寸,相当于CSS中的style=""
    5-align:图片周围的文字,相对于图片的排列方式。可选值:top/center/bottm
    <img src="../img/285-1606240Z040347.jpg" title="漩涡鸣人"/>
    <img src="[Liuyun&VCB-S]HanaSaku Iroha[01][Hi10p_1080p][BDRip][x264_flac_2ac3]_2015125173925.bmp"
    title="松前绪花" alt="图片无法显示,请刷新"/>
    <img src="pic/a947a8ec8a1363272535dd01938fa0ec09fac744.png" title="DEVIL MAY CRY"/>
    

      

    三、表格标签

    table

    <table></table>表格框
    <tr></tr>表格行
    <td></td>表格列
    <th></th> 表格标题列(将tr中的td替换为th),th默认加粗且在单元格居中显示。
    

      

    1-border:表格边框属性;当使用border="1"设置边框时,会在所有td以及table上嵌套边框,当border加大时,只有table框会加粗。
    2-cellspacing:单元格与单元格之间的间隙。当cellspacing="0"时,单元格之间的间隙为0,但边框线并不会合并。
    ☆☆合并边框的写法style="border-collapse:collapse;" 使用边框合并时,无需设置cellspacing。
    3-cellpadding:单元格内边距,单元格中文字与单元格边框之间的距离。
    4-width/height:表格的宽高
    5-align:设置表格在父容器中的对齐方式 ,left/居左 center/居中 right/居右
    ☆☆当表格使用align属性时,相当于使表格浮动,可能会导致表格后面的元素受表格浮动影响,导致布局错乱。
    6-bgcolor:背景色
    7-background:背景图,后接相对路径。背景图和背景色同时生效时,图会覆盖背景色
    8-bordercolor:设置边框颜色
    

      

    表格的跨行与跨列

    1-跨列:colspan,某单元格跨N列,则该单元格右边的N-1个td就不需要了。
    2-跨行:rowspan,某单元格跨N行,则该单元格下边的N-1个td就不需要了。
    

      

    四、表单标签

    form两个重要属性

    action:表单需要提交的服务器地址
    method:表单提交数据使用的方法,get/post
    >>>get和post的区别
    ① get传参使用URL传递,所有参数在地址栏可见,不安全;get传参数据量有限。
    ② post传参使用http请求传递,比较安全;post可以传递大量数据。
    但是,get请求的传输速率比post快。
    

      

    input的常用属性

    ① type:设置input的输入类型
    ② name:给input输入框命名。一般情况下,name属性必不可少。因为,传递数据时,使用name=value(输入内容)的形式传递。
    ③ value:input输入框的默认值
    ④ placeholder:输入框的提示内容。当input有默认的value或输入值时,placeholder消失
    

      

    input-type属性的常用属性值

    ① text:文本输入框
    ② password:密码输入框,输入内容默认显示小黑点
    ③ radio:单选框 checkbox:复选框
    >>>使用radio/checkbox时,value属性必填。提交时,提交的为value中的默认值;
    >>>radio/checkbox凭借name属性,确定是否属于同一组,name相同为同组,只能选一个
    >>>使用checked="checked"属性,设置默认选中项
    ④ file:文件上传
    >>>使用accept="类型",设置只能上传的文件类型,如 accept=image/* 表示任意格式图片
    ⑤ submit:提交按钮,将所有表单数据提交至后台服务器
    ⑥ reset: 重置表单数据
    ⑦ image:图形提交按钮,跟submit一样,具有表单提交功能
    >>>使用src属性确定图片路径
    ⑧ button:普通按钮,
    

      

    下拉选择控件 select

    ① 写法:<select>
    <option></option> option可以有N多个
    </select>
    ② name属性,应该写在<select>上,所有选项只有一个name
    ③ multiple="multiple" 设置select控件为多选,可在界面使用Ctrl+鼠标,进行多选。一般 不用。
    ④ option常用属性:
    value="":当option没有value属性时,往后台传递的是<option></option>标签中的文字;
    当option有value属性时,往后台传递的是value属性的值。
    title="":鼠标指上后显示的文字。
    selected="selected":默认选中。
    ⑤ <optgroup label="山东省"></optgroup> :用于将option标签进行分组,label属性表示分组名。
    

      

    文本域 textarea

    ① 写法:<textarea></textarea>
    ② 设置宽高style=" 200px; height: 150px;" 自身有cols="" rows=""两个属性,但不常用
    ③ readonly="readonly" 设置为只读模式,不允许编辑。
    ④ style="resize: none;" 设置为宽高不允许修改。
    ⑤ style="overflow: ;" 设置当文字超出区域时,如何处理。
    >>> 也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式。
    >>> 常用属性值:hidden 超出区域的文字,隐藏无法显示
    scroll 无论文字多少,均会显示滚动
    auto 自动,根据文字多少自动决定是否显示滚动条(默认样式)
    <fieldset> 表格的边框
    <legend>边框标题</legend>
    ...若干个表单元素
    </fieldset>
    

      

  • 相关阅读:
    mysql 索引失效的几种情况
    MYSQL行转列-动态修改
    有A B C三列,用SQL语句实现:当A列大于B列时选择A列否则选择B列
    C++ 的关键字(保留字)完整介绍
    element-ui组件el-upload自定义上传时界面抖动
    React Hooks 组件卸载时触发的方法
    JS中的事件冒泡和事件捕获
    关于tranform: translate 后,元素被覆盖的问题
    Spring Boot使用@Scheduled时需要注意的坑
    redis的Lua脚本事务注意
  • 原文地址:https://www.cnblogs.com/1500418882qqcom/p/10631204.html
Copyright © 2011-2022 走看看