公输的前端基础学习记录day2-1

        HTML 常用标签

1.要理解标签语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

2.标题标签＜h1＞-＜h6＞（重要）

分6个等级的网页标题

＜h1＞一级标题＜/h1＞

加了标题的文字会变粗，字号也会一次变大，且一个标题独占一行。

3.段落和换行标签（重要）

＜p＞段落＜/p＞

特点：文本在一个段落中会根据浏览器窗口大小自动换行；段落之间保有空隙

＜br /＞换行标签，强制换行。（学习的第一个单标签，不需要结束标签）

4.课堂案例：体育新闻

已完成，图片无法附上⊙︿⊙

5.文本格式化标签

设置粗体，斜体，加下划线等效果，就需要使用到文本格式化标签，突出重要性

1）重点！＜strong ＞加粗＜/strong ＞更推荐使用，比 ＜b＞语义更加强烈，＜b＞加粗＜/b＞

2）重点！＜em＞倾斜＜/em＞或＜i＞＜/i＞，＜em＞更推荐使用，更强烈

3）＜del＞删除线＜/del＞或＜s＞＜/s＞，   ＜del＞优先，更强烈

4）＜ins＞下划线＜/ins＞或＜u＞＜/u＞，更推荐＜ins＞

6.＜div ＞和＜span＞标签

两者都没有语义，就是一个盒子，来装内容的。用于布局的，div是division，表示分割分区，span是跨度，跨距。

特点：＜div＞用于布局但现在一行只能放一个＜div＞，大盒子。＜span＞小盒子，一行可放多个＜span＞。

7.图像标签

1）图像标签

＜img src="图像URL "/＞单标签，是image的缩写，即图像。src是＜img＞标签的必须属性，用于指定图像文件的路径和文件名。属性即属于这个图像标签的特性。

要把图片放在html所在文件夹中，  ＜img src="img.jpg" alt="文字"＞当图片加载失败，显示不出来时，显示alt里边的内容，如果图片能出来，alt里的文字就不显示。

除此之外还有title文本，提示文本，鼠标放到图像上显示的文字。

width像素，设置图像的宽度；height像素，设置图像的高度；border像素，设置图像的边框粗细。一般情况下宽度和高度设置一个就行，另一个会自动等比缩放，防止失真。

2）图像标签属性注意点：

a，图像标签可以拥有多个属性，必须写在标签名的后面。b，属性之间是不分先后顺序的。属性和属性之间要有空格。c，属性采用键值对的格式，即key="value "的格式，属性="属性值"。

8：路径

1）目录文件夹：即普通文件夹，存放做页面所需的相关素材，如html文件、图片等。

根目录：打开目录文件夹的第一层。

2）页面中图片通常会非常多，通常会建一个文件夹来存放图像文件（images），这时就需要采用“路径”来指定图像文件的位置。

路径可分为相对路径和绝对路径。

一）相对路径：以引用文件所在位置为参考基础，而建立的目录路径，简单来说就是图片相对于html页面的位置。

同一级路径，直接src=图片的名字。

下一级路径，/，如＜img src="images/baidu.gif" /＞.

上一级路径，../ ,如＜img src="../baidu.gif" /＞，点点杠，可使用多个点点杠

二）绝对路径

是指目录下的绝对位置，直接到达目标位置，通常是盘符开始的路径。如：“D:\web\img\logo.gif”或完整网络地址“http://www.itcast.cn/images/logo.gif"。

9：超链接标签（重点！）

＜a＞标签用于定义超链接

1）超链接的语法格式

＜a href="跳转目标" target="目标窗口的弹出方式”＞文本或图像＜/a＞，a为anchor的缩写，本意：锚。

href用于指定链接目标的URL地址，（必须属性）当为标签应用herf属性时，它就具有了超链接的功能。

target用于指定链接页面的打开方式，其中_self为默认值（当前页面），__blank为着新窗口打开的方式。

2）链接分类

 1。外部链接 如:＜a href="http://www.qq.com" target="_blank"＞腾讯＜/a＞，新建窗口跳转至腾讯网。

2。内部链接：即网站内部页面之间的相互链接，直接链接内部网页名称即可，如＜a href="index.html"＞首页＜/a＞。

3。空链接：如果当时没有确定链接目标时，＜a href="#"＞首页＜/a＞。

4。下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。地址链接的是文件.exe或者是.zip等压缩包形式。

5。网页元素链接，如果图片表格音频视频等等。

6。锚点链接：点击链接可快速定位到页面中的某个位置。在链接文本的href属性中，设置属性值为#名字的形式，如＜a href="#two"＞第二集＜/a＞。找到目标位置标签，里面添加一个id属性=刚才的名字，如＜h3 id="two"＞第二集介绍＜/h3＞

10：HTML中的注释和特殊字符

1).注释

注释标签以“＜!--”开头，以“--＞”结束。

快捷键：Ctrl + /

注释里的内容是给程序员看的，这个代码是不执行不显示到页面中的。

2）特殊字符

空格符 (包含分号)

小于号< 大于号> "&"和号& ¥人民币¥ 圈C，版权© 圈R，注册商标®

°摄氏度° ±正负号± ×乘号×   ➗除号÷ ²平方（上标2）² ³立方（上标3）³