阿ken的HTML、CSS的入门指南（一）_HTML基础
站长
· 阅读数 12
感激相遇 你好 我是阿ken
🌊🌈关于前言：
文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)
本博客暂适用于刚刚接触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
🌊🌈往期回顾：
🌊🌈关于后记：
感谢阅读，希望能对你有所帮助 博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我 感谢每一位小伙伴不吝赐教
原创不易，「点赞」+「评论」 谢谢支持❤
转载自:https://juejin.cn/post/6987731486707286030