html语言熟记,html基础必备知识点

超文本标记语言,主要是通过HTML标签对网页中的文本,图片,声音等内容的描述。

(1) 双标签

内容 标签名>

(2) 单标签 ,也称为空标签,指的是一个标签号即可完整描述某个功能

单标签数量很少

(1)嵌套关系

(2)并列关系

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

DW :Dreamweaver

Sublime3

WS : WebStorm

HB : 飞一样的编码

VSCode :微软

sublime的使用

生成HTML骨架的方法:

(1) html:5 + tab键

(2) ! + tab键

这句话的意思是告诉我们使用的是html的哪个版本

HTML有很多的版本,我们需要告诉用户和浏览器使用的版本号,标签位于文档的最前面,用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范,必须在开头的位置使用这个标签为所有的文档指定版本和类型,这样浏览器才能够按照指定的文档类型进行解析。

注意:一些老的网站可能用的还是老版本的文档类型比如XHTML之类的, 但是我们学习的是HTML5,这个文档类型有很好的兼容性(向下兼容原则)。

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

gb2312: 简单中文,包括6763个汉字BIG5:繁体中文,港澳台使用GBK: 包含全部中文字符,是GB2312的扩展,加入对繁体字的支持,兼容GB2312UTF-8: 包含了全世界所有国家需要用到的字符

标签语义化:标签的含义标签语义化的原因:

(1)方便代码的阅读和维护

(2)让浏览器或者网络爬虫能够很好的解析,从而更好分析其中的内容

(3)使用语义化标签会有更好的探索引擎优化核心: 在合适的地方给一个最为合理的标签原则: 先确定语义的HTML,再选择合适的CSS语义好不好: 当去掉CSS之后,网页的结构依然组织有序,并且有良好的可读性,不管是谁都能够看懂这块内容是什么。

首先,要区分HTML与CSS,这是两种不同的语言, 现在学的是结构,只写HTML标签,认识标签,不会给结构标签指定样式。 HTML标签很多,常用的一定要记住,同时要学会如何查看学习手册。

排版标签: 用于网页布局

标题标签(熟记)

有6个等级的标题标签: h1——h6

标题标签的语义:作为标题使用,并且依据重要性进行递减

基本语法格式为:

** 注意:h1标签应为重要,尽量少使用,一般是用于logo

段落标签

默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。

水平线标签

horizontal : 横线

显示的是一条水平线,用于将段落与段落分隔开。

换行标签

单词:break,打断,换行

div span标签(重点):这两个是没有语义的,是用于网页布局的两个盒子

div : division的缩写, 分割,分区的意思,span :跨度,跨距,范围

文本格式化标签(熟记)

在网页中,有时需要为文字设置粗体,斜体或者下划线效果,此时使用HTML的文本标记语言进行标记,使文字以特殊方式显示:

文字以粗体方式显示

文字以斜体方式显示

文字以加删除线方式显示

文字以加下划方式显示

** 标签属性

属性就是特性,可以使HTML标签提供更多的信息

基本语法

标签可以有多个属性,必须要写在开始标签中,位于标签名的后面属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开任何标签的属性都有默认值,省略该属性则取默认值采取键值对的格式

图像标签(重点)

基本语法格式

必须属性:src,指定图像文件的路径和文件名 标签属性

属性属性值描述srcURL图像的路径alt文本图像不能显示时的替换文字title文本鼠标悬停时显示的内容Width</td>像素(XHTML不支持%页面百分比)图像宽度Height</td>像素(XHTML不支持%页面百分比)图像高度border数字设置图像边框的宽度

链接标签(重点)

单词:anchor的缩写,锚,铁锚

基本语法格式:

(1)href 用于指定链接目标的URL地址,当使用href标签时,她就具备了超链接的功能。 hypertext reference的缩写

(2)target属性:用于指定链接页面的打开方式,其取值有_self和_blank两种,其中self是默认值,_blank是在窗口中打开方式

(3)注意:

①外部链接需要添加 :http:// + 网址

② 内部链接:直接链接内部页面名称即可

③ 如果在编写的时候没有确定超链接的链接位置,通常将href的属性值定义为#, 即 表示该链接暂时是一个空链接

④ 不仅可以创建文本超链接,在网页中的元素,比如图片,音频,视频,表格等都可以创建超链接。

锚点定位

通过创建锚点链接,用户能够快速定位到目标内容。创建锚点链接分为两个步骤:

使用  创建链接使用相同的id名标注跳转目标的位置 base标签: 可以设置整体链接的打开状态

基本语法格式:  单标签

比如: 在标签之间写 则表示页面中的链接都会在新窗口中打开目前学过的单标签:img,br,hr,base 特殊字符标签(理解)

特殊字符描述字符代码?空格符大于号&和号¥人民币。摄氏度?版权?注册商标2平方,上标23立方,上标3×乘号÷除号±正负号

注释标签

多写注释,这是非常好的代码习惯,会使得团队协作顺畅注释是写给队友看的,浏览器是不执行的注释的内容不会显示在浏览器的窗口当中,但是作为HTML文档内容的一部分,也会被下载到用户计算机上,查看网页源代码时就可以看到基本语法格式:sublime中的注释HTML代码的快捷键:单行注释:Ctrl+/ ;多行注释:选中后ctrl+shift+/

实际工作中,通常新建一个文件夹专门用于存放图像文件,这时再插入图像,就需要采用“路径”的方式来指定图像文件的位置。

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

相对路径:

图像文件和HTML文件位于同一文件夹:只需要输入图像文件的名称即可,如 :图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件夹,之间用/隔开, 如: 图像文件位于HTML文件的上一级文件夹:在文件名之前加“…/”,如果是上两级,则需要使用“…/…/”,以此类推。比如: 绝对路径:

或者完整的网络地址,例如:

无序列表ul (重点)

无序列表的各个表项之间没有顺序级别之分,是并列的,基本语法如下:

(1)中只能嵌套标签,直接在之间输入其他标签或者文字的做法是不被允许的。

(2)之间相当于一个容器,可以容纳所有元素。

(3)无序列表会带有自己的样式属性,放下那个样式(比如说每一项无序列表前面的黑点),让CSS来做!

有序列表ol (了解)

(1)中只能嵌套标签,直接在之间输入其他标签或者文字的做法是不被允许的。

(2)列表项前面的序号设置用CSS来做

自定义列表 (理解)

自定义列表常用于对术语或名词进行解释和描述,定义列表的列表向前没有任何项目符号,基本语法格式如下:

术语或名词进行解释和描述,定义列表的列表向前没有任何项目符号,基本语法格式如下:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值