您现在的位置是:网站首页> 编程资料编程资料

如何学习html的各种标签_CSS/HTML_

2023-05-25 276人已围观

简介 如何学习html的各种标签_CSS/HTML_

head标签学习

网页标题标签

HTML学习

编码格式标签

网页搜索优化标签

HTML学习

网页指定跳转标签

其他标签

CSS或js引入的标签

body标签学习

body文本标签

1.标题标签

h1到h6:会将其中的数据加粗显示,并且显示依次减弱,标题标签自带换行功能(块级标签)

属性:

 align : center right left 

我是标题


我是标题


我是标题


我是标题


我是标题

我是标题

在这里插入图片描述

2.水平线标签

hr:会在页面中显示一条水平线,默认居中显示

属性:

width="宽度”设置水平线的宽度size=“高度”设置水平线的高度color="颜色”设置水平线的颜色



在这里插入图片描述

3.段落标签

p:会将一段数据作为整体进行显示,主要是进行css和js操作时比较方便.会自动换行(块级元素)

特点:段间距比较大

4.换行符标签

br:告诉浏览器需要在此位置换行

5.空格符标签

 :告诉浏览器在此位置增加空格

6.权重标签

b:会将内容加黑显示i :会将内容斜体显示u:会将内容增加下划线del :增加中划线

权重标签可以随意叠加

注:

1标签的属性是对标签的功能进一步的补充 ,可以由开发人员自由指定标签的属性值,来达到想要的显示效果。
2像素单位占据的是电脑屏幕的大小,百分比占据的是浏览器窗口的大小。

       东方网·演兵场4月6日报道
多家央媒近日集中报道了入列一年多的首艘国产航母山东舰,披露了其社区化生活、官兵伙食和近防装备等诸多细节。演兵场注意到

东方网·演兵场4月6日报道:多家央媒近日集中报道了入列一年多的首艘国产航母山东舰,披露了其社区化生活、官兵伙食和近防装备等诸多细节。演兵场注意到

今天适合学习d

文本标签全部代码

body标签学习

我是标题

我是标题

我是标题

我是标题

我是标题
我是标题


        东方网·演兵场4月6日报道
多家央媒近日集中报道了入列一年多的首艘国产航母山东舰,披露了其社区化生活、官兵伙食和近防装备等诸多细节。演兵场注意到

东方网· 演兵场4月6日报道:多家央媒近日集中报道了入列一年多的首艘国产航母山东舰, 披露了其社区化生活、官兵伙食和近防装备等诸多细节。演兵场注意到

今天适合学习d

body列表标签

1.无序列表

ul
li :该标签中书写列表内容,一个1i标签代表列表中的一行数据

特点:默认数据前有一个黑圆圈符号.

2.有序列表

ol
li :该标签中书写列表内容,一个1i标签代表列表中的一行数据

特点:

会自动的给列表进行顺序编码,格式从小到大并且是连续的。

属性:type:可以改变顺序编码的值,可以是1 a A I, ,默认使用阿拉伯数字进行顺序编码

3.自定义列表

dl
dt :数据的标题
dd:数据的具体内容,一个dd表示一 条数据、

列表标签全部代码

body标签(列表标签)

列表的学习


无序列表

  • 北京
  • 广州
  • 上海
  • 西安

有序列表

  1. xx
  2. hh
  3. ll
  4. qq
java
python
go
shell
hh
aa
xx
ll

图片标签学习

img src :

图片路径

本地资源路径:一般本地图片资源使用相对路径即可网络资源路径:图片资源的URL地址

属性

width:设置图片的宽度,如果是单独设置,则再图片保证不失真的情况下自动缩小或者放大;单位可以是px也可以是百分比height :设置图片的高度,如果是单独设置,则再图片保证不失真的情况下自动缩小或者放大;单位可以是px也可以是百分比title:图片标题,鼠标放在图片上的时候会显示alt:图片加载失败后的提示语

注意:图片是不会自动换行的(行内元素)

代码粘贴

图片标签学习

图片标签学习


shabihanpi

超链接标签学习

a标签

href :要跳转的网页资源路径
本地资源:相对路径
网络资源:网络资源(网页)的URL

target :指明要跳转的网页资源的显示位置

_self 在当前页中刷新显示_blank 在新的标签页中显示_top 在顶层页面中显示_parent 在父级页面中显示 锚点学习

作用:在一张网页中进行资源跳转

使用:

先使用超链接标签在指定的网页位置增加锚点.格式为:访问方式/a>

代码粘贴

 #超链接 超链接

超链接标签


图片标签

baidu

锚点学习

锚点学习 #锚点学习 锚点学习第一章
第二章
第一章

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

第二章

哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或

哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或

哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或

回到顶部

表格标签的学习

table :声明一个表格

​ tr:声明一行,设置行高及改行所有单元格的高度。​ th:声明一个单元格,表头格.默认居中加黑显示​ td:声明一个单元格,默认居左显示原始数据

属性:

border :给表格添加边框width:设置表格的宽度height:设置表格的高度cellpadding:设置内容居边框的距离cellspacing:设置边框的大小

特点:默认根据数据的多少进行表格的大小显示

科目分数姓名性别
英语100张三水电费水电费
汉语10李四

在这里插入图片描述

表格的合并

步骤:

1.首先确保表格是一个规整的表格

2.根据要合并的单元格,找到其所在的源码位置

3.合并

行合并:在要合并的单元格中的第一个单元格 上使用属性rowspan= “要合并的单元格的个数” ,并删除其他单元格完成合并列合并:在要合并的单元格中的任意一个上使用属性colspan=“要合并的单元格的个数” ,并删除其他单元格

表格合并的学习


-六神源码网