入门级HTML、CSS_HTML基础

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

你好，我是阿Ken

之后阿Ken会在本专栏持续更新HTML、CSS的入门基础，
主要以课本教材为主，自学网站资源为辅
有想自学或者是回过头看一看、复习的小伙伴可以过来扎个堆儿了哈哈哈

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

在这里插入图片描述
总是想着与年纪不符的事情，总寻思把能考虑到的都能够考虑周全，不断的给自己施压和一些说不上麻烦但零散的小事儿整的心态一直不是很乐观
再加上我也只是一个学习效率低下的普通人
可能是有点丧了_

但当一个人尝尽孤独的滋味
他会笑着与这个世界和解

当你对自己产生疑问的时候，
就是你该改变的时候了

1.1_html基础

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
</body>
</html>

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

<!doctype html>

< html >标记
该标记位于<!doctype>标记之后，该标记意味着html文档的开始和结束，在它之间的是文档的头部和主体内容。
< head >标记
在< html >标记之后，定义html文档的头部信息，也称头部标记。
< body >标记
主体标记
html中的单双标记

双标记

<标记名>内容</标记名>

单标记

<标记名/>

注释标记

<!--注释语句-->
<!--这就是注释标记-->

1.1.2_HTML5的语法

标签不区分大小写

<p>这里的p标签大小写不一致</P>

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

允许属性值不使用引号

<input checked=a type=checkbox/>
<input readonly=readonly type=text/>

以上代码等价于

<input checked="a" type="checkbox"/>
<input readonly="readonly" type="text"/>

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

<input checked=“checked” type="checkbox"/>
<input readonly="readonly" type="text"/>

可以省略为：

<input checked type="checkbox"/>
<input readonly type="text"/>

1.1.3_标记的属性

<标记名 属性1="属性值1" 属性2="属性2"...>内容</标记名>

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

<h1 align="center">内容</h1>

1.1.4_HTML5文档头部相关标记

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

设置页面标题标记< title>

<title>网页标题名称</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%

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>水平线标记的用法和属性</title>

</head>

<body>

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

<hr />

<P align="left">Java学院</p>

<hr color="red" align="left" size="5" width="600"/>

<P align="center">网页平面设计学院</p>

<hr color="#066F" align-"right" sizem"2" width="508"/>14 <P align="right">PHP学院</p>

</body>

</html>

运行结果如下:
在这里插入图片描述
4. 换行标记< br/>

1.2.2_文本格式化标记

在这里插入图片描述

1.2.3_特殊字符标记

在这里插入图片描述

1.3_图像标记

常用的图像格式主要是GIF、JPG和PNG三种
在网页中小图片如图标，按钮等建议使用GIF或PNG格式，透明图片建议使用PNG格式，类似照片的图片则建议使用JPG格式，动态图片建议使用GIF格式。

1.3.1_图像标记< img />

<img src="图像URL"/>

在这里插入图片描述
实例：
代码如下：

运行结果：

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文件的上一级文件夹:在文件名之前加入"…/", 如果是上两级，则需要使用"…/…/"以此类推，如<img src="logo.gif/>

1.4_超链接标记

1.4.1_创建超链接

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

< a>标记用于定义超链接，href 和target 为其常用属性
href：用于指定链接目标的url地址
target：用于指定链接页面的打开方式。其取值有_self、_blank两种，
_self意为在原窗口打开，_blank意为在新窗口打开

实例：

代码：
在这里插入图片描述
运行后：

在这里插入图片描述
点击超链接弹出新窗口：

在这里插入图片描述

1.4.2_锚点链接

直接实例：
代码：
在这里插入图片描述
运行后如下两张图，在第一张图点击”点我“就会跳转到第二张图上的”这里“：

在这里插入图片描述
我一定会慢慢努力
不辜负自己
也不辜负亲人和朋友

我是阿Ken
我们后会有期