感激相遇你好我是阿ken

作者：请叫我阿ken
链接：juejin.cn/user/109118…
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

🌊🌈关于前言：

文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)

本博客暂适用于刚刚接触HTML以及好久不看想要复习的小伙伴

🌊🌈关于内容：

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_文本格式化标记

标记	显示效果
< b>< /b> 和 < strong>< /strong>	文本以粗体方式显示(b定义文本粗体，strong定义强调文本)
< i>< /i> 和 < em>< /em>	文本以斜体方式显示(i定义斜体字，em定义强调文本)
< s>< /s> 和 < del>< /del>	文本以加删除线方式显示(H5不赞成使用s)
< u>< /u> 和 < ins>< /ins>	文本以加下划线方式显示(H5不赞成使用s)

1.2.3_特殊字符标记

1.3_图像标记

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

1.3.1_图像标记< img />

<img src="图像URL"/>

属性	属性值	描述
src	url	图片的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	数字	设置图像边框的宽度
vspace	像素	设置图像顶部和底部的空白(垂直边距)
hspace	像素	设置图像左侧和右侧的空白(水平边距)
slign	left	将图像对齐到左边
slign	right	将图像对齐到右边
slign	top	将图像的顶端和文本的第一行文本对齐，其他文学居图像下方
slign	middle	将图像的水平中线和文本的第一行文本对齐，其他文字居图像下方
slign	bottom	将图像的底端和文本的第一行文本对齐，其他文学居图像下方

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

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_锚点链接

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

今日入门学习暂时告一段落

Peace

🌊🌈往期回顾：

🌊🌈关于后记：

感谢阅读，希望能对你有所帮助博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我感谢每一位小伙伴不吝赐教

原创不易，「点赞」+「评论」 谢谢支持❤

阿ken的HTML、CSS的入门指南（一）_HTML基础