HTML5 CSS基础知识及应用技巧总结

;强调"）下划线标签：u （u 语义：下划线）删除线标签：del 或者 s （del 语义：被删除）超链接标签：<a href="链接地址">文本内容</a> 语义：超链接特点：点击文本内容可以跳转到其他网页或者当前网页的其他部分图片标签：<img src="图片链接" alt="图片描述"> 语义：插入图片特点：src 为图片地址，alt 为图片描述 alt 作用：当图片加载出错时，能显示的文字 当图片不显示时，能提示出现的描述列表标签：<ul> <li></li> </ul> 语义：无序列表特点：每个列表项前面都有一个标志（通常是实心圆点）有序列表标签：<ol> <li></li> </ol>  语义：有序列表标签每个列表项前面都有一个数字 封闭标签与单标签封闭标签：有开始有结束 单标签：只有一个标签 比如 br 单标签自关闭具体规律；一定要注意大小写区分，标签不可以乱写段落标签太多，文档是文档不是书籍利用语义化标签，辅助 SEO的优化；title 描述页面占用字符文字量不宜过多，注意首屏渲染速度保证它加载的快 自定义 font-family，统计相关数据结构化加载更快，压缩文件的外部架构媒体查询可以根据屏幕大小重置样式，提供更好的用户体验不要在标签使用太多样式，尽可能提高性能优化声明缩进省略不重要的空格虽然过程繁杂，但效果很好！CSS3选择器ahover {}，可以设置鼠标悬停的效果在 CSS3 中，可以使用 translate 改变元素的位置定位使元素脱离文本流，支持绝对定位子类会继承父级的无序元素在 CSS3 中，使用了 transition 来实现动画元素在 CSS3 中也支持了弧形效果对元素进行绝对居中，你可以使用 transform: translate(50%，50%)这样，页面看起来更美观在使用多个页面时，尽量避免重复设置相同的内容对齐方式在前端开发中，更多的是和设计师沟通交流要保持页面干净整洁，尽量减少标签的嵌套设置合理的标签，减少复杂度CSS不仅可以设置元素样式，还可以进行布局设计对盒子模型的理解，可以更好的实现网页的布局内容方向不明确时，应根据设计稿来确定合适的版式结构多多学习开源项目，获取更多的灵感和技巧，提升开发水平总结：HTML5 和 CSS 是前端开发的基础，掌握好这两门基础知识是成为一名优秀前端工程师的必备条件。掌握 HTML5 的新标签和语义化标签的使用，能够更好地优化页面结构和 SEO；对 CSS3 的特性和选择器有所了解，可以更好地实现页面的样式和布局设计。同时，良好的开发习惯和团队协作能力也是提升个人能力的重要因素。通过不断学习和实践，不断提升自己的技术水平，才能在前端领域取得更好的发展。