前端HTML------------------------2022-08-01

1.网站和网页

网站是网页的集合,网页是构成网站的基本元素.

2.什么是HTML

HTML不是一种编程语言,而是一种超文本标记语言.超文本指的是,第一个是可以加入图片、声音、动画、多媒体等内容(超越了文本限制),第二个是可以文件间跳转,与世界各地主机的文件连接(超级链接文本)。

ps:不太理解与世界各地主机的文件连接的意思是什么


3.网页的形成

前端代码-->浏览器显示代码(解析、渲染)---->生成最后的Web页面


4.常用的浏览器

五大浏览器:常用的浏览器有IE、火狐(Firefox )、谷歌(Chrome ) 、Safari和Opera等。


5.常用浏览器内核

浏览器内核,也叫渲染引擎,负责读取和渲染页面。

国内浏览器一般都会采用webkit/Blink浏览器内核


6.为什么需要Web标准

浏览器不同,解析出来的效果可能不一致,因此W3C组织制定了一系列标准。



7.Web标准的构成

结构、表现和行为相分离,结构写到HTML文件中,表现写到CSS文件中,行为写到JavaScript文件中。



8.HTML语法规范

基本语法:

双标签:<html></html>

单标签:<br/>

双标签关系:包含关系和并列关系


9.HTML基本结构标签

网页的骨架标签:

<html>

<head><title></title></head>

<body></body>

</html>




10.常用的网页开发工具

最常用vscode、WebStorm



11.VSCode插件安装:

点设置,搜名字。


12.文档类型声明标签(自动生成)

< ! DOCTYFE html>文档类型声明标签,写在html文件的第一行,作用就是告诉浏览器使用哪种HTML版本来显示网页

这句代码的意思是:当前页面采取的是HTML5版本来显示网页.


13.lang语言种类(自动生成)

写在网页根标签<html lang="en">中,用来定义当前文档显示的语言。告诉浏览器或者搜索引擎这是一个英文网站,本页面采取英文来显示


14.字符集(自动生成--必须写,否则乱码)

在<head>标签内,可以通过<meta>标签的charset属性来规定HIML文档应该使用哪种字符编码。

例: <meta charset="UTF-8">

charset常用的值有:GB2312、BlG5、GBK和UTF-8,其中UTF-8也被称为万国码,基本包含了全世界所有国家需要用到的字符


15.标签语义

标签语义:根据标签的语义,在合适的地方给一个最为合理的标签,可以让页面结构更清晰


16.语义标签

标题标签:<h1> - <h6>  加粗 独占一行

段落标签:<p></p> 自动换行 段落之间保有空隙

换行标签:<br/> 单标签 强制换行  不会加垂直间距




17.文本格式化标签

加粗(重点):<strong></strong>或者<b></b>,<strong>语义更强烈

倾斜(重点):<em></em>或者<i></i>,<em>语义更强烈

删除线:<del></del>或者<s></s>,<del>语义更强烈

下划线:<ins></ins>或者<u></u>,<ins>语义更强烈


18.<div>和<span>标签(无语义)

没有语义,用来布局,它们就是一个盒子,用来装内容的

<div>:一行只能放一个,大盒子

<span>:一行可以多个,小盒子


19.图像标签

<img src=”图像URL”/>:图像标签。src是必须属性,用于指定图像文件的路径和文件名

所谓属性:简单理解就是属于这个图像标签的特性。

图像标签的属性(6个):src(图像路径必须有)、alt(替换文本,图像不能显示的文字)、title(提示文本,鼠标放到图像上,显示的文字)、width(设置图像的宽度)、height(设置图像的高度)、border(设置图像的边框粗细)

图像标签注意点:1、图像标签可以拥有多个属性,必须写在标签名的后面。

2、属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。

3、属性采取键值对的格式,即key=“value"的格式,属性=“属性值”。




20. 目录文件夹和和根目录

目录文件夹和和根目录(为了快速找到所需文件,并管理所需文件):

目录文件夹∶就是普通文件夹,里面只不过存放了我们做页面所需要的相关素材,比如 html文件、图片等。

根目录:打开目录文件夹的第一层就是根目录


21.路径( 相对路径和绝对路径 )

路径分为:相对路径和绝对路径

相对路径∶以引用文件所在位置为参考基础,去找目标文件。

相对路径分为:同一级路径、下一级路径(/)、上一级路径(../)

绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。

例如,“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif” .



22.链接标签

<a>:用于定义超链接,作用是从一个页面链接到另一个页面。

链接的语法格式:

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

<a>标签的属性(2个):

(1)href:用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能

(2)target:用于指定链接页面的打开方式,其中_self为默认值,_blank为在新窗口中打开方式.


23.链接的分类href(重点)

链接的分类(6种),主要是根据href属性来分类:

1.外部链接:例如< a href="http:// www.baidu.com ">百度.

2.内部链接;网站内部页面之间的相互链接.直接链接内部页面名称即可,例如< a href=" index.html">首页</a>.

3.空链接:如果当时没有确定链接目标时,< a href="#">首页</a >.

4.下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件。

5.网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.

6.  锚点链接:点我们点击链接,可以快速定位到页面中的某个位置.

在链接文本的href属性中,设置属性值为#名字的形式,如<a href="#two">第2集</a>

找到目标位置标签,里面添加一个id属性=刚才的名字,如:<h3 id="two">第2集介绍</h3>


24.注释标签

注释:在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字。

HTML中的注释以“<!-”开头,以“-->”结束。

<!-―注释语句-->

快捷键: ctrl +/


25.特殊字符

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

推荐阅读更多精彩内容