html图片变成小黑,入门级HTML、CSS_HTML基础

感谢这么基础的东西还能有小伙伴前来赏光，

你好，我是阿Ken

之后阿Ken会在本专栏持续更新HTML、CSS的入门基础，

主要以课本教材为主，自学网站资源为辅

有想自学或者是回过头看一看、复习的小伙伴可以过来扎个堆儿了哈哈哈

最近疏于调整状态，仔细说来也是十分惭愧

总是想着与年纪不符的事情，总寻思把能考虑到的都能够考虑周全，不断的给自己施压和一些说不上麻烦但零散的小事儿整的心态一直不是很乐观

再加上我也只是一个学习效率低下的普通人

可能是有点丧了_

但当一个人尝尽孤独的滋味

他会笑着与这个世界和解

当你对自己产生疑问的时候，

就是你该改变的时候了

1.1_html基础

1.1.1_html5文档基本格式及HTML标记

无标题文档

标记

位于文档最前面，使用html5的DOCTYPE声明，会触发浏览器以标准兼容模式来显示页面，浏览器才能将该网页作为有效的html文档。

< html >标记

该标记位于标记 之后，该标记意味着html文档的开始和结束，在它之间的是文档的头部和主体内容。

< head >标记

在< html >标记 之后，定义html文档的头部信息，也称头部标记。

< body >标记

主体标记

html中的单双标记

双标记

内容标记名>

单标记

注释标记

1.1.2_HTML5的语法

标签不区分大小写

这里的p标签大小写不一致

虽然p标记的开始标记与结束标记大小写并不匹配，但是在html5中语法是完全合法的。

允许属性值不使用引号

以上代码等价于

允许部分属性值的属性省略

可以省略为：

1.1.3_标记的属性

内容标记名>

标记可以有多个属性且不分先后顺序

例如：

内容

1.1.4_HTML5文档头部相关标记

这些标记通常都写在head标记内

设置页面标题标记< title>

网页标题名称

定义页面元信息标记< meta/>

引用外部文件标记< link>

内嵌样式标记

1.2_文本控制标记

1.2.1标题和段落标记

标题标记

包括< h1>~< h6>

< hn align="对齐方式">内容< /hn>

left：设置标题文字左对齐(默认值)

center：设置标题文字居中对齐

right：设置标题文字右对齐

段落标记

< p align="对齐方式">内容< /p>

水平线标记< hr/>

< hr 属性=“属性值” />

属性名

含义

属性值

align

设置水平线的对齐方式

可选择left、right、 center 三种值，默认为left

size

设置水平线的粗细

以像素为单位，默认为2像素

color

设置水平线的颜色

可用颜色名称、十六进制#RGB、rgb(r, g. b)

width

设置水平线的宽度

可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100%

水平线标记的用法和属性

传智播客专业于Java、.NET、 PHP、 C/C++、网页设计、平面设计、UI设计。从菜鸟到职场达人的转变就在这里，你还等什么?

---

Java学院

---

网页平面设计学院

---

14

PHP学院

运行结果如下:

4. 换行标记< br/>

1.2.2_文本格式化标记

1.2.3_特殊字符标记

1.3_图像标记

常用的图像格式主要是GIF、JPG和PNG三种

在网页中小图片如图标，按钮等建议使用GIF或PNG格式，透明图片建议使用PNG格式，类似照片的图片则建议使用JPG格式，动态图片建议使用GIF格式。

1.3.1_图像标记< img />

实例：

代码如下：

运行结果：

1.3.2_绝对路径和相对路径

绝对路径

_

绝对路径就是网页上的文件或目录在硬盘上的真正路径，如“D:\HTML5+CSS3\images\logo.gif",或完整的网络地址，如http://www.itcast.cn/images/logo,gif"。

_

网页中不推荐使用绝对路径，因为网页制作完成之后我们需要将所有的文件上传到服务器。就是说很有可能不存在“D:\HTML5+CSS3\images\logo.gif" 这样一个路径。

相对路径

_

相对路经就是相对于当前文件的路径，相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。

_

总结起来，相对路径的设置分为以下3种。

_

(1)图像文件和HTML文件位于同一文件夹:只需输入图像文件的名称即可，如< img src=“logo. gif” />。

_

(2)图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用”/“隔开，如< img src=“images/logo.gif”/>

_

(3)图像文件位于html文件的上一级文件夹:在文件名之前加入"…/", 如果是上两级，则需要使用"…/…/"以此类推，如文本或图像

< a>标记用于定义超链接，href 和target 为其常用属性

href：用于指定链接目标的url地址

target：用于指定链接页面的打开方式 。其取值有_self、_blank两种，

_self意为在原窗口打开，_blank意为在新窗口打开

实例：

代码：

运行后：

点击超链接弹出新窗口：

1.4.2_锚点链接

直接实例：

代码：

运行后如下两张图，在第一张图点击”点我“就会跳转到第二张图上的”这里“：

我一定会慢慢努力

不辜负自己

也不辜负亲人和朋友

我是阿Ken

我们后会有期