一、HTML
网页的结构(页面都是由html的标签嵌套而成)
- HTML5就是HTML1.01的升级版
每一个html的版本都会收纳一些默认标签,比如html5就比html4.01多了audio、video等一系列标签(html不能自定义标签,浏览器只识别被html收纳的标签)
- 需要使用前端开发工具
工具可以有多种选择VsCode、Pycharm、NpePad++、WebStorm、Hbulider
同一都是用HbuilderX,HbuliderX可以根据文件类型自动下载插件,比如Emmet
Hbulider的提示分两种:
- Tab键提示:需要将标签输入完毕
- 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:鼠标定位在目标上出现的文字提示