常用的 html 标签及注意事项
<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 标签及注意事项的更多相关文章
- 移动端web开发 尽量哪些标签 常用标签及注意事项
H5手机移动端WEB开发资源整合 常用的标签及注意事项: https://blog.csdn.net/u012118993/article/details/56023399 移动前端不得不了解的htm ...
- HTML之:fieldset——一个不常用的HTML标签
2016年4月14日17:10:02记录 一个不常用的HTML标签fieldset,不过我觉得比较有意思,其语法如下: <fieldset><legend>fieldset名称 ...
- JSP 标准标签库(JSTL)之最常用的JSTL标签总结
JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能. Apache Tomcat安装JSTL 库步骤如下: 从Apache的标准标签库中下载的二进包(jakarta-t ...
- 常用HTML meta 标签属性(网站兼容与优化需要),meta标签
常用HTML meta 标签属性(网站兼容与优化需要),meta标签 标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索 ...
- Django常用的模板标签
django 目前了解的各个文件的作用: manage.py: 运行服务 urls: 路由 views: 处理数据 传递给 html模板 html文件: 通过 {{变量名}}接收变量 通过 模板标 ...
- css的reset和常用的html标签的默认样式整理
先看下常用的这些标签浏览器的默认样式有哪些: body{ margin: 8px;} hr{ border:1px inset; margin-top:.5em;margin-bottom:.5em; ...
- html中的一些常用的样式标签
html中的一些常用的样式标签 <p>这里是文本,<mark>高亮</mark></p> <strong>加粗,加重语气</stron ...
- 自动回复之实现随机回复与常用Mapper XML标签
[常用Mapper XML标签] 1.基本的:select.insert.update 等 2.可读性.方便拼SQL:where.set.trim 3.减少重复:sql 4.逻辑控制:if.choos ...
- HTML中常用的部分标签(一)
[常见的块级标签] 标题标签<h1></h1>...<h6></h6> 水平线<hr/> 段落<p></p> 换行& ...
随机推荐
- 【Luogu1393】动态逆序对(CDQ分治)
[Luogu1393]动态逆序对(CDQ分治) 题面 题目描述 对于给定的一段正整数序列,我们定义它的逆序对的个数为序列中ai>aj且i < j的有序对(i,j)的个数.你需要计算出一个序 ...
- Python Django的生产部署方式
本地化部署的Django有很大的局限性,无法用于生产环境,比如无法抗住多并发,无法长时间的运行,容易造成网页无响应的问题.所以如何将Django部署到真正的生产环境中,让其能够真正的像正常的网页一样工 ...
- mycat操作MySQL第一篇:全局表
1.安装mycat,点击bin下面startup_nowrap.bat启动 2.客户端连接mycat:server.xml里面的 <!--连接mycat用户名和密码.数据库--> < ...
- JVM堆外内存随笔
一 JVM堆外内存 1)java与io(file,socket)的操作都需要堆外内存与jvm内存进行互相拷贝,因为操作系统是不懂jvm的内存结构的(jvm的内存结构是自管理的),所以堆外内存存放的是操 ...
- APNS IOS 消息推送JSON格式介绍
在开发向苹果Apns推送消息服务功能,我们需要根据Apns接受的数据格式进行推送.下面积累了我在进行apns推送时候总结的 apns服务接受的Json数据格式 示例 1: 以下负载包含哦一个简单的 a ...
- 基于python语言的签名算法
在wiki上看完接口文档根据传入的参数来查看返回的测试结果,测试结果提示缺少参数,找开发小伙伴沟通,原来发现缺少公共参数.找开发拿到公共参数的接口文档,发现里面传入的参数包含时间戳和签名. 时间戳:姑 ...
- Mysql自连接的一些用法
自连接是连接的一种用法,但并不是连接的一种类型,因为他的本质是把一张表当成两张表来使用. mysql有时在信息查询时需要进行对自身连接(自连接),所以我们需要为表定义别名. 我们举例说明,下面是商品采 ...
- iOS 提交审核报错 ERROR ITMS-90087解决办法
ERROR ITMS-: "Unsupported Architectures. The executable for yht.temp_caseinsensitive_rename.app ...
- numpy用法小结
前言 个人感觉网上对numpy的总结感觉不够详尽细致,在这里我对numpy做个相对细致的小结吧,在数据分析与人工智能方面会有所涉及到的东西在这里都说说吧,也是对自己学习的一种小结! numpy用法的介 ...
- 微信小程序开发之--”emplate模板“的应用
第一步:定义模板 ①:新建一个template文件夹用来管理项目中所有的模板(本文案例定义文件夹名为:temp): ②.新建一个wxml文件来定义模板(本文案例定义文件夹名为:temp.wxml): ...