day2记录 前端与HTML

前端

• 图形界面下的人机交互
• 跨多种终端
• web技术栈

• 借助web技术栈解决多端图形界面交互问题的工程师

功能、美观、无障碍、安全、性能、兼容性、用户体验等等

前端技术栈

• HTML
• CSS
• JavaScript
• 网络协议

HTML

• 超文本

  图片、标记、链接、表格

• 标记语言

DOM树

标签

标题h1-h6

列表

• 无序列表

  <ul>
      <li></li>
  </ul>
  

• 有序列表

  <ol>
      <li></li>
  </ol>
  

• 自定义列表

  <dl>
      <dt></dt>
      <dd></dd>
      <!-- dt:属性名/dt:属性值 -->
  </dl>
  

链接

<a href="baidu.com"></a?

多媒体

• <img>
• <audio>音频
• <video>视频

输入<input>

相关属性

placeholder:默认显示的提示信息

type="range":滑动块

<input type="number" min="1" max="10">设置最大最小值

radio:单选

checkbox:多选

select：下拉框

list输入提示：

<input list="countries"/>
<datalist id="countries">
    <!-- 可以根据输入自动补全的提示信息 -->
    <option>Greece</option>
    <option>United Kingdom</option>
    <option>United States</option>
</datalist>

文本类标签

• blockquoto

  快捷引用，一般引入一段较长的话

• cite

  短引用，引入书名，章节

• q

  引用具体的内容，也是较短的医用

• code

  代码，可长可短，可多行

• strong与em

  strong:表示很严重，紧急

  em:语气上的强调，重读

内容划分

• header:页头
• nav:导航栏
• main：主题
• article:文章正文
• aside:侧边栏
• footer：页脚

HTML语义化

元素、属性及属性值都拥有特定含义

• 代码可读性
• 可维护性
• 搜索引擎优化
• 无障碍性