HTML学习之：HTML基础：属性、格式化、样式、链接、表格

暖仔会飞

于 2020-03-29 19:51:02 发布

阅读量368

点赞数 1

分类专栏： HTML学习文章标签： html html5

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/qq_42902997/article/details/105181071

版权

HTML学习专栏收录该内容

5 篇文章

订阅专栏

文章目录

1. HTML属性
2. HTML的格式化
- 2.1 所有的格式化代码形式
- 2.2 所有的格式化方式对应的效果
3. HTML的样式
- 3.1 三种样式的插入（引用）方法
4. HTML 链接
5. HTML 的表格

1. HTML属性

在这里插入图片描述

1.1 超链接 href 属性例子

一般放在 <body> 中

在这里插入图片描述

1.2 常用的标签属性例子

1.2.1 标签的 align 属性：规定标签的对其方式

一般放在 <body> 中

在这里插入图片描述

1.2.2 标签的背景色 bgcolor 属性：规定背景颜色

一般放在 <body> 中

在这里插入图片描述

1.2.3 标签的 target 属性：规定打开链接页面的方式

一般放在 <body> 中

在这里插入图片描述

1.3 通用属性例子

1.3.1 class属性：规定元素类名

一般放在 <body> 中

后面如果想通过CSS样式来引用一个ID就可以通过类元素ID来找到并且引用，从而来设置 $h_2$ 显示的一些效果

在这里插入图片描述

1.3.2 id 属性：规定元素的唯一ID

一般放在 <body> 中

在这里插入图片描述

1.3.3 style 属性：规定元素的样式

一般放在头文件 <head> 中

在这里插入图片描述

1.3.4 title 属性：设定显示在标签页上的信息

一般放在头文件 <head> 中

在这里插入图片描述

2. HTML的格式化

在这里插入图片描述

2.1 所有的格式化代码形式

在这里插入图片描述

2.2 所有的格式化方式对应的效果

在这里插入图片描述

3. HTML的样式

在这里插入图片描述

3.1 三种样式的插入（引用）方法

在这里插入图片描述

3.1.1 外部样式表

顾名思义，引用外部样式表，就是标签样式的定义并不在本 HTML 文件内部进行，而在 HTML 文件外部

就是先在 <body> 里面创建一个标签
新建一个.css 的文件，里面对这个标签的样式进行设定
在头文件中 <link> 整个.css文件，自然包含了这个标签的样式信息

在这里插入图片描述

3.1.2 内部样式表：

顾名思义，引用内部样式表，就是标签样式的更改在同一个 HTML 文件内部进行，不涉及到另外的 .css文件

就是先在 <body> 里面创建一个标签
在头文件 <head> 里面用 <style> 对这个标签的样式进行设定

在这里插入图片描述

3.1.3 内联样式表：

这个就更简单了，内联代表的是，仅仅在标签内部就可以进行样式的更改

先在 <body> 里面创建一个标签
在本标签内部使用 <style> 对这个标签的样式进行设定

在这里插入图片描述

4. HTML 链接

在这里插入图片描述

4.1 链接数据

4.1.1 文字链接

使用文字链接可以通过特定的文字直接跳转到一个固定的网络地址~~

使用 $h r e f = . . .$ 来链接

在这里插入图片描述

4.1.2 图片链接

使用图片链接可以通过这张图片直接跳转到一个固定的网络地址~~

先用 $h r e f = . . .$ 规定要跳转到的网络地址
用 $s r c = . . .$ 设定要用哪张图片来完成这个跳转操作

在这里插入图片描述

4.2 链接操作中使用的属性

4.2.1 href 属性

上面已经提过很多次了

4.2.2 name 属性

使用 name 属性可以创建文档内的链接
在这里插入图片描述

4.3 img 标签属性

4.3.1 width / height 属性

调整图片大小
在这里插入图片描述

4.3.2 alt 替换文本属性

其效果可以让链接图片在无法显示的时候有一个可以被辨别出来的标签
在这里插入图片描述

5. HTML 的表格

在这里插入图片描述

5.1 基本表格示例

在这里插入图片描述

5.2 表格基本操作汇总

在这里插入图片描述

5.2.1 没有边框的表格

在这里插入图片描述

5.2.2 表格中的

5.2.3 空单元格

在这里插入图片描述

5.2.4 带有标题的表格

方式1：直接在外面加个 <p>
方式2：使用 <caption>

5.2.5 表格内的标签

在这里插入图片描述

5.2.6 单元格边距

在这里插入图片描述

5.2.7 单元格间距

在这里插入图片描述

5.2.8 表格内的背景颜色和图像

在这里插入图片描述

5.2.9 单元格内容排列

5.2.10 跨行和跨列单元格

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

暖仔会飞 你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。