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种:

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

strict:表示“严格的”,这种模式里面的要求更为严格。这种严格体现在哪里?有一些标签不能使用。比如,u标签,就是给一个本文加下划线,但是这和HTML的本质有冲突,因为HTML只能负责语义,不能负责样式,而u这个下划线是样式。所以,在strict中是不能使用u标签的。那怎么给文本增加下划线呢?今后的css将使用css属性来解决。那么,XHTML1.0更为严格,因为这个体系本身规定比如标签必须是小写字母、必须严格闭合标签、必须使用引号引起属性等等。

Transitional:表示“普通的”,这种模式就是没有一些别的规范。

Frameset:表示“框架”,在框架的页面使用。

在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系叫块级标签,它的特点是独占一行

face="微软雅黑":设置字体类型。注意在写字体时,“微软雅黑”这个字不能写错。

实例:

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

示例:

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

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

宋茜宋茜网页效果如下:

上小标这两个标签容易混淆,怎么记呢?这样记: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是自封闭标签,也称为单标签。

能够插入的图片类型是:jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别,css课上讲。

不能往网页中插入的图片格式是:psd、ai

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

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

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

1、写法一:相对路径

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

举例1:

举例2:

2、写法二:绝对路径

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

(2)网络路径。举例:

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

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

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

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

总结一下:

我们现在无论是在a标签、img标签,如果要用路径。只有两种路径能用,就是相对路径和绝对路径。

相对路径,就是../image/这种路径。从自己出发,找到别人;

绝对不允许使用file://开头的东西,这个是完全错误的!

alt:当图片显示不出来的时候,代替图片显示的内容。alt是英语alternate“替代”的意思。(有的浏览器不支持)

网页效果如下:

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

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

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

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

今日作业:

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

THE END
1.腾讯申请多枚AI助手商标ai助手知名企业腾讯申请多枚AI助手商标 爱企查App显示,近日,腾讯科技(深圳)有限公司申请注册多枚“腾讯AI助手”商标,国际分类涉及科学仪器、设计研究等,当前商标状态均为注册申请中。 本文源自:金融界AI电报https://www.163.com/dy/article/JHA1F8Q40519QIKK.html
2.注册商标起名字好听的商标6、取商标名字神器 商标名字大全10000个有特色商标名字大全商标起名,商标名字大全个银迈、宏奇、森纳、通宜、森爱、仕码、惠梦、汉本、裕丰、翔时、铁腾、方倍、鑫亚、东佩、成韦、维金、子、诺冠、生坚、鸿莱、东泰、太卓、晖光、翔富、吉先、晶拓、亿东。 https://www.16757.com/ysh/xingming/3160.html
3.商标起名商标名字大全免费品牌取名商标注册查询在线一秒智能生成上万个可以注册的商标名/人工三小时内起好可注册的商标名/在线免费起名网/商标名字大全10000个/品牌起名/产品起名/公司起名/商标注册查询一站式服务.http://www.biaoxiaobao.com/
4.商标查询商标查询 首页 机构概况 政策文件 商标申请 商标代理 案例评析 集体证明商标 (地理标志) 国际注册 您的位置: 首页> 商标查询 使用说明 本栏目为社会公众提供商标注册申请信息查询,本系统的数据信息并非实时更新,有一定滞后性,仅供参考,不具有法律效力。https://sbj.cnipa.gov.cn/sbj/sbcx
1.AI商标起名案例:10个好听的09类科学仪器商标名称我将为第09类科学仪器领域创造10个独特的三字商标名称,并解释每个名称的创意和优势。 智测达 创意:结合“智能”、“测量”和“到达”的概念,传达出高科技测量设备能够准确、迅速地提供数据。 优势:简洁明了,易于记忆,体现了产品的科技属性和准确性。 https://www.lanzidian.cn/scientific-instruments/
2.商标取名字大全免费查询美好的名字合集我们的法律意识已经越来越强了,很多人都会提前在有关部门注册自己的商标,避免今后发生不必要的纠纷。但是注册商标有很多事项需要注意,什么样的商标名既好听还罕见呢?接下来就跟随小编,阅读这篇文章,从以下内容中选一个吧。 别具特色的名字大全 启辉 诗奥 诚湖 妙凌迈 安诺贝德 ...https://www.kswqd.com/gongsiqiming/15900.html
3.以牛取商标名(取商标名字神器)据悉,未来几个月内,兰博基尼计划在包括亚洲国家在内的其他国家陆续开设概念店。 牛和马是什么车标 牛和马不是品牌的商标,而是代表着不同的动物。牛代表着德国,马代表着法国,这两个国家都是欧洲著名的运动和赛马国家。这些标志在很多地方都是用来代表国家或地区,而不是用来标志品牌的。https://www.jixing.net/shengxiao/niu81023.html
4.10个实用取名神器,公司名品牌名logo设计域名检测全包!Getsocio根据用户输入的关键字生成名字,并为用户提供数千种域名选择,缺点是域名以.getsocio.com结尾,而不是.com。 4、Brand Root Brandroot是一个较优质的企业名称生成器,根据你输入的信息和关键字生成名字后,Brandroot会对名字进行精心挑选,为用户提供具有创意的名字和相应的logo,价格也是比较优惠的。 5、Hips...https://m.cifnews.com/article/33726/
5.给养生品牌取名字?五、品牌取名神器? 商标品牌起名软件是一款针对鼠标品牌名称进行起名研发推出的软件,许多用户在起名的时候,会感到非常烦恼。 商标品牌起名软件支持对您的商标品牌进行快速的起名,名称的测试,注册的查询等。商标品牌起名软件可以自定义选择起名模式,能够快速得到名字。 https://www.lnky.net/hsjj/37170.html
6.有档次公司名称大全(免费简单大气)酒业有限公司怎么取名字:汉祺、至诺、世茂、彩坤、盛元、裕德麦、汇圣、贤正、仕韵莱、力梓、鑫松、昌盛城、康诚、京美、尚成金、业悦、迪智成、凌祥、翔科、嘉悠新、中铭、…https://www.1566.cn/gongsimingzi/14551.html
7.必看:如何使用免费起名神器为您的新店命名公司起名它可以根据您的关键字和品牌理念来生成独特的店名。这些店名可以根据受众、品牌形象和产品类型来分类。您可以选择一个您最喜欢的店名、将其进行修改或结合多个名字以创建一个新的店名。此外,免费起名神器还可以帮助您检查您选择的店名是否已经被使用,以及是否可以注册商标。https://www.cngidc.com/dmpq/118959.html
8.起名工具网公司起名国学传统起公司名字店铺起名实用的店铺起名工具商标起名智能批量生成商标名字团队起名团队名字批量生成工具 网名起名工具 情侣起名根据名字星座起情侣名昵称配对根据昵称生成配对网名起游戏名自动批量生产游戏名字起网名昵称自动批量生产网名昵称 宠物起名工具 https://www.qmz99.com/
9.饲料公司名字起名大全,适合做饲料的商标名称建议二、避免谐音字,饲料公司取名要避免谐音字,如果公司名字谐音不好,给大众的印象不好,这是会阻碍饲料公司发展的,所以,谐音字是取名必需避免的。 建议三、避免生僻字 饲料公司取名字还需要避免生僻字,生僻字应该是没人会读的,会影响公司发展。http://www.company01.com/html/1001.htm
10.咖啡师要学多久成为一名牛逼咖啡师你得花多少时间在这个充满了美味与艺术的年代里,咖啡不仅仅是一种饮品,它成为了我们日常生活中不可或缺的一部分。作为一个热爱咖啡的人,我总是好奇,想要成为一名真正的咖啡师,他们要学多久?答案并没有固定的数字,因为这取决于每个人的学习速度和投入的精力。 首先,我们来看看基础知识。对于初学者来说,要掌握基本的烹饪技巧,比如...https://www.rsuurtyab.cn/pin-pai-gu-shi/672163.html
11.岭南集团旗下品牌商标注册攻略,如何成功注册岭南商标?2、吉祥如意的「祥淑茶叶店」、「龙润堂碧」,以及其他如「鸿耀茗茶」、「灿力茶香」、「颂田茶语」等,都是不错的选择,茶叶商标名应简洁大气,彰显品质,同时符合消费者追求的时尚趋势。 3、「德润茶香」、「福禄寿茗茶」、「山水之韵」、「名将茶语」、「头等舱茗茶」等,都是富有创意的茶叶商标名字。 http://h5.kacled.com/6177f5e20aed.html
12.“山城”“玫瑰”“星火”……这些老商标,你认得几个?听丁建敏讲述老商标的故事,还能感受诸多美好的回忆。 商标里的重庆记忆 它们的名字都叫“山城” 重庆也称“山城”,自上世纪三十年代以来,取名“山城”的商标涵盖了啤酒、酱油、豆瓣、奶粉、糕点、卷烟、药品、手表、铅笔、蜡笔、皮鞋、袜子、毛线、打火机等各类商品,成为一个庞大的共享商标集群。 https://wap.cqcb.com/shangyou_news/NewsDetail?classId=3758&newsId=4213762
13.免费英文商标在线制作4个商标在线制作神器商标幸福起航小编简单来介绍下免费英文商标在线制作及4个商标在线制作神器这个问题 。 再给大家加一个LOGO生成器:.co,他们的产品超级好用,我用的最多的就是双色生成器! 坎瓦 Canva提供了大量的Logo模板和强大的图片编辑功能 。Canva本身可以支持各种图像尺寸,最大的优势就是支持中文 。 http://www.gansulong.com/c/030915Y5562023.html
14.一周Martech新闻:马斯克成立X.AI公司Marteker北大团队推出「职场神器」ChatExcel,表格用户不再需要记公式 北京大学深圳研究生院信息工程学院助理教授袁粒及三名硕博生组成的团队日前开发了一款名为ChatExcel的AI办公辅助工具,可以通过文字聊天实现Excel的交互控制。ChatExcel是通过文字聊天实现Excel交互控制的AI辅助工具,团队称之为「职场神器」。无需记函数、无需手动...https://www.shangyexinzhi.com/article/7720426.html
15.www.zhongjia1818.com/newxr85467655/202410IT之家9月3日消息,科技媒体HMDNews昨日(9月2日)发布博文,爆料称HMD公司在发布Skyline手机之外,还在研发另一款"复刻"诺基亚Lumia1020,背面配备圆形摄像头模块的手机。:,~ 起初帮助沈星过难关、还给他蛋糕补过生日的郭立民,中期在赌场被客人欺负压在桌上下意识反抗的郭立民,后期拿起剃刀剃头发、对劝说自己迷途知返的...http://www.zhongjia1818.com/newxr85467655/2024-10-26/22477848.shtml
16.元宵节经典灯谜(必备15篇)65、安全重点放第一(猜著名商标)--金冠 66、鲁智深(打四川一地名)。 色达 67、暗中下围棋(打一成语)。谜底:皂白不分 68、有位小姑娘,身穿黄衣裳。谁要欺负她,她就戳一枪。(打一动物名)黄蜂 69、在首都邂逅欧洲经典油画(电影)。 北京遇上西雅图 ...https://www.yjbys.com/xuexi/dengmi/4345347.html