python全栈开发,Day45(html介绍和head标签,body标签中相关标签)Nidhogg14

浏览器是网页运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、猎豹浏览器、Safari和Opera等

浏览器内核:

PS:「浏览器内核」也就是浏览器所采用的「渲染引擎」,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。渲染引擎是兼容性问题出现的根本原因。

SublimeText的使用

还有其他的前端编辑工具,比如:

vscode,是微软推出的一款轻量编辑器,采取了和VS相同的UI界面,搭配合适的插件可以优化前端开发的体验。

Hbuilder,HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE

webstorm,WebStorm是jetbrains公司旗下一款JavaScript开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScriptIDE”等。

这3者对比:

vscode比较轻便,Hbuilder针对移动端,方便调试代码。

webstorm是一个重量级web开发工具。

本文主要用的是SublimeText3

html全称HyperTextMackeupLanguage,翻译为超文本标记语言,它不是一种编程语言,是一种描述性的标记语言,用于描述超文本内容的显示方式。比如字体、颜色、大小等。

作用:HTML是负责描述文档语义的语言。

注意:HTML语言不是一个编程语言(有编译过程),而是一个标记语言(没有编译过程),HTML页面直接由浏览器解析执行。

HTML是负责描述文档语义的语言

html中,除了语义,其他什么都没有。

html是一个纯本文文件(就是用txt文件改名而成),用一些标签来描述文字的语义,这些标签在浏览器里面是看不到的,所以称为“超文本”,所以就是“超文本标记语言”了。所以,接下来,我们肯定要学习一堆html中的标签对儿,这些标签对儿能够给文本不同的语义。

比如,面试的时候问你,h1标签有什么作用?

我们大家先记住几个纯单词的颜色,css课程中会详细讲10进制和16进制。

在公司中,UI设计师的设计图,颜色主要采用的是16进制表示,每种颜色会有相应的注释。

前端工程师拿到设计图之后,用html+css+js做出这个网页,给最终用户展示。

1)所有标记元素都要正确的嵌套,不能交叉嵌套。正确写法举例:

(2)所有的标记都必须小写。

(3)所有的标记都必须关闭。

(4)所有的属性值必须加引号。

(5)所有的属性必须有值。

(1)HTML对换行不敏感,对tab不敏感

HTML只在乎标签的嵌套结构,嵌套的关系。谁嵌套了谁,谁被谁嵌套了,和换行、tab无关。换不换行、tab不tab,都不影响页面的结构。

也就是说,HTML不是依靠缩进来表示嵌套的,就是看标签的包裹关系。但是,我们发现有良好的缩进,代码更易读。要求大家都正确缩进标签。

(2)空白折叠现象

HTML中所有的文字之间,如果有空格、换行、tab都将被折叠为一个空格显示。

举例:

12345Document678今天91022221112访问网页,效果如下:

(3)标签要严格封闭

下面这种,是不规范的写法

Document今天很凉爽

新建HTML文件,输入html:5,按tab键后,自动生成的代码如下:

Document注意:文件名不能是中文,到公司里面,代码是放到linux服务器中的,它对中文的识别度不是太好。尽量以英文名来起名,名字不要太长。

任何一个标准的HTML页面,第一行一定是一个以

PS:

XHTML:ExtensibleHypertextMarkupLanguage,可扩展超文本标注语言。

XHTML的主要目的是为了取代HTML,也可以理解为HTML的升级版。

HTML的标记书写很不规范,会造成其它的设备(ipad、手机、电视等)无法正常显示。

XHTML与HTML4.0的标记基本上一样。

XHTML是严格的、纯净的HTML

以下内容仅做了解:

首先我们先确定一件事儿,我们现在学习的是HTML4.01这个版本,这个版本是IE6开始兼容的。HTML5是IE9开开始兼容的。但是IE6、7、8这些浏览器还不能过早的淘汰,所以这几年网页还是应该用HTML4.01来制作。如今,手机、移动端的网页,就可以使用HTML5了,因为其兼容性更高。

说个题外话,html1至html3是美国军方以及高等研究所用的,并未对外公开。

HTML4.01里面有两大种规范,每大种规范里面又各有3种小规范。所以一共6种规范(见下面):

HTML4.01里面规定了普通和XHTML两大种规范。

HTML觉得自己有一些规定不严谨,比如,标签是否可以用大写字母呢?

所以,HTML就觉得,把一些规范严格的标准,又制定了一个XHTML1.0。在XHTML中的字母X,表示“严格的”。

总结一下,HTML4.01一共有6种DTD,说白了,HTML第一行语句一共有6种:

下面对上图中的三种小规范进行解释:

在sublime输入的html:xt,x表示XHTML,t表示transitional。HTML5中极大的简化了DTD,也就是说HTML5中就没有XHTML了(W3C自己打脸了):

ok,下面重点的来了。

head标签都放在头部分之间。这里面包含了:、<meta>、<link>,<style></p><p>元素可提供有关页面的原信息(mata-information),针对搜索引擎和更新频度的描述和关键词。</p><p>标签位于文档的头部,不包含任何内容。</p><p>常用的meta标签:</p><p>它用来向浏览器传达一些有用的信息,帮助浏览器正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。</p><p>(2)name属性</p><p>主要用于页面的关键字和描述,是写给搜索引擎看的,关键字可以有多个用‘,’号隔开,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。</p><p>效果如下:</p><p><metaname=viewportcontent="width=device-width,initial-scale=1">上面这个标签,是让我们网页支持移动端,移动设备优先(了解即可)</p><p>主要用来告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出当前网页的主题。</p><p><title>路飞学城效果如下:

HTML标签中有两类标签:

1.字体标签

2.排版标签

字体标签包含:h1~h6、

标题使用

标签进行定义。

定义最大的标题,

定义最小的标题。具有align属性,属性值可以是:left、center、right。

路飞学城

路飞学城

路飞学城

路飞学城

路飞学城
路飞学城
打开网页,效果如下:

h1系叫块级标签,它的特点是独占一行

实例:

字体打开网页,效果如下:

示例:

韩雪韩雪韩雪网页效果如下:

刘诗诗刘诗诗网页效果如下:

宋茜宋茜网页效果如下:

上小标这两个标签容易混淆,怎么记呢?这样记:b的意思是bottom:底部

例子:

5282网页效果如下:

要求大家背过的特殊字符: 、<、>、©

比如说,你想把

作为一个文本在页面上显示,直接写

是肯定不行的,因为这代表的是一个段落标签,所以这里需要用到转义字符。应该这么写:

这是一个HTML语言的

标签网页效果如下:

段落:是英文paragraph的缩写。

属性:

这是一个萌妹子

这是另一个萌妹子

网页效果如下:

ok,下面这几句话,大家一定牢牢记住。HTML标签是分等级的。HTML将所有的标签分为两种:

从学习p的第一天开始,就要死死记住:p标签是一个文本级标签,p里面只能放文字、图片、表单元素。其他的一律不能放。

错误写法:(把h系列的标签放到p里)

我是个段落

我是二级标题

网页效果如下:

上图显示,浏览器不允许你这么做。我们使用Chrome的F12审查元素发现,浏览器自己把p封闭掉了,不让你去包裹h2。

PS:Chrome浏览器是世界上HTML5支持最好的浏览器。提供了非常好的开发工具,非常适合我们开发人员使用。审查元素功能的快捷键是F12。

div和span是非常重要的标签,div的语义是division“分割”;span的语义就是span“范围、跨度”。CSS课程中你将知道,这两个东西,都是最最重要的“盒子”。

div:把标签中的内容作为一个块儿来对待(division)。必须单独占据一行。

div标签的属性:

唯一的区别在于:是不换行的,而
是换行的。

如果单独在网页中插入这两个元素,不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说,DIV+CSS来实现各种样式。

导航栏
中心banner
路飞alex网页效果如下:

div在浏览器中,默认是不会增加任何的效果的,但是语义变了,div中的所有元素是一个小区域。

div标签是一个容器级标签,里面什么都能放,甚至可以放div自己。

span也是表达“小区域、小跨度”的标签,但是是一个文本级的标签。

就是说,span里面只能放置文字、图片、表单元素。span里面不能放p、h、ul、dl、ol、div。

span举例:

div举例:

所以,我们亲切的称呼这种模式叫做“div+css”。div标签负责布局,负责结构,负责分块。css负责样式。

ps:这个class属性名就与css有很大关联,讲到css模块会详细讲这块内容。

当你打算结束一行,而又不想开始一个新段落时,
标签就派上用场了。无论你将它置于何处,
标签都会产生一个强制的换行。

This
isapara
graphwithlinebreaks网页效果如下:

上图显示,

标签和
标签的区别在于:

标签会在段落的前后自动插入一个空行,而
标签没有空行;而且
标签没有属性。

注意
没有结束标签,把
标签写为
是经得起未来考验的做法,XHTML和XML都接受在打开的标签内部来关闭标签的做法。

水平分隔线(horizontalrule)可以在视觉上将文档分隔成各个部分

皇上



我是夏雨荷

This
isapara
graphwithlinebreaks网页效果如下:

此时center代表是一个标签,而不是一个属性值了。只要是在这个标签里面的内容,都会居于浏览器的中间。

小凳子

网页效果如下:

到了H5里面,center标签不建议使用。

含义:将保留其中的所有的空白字符(空格、换行符),原封不动的输出结果(告诉浏览器不要忽略空格和空行)说明:真正排网页过程中,

标签几乎用不着。但在PHP中用于打印一个数组时使用。

清平调·其一作者:李白云想衣裳花想容,春风拂槛露华浓。若非群玉山头见,会向瑶台月下逢。
网页效果如下:

上图中,好像pre标签部分的字体变小了,而且还出现了缩进,好吧,这个其实是浏览器搞的鬼。为什么要有

这个标签呢?答案是:

所有的浏览器默认情况下都会忽略空格和空行。

好吧,其实这个标签也用的比较少。排版标签就给大家介绍到这里。

超链接有三种形式:

链接到外部文件。举例:

效果:

当然,我们也可以直接点进链接,访问一个网址。举例如下;

指给超链接起一个名字,作用是在本页面或者其他页面的的不同位置进行跳转。比如说,在网页底部有一个向上箭头,点击箭头后回到顶部,这个就是利用到了锚链接。首先我们要创建一个锚点,也就是说,使用name属性或者id属性给那个特定的位置起个名字。效果如下:

上图中解释:

11行代码表示,顶部这个锚的名字叫做top。然后在底部设置超链接,点击时将回到顶部(此时,网页中的url的末尾也出现了#top)。注意上图中红框部分的#号不要忘记了,表示跳到名为top的特定位置,这是规定。如果少了#号,点击之后,就会跳到top这个文件或者top这个文件夹中去。

如果我们将上图中的回到顶部那一行代码写成:

说明:name属性是HTML4.0以前使用的,id属性是HTML4.0后才开始使用。为了向前兼容,因此,name和id这两个属性都要写上,并且值是一样的。

代码举例:

返回页面顶部的位置

blank就是“空白”的意思,就表示新建一个空白窗口。为啥有一个_,就是规定,没啥好解释的。也就是说,如果不写target=”_blank”那么就是在相同的标签页打开,如果写了target=”_blank”,就是在新的空白标签页中打开。

ps:a是一个文本级的标签

比如一个段落中的所有文字都能够被点击,那么应该是p包含a;

img:代表的就是一张图片。是单边标记。

img是自封闭标签,也称为单标签。

HTML页面不是直接插入图片,而是插入图片的引用地址,所以也要把图片上传到服务器上。

这里涉及到图片的一个属性:

在写图片的路径时,有两种写法:相对路径、绝对路径

1、写法一:相对路径

相对当前页面所在的路径。两个标记.和..分表代表当前目录和父路径。

举例1:

举例2:

2、写法二:绝对路径

(1)以盘符开始的绝对路径。举例:

(2)网络路径。举例:

问题:我的网页在C盘,图片却在D盘,能不能插入呢?

答案:用相对路径不能,用绝对路径也不能。

注意:可以使用file://来插入,但是这种方法,没有任何意义!因为服务器上没有所谓c盘、d盘。

下面的方法是行的,但是没有任何工程上的意义,这是因为服务器没有盘符,linux系统没有盘符:

总结一下:

网页效果如下:

文本级的标签显示在浏览器上时,不管你的图片多高,它总会底边对齐,这是一种现象,“高矮不齐,底边对齐”。

此时大家可以给图片设置align属性,来查看效果吧!

注意事项:(1)如果要想保证图片等比例缩放,请只设置width和height中其中一个。(2)如果想实现图文混排的效果,请使用align属性,取值为left或right

如果想点击图片的时候跳转到某个链接,比如百度,应该是:

今日作业:

主要利用今天学习的知识来做第一个作业:个人博客展示姓名,年龄,职业个人介绍,头像,个人博客地址第二个作业:展示春,夏,秋,冬4个字,每个点击之后,会跳转到对应的页面比如春,展示一张春天的图片提示:第一种写法,使用top跳转第二种写法,使用4个页面,分别展示

THE END
1.品牌命名方法英文品牌起名原则与策略文章Namers命名者的品牌命名品牌命名方法-英文品牌起名原则与策略频道,为您分享前沿的品牌起名知识和商标起名资讯。让您获得更多起名技巧,洞悉商业命名趋势,提供科学的品牌策略,为您塑造强大品牌基因。http://www.namer1.com/news/
2.英文名起名取名助手播放器官方版下载想要取一个喜欢的英文名?想要知道当下流行的英文名?还是想要了解英文名的来源? 在这里都可以满足你! 完全免费的英文名起名取名助手!目前已收录了数万个英文名信息,数据来自美国权威机构统计,这里一定有你想要的! 重要的是,助手君可以根据你的中文名,利用大数据和人工智能,为你智能匹配适合你的英文名! 如果找不到合http://www.onlinedown.net/soft/10108921.htm
3.特别的商标名字大全起名工具特别的商标名字大全 1. Nike 2. Coca-Cola 3. Apple 4. Google 5. Amazon 6. Microsoft 7. McDonald's 8. Pepsi 9. Adidas 10. BMW 11. Mercedes-Benz 12. Ferrari 13. Chanel 14. Gucci 15. Louis Vuitton 16. Prada 17. Rolex 18. Tiffany & Co.https://www.22tools.com/b361d6c23e.html
4.取英文名的软件有哪些?取英文名的软件app下载一般的起名软件都是帮助用户起中文名字的,小编今天就为大家整理了一些可以取英文名字的手机软件,包括有筛选性格特质、星座等条件得出对应英文名的nicename、宝宝起名英文名,也有根据中文谐音取英文名的app英文名起名取名助手,还有英文名大全、宝贝名称Baby Name - Simple! Free、山水起名、 宝宝取名字等,欢迎有需要的http://www.downcc.com/k/yingwenqimingapp/
5.亚马逊发布5款AI工具,为品牌取名图片Listing等视觉打造获取品牌创建灵感不足?5大AI神器帮您轻松解决。复制链接到浏览器打开起名星操作界面: https://sellercentral.amazon.com/brand-asset-developer 数据来源: 1、亚马逊内部研究,2022 2、亚马逊研究,美国,2023年3月 封面/图虫创意 (来源:亚马逊全球开店 微信公众号:AmazonGS) 以上内容属作者个人观点,不代表雨果跨境立场!https://www.cifnews.com/article/169157
6.英文名取名神器创造只属于你的谐音英文名英语知识英文名取名神器创造只属于你的谐音英文名2024-12-21 15:52:10 我叫田田 上海 举报 0 分享至 0:00 / 0:00 速度 洗脑循环 Error: Hls is not supported. 视频加载失败 我叫田田 1粉丝 ?UoG|非典型理学硕士 自我成长|职场|副业 03:29 赚美金八个看似不体面,但收入不错的副业https://www.163.com/v/video/VIJ0TUEN4.html
7.亚马逊发布5款AI工具,为品牌取名图片Listing等视觉打造获取亚马逊重磅推出 5 款 AI 工具,为品牌建设全方位赋能。品牌起名星,借生成式 AI 技术,秒速生成契合海外语境的品牌名,多场景应用出色,助卖家免起名困扰、提效率保权益,开启品牌之路。A+ Gen AI 革新 A + 页面创建,于美站基础与高级模块嵌入,8 步操作创图文,精准指令控走向,降本增效,提升卖家页面质量与转化。 https://www.chwang.com/article/186963142784
8.亚马逊发布5款AI工具,为品牌取名图片Listing等视觉打造获取?预约直播参与投票?请参与投票告诉小编这篇文章是否给您带来帮助吧。若您认为没有帮助,请务必在文末给小编留言原因以及想看的内容,帮助小编为大家提供更好的内容。数据来源:1、亚马逊内部研究,20222、亚马逊研究,美国,2023年3月https://kuamarketer.com/archives/42332.html
9.以牛取商标名(取商标名字神器)据悉,未来几个月内,兰博基尼计划在包括亚洲国家在内的其他国家陆续开设概念店。 牛和马是什么车标 牛和马不是品牌的商标,而是代表着不同的动物。牛代表着德国,马代表着法国,这两个国家都是欧洲著名的运动和赛马国家。这些标志在很多地方都是用来代表国家或地区,而不是用来标志品牌的。https://www.jixing.net/shengxiao/niu81023.html
10.注册商标起名字好听的商标6、取商标名字神器 商标名字大全10000个有特色商标名字大全商标起名,商标名字大全个银迈、宏奇、森纳、通宜、森爱、仕码、惠梦、汉本、裕丰、翔时、铁腾、方倍、鑫亚、东佩、成韦、维金、子、诺冠、生坚、鸿莱、东泰、太卓、晖光、翔富、吉先、晶拓、亿东。 https://www.16757.com/ysh/xingming/3160.html
11.起名工具网起名工具网是免费的实用的网上起名工具大全网站,提供免费宝宝起名、测名打分、重名查询、双胞胎起名、起小名、起英文名、公司起名、起网名昵称、宠物起名等数十个免费起名网在线起名工具。https://www.qmz99.com/
12.有档次公司名称大全(免费简单大气)有档次的教育公司名字 ——梦启航 梦启航,梦开始的地方,这个名字寓意培训公司会成为孩子们走上艺术道路的地方,帮助家长和孩子们实现艺术梦想,一起扬帆起航,驶向未来。 ——东升 用作公司名字,寓意公司会像旭日东升一般充满希望和活力,同时也代表了吉祥如意、财源滚滚来。第https://www.1566.cn/gongsimingzi/14551.html
13.神器登场:免费让你的公司名字脱颖而出公司起名公司取名2. Namelix生成的名字是否可以商标注册? 3. 我可以在Namelix上生成任何数量的名字吗? 4. Namelix是否可以生成符合SEO要求的名字? 5. 我可以在Namelix上生成与其他品牌相似的名字吗? 神器登场:免费让你的公司名字脱颖而出 作为一名企业家,你肯定知道一个好的公司名字可以让你的品牌脱颖而出。但是,取一个好的名字https://www.cngidc.com/gsmz/361660.html
14.给养生品牌取名字?五、品牌取名神器? 商标品牌起名软件是一款针对鼠标品牌名称进行起名研发推出的软件,许多用户在起名的时候,会感到非常烦恼。 商标品牌起名软件支持对您的商标品牌进行快速的起名,名称的测试,注册的查询等。商标品牌起名软件可以自定义选择起名模式,能够快速得到名字。 https://www.lnky.net/hsjj/37170.html
15.小程序之100推荐:801~900国产365天天更新标标商标查询小程序简介:帮您快速查询商标是否可以注册,帮您快速查询注册商标的最新状态。 请至极乐小程序商店搜索『标标商标查询』,微信扫码即可体验 804、易旅天下定制旅行专家 易旅天下定制旅行专家小程序简介:出境旅游;会奖、公务、商务服务;定制旅行服务;各国签证代办;机票、酒店、旅游保险预订;签约游轮代理。 https://blog.csdn.net/qq_38530880/article/details/74931578
16.商标起名商标名字大全免费品牌取名商标注册查询在线一秒智能生成上万个可以注册的商标名/人工三小时内起好可注册的商标名/在线免费起名网/商标名字大全10000个/品牌起名/产品起名/公司起名/商标注册查询一站式服务.http://www.biaoxiaobao.com/
17.英文商标品牌生成器AMZ123跨境导航提供在线英文商标品牌取名服务,品牌名称生成器能帮助您快速创建独特且引人注目的品牌名称。让品牌命名变得简单而高效,做跨境电商,就上AMZ123。https://www.amz123.com/tools-pinpai
18.咖啡豆可以直接冲泡吗而想要掌握这一技能,只需练习几个小时,即使初学者也能迅速上手,无论是在哪里,都能享受到一天中的那一刻安宁与快乐。 标签:一个新产品策划方案、产品策略包括哪些内容、取商标名字神器、寓意好的商标名字大全、2023免费新公司起名https://www.02p86kx68.cn/pin-pai-gu-shi/776337.html
19.logo免费设计在线生成免费logo设计字体商标标志在线制作logo设计网,为公司,个人,店铺,品牌VI,网站,网店提供商标logo自动在线一键生成,标志艺术字体设计,文字图标图片设计,字母头像制作,姓名字免费lougo设计,创意logo制作,英文loog,无水印透明logo,可自己下载svg源文件. 开始生成 满意后付费!十年研发只为您设计属于自己的品牌LOGO https://www.shejilogo.com/