Web前端语法总结

HTML基本语法

认识网页

网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视频以及Flash等。

HTML 初识

一般先学习HTML+CSS, 这里我们先定一个小目标,先学HTML,后学习CSS。

HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标签语言”。是用来描述网页的一种语言。

所谓超文本,因为它可以加入图片、声音、动画、多媒体等内容,不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接。

我是一个大标题

在这里插入图片描述
加扣 裙:768976403 免费领取学习资料

注意: 体会 文本 标签 语言 几个词语

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 不是一种编程语言,而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)

总结: HTML 作用就是用标记标签来描述网页,把网页内容在浏览器中展示出来。

用文字来描述网页标签

HTML骨架格式

加扣 裙:768976403 免费领取学习资料

日常生活的书信,我们要遵循共同的约定。

同理:HTML 有自己的语言语法骨架格式:

1 HTML标签:HTML标签分类

在HTML页面中,带有“< >”符号的元素被称为HTML标签,如上面提到的 、、都是HTML骨架结构标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令,也称为HTML标签或 HTML元素

1.双标签
在这里插入图片描述
加扣 裙:768976403 免费领取学习资料

<标签名> 内容 </标签名>

该语法中“<标签名>”表示该标签的作用开始,一般称为“开始标签(start tag)”,“” 表示该标签的作用结束,一般称为“结束标签(end tag)”。和开始标签相比,结束标签只是在前面加了一个关闭符“/”。

比如 我是文字

2.单标签

<标签名 />

单标签也称空标签,是指用一个标签符号即可完整地描述某个功能的标签。

比如
HTML标签关系

标签的相互关系就分为两种:

1.嵌套关系

2.并列关系

倡议: 如果两个标签之间的关系是嵌套关系,子元素最好缩进一个tab键的身位。如果是并列关系,最好上下对齐。

文档类型<!DOCTYPE>

同学你用啥手机?你咋回答?

这句话就是告诉我们使用哪个html版本? 我们使用的是 html 5 的版本。 html有很多版本,那我们应该告诉用户和浏览器我们使用的版本号。

标签位于文档的最前面,用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范,必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型,只有这样浏览器才能按指定的文档类型进行解析。

注意: 一些老网站可能用的还是老版本的文档类型比如 XHTML之类的,但是我们学的是HTML5,而且HTML5的文档类型兼容很好(向下兼容的原则),所以大家放心的使用HTML5的文档类型就好了。

字符集

utf-8是目前最常用的字符集编码方式,常用的字符集编码方式还有gbk和gb2312。

gb2312 简单中文 包括6763个汉字

BIG5 繁体中文 港澳台等用

GBK包含全部中文字符 是GB2312的扩展,加入对繁体字的支持,兼容GB2312

UTF-8则包含全世界所有国家需要用到的字符

记住一点,以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。

HTML标签的语义化

白话: 所谓标签语义化,就是指标签的含义,使用做合适的标签做做合适的事,比如标题用 h 标签而不是 div 标签。

为什么要有语义化标签

方便代码的阅读和维护

同时让浏览器或是网络爬虫可以很好地解析,从而更好分析其中的内容

使用语义化标签会具有更好地搜索引擎优化

核心:合适的地方给一个最为合理的标签。

语义是否良好: 当我们去掉CSS之后,网页结构依然组织有序,并且有良好的可读性。

白话,一眼看去,就知道那个是重点,结构是什么,知道每块的内容是干啥的。

遵循的原则:先确定语义的HTML ,再选合适的CSS。

HTML常用标签

首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写HTML标签,认识标签就可以了。 不会再给结构标签指定样式了。

HTML标签有很多,这里我们学习最为常用的,后面有些较少用的,我们可以查下手册就可以了。

排版标签

排版标签主要和css搭配使用,显示网页结构的标签,是网页布局最常用的标签。

标题标签 (熟记)

单词缩写: head 头部. 标题 title 文档标题

为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个等级的标题,即

在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是

文本内容

是HTML文档中最常见的标签,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。

水平线标签(认识)

单词缩写: horizontal 横线 [ˌhɔrəˈzɑntl] 同上

在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。这些水平线可以通过插入图片实现,也可以简单地通过标签来完成,

就是创建横跨网页水平线的标签。其基本语法格式如下:


是单标签

在网页中显示默认样式的水平线。

换行标签(熟记)

单词缩写: break 打断 ,换行

在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,就需要使用换行标签


这时如果还像在word中直接敲回车键换行就不起作用了。

div span标签(重点)

div span 是没有语义的 是我们网页布局主要的2个盒子 css+div

div 就是 division 的缩写 分割, 分区的意思 其实有很多div 来组合网页。

span, 跨度,跨距;范围

语法格式:

这是头部
今日价格文本格式化标签(熟记)

在网页中,有时需要为文字设置粗体、斜体或下划线效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。

文本或图像

注意:

1.外部链接 需要添加 http:// www.baidu.com

2.内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页

3.如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href="#"),表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。

锚点定位 (难点)

Action
在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址。

method
用于设置表单数据的提交方式,其取值为get或post。

name
用于指定表单的名称,以区分同一个页面中的多个表单。

发布了25 篇原创文章 · 获赞 6 · 访问量 1073

猜你喜欢

转载自blog.csdn.net/weixin_46112908/article/details/104187841