HTML三:字体<font></font>;段落<p></p>;注释<!---->;标题<h1></h1>;图片<img src=‘‘>;超链接<a></a>;锚点;列表(无序&有序);

●HTML部分主要了解HTML标签,其标签主要是字体段落注释标题图片超链接锚点列表表格图表等。

这篇博客只要介绍:字体<font></font>,段落<p></p>,注释<!---->,标题<h1></h1>,图片<img src=''>,超链接<a></a>,锚点,列表的用法和注意事项。

目录

1.字体标签:<font></font>

2.段落标签:<p></p>

3.注释标签:<!---->

4.HTML中常见的转义字符

5.标题标签:<h1></h1>

6.图片img标签:<img src=‘‘>

7.超级链接标签:<a></a>

8.锚点

9.列表

 


1.字体标签:<font></font>

作用:这个标签,可以设置字号,字体,字体颜色等;

(1)size:字体大小,1-7,数字越大,字越大;当超过7后,字体就不再继续大了,还是7号字;   

(2)face:字体,一般word里常用的字体,在face属性中都可以使用;

(3)color:字体颜色;可以用颜色的英文单词,RGB颜色表示方式;十六进制颜色表示方式;(不同的属性之间用空格间隔)

(4)h5已经不支持<font>标签了。现在可以在CSS中改变文本的字体字号颜色等;


2.段落标签:<p></p>

作用:主要作用是定义一个段落;因为中IDE中的文字像下图这样分段写的话,其实是再浏览器中是不会分段的,只有使用段落标签,这些不同的文字才会在浏览器中以段落形式展现。

            

(1)有时可以省略</p>,但不提倡这样做;

(2)<br>标签:换行,不换段;<p>标签会让不同段落之间有一定空行;<br>不会,换行后的内容还是一个段落;

(3)在实际开发中,<p></p>和<br>具体选用哪个,需要根据业务需求来定;但对同一个界面,到时是使用<p></p>,还是使用<br>必须要统一,不要混着用;

对下面的代码加注释&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;style&gt; #backg { width: 919px; height: 272px; } div img { width: 300px; height: 222px; margin-top: 20px; margin-left: 10px; } #h3 { color: rgb(132, 106, 90); font-weight: 600; font-size: 23px; margin-top: -224px; margin-left: 340px; } #p1 { font-size: 14px; color: rgb(20, 111, 158); font-weight: 550; margin-top: 13px; margin-left: 340px; } #p2 { width: 575px; font-size: 13.2px; color: black; text-indent: 2em; margin-top: -3px; margin-left: 340px; } #p2 span { color: rgb(20, 111, 158); font-style: italic; text-decoration: underline; } #p3 { font-size: 14px; color: rgb(20, 111, 158); font-weight: 550; margin-top: 10px; margin-left: 340px; } #p3 span { color: red; font-size: 20px; font-weight: 800; } hr { width: 560px; margin-top: -2px; margin-left: 340px; } #p4 { color: rgb(132, 106, 90); font-weight: 540; font-size: 23px; margin-top: 12px; margin-left: 340px; } #p4 span { color: red; font-weight: 800; } &lt;/style&gt; &lt;body&gt; &lt;div id=&quot;backg&quot;&gt; &lt;img src=&quot;./img/bk01.png&quot; alt=&quot;&quot;&gt; &lt;div id=&quot;h3&quot;&gt;Web前端开发工程师&lt;/div&gt; &lt;p id=&quot;p1&quot;&gt;技术要求:&lt;/p&gt; &lt;p id=&quot;p2&quot;&gt;对常用的一些Js框架了解,如jQuery、YUuI等。掌握最基本的JavaScript计算方法编写。对目前互联网流行的网页制作方法(Web2.0) HTML+CSS,以及各大浏览器兼容性有很大的了解。对前沿技术(HTML5+CSS3)的基本掌握。&lt;span&gt;Web前端技术&lt;/span&gt;你究竟掌握了多少...&lt;/p&gt; &lt;p id=&quot;p3&quot;&gt;更新时间:2015年05月19日20(已有&lt;span&gt;325&lt;/span&gt;人赞)&lt;/p&gt; &lt;hr&gt; &lt;p id=&quot;p4&quot;&gt;相关技术文章 &lt;span&gt;8&lt;/span&gt; 篇&lt;/p&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;
05-24
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值