三天学完HTML基础（一）-优快云博客

本文链接：https://blog.youkuaiyun.com/RoddyLD/article/details/110870819

三天学完HTML基础（一）

什么是HTML

什么是HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

五大浏览器

IE 欧朋谷歌火狐苹果自带

基本结构

完整的HTML文件包括标题、段落、列表、表格、绘制的图形及各种嵌入对象，这些对象统称为HTML元素。

<!DOCTYPE html>
<html>			文件开头的标记（根标签）
<head>			文件头部开始的标记（装的是浏览器的思想）
···
</head>			文件头部开始的标记
<body>			文件主体开始的标记
···			   （装的是浏览器可以给人们看到的地方）
</body>			文件主体结束的标记
</html>			文件结束的标记

文本标签

h 标题标签

范围 1-6 从大到小超过了则标签失效
属性： align 调整h标签水平位置

hr 分割线标签

width 宽度
color 颜色

p 段落标签

独占一行，对文本没有任何的影响
浏览器会将我们N个空格和回车转换为1个英文空格。

lorem 添加测试文字

pre标签

预格式化标签所有的字符都会进行原样输出、

ruby rt上方注释标签

ruby 放的是中文
rt 放的注音中间用空格隔开
并且注音要和文字一一对应

sup上标 sub下标
b 加粗 i 倾斜 u下划线

HTML实体

显示	说明	HTML编码
	`'半角大的空白'`	& ensp;
	`"全角大的空白（中文空格）"`	& emsp;
	`-- 不断行的空白格（英文空格）`	& nbsp;
<	`"小于号"`	& gt;
>	`大于号`	& lt;
&	`'&符号'`	& amp;
×	`"乘号"`	& times;
÷	`"除号"`	& divide;

超链接标签

HTML使用标签a 来设置超文本链接。
定义超链接的语法是：

<a href=URL>网页元素</a>

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签a中使用了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

href 链接的地址
target 跳转方式默认的情况下是 ‘_self’ 如果换成了"__blank"就会新建一个页面进行跳转
1.普通链接使用属性 href 进行跳转
2.锚链接

 1.给要跳转的位置添加一个 id
 2.建立一个a标签
 3.在 当前的a标签里面的href属性里面 通过 #id名进行跳转

实例

<a href="http://www.baidu.com">百度一下</a>
<a href="index3.html" target="_self">跳转</a>target 
<!-- 跳转方式 默认的情况下是 '_self' 如果换成了"__blank"就会新建一个页面进行跳转 -->
<a href="index5.html#index5">跳转到另外的一个网页</a>   <!-- 锚链接 -->

图片标签

在 HTML中，图像由img标签定义。
img是空标签，意思是说，它只包含属性，并且没有闭合标签。
定义图像的语法是：

<img src="图片路径">

属性：
src:图片的地址
alt : 当图片加载不出来的时候显示的文字
title :当鼠标移入时产生的文字
width：图片的宽度
height：图片的高度
align: 并不是图片的水平位置，而是图片两边文字的垂直位置
实例

<p align="center">
        这是一只猫
        <img src="../image/下载.jpg" alt="可爱的猫" title="猫" width="500" height="500" align="button">
        这是一只猫
</p>

网页查看如下图所示：
在这里插入图片描述