HTML学习

  • 1、sublime 的使用:
  • 2、html标签
  • 3、路径
  • 4、列表
  • 5、表格
  • 6、表单
  • 7、HTML5


1、sublime 的使用:

插件的安装:

html5 span命令 html中span怎么用_html


快捷代码:

html5 span命令 html中span怎么用_控件_02


插件的删除:

html5 span命令 html中span怎么用_控件_03

2、html标签

html5 span命令 html中span怎么用_html5 span命令_04


标签关系:

嵌套关系和并列关系

<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可以很好解决这些问题

文本格式化标签

html5 span命令 html中span怎么用_html_05


标签属性

html5 span命令 html中span怎么用_html_06


html5 span命令 html中span怎么用_css_07


图像属性

html5 span命令 html中span怎么用_css_08


链接标签

html5 span命令 html中span怎么用_表单_09


锚点定位:适合于较长的页面,我们可以点击某个关键词,从而迅速到达页面中的这个位置。

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

base标签

可以设置整体链接打开状态

如:下图是让页面内标签在新窗口打开

html5 span命令 html中span怎么用_css_10


如果想让某一个用当前窗口打开就可以单独设置

html5 span命令 html中span怎么用_html5 span命令_11


特殊字符

html5 span命令 html中span怎么用_html_12

3、路径

html5 span命令 html中span怎么用_html_13

4、列表

无序列表

html5 span命令 html中span怎么用_css_14


注意:约定ul标签里只放li标签,其他标签可以写到li标签里有序列表

html5 span命令 html中span怎么用_html_15


自定义列表

html5 span命令 html中span怎么用_控件_16

5、表格

html5 span命令 html中span怎么用_html5 span命令_17


注意:table标签只能放tr标签(还可以放thead用来包裹表头,tbody用来包裹表格主体),tr里放td(或 th),td里都可以放。HTML表格没有列的概念。

html5 span命令 html中span怎么用_html5 span命令_18


表格属性:(设置到table标签里)

html5 span命令 html中span怎么用_表单_19


表头标签

把 td 换为 th 就可以

表格标题
caption , 写到table里面

合并单元格

给td 标签加属性 :rowspan=" 想要合并的个数" 跨行合并;colspan=“想要合并的个数” 跨列合并。

跨行:把每一行多出来的单元格删除,从上往下看,保留第一个。

html5 span命令 html中span怎么用_html5 span命令_20


跨列:从左往右看,删除多余的单元格,保留第一个。

html5 span命令 html中span怎么用_html5 span命令_21


html5 span命令 html中span怎么用_html5 span命令_22

6、表单

html5 span命令 html中span怎么用_html5 span命令_23


表单控件input

html5 span命令 html中span怎么用_控件_24


单选:如果是一组可以通过设置相同的name来实现label标签

html5 span命令 html中span怎么用_表单_25


html5 span命令 html中span怎么用_css_26


textarea控件(文本域)

html5 span命令 html中span怎么用_css_27


一般通过css来控制他的宽高,不用上述属性。下拉菜单

html5 span命令 html中span怎么用_css_28


表单域

html5 span命令 html中span怎么用_控件_29

7、HTML5

html5 span命令 html中span怎么用_css_30


html5 span命令 html中span怎么用_html5 span命令_31


html5 span命令 html中span怎么用_表单_32


html5 span命令 html中span怎么用_表单_33


html5 span命令 html中span怎么用_css_34


html5 span命令 html中span怎么用_表单_35


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

html5 span命令 html中span怎么用_css_36


loop = -1 为无限循环

html5 span命令 html中span怎么用_html_37


html5 span命令 html中span怎么用_表单_38


html5 span命令 html中span怎么用_控件_39


html5 span命令 html中span怎么用_表单_40


结束~