<a> 标签

用法:用于定义超链接

清除浏览器默认样式:

a {
    text-decoration: none;/* 去除下划线 */
    color: #333;/* 改变链接颜色 */
}

常用属性:“href” 定义超链接的 URL

     “target” 规定在何处打开文档

注意事项:<a> 标签属于内联元素,原则上不能包含块级元素,对于链接块,最好先设置 <a> 标签的样式为 { display: block; } 或者 { display: inline-block; }

     <a> 标签还可以搭配锚伪类使用,例如:

a:link { color: #333; }/* 未访问的链接 */
a:visited { color: #ff6600; }/* 已访问的链接 */
a:hover { color: #ff00ff; }/* 鼠标悬浮在链接上 */
a:active { color: #0000ff; }/* 当前选中的链接 */

<img> 标签

用法:用于定义图片

清除浏览器默认样式:<img> 标签在浏览器中相当于内联块元素,其 "vertical-align" 值默认是 "baseline",也就是基线对齐,因此图片也像文本一样,底部具有几个像素的空白节点,防止与边缘重叠。去除空白节点的方法如下:

img { display: block; }/* vertical-align 对块级元素不生效 */
img { verticla-align: top; }/* 改变vertical-align 的默认值 */

//html
<div class="test">
    <img src="data:images/test.jpg" alt="" />
</div>//css
.test { line-height: 0; }/* 在父容器设置行高为0 */
.test { font-size: 0; }/* 通过 font-size 间接设置行高为0 */

常用属性:“src” 定义显示图片的 URL

      “alt” 定义图片的替换文本

注意事项:对于有潜在用户下载需求的图片用 <img> 标签,否则使用 CSS sprite (雪碧图) 技术将多张小图或图标合成一张大图,减少http请求次数

     重复利用图片,大多数浏览器会对文档进行缓存,重复用到的图片会直接从缓存中读取

     对图片进行压缩

     使用懒加载

     使用缩略图

<p> 标签

用法:用于定义段落

清除浏览器默认样式:

p { margin: 0; }

常用属性:-

注意事项: <p> 标签虽然是块级元素,但是它只能包含内联元素,不能包含块级元素,也不能包含另一个<p> 标签

<ul> <ol> <dl> <li> 标签

用法:用于定义无序,有序,定义列表

清除浏览器默认样式:

ul,ol,dl,dd { margin: 0; }
ul,ol { padding: 0; }
ul,ol { list-style: none; }

常用属性:-

注意事项:-

<input> 标签

用法:用于用户输入

清除浏览器默认样式:

input[type='text'],input[type='button'] {
    padding: 0;
    border: none;
    outline: none;    font: 14px/24px 'Microsoft YaHei'    color: #333;
}//重置提示信息样式input::-webkit-input-placeholder { font: 14px/24px 'Microsoft YaHei';color:#999; }input:-moz-placeholder { font: 14px/24px 'Microsoft YaHei';color:#999; } input::-moz-placeholder { font: 14px/24px 'Microsoft YaHei';color:#999; } input:-ms-input-placeholder { font: 14px/24px 'Microsoft YaHei';color:#999; }

常用属性:“type” 规定 <input> 元素的类型

      “value” 规定 <input> 元素的值

注意事项:<input> 标签自带的字体样式优先级高于继承来的样式,所以一般都要重新设置它的 font 字体,避免在不同浏览器下表现不一样

     <input> 和 <img> 标签一样,相当于内联块元素,可以设置宽高

<textarea> 标签

用法:定义一个文本域

清除浏览器默认样式:

textarea {
    padding: 0;
    border: none;
    outline: none;
    overflow:auto;
    resize:none;/* 防止被用户拉伸 */
    font: 14px/24px 'Microsoft YaHei';
    color: #333;
}
textarea::-webkit-input-placeholder { font: 14px/24px 'Microsoft YaHei';color: #999; }
textarea::-moz-placeholder {  font: 14px/24px 'Microsoft YaHei';color: #999; }
textarea::-moz-placeholder {  font: 14px/24px 'Microsoft YaHei';color: #999; }
textarea:-ms-input-placeholder { font: 14px/24px 'Microsoft YaHei';color: #999; }

常用属性:-

注意事项:同 <input>

<select> 标签

用法:用于下拉列表

清除浏览器默认样式:

select {
    border: none;
    outline: none;
    -webkit-appearance: none;/* 去除默认箭头 */
    -moz-appearance: none;
    appearance: none;
}

常用属性:-

注意事项:<select> 标签默认显示第一个 <option> 中的值,如何让 <select> 显示提示信息,又不在 <option> 列表中显示出来

//html
<select>
    <option value="">请选择</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
//css
select option:first-child { display: none; }

<table> 标签

用法:用于定义表格

清除浏览器默认样式:

table { border-collapse: collapse; }/* 折叠边框 */

常用属性:-

注意事项:合并单元格,使用 <td> 标签的 “colspan” 属性合并列,使用 “rowspan” 合并行

常用的 html 标签及注意事项的更多相关文章

  1. 移动端web开发 尽量哪些标签 常用标签及注意事项

    H5手机移动端WEB开发资源整合 常用的标签及注意事项: https://blog.csdn.net/u012118993/article/details/56023399 移动前端不得不了解的htm ...

  2. HTML之:fieldset——一个不常用的HTML标签

    2016年4月14日17:10:02记录 一个不常用的HTML标签fieldset,不过我觉得比较有意思,其语法如下: <fieldset><legend>fieldset名称 ...

  3. JSP 标准标签库(JSTL)之最常用的JSTL标签总结

    JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能. Apache Tomcat安装JSTL 库步骤如下: 从Apache的标准标签库中下载的二进包(jakarta-t ...

  4. 常用HTML meta 标签属性(网站兼容与优化需要),meta标签

    常用HTML meta 标签属性(网站兼容与优化需要),meta标签 标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索 ...

  5. Django常用的模板标签

    django 目前了解的各个文件的作用: manage.py:  运行服务 urls: 路由 views: 处理数据 传递给 html模板 html文件:  通过 {{变量名}}接收变量 通过 模板标 ...

  6. css的reset和常用的html标签的默认样式整理

    先看下常用的这些标签浏览器的默认样式有哪些: body{ margin: 8px;} hr{ border:1px inset; margin-top:.5em;margin-bottom:.5em; ...

  7. html中的一些常用的样式标签

    html中的一些常用的样式标签 <p>这里是文本,<mark>高亮</mark></p> <strong>加粗,加重语气</stron ...

  8. 自动回复之实现随机回复与常用Mapper XML标签

    [常用Mapper XML标签] 1.基本的:select.insert.update 等 2.可读性.方便拼SQL:where.set.trim 3.减少重复:sql 4.逻辑控制:if.choos ...

  9. HTML中常用的部分标签(一)

    [常见的块级标签] 标题标签<h1></h1>...<h6></h6> 水平线<hr/> 段落<p></p> 换行& ...

随机推荐

  1. 【BZOJ1257】余数之和(数论分块,暴力)

    [BZOJ1257]余数之和(数论分块,暴力) 题解 Description 给出正整数n和k,计算j(n, k)=k mod 1 + k mod 2 + k mod 3 + - + k mod n的 ...

  2. Luogu3118:[USACO15JAN]Moovie Mooving

    题面 传送门 Sol 设\(f[S]\)表示看过的电影集合为\(S\),当前电影的最大结束时间 枚举电影和电影的开始时间转移 可以对开始时间\(sort\) 二分一下转移即可 # include &l ...

  3. 微信小程序之换肤的功能

    pc或者移动端实现换肤功能还是比较简单的,大致就是需要换肤的css,还有正常的css:把当前皮肤类型存入本地:然后通过js读取并判断当前应该加载哪套css. 由于微信小程序没有操作wxss的api,所 ...

  4. 【前端单元测试入门01】Mocha与chai

    Mocha 的简介 Mocha是流行的JavaScript测试框架之一,通过它添加和运行测试,从而保证代码质量 Mocha 的安装与配置 全局安装Mocha npm install -g mocha ...

  5. Spark2.1.0官方文档

    Spark 概述 Apache Spark是一个快速和通用的集群计算系统.它提供Java,scala,Python.R语言的APIs,以及支持一般执行图形的优化引擎. 它还支持一组丰富的高级工具,包括 ...

  6. angularjs 缓存详解

    一.什么是缓存 一个缓存就是一个组件,它可以透明地存储数据,以便未来可以更快地服务于请求. 缓存能够服务的请求越多,整体系统性能就提升得越多. 二.Angular 中的缓存 2.1 $cacheFac ...

  7. Spring Boot 系列(八)@ControllerAdvice 拦截异常并统一处理

    在spring 3.2中,新增了@ControllerAdvice 注解,可以用于定义@ExceptionHandler.@InitBinder.@ModelAttribute,并应用到所有@Requ ...

  8. centos7上修改主机名

    centos7上修改主机名 2017-10-09   13:45:17 个人原创,转载请注明,否则追究法律责任 1,临时修改: 和centos5,centos6 一样,重启失效 2,永久修改: 命令: ...

  9. Knowledge point

    静态网页的特点:以htm.html.sbtml.xml.js.css等为后缀扩展名. 1)程序在客户浏览器端解析,不需要读取数据库,性能和效率较高: 2)后端没有数据库支持,所以和用户的交互性差,功能 ...

  10. java判断用户输入的是否至少含有N位小数

    判断用户输入的是否至少含有N位小数. 1.当用户输入的是非数字时抛出异常,返回false. 2.当用户输入数字是,判断其数字是否至少含有N位小数,如果不含有,返回false. 3.当用户输入的数字的小 ...