这是我参加「第四届青训营」笔记创作活动的第1天
我自己是一个准大三刚刚入门前端的菜鸟,学了三件套目前在学习es6的部分算是零基础吧,今天总结一下上课复习HTML的内容。
什么是前端
- 解决GUI人机交互问题
- 跨终端
- Web技术栈
- HTML
- CSS
- JavaScript
前端关注的方面
- 功能
- 美观
- 无障碍
- 性能
- 安全
- 兼容
- 体验
语法部分
之前没关注过<!doctype html>的作用渲染方式不同从来都是!提示输入。
标题标签
<h1>HTML</h1>
<h2>HTML</h2>
<h3>HTML</h3>
<h4>HTML</h4>
<h5>HTML</h5>
<h6>HTML</h6>
列表
<h4>有序列表</h4>
<ol>
<li></li>
</ol>
<h4>无序列表</h4>
<ul>
<li></li>
</ul>
<h4>自定义列表</h4>
<dl>
<dt></dt>
<dd></dd>
</dl>
链接
<a></a> href属性是跳转网页url,target是跳转方式
图片 视频 音频
<img> src属性是存放位置,alt是加载失败时显示的文本。自身是行内元素,跟文本对齐的时候CSS使用vertical-align属性。
<video> src属性是存放位置,autoplay字面含义bool属性,controls属性在提供进度条的控制面板,loop循环,muted静音。
<audio> 属性类似 <video>
表单
<input>不同type内容不同,用时可查MDN
引用
<blockquote>引用段<cite>作品名字<q>短引用<code>代码部分
页面内容
在写网页时可以用上述标签,HTML结构更清晰。
语义化
为什么语义化
- 为了开发者更好维护
- 给浏览器展示页面
- 搜索引擎会抓取html页面,提取关键词
- 无障碍可能的需求,不同环境的需求
做到语义化,课上内容讲的比较精炼,总结自己用的时候去查MDN。