美文网首页四期学习小组
html阶段第一小节第三天

html阶段第一小节第三天

作者: 显然2017 | 来源:发表于2017-04-15 10:41 被阅读25次

                                         HTML的标签(中)

标题标签:h1~h6,块级标签

语法:<h1>标题内容</h1>    <h2>标题内容</h2> ……

标题文字共包含6种标记。

H1 :标题标签是 标注当前页面中的文档最重要的核心主题的文本。

H1~H6标签,相对于当前文档的重要性依次降低。

注意:一般情况一个页面只能有一个H1标题(当然可以超过,但是不利于搜索SEO)。

H2~H6标签,可以再一个页面中有多个,但是不要滥用,否则会导致网页的SEO受影响,搜索引擎会认为我们作弊。

H1~H6标签不是用于字体大小样式设置,是用于表达内容的重要性。

补充快捷键:出现一堆完整的标签可以先输入标签后按TAB键(比如输入h1后按TAB/输入P后按TAB)看下图


段落标签:

段落标签语法:<p>包裹段落的内容</p>

P 标签之间不会相互共用一行,会独占一行或多行的空间。


水平线标签

语法:<hr>

hr标签是单标签,不需闭合标签(使用看下图)。输入一个<hr>标记,就等于添加了一条默认样式的水平线。


HTML 文档空白合并

在HTML文档中,文字之间的空格会进行合并,多个空格或者是换行会合并并成一个空格。


换行标签——Br

语法:<br>

如果有N个<br>,可以输入br*n,然后按TAB键即可。

br 标签是单标签,不需闭合标签

段落与段落之间隔行换行的,这样会导致文字的行间距过大(上面的空白合并),这时可以使用换行标记来完成文字的紧凑换行显示。(Br标签可以强制段落换行,不受空格或换行的影响)


空格标签——&nbsp

语法:&nbsp

一个&nbsp代表一个半角空格,需要多个空格可以重复输入(分号;分开即可)


文本节标签  span  ,行内标签

语法:<span>内容</span>

<span>标签似乎没有任何内容上的意义,但是与CSS结合起来后,应用非常广泛。


定义着重文字—<em>

语法:<em></em>

em标签就是对文档中的一小段文本进行着重的强调。(em标签是局部的文本的加强语气,或者是文本的强调的作用)

em标签可以会改变局部的文档语义。(比如:我更加喜欢<em>人民币</em>和RMB

也有利于网站的SEO。

标签就只用它的语义,不要用它的样式,样式可以通过CSS控制


斜体字标签—i

语法:<i>内容</i>

i标签不推荐使用,因为所有的样式都是通过CSS进行控制。


注释标签:

语法:<1--注释内容-->


定义加重语气—<strong>

strong标签是针对整个文档而言,进行一个加强语气 的作用。例如:一篇文章中最重要的主题思想或者段落用strong标签进行包裹。(上面有个em标签可以比较一下)

<strong>标签<em>一样,用于强调文本,但它强调的程度更强一些。


定义下标字和定义上标字

定义下标字:<sub>

语法:<sub>内容</sub>

定义上标字:<sup>

语法:<sup>内容</sup>


定义删除线

语法:<del>内容</del>        (嘎嘎嘎嘎嘎)


超级链接标签

语法:<a href="你要跳转的网页的网址">链接元素(就是网页上点击它可以跳转到另一个页面的元素)</a> 

或者  <a href="URL(统一资源定位器)">链接元素</a>

超级链接不仅仅是可以嵌套文本,还可以嵌套图片、表格、标题。

点击 好123 字体可以跳转到设定的页面

a标签的target 属性:

self  :默认的,表示当前页面中打开超级链接。

blank  :表示在新的页签中或者是新的窗口中打开超级链接的页面。

如果target="_self"  点击 好123 会多出一个页面,而是直接跳转,原来的页面不见了。

锚点链接:

创建锚点链接,用户能够快速定位到目标内容。

创建锚点链接分两步:1、语法: <a href="#id名">链接元素</a> , 输入语法创建链接文本;2、使用相应的id名标注跳转目标的位置

可以然后href属性指向一个页面中的id值,可以让页面跳转到id对应的标签的位置。

当前页面点击 “好123”后,会快速滚动到demo位置(会快速滚动到指定位置)

URL协议

平时我们写的网址就是url地址。

Url协议就是规定url地址的格式。

协议规定格式:scheme://host.domain:port/path/filename

http://sh.itcast.cn/subject/shphp/?zxdt  (对应上面格式)

协议名称://域名(ip地址):80/路径/文件a.htm

scheme -定义因特网服务的类型。最常见的类型是http, https,ftp

host -定义域主机(http的默认主机是www)

domain -定义因特网域名,比如w3school.com.cn

:port -定义主机上的端口号(http的默认端口号是80)

path -定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。

filename -定义文档/资源的名称


URL编码

URL编码:url中的非ASCII码,转为%ascii码

为什么要有URL编码呢?      如果我写的一个中文的网页要在阿拉伯国家的电脑上进行显示。

http://news.sina.com.cn/c/zg/2015-10-27/doc-传智播客61.shtml

中文字符在阿拉伯国家的电脑上会正常显示吗?

Url在线编码的工具:http://tool.chinaz.com/Tools/URLEncode.aspx


相对路径和绝对路径

快速打开dos命令窗口: windows+r 打开运行窗口

然后输入  cmd

Cd命令是让我们dos窗口可以进入某个文件夹。

Dir命令是:显示当前目录的文件和文件夹。

相对路径:

Cd名中,如果写是../代表目录是父目录。

../../代表:父目录的父目录。

绝对路径:

C:\Windows带盘符的路径,我们称为绝对路径


Src:图片的网站。

Alt:图片不显示的时候,会显示alt属性的文本

Title:对网站的seo有很大的影响。当鼠标移上去的时候,图片显示的tip提示文本内容。

鼠标放在图片上,会显示title 的内容 如果红圈中的图片网站不对,就会显示alt

常用图片格式

jpg:色彩还原高,适合复杂颜色图片,比如banner

gif:色彩效果最低,支持透明,支持动画,适合颜色比较少,不适合渐变色。(只支持256种颜色)

png:PNG的优点是,清晰,无损压缩,压缩比率很高,可渐变透明,具备几乎所有GIF的优点;缺点是不如JPG的颜色丰富,同样的图片体积也比JPG略大。还有用户体验很好的优点。

gif和png基本差不多,色彩比较少的直接gif,如果图片动画用gif。对色彩要求高的用jpg。

相关文章

网友评论

    本文标题:html阶段第一小节第三天

    本文链接:https://www.haomeiwen.com/subject/wupiattx.html