请选择 进入手机版 | 继续访问电脑版

好程序员-千锋教育旗下高端IT职业教育品牌

400-811-9990
我的账户
好程序员

专注高端IT职业培训

亲爱的猿猿,欢迎!

已有账号,请

如尚未注册?

[Web前端培训]关于HTML5学习中的一些总结

[复制链接]
橙妹 发表于 2019-7-17 10:16:16 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
  来好程序员学习已经一个多月了,在这中间经历过开始时的迷茫,在老师的帮助下,自己也不断学习总结,总算有所收获,下面就分享一下我关于HTML5前端的学习心得。


  第一章HTML


  1.HTML相关


  1)Web标准:HTML、CSS、Js


  2)Html相关概念:超文本标记语言语法:<标签属性=“属性值”/>分为双标签和单标签


  3)常用的HTML标签:文本:h1-h6、段落p、空格&nbsp;、版权符号&copy;、强制换行br、水平线hr、加粗bstrong、倾斜iem、上标sup、下标sub、列表ulliollidldtdd、图片img、超链接a、划分大区div、小文本节点span头部header尾部footer导航nav主体区main内容块section文章article侧边栏aside小块figure你的欧高亮显示mark输出框output视频video音频audio画图canvas对话框dialog标题组hgroup


  2.HTML表格:表格table、行tr、单元格tdth、属性:宽width、高height、边框border、边框颜色bordercolor、背景颜色bgcolor、单元格和单元格之间的间距cellspacing、单元格和内容的间距cellpadding、水平对齐align=”left/right/center”、垂直对齐valign=”top/bottom/middle”、合并行rowspan、合并列colspan表格标题caption列分组colgroupspancolspan行分组theadtbodytfoot给table添加分割线rulesallnonerowscolsgroups


  3.表单:文本框<inputtype=”text”/>密码框<inputtype=”psssword”/>提交按钮<inputtype=”submit”/>重置按钮<inputtype=”reset”/>提示信息<inputplaceholder=”请输入您的密码”/>创建表单<form></form>提交方法methodputget提交地址action表单字段filedset字段集标题legend提示信息标签lablefor=”id的名字”上传文件type=”file”多文件上传multiple单选按钮type=”radio”多选checked下拉菜单<select><option></option></select>文本域<textarea>邮件email网址URL数字number时间组天date月month周week时间time本地时间datetime-localUTC时间datetime


  第二章CSS


  1.CSS基础


  1)层叠样式表语法选择器{属性:属性值}引入方式内部样式外部样式内联样式


  2)选择器的分类class选择器ID选择器群组选择器类型选择器伪类选择器包含选择器层次选择器


  2.CSS相关属性


  1)文本相关颜色color字体font-family加粗font-weight倾斜font-style水平对齐text-align行高line-height文本修饰text-decoration首行缩进text-indent字间距letter-spacing词间距word-spacing


  2)列表相关属性样式list-style-type图片样式lisy-style-image:URL();位置list-style-position


  3)背景相关属性颜色background-color图片background-image平铺background-repeat定位background-position固定background-attachment


  3.浮动和盒子模型


  1)浮动floatleftrightnone


  2)清除浮动clearleftrightnoneboth


  3)盒子模型组成:内容填充外边距边框


  4)弹性盒:display:flexinline-flex改变主轴flex-direction换行flex-wrap对齐方式justidy-content交叉轴对齐方式align-itemsalign-content


  3.单行文本溢出显示省略号空余空间属性white-space省略号属性text-overflow溢出属性overflow


  4.元素类型


  1)块元素行内元素行内块元素


  2)元素转换display转块block转行内inline转行内快inline-block隐藏displaynoneli的默认属性displaylist-item


  5.垂直居中verticle-align默认值baseline居中middletopbottomtext-toptext-bottom


  6.定位


  1)分类默认值static绝对定位absolute相对定位relative固定定位fixed粘性定位吸顶效果


  2)改变层叠顺序z-index


  7.浏览器五大内核1)Tridentie内核2)Gecko火狐内核3)Webkit老版本谷歌Presto老版本欧朋5)Blink新版谷歌和欧朋


  8.移动端和响应式


  1)相关单位em相对单位相对于父元素字号大小remrootem相对于根元素字号大小vh相对于视口宽度VMin相对于视口的宽度和高度中最小的那个vmaxpx%


  2)书写移动端的注意点移动端没有版心移动端小图标要设置宽度和高度大banner要设置宽度100%用rem+vw写法要把所有的行内元素和行内块元素转换成块元素模型的盒子宽度用%来写移动端的head头部必须添加meta标签


  3)响应式的特点灵活的网格基础图片可以伸缩必须有媒体查询


  4)响应式的优缺点A优点:页面比较灵活可以多个设备同时用B缺点:代码增加减少页面加载速度兼容不好调试


  虽然有所收获,但我还需要更加努力的学习,才能熟练掌握HTM5前端学习技能。在以后的工作中,我会更加努力,遇到不懂的问题多向老师请教。感谢好程序员的老师,也感谢好程序员给我提供的这样一个平台。


好程序员官网:http://www.goodprogrammer.org/

精彩内容,一键分享给更多人!
回复

使用道具 举报

精彩评论2

 楼主| 橙妹 发表于 2019-7-17 10:59:05 | 显示全部楼层

回复

使用道具 举报

 楼主| 橙妹 发表于 2019-7-17 10:59:15 | 显示全部楼层
欢迎各位学员分享
回复

使用道具 举报

您需要登录后才可以回帖

本版积分规则

关注我们
好程序员
千锋好程序员

北京校区(总部):北京市海淀区宝盛北里西区28号中关村智诚科创大厦

深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619

杭州龙驰智慧谷校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层

郑州校区:郑州市二七区航海中路60号海为科技园C区10层、12层

Copyright 2007-2019 北京千锋互联科技有限公司 .All Right

京ICP备12003911号-5 京公安网11010802011455号

请您保持通讯畅通1对1咨询马上开启