HTML基本标签学习

一、HTML

       网页的结构（页面都是由html的标签嵌套而成）

1. HTML5就是HTML1.01的升级版

每一个html的版本都会收纳一些默认标签，比如html5就比html4.01多了audio、video等一系列标签（html不能自定义标签，浏览器只识别被html收纳的标签）

1. 需要使用前端开发工具

工具可以有多种选择VsCode、Pycharm、NpePad++、WebStorm、Hbulider

同一都是用HbuilderX，HbuliderX可以根据文件类型自动下载插件，比如Emmet

Hbulider的提示分两种：

1. Tab键提示：需要将标签输入完毕
2. Ebter键提示：只需要数据部分标签即可，提示内容特别全面

推荐使用Tab轻量级显示

通过视图菜单，显示左侧视图和现实工具栏可以定义Hbulider页面显示内容

3、HTML的众多标签

第一批6个:

用于标题醒目标签h1~h6,有上下行距 可以换行

div:页面中的块，只有换行效果

p：页面中的段落，有上下行距，可以换行

span：隔离标签，没有任何样式

br：换行

hr：水平分割线

hr和br等标签有特殊写法 不需要按标准规则（开始标签，结束标签）

第二批8个：

                  b/strong可以加粗

                  i/em可以加斜

                  big/small可以让文本变大或变小

                  sup/sub上下标

                   u/del下划线 删除线

                  strong和em在不同的浏览器中，不同的标准中不一定是加粗加斜，以后样式也可能发生更换

第三批6个

ol：有序列表，列表开头会标注数字

ul：无序列表，列表开头是一个黑点

ol 和ul只是列表的框架，都有上边距，下边距，做内补

li：显示列表的内容

dl：自定义列表框架，默认有上边距，下边距

dt：列表项目，样式类似div

dd:列表项目具体的内容，有做内补

第四批4个 媒体标签

a 超级链接标签，用于页面跳转，必须的是href属性

所有的html属性都要写在html标签的开始标签上

标准格式：key1 = value1  key2 = value2  key3 = value3

href代表的是跳转的页面地址，可以是本地地址也可以是网络地址

target默认是_self指在本标签页打开网页，_blank指打开一个新的空白页打开此网页

锚点适合在一个页面内设置，代表滚动条 格式为：href = “#id值”

图片img 有src属性来展示图片，图片地址可以是本地地址或者网络地址 ./代表与当前与html文件在同级目录  ../代表上级目录

其中width指代宽 height指代高，可以通过修改这两个值来改变图片的大小

属性alt指的是当图片显示失败时，提示的文字，如alt=“图片无”，如果图片显示不了则会提示“图片无”

Video  加载视频，src中填入地址可以是本地地址或者是网络地址 control 可以展示控件，通过这个可以控制视频的播放

audio  加载视频，src中填入地址可以是本地地址或者是网络地址 control 可以展示控件，通过这个可以控制音频的播放

第五批4个 表格标签

Table 外框 tr行 td普通单元格 th表头单元格有加粗加黑效果

border：给表格加上边框 cellspacing：可以控制单元格之间的距离 cellpadding：可以控制单元格内部与边框的间距

rowspan：可以合并行，如果输入2则代表占据两行

colspan：可以合并列，如果输入2则代表占据两列

第六批1个

iframe框架用于将其他的页面嵌入到当前页面

属性src：嵌入的页面地址

属性width和heigh：控制嵌入页面的大小

属性scrolling：导航条

第七批1个from标签

核心功能是与服务器进行交互

属性action：是确定与服务器哪个接口进行交互（比如是登录或者注册）

属性method：确定与服务器用那种方式进行交互（get或者post）

其中get一般用于从服务器获取数据，

get请求会获取到表单中的所拥有name元素的input将name与value拼接成格式：http：//baidu.com/?key1 = value1&key2=value2&key3=value3

post一般用于向服务器提交数据（大部分是post）post数据会拼接在请求的form data中，

Input就是表单所要提供的内容，常用的name 和 value，只有拥有了name属性，input中的元素才会被提交

Input中的value需不需要写取决于input中的type，输入框就可以不用带value，输入的值就是value

如果是单选框的话需要有value，单选框中的name应该相同

语义化标签

                语义化标签，没有特定的样式，作用相当于div

                header，footer，slide，main，section，nav

5、HTML基本的属性

a标签的href属性以及target属性

img标签的src属性以及alt属性，width属性与height属性

video和audio的src属性，controls属性

table标签的border、Cellspacing、cellpadding、colspan、rowspan

width属性和height属性

以上标签都是非标准标签，标准标签是可以运用在任何一个标签上的

Id：页面中不可重复且必须以字母开头

class：一个标签可以有多个类名，不同标签可以有相同的类名

style：用于编写标签的样式

title：鼠标定位在目标上出现的文字提示