html阶段第一小节第三天

                                         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。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容