HTML快速入门个人学习心得

1、sublime 的使用:

插件的安装:
在这里插入图片描述
快捷代码:
在这里插入图片描述
插件的删除:
在这里插入图片描述

2、html标签

在这里插入图片描述
标签关系:

嵌套关系和并列关系

<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>

标题标签
<h1> </h1> , <h2> </h2>,...,<h6></h6>

段落标签
<p> </p>

水平线标签
<hr />

换行
<br />

span和div (div标签就相当于微信小程序里面的view标签,没有特别含义,是用来划分的)

span和div功能区别:

span和div区别在于,div是一个块级元素,它包含的元bai素会自动换行。而span是行内元素,在它的前后不会换行。

span没有结构上的意义,只是单纯的应用样式,其他元素不适合时,就可以使用span元素。span可以作为div的子元素,但div不能是span的子元素,如果出现span中出现div不符合ws3c的页面标准。

span和div使用区别:

span元素宽度是被包围的内容宽度决定,不建议给span设置宽度属性width,可以给span设置margin值,设置与父元素之前的距离。

span可以通过css声明(display:block)转换为块元素,想对一行中的文字或图片单独设置样式,而又由不需要换行的条件下又不影响其他行内其他内容,span可以很好解决这些问题

文本格式化标签
在这里插入图片描述
标签属性
在这里插入图片描述
在这里插入图片描述
图像属性
在这里插入图片描述
链接标签
在这里插入图片描述
锚点定位:适合于较长的页面,我们可以点击某个关键词,从而迅速到达页面中的这个位置。

	<a href="#name1">点击此处</a>
	
	<h2 id="name1">跳转到的对应位置</h2>

base标签
可以设置整体链接打开状态
如:下图是让页面内标签在新窗口打开
在这里插入图片描述
如果想让某一个用当前窗口打开就可以单独设置
在这里插入图片描述
特殊字符
在这里插入图片描述

3、路径

在这里插入图片描述

4、列表

无序列表
在这里插入图片描述
注意:约定ul标签里只放li标签,其他标签可以写到li标签里

有序列表
在这里插入图片描述
自定义列表
在这里插入图片描述

5、表格

在这里插入图片描述
注意:table标签只能放tr标签(还可以放thead用来包裹表头,tbody用来包裹表格主体),tr里放td(或 th),td里都可以放。HTML表格没有列的概念。
在这里插入图片描述
表格属性:(设置到table标签里)
在这里插入图片描述
表头标签
把 td 换为 th 就可以

表格标题
caption , 写到table里面

合并单元格
给td 标签加属性 :rowspan=" 想要合并的个数" 跨行合并;colspan=“想要合并的个数” 跨列合并。
跨行:把每一行多出来的单元格删除,从上往下看,保留第一个。
在这里插入图片描述
跨列:从左往右看,删除多余的单元格,保留第一个。
在这里插入图片描述
在这里插入图片描述

6、表单

在这里插入图片描述
表单控件

input
在这里插入图片描述
单选:如果是一组可以通过设置相同的name来实现

label标签
在这里插入图片描述
在这里插入图片描述
textarea控件(文本域)
在这里插入图片描述
一般通过css来控制他的宽高,不用上述属性。

下拉菜单
在这里插入图片描述
表单域
在这里插入图片描述

7、HTML5

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
推荐:先上传到一个视频软件上比如优酷、腾讯。在通过分享,复制代码就可以。

在这里插入图片描述
loop = -1 为无限循环

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
结束~

猜你喜欢

转载自blog.csdn.net/zcylxzyh/article/details/113057699
今日推荐