1.段落标签<p>
<style> p{margin:0px;} </style>
2.斜体标签<em>
<em>斜体</em>
3.粗体标签<strong>
<strong>加粗</strong>
4.<span>标签
被用来组合文档中的行内元素。使用 <span> 来组合行内元素,以便通过样式来格式化它们。
例如:
<style> span{ color:blue; } </style>
这样,<span>标签包含的文本就变成了蓝色的字体。
5.<q>标签
作用:段文本引用
例如:
<p>最初知道庄子,是从一首诗<q>庄生晓梦迷蝴蝶。望帝春心托杜鹃。</q>开始的。虽然当时不知道是什么意思,只是觉得诗句挺特别。后来才明白这个典故出自是庄子的《逍遥游》,《逍遥游》代表了庄子思想的最高境界,是对世俗社会的功名利禄及自己的舍弃。</p> 在上面的例子中,“庄生晓梦迷蝴蝶。望帝春心托杜鹃。” 这是一句诗歌,出自晚唐诗人李商隐的《锦瑟》 。因为不是作者自己的文字,所以需要使用<q></q>实现引用。 注意要引用的文本不用加双引号,浏览器会对q标签自动添加双引号。 这里用<q>标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了),而是它的语义:引用别人的话。 补充知识:语义化网页结构有助于搜索引擎的收录。同一个效果可以用很多钟方式实现,但这只方便了浏览者,而搜索引擎不知道这里到底是什么内容,这里如果你使用标签,那么就告诉浏览器这里是引用的话。而且在手持设备或移动设备不能很好支持css的基础上,浏览器会使用默认的效果,因而提供较好可读性。
6.<blockquote>标签
作用:长文本引用
例如:
<blockquote>明月出天山,苍茫云海间。长风几万里,吹度玉门关。汉下白登道,胡窥青海湾。由来征战地,不见有人还。 戍客望边色,思归多苦颜。高楼当此夜,叹息未应闲。</blockquote>
注意:浏览器对<blockquote>标签的解析是缩进样式
7.<br>标签
怎么可以让每一句诗词后面加入一个折行呢?那就可以用到<br />标签了,在需要加回车换行的地方加入<br />,<br />标签作用相当于word文档中的回车。
语法:
xhtml1.0写法:
<br/>
html4.01写法:
<br>
现在一般使用 xhtml1.0 的版本的写法(其它标签也是),这种版本比较规范。
与以前我们学过的标签不一样,<br />标签是一个空标签,没有HTML内容的标签就是空标签,空标签只需要写一个开始标签,这样的标签有<br />、<hr />和<img />。
讲到这里,你是不是有个疑问,想折行还不好说嘛,就像在 word 文件档或记事本中,在想要折行的前面输入回车不就行了吗? 不好意思,在 html 中是忽略回车和空格的,你输入的再多回车和空格也是显示不出来的。
8.<hr>标签
在信息展示时,有时会需要加一些用于分隔的横线,这样会使文章看起来整齐些。
语法:
html4.01版本
<hr>
xhtml1.0版本
<hr/>
注意:
9.<address>标签
一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份。
语法:
<address>联系地址信息</address>
如:
<address>文档编写:lilian 北京市西城区德外大街10号</address>
10.<code>标签
在介绍语言技术的网站中,避免不了在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用<code>标签了,如下面例子:
<code>var i=i+300;</code>
注意:在文章中一般如果要插入多行代码时不能使用<code>标签了。
语法:
<code>代码语言</code>
注:如果是多行代码,可以使用<pre>标签。
11.<pre>标签
主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
语法:
<pre>语言代码段</pre>
如下代码:
<pre> var message="欢迎"; for(var i=1;i<=10;i++) { alert(message); } </pre>
效果如下:
注意:<pre> 标签不只是为显示计算机的源代码时用的,在你需要在网页中预显示格式时都可以使用它,只是<pre>标签的一个常见应用就是用来展示计算机的源代码。
12.<ul>标签
ul-li是没有前后顺序的信息列表。
ul{ list-style:circle; }
ul{ list-style:none }
<ul> <li>信息</li> <li>信息</li> ...... </ul>
<ul> <li>精彩少年</li> <li>美丽突然出现</li> <li>触动心灵的旋律</li> </ul>
13.<ol>标签
ol-li是有前后顺序的信息列表
<ol> <li>信息</li> <li>信息</li> ...... </ol>
<ol> <li>前端开发面试心法 </li> <li>零基础学习html</li> <li>JavaScript全攻略</li> </ol>
<ol>在网页中显示的默认样式一般为:每项<li>前都自带一个序号,序号默认从1开始。
14.<div>标签
15.<table>标签
1)属性:border
作用:规定表格边框的宽度
2)属性:cellpadding
作用:单元格中的文本与单元格边框的间距
3)属性:cellspacing
作用:单元格之间的间距
table、tbody、tr、th、td
1、<table>…</table>:整个表格以<table>标记开始、</table>标记结束。
2、<tbody>…</tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
3、<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。
4、<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。
- 常用属性: colspan:规定单元格可横跨的列数,值为数字 rowspan:规定单元格可横跨的行数,值为数字
5、<th>…</th>:表格的头部的一个单元格,表格表头。
6、表格中列的个数,取决于一行中数据单元格的个数。
总结:
16.<caption>标签
表格还是需要添加一些标签进行优化,可以添加标题和摘要。
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。语法:
<table summary="表格简介文本">
用以描述表格内容,标题的显示位置:表格上方。语法:
<table> <caption>标题文本</caption> <tr> <td>…</td> <td>…</td> … </tr> … </table>
17.<a>标签
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
例如:
<a href="http://www.imooc.com" title="点击进入慕课网">click here!</a>
上面例子作用是单击click here!文字,网页链接跳转到http://www.imooc.com这个网页。
<a href="目标网址" target="_blank">click here!</a>
<a>标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。
注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。引号只有一对!
例子: <a href="mailto:yy@qq.com? cc=xx@qq.com & bcc=aa@qq.com & subject=邮件主题 & body=邮件内容">
那么: 1)A知道自己发送邮件给了B1、B2、B3,并且抄送给了C1、C2、C3,密送给了D1、D2、D3。 2)B1知道这封是A发送给B1、B2、B3的邮件,并且抄送给了C1、C2、C3,但不知道密送给了D1、D2、D3。 3)C1知道这封是A发送给B1、B2、B3的邮件,并且抄送给了C1、C2、C3,但不知道密送给了D1、D2、D3。 4)D1知道这封是A发送给B1、B2、B3的邮件,并且抄送给了C1、C2、C3,而且密送给了自己,但不知道密送给了D2、D3。 5)邮箱地址 mailto: <a href="mailto:qiujie@staff.weibo.com">发送</a> 6)抄送地址 cc: <a href="mailto:qiujie@staff.weibo.com?cc=zz@sina.com">发送</a> 7)密件抄送地址 用分号分隔: <a href="mailto:qiujie@staff.weibo.com?bcc=zz@sina.com">发送</a> 8)多个收件人、抄送人、密送人 ; bcc: <a href="mailto:qiujie@staff.weibo.com;zz@sina.com">发送</a> 9)邮件主题 subject: <a href="mailto:qiujie@staff.weibo.com?subject=邮件主题">发送</a> 10)邮件内容 body: <a href="mailto:qiujie@staff.weibo.com?body=邮件正文">发送</a> 例子: <a href="mailto:yy@imooc.com;10001@qq.com?cc=10002@qq.com&bbc=madanteng@qqhelp.com&subject=观了不起的盖茨比有感。&body=你好,对此评论有些想法。">对此影评有何感想,发送邮件给我</a>
18.<img>标签
在网页的制作中为使网页炫丽美观,肯定是缺少不了图片,可以使用
标签来插入图片。
[站外图片上传中……(2)] <img src = "myimage.gif" alt = "My Image" title = "My Image" />
src:标识图像的位置; alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本; title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本); 图像可以是GIF,PNG,JPEG格式的图像文件。 路径有两种填写方式:绝对路径、相对路径 相对路径:相对于我们当前 html 文件的位置来写路径即可! ./表示当前目录,../表示上一级目录
19.<form>标签
注意:
1、所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在<form></form>标签之间(否则用户输入的信息可提交不到服务器上哦!)。
2、method:post/get的区别这一部分内容属于后端程序员考虑的问题。
语法:
<form method="传送方式" action="服务器文件">
<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。 action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。 method : 数据传送的方式(get/post)。 <form method="post" action="save.php"> <label for="username">用户名:</label> <input type="text" name="username" /> <label for="pass">密码:</label> <input type="password" name="pass" /> </form>
20.<input>标签
语法:
<form> <input type="text/password" name="名称" value="文本" /> </form>
举例: <form> 姓名: <input type="text" name="myName"/><br/> 密码: <input type="password" name="pass"/> </form> value="xxx" 替换为 placeholder="xxx" 的体验更好一些,placeholder属性为 HTML 5 的新属性。placeholder 属性提供可描述输入字段预期值的提示信息(hint)。该提示会在输入字段为空时显示,并会在字段获得焦点时消失。
语法:
<input placeholder="text"/> 注释:placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password。
注意:同一组的单选按钮,name 取值一定要一致,比如上同一个名称“gender”,这样同一组的单选按钮才可以起到单选的作用!
type:
name:为文本框命名,以备后台程序ASP 、PHP使用。
value:为文本输入框设置默认值。(一般起到提示作用)
21.<textarea>标签
语法:
<textarea rows="行数" cols="列数">文本</textarea>
举例:
<form method="post" action="save.php"> <label>联系我们</label> <textarea cols="50" rows="10" >在这里输入内容...</textarea> </form>
22.<select>标签
语法:
<select> <option value="提交的值">显示的值</option> ... </select> 设置selected="selected"属性,则该选项就被默认选中。 selected="selected"
<select multiple="multiple"> 然后选择时候按ctrl点鼠标选中
<option disabled="disabled">
把相关的选项组合在一起
属性 label:给选项组命名
属性 disabled:禁用该选项组
23.<label>标签
<label for="控件id名称">
注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
<form> <label for="male">男</label> <input type="radio" name="gender" id="male" /> <br /> <label for="female">女</label> <input type="radio" name="gender" id="female" /> <label for="email">输入你的邮箱地址</label> <input type="email" id="email" placeholder="Enter email"> </form>
24.<map>标签
使用 map 标签可以给图片某块区域加超链接
使用方法:
1)为 map 标签首先加上 id 属性用来为 map 标签定义一个唯一的名称
2)为了保证兼容性再加上 name 属性,属性值与 id 的值相同
3)为 map 标签所作用的图片加上 usemap 属性,属性值为 #id 名称
4)在 map 标签内嵌套 area 标签来实现给指定区域加链接
<area shape="" coords="" href ="" alt="" /> shape 属性:定义链接区域的形状,常用值 rect、circle coords 属性:确定区域的精确位置。填写坐标即可,以父元素左上角为原点,可借助qq截图来得到想要的坐标 href 属性:填写链接地址即可 alt 属性:给链接加一些说明信息
例子:
<map id="img1" name="img1"> <area shape="rect" coords="184,33,391,258" href="http:www.baidu.com" alt="百度一下" target="_blank" /> <area shape="circle" coords="507,287,20" href="http://www.sifangku.com" alt="私房库我的博客" target="_blank" /> </map>
注意:
25.<iframe>标签
创建包含另外一个文档的内联框架(即行内框架)
属性:
值:1、0
作用:规定是否显示框架周围的边框。
作用:定义 iframe 的宽度
作用:定义高度
作用:给 iframe 命名
值:yes、no、auto
作用:规定是否在 iframe 中显示滚动条
作用:规定在 iframe 中显示的文档的 URL
可以是本地的 html 文件,也可以是远程的 html 文件
标签写法
1)不允许写结束标签的元素
area,base,br,col,command,embed,hr,img,input,keygen,link,meta,paran,source,track,wbr。这些标签都是单标签例如:br 标签,不可以这样<br></br>,只能<br />这样来关闭标签。
2)可以省略结束标记的元素有:
li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td,th。
3)可以省略全部标记的元素有
html,head,body,colgroup,tbody
例如:disabled,readonly,checked 等只写属性而不写属性值得时候当做 ture 不写属性表示 false
要求:属性值不包含 空字符串,<,>,=, ‘
标签嵌套探讨
1.html 规定我们必须要嵌套着写的标签
例如:页面头部是嵌套在 head 标签里面的,主体内容都是嵌套在 body 标签里面的表单的内容是嵌套在 form 标签里面的,dt、dd 是嵌套在 dl 标签里面的,li 是嵌套到ul 标签里面的,等等...
2.块级元素可以嵌套内联元素,但是内联元素不能包含块元素
<div> <span>我是一个 span 元素</span> </div> —— 对 <span> <div>div 元素</div> </span> —— 错
3.内联元素可以嵌套内联元素
<a href="#"> <span></span> </a> —— 对
4.块级元素与块级元素嵌套注意点
<p><ol><li></li></ol></p> —— 错 <p><div></div></p> —— 错
喜欢前端的小伙伴们可以在评论区留言,寻找和小冯童鞋一样热爱前端的友人,让我们一起玩转前端的世界!
天我们讲到了制作定制日报的第一步:设置数据源。
还没看的小伙伴给你们一分钟的时间回顾一下!
今天我们继续来讲第二步:邮件合并操作。
02
邮件合并操作
◆ 建立日报正文模板 ◆
新建一个 Word 文档,然后编辑文本如下:
以下涂蓝色的文字就是我们需要定制的邮件内容,此处只是为了突出说明,大家在实际的操作中可以不必设置颜色高亮。
和之前的纯文本邮件不同:
在称呼的后面我们追加了 「<br>」;
在正文的前面追加了「 」。
这两个是 html 代码,分别代表换行和缩进。
这么做是为了在后面发送邮件的时候,让正文的格式看起来更符合一般的商务习惯。
如果没有这几个符号,以 html 格式发送的邮件就是一句长长长长长的句子,很不严谨。
◆设置动态调用邮箱及附件的宏代码◆
编写完邮件正文后,大家先别忙着关闭邮件。
按下【ALT+F11】(笔记本记得加上 Fn),调出宏代码窗口。
点击 Project(邮件正文)插入模块,将一大段代码拷入。
鉴于这一大段代码放在这里并不直观,小 E 把它放进了模板中,只把关键的几句贴出来:
'如果excel数据结构发生改变,那么请修改此次发送email地址所在列数,默认为7 .To = wb.Sheets("Sheet1").Cells(rowCount, 7) '如果excel数据结构发生改变,那么请修改此次抄送email地址所在列数,默认为8~9 .CC = wb.Sheets("Sheet1").Cells(rowCount, 8) & ";" & b.Sheets("Sheet1").Cells(rowCount, 9) '如果excel数据结构发生改变,那么请修改此次附件地址所在列数,默认为10 For colCount = 10 To endColNo .Attachments.Add Trim(wb.Sheets("Sheet1").Cells(rowCount, colCount)) Next colCount
只要小伙伴们用的是 Excel 2007 以上的版本,代码的其他部分大家基本都不需要关注。
我们只需要按第一步设置的数据源,把发送、抄送、附件路径的列对应起来就可以了~
我们在数据源设置中要注意:
发送的邮箱地址位于 G 列,因此代码中设置为 7;
每封邮件抄送给总裁和销售经理两位,分别位于 H 列和 I 列,因此代码中设置为 8 和 9;
附件是从 J 到 K 两列,但我们只需要设置从 10 开始,代码从第 10 列一直调用到数据的最末列。
如果小伙伴的数据源有差别,只需要在这三个地方小小的改动一下就行啦。
◆ 设置动态数据源 ◆
❶ 点击【邮件】→【开始邮件合并】→【邮件合并分步向导】。
❷ 设置向导:
在右边弹出邮件合并向导的菜单,选择【电子邮件】,点击【下一步:开始文档】。
默认选择【使用当前文档】,点击【下一步:选择收件人】:
❸ 选择数据源:
点击【使用现有列表】后,点击【浏览】(注意此处可不是点击下一步哦)。
然后选择我们刚才建立的 Excel 数据源文件。
此处我们选择【Sheet1$】即可。
然后回到邮件合并主菜单,选择【下一步:撰写电子邮件】。
❹ 设置动态数据源:
将光标选中【夔】字,然后选择【其他项目】,插入【姓氏】域。
如下图所示,然后关闭【插入合并域】菜单。
用同样的方法,设置分公司、项目数、金额(万元),设置完毕后如下图所示:
然后在右侧邮件合并菜单点击【下一步:预览电子邮件】—【下一步:完成合并】。
◆ 发送邮件 ◆
点击邮件合并下的【电子邮件】→收件人一栏选择「发送」
然后设置一下邮件的主题【请关注在手项目情况】,点击【确定】。
邮件就一次全部发出了!
只是这一次,是带私人订制的附件的哈!
不信?那自己动手试试吧~
私信回复【日报】获取练习文件!
同时别忘了,私信【学一招】获取全部学一招合集,做高效职场人!
、新建一个站点
二、设置站点的服务器和图片存储路径
1.设置图片存储路径:点击上图的管理站点弹出下图界面
2.设置服务器:
三.新建一个HTML文件,修改页面属性:
1.打开页面属性:
2.选择标题编码项,文档类型选择HTML5
3.配置首选参数,这样新建的HTML文件会默认使用HTML5格式
四、代码缩进快捷键:
五、HTML知识:
1.标题:标题有h1到h6几种样式,都是单独一行,字体加粗变大的效果,h1最大,h6最小
示例: <h1></h1>
2.段落:<p></p>
换行:<br />
3.加粗:<b></b> <strong></strong>语法强调
倾斜:<i></i> <em></em>语法强调
下划线:<u></u> <ins></ins>语法强调
4.大号字体:<big></big>
小号字体:<small></small>
水平分割线:<hr />
5.文本标记:<span></span>
6.项目列表: <ul>
<li></li>
</ul>
7.编号列表:<ol> 自动排序
<li></li>
</ol>
8.列表项: <dl>
<dt></dt> 分组,dt和dd是并列关系
<dd></dd>
</dl>
9.使用表格:<tabel width="600" height="600" border="1"> 表格的宽和高,边框
<caption></caption>表格的标题
<tr> 表格的行
<td></td> 表格的列
</tr>
</tabel>
10.定义书签:<a href="#dibu"></a> 创建链接,跳转到页面底部
<a name="dibu"></a> 在代码底部创建链接
11.播放音频:<embed src="" width="0" height="0"></embed>
六、CSS样式表:
1.链接CSS文件:<link rel="stylesheet" href="" /> stylesheet是样式表的意思
*请认真填写需求信息,我们会在24小时内与您取得联系。