标签案例

六个标签

div 块
span 行内元素不会换行
p 段落比div多了上下外边距 16px
&nbsp；普通空格网页值只能识别单个连续的普通空格
&emsp；一个当前字体大小（中英文）
br 换行没有结束标签（开始标签与结束标签中不需要写入内容则可以省略结束标签）每一个标签都有默认样式 br看不见样式有换行效果
hr 水平分割线
h1-h6 六级标题换行加粗字体大小更改一级标题字体最大
四级标题和普通文本大小一致
代码如下

!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标签案例</title>
</head><body>
<div>这是一个div </div><span>这是一个span标签</span><p>&emsp;这是一个p标签</p><br><hr><h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3><h4>这是四级标题</h4><h5>这是五级标题</h5><h6>这是六级标题</h6></body></html>

列表标签

6个列表标签

ul 无序列表
ol 有序列表有序号，上下边距为(margin)16px 左侧内补(padding)40px 圆心/序号出了li范围
li 列表项目默认样式：相当于div 自带实心圆点(::marker伪元素) 不会单独存在
ol或ul 默认序号、原点都在左侧内补区域内 dl 自定义列表
dt 自定义列表项相当于li
dd 自定义列表项目说明ol或ul默认序号、原点都在左侧内补区域内

1有序列表ol

代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body>
<ol><li>这是一个项目</li><li>这是一个项目</li><li>这是一个项目</li></ol></body></html>

2无序列表ul

代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body>
<ul><li>这是一个项目</li><li>这是一个项目</li><li>这是一个项目</li></ul></body></html>

3自定义列表

代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><dl><dt>11111</dt><dd>11111的说明</dd><dt>22222</dt><dd>22222的说明</dd></dl></body></html>

style属性

style=“属性名:属性值;属性名:属性值;”

color:red      文字的颜色  红色
background-color:red     背景的颜色
font-size:2em     文字的大小
font-weight: bold 100-900    字体的粗细
display: block(块元素div)/inline(行内元素span)
border: 1px solid(直线) red(颜色) 边框 (宽度  线型  颜色)            dotted(虚线)
margiin: 10px   外边距
padding: 10px   内补
只有块元素可以给宽高

测试代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><span style="color:red ; background-color: greenyellow;">前景色与背景色</span><span style="font-size: 50px;font-weight: 600;">文字的大小粗细</span><hr><div style="display: inline;">div变身span</div><div style="display: inline;">div变身span</div><hr><span style="display: block;">span变身div</span><span style="display: block;">span变身div</span><hr><span style="border: 4px solid rebeccapurple;">边框演示</span><hr><span style="margin: 60px; padding: 30px ; width: 500px ; height: 500px; border: 5px dotted blue ;">内补与外边距</span><divstyle="margin:  60px; padding: 30px ; width: 500px ; height: 500px; border: 5px dotted blue ; font-size: 50px ;  ">内补与外边距</div><hr><dl><dt><istyle="  width: 5px; height: 5px; display: inline-block; background-color: rebeccapurple; "></i><span>1</span></dt><dt><istyle=" width: 5px; height: 5px; display: inline-block; background-color: rebeccapurple; "></i><span>2</span></dt><dt><istyle=" width: 5px; height: 5px; display: inline-block; background-color: rebeccapurple; "></i><span>3</span></dt></dl></body></html>

Emmet插件

* 重复多少次 div10
> 嵌套 div>p
{ } 内容 div>{p}
$ 递增 div10>{div$}
+ 并列 p+div
( ) 整体 (div+p)*2

测试代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body></body></html><!-- div*5 -->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<!-- p>span -->
<p><span></span></p><!-- p>{123} -->
<p>123</p>
<!-- div*5>{1$} -->
<div>11</div>
<div>13</div>
<div>13</div>
<div>14</div>
<div>15</div><!-- p+span+div+a -->
<p></p>
<span></span>
<div></div>
<a href=""></a><!-- (p+a)*2 -->
<p></p>
<a href="">111</a>
<p></p>
<a href="">222</a><!-- div>a*5 -->
<div><a href="">1111</a><br><a href="">222</a><p></p><a href="">333</a><a href=""></a><a href=""></a>
</div>
<!-- (ul>li*3>a)*2 -->
<ul><li><a href=""></a></li><li><a href=""></a></li><li><a href=""></a></li>
</ul>
<ul><li><a href=""></a></li><li><a href=""></a></li><li><a href=""></a></li>
</ul>
<!-- div>(ul>li*6>img+p>a)*2 -->
<div><ul><li><img src="" alt=""><p><a href=""></a></p></li><li><img src="" alt=""><p><a href=""></a></p></li><li><img src="" alt=""><p><a href=""></a></p></li><li><img src="" alt=""><p><a href=""></a></p></li><li><img src="" alt=""><p><a href=""></a></p></li><li><img src="" alt=""><p><a href=""></a></p></li></ul><ul><li><img src="" alt=""><p><a href=""></a></p></li><li><img src="" alt=""><p><a href=""></a></p></li><li><img src="" alt=""><p><a href=""></a></p></li><li><img src="" alt=""><p><a href=""></a></p></li><li><img src="" alt=""><p><a href=""></a></p></li><li><img src="" alt=""><p><a href=""></a></p></li></ul>
</div>

总结
以上是html中标签的使用和style常用属性总结及Emmet插件的使用，欢迎大家沟通讨论

html标签和style的使用及Emmet插件0719相关推荐

JavaScript正则表达式给html字符串的img标签增加style样式
平时我们使用正则表达式更多的是提取.过滤等,比如提取html字符串中的图片呀等等,而最近遇到的一个问题是要给html字符串中的img标签增加style样式,就想到了使用正则表达式,主要是对正则表达式的 ...
JS DOM获取标签/元素style样式
JS DOM获取标签/元素style样式文章目录 JS DOM获取标签/元素style样式 .style getComputedStyle() .style 只能获取行内样式,不能获取style标签 ...
html字符串img添加style,js 匹配 img标签增加 style样式
给img标签增加 style样式: 1.如果img 标签没有style 就先添加style标签 2.添加标签后统一再添加style样式 function imgTagAddStyle (htmlstr ...
给DreamweaverCs6安装Emmet插件,让你快速编写html标签
Dreamweaver是一款优秀的网页编辑器,但是它的代码提示却太那啥了,这篇文章介绍了如何在DreamweaverCs6中安装Emmet插件(emmet这款插件相信用过Sublime Text的朋友 ...
Emmet插件使用方法总结
Emmet插件使用方法总结在前端开发的过程中,一大部分的工作是写 HTML.CSS 代码.特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等. ...
atom自动补全html代码,Atom - Emmet插件的使用详解（HTML/CSS代码自动补全）
一.Emmet的安装与介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的工具,能够实现 HTML.CSS 的快速编写. 官网地址:http://emmet.io/ 官 ...
Emmet插件的常用语法
本人使用的代码编辑工具是SublimeText,Emmet是一个代码的缩写插件,使用代码缩写快速完成代码编写,前提条件需要安装emmet插件,如下图,打开SublimeText 使用快捷键 Ctrl ...
前端开发利器Emmet插件的基本使用总结
1.Emmet的简介 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的工具,能够实现 HTML.CSS 的快速编写. 官网地址:http://emmet.io/ 官方文档 ...
sublime Emmet插件使用方法总结
Emmet(前身是Zen Coding),它可以极大的提高代码编写的效率,它提供了一种非常简练的语法规则,然后立刻生成对应的 HTML 结构或者 CSS 代码,同时还有多种实用的功能帮助进行前端开发, ...

html标签和style的使用及Emmet插件0719

标签和style的使用及Emmet插件

标签案例

列表标签

1有序列表ol

2无序列表ul

3自定义列表

style属性

Emmet插件

html标签和style的使用及Emmet插件0719相关推荐

最新文章

热门文章