这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天

前端的介绍

1、HTML是网页的内容、CSS是网页的样式、JS是网页的行为
2、前端的应用
（1）node.js可以用来开发服务器端应用
（2）electron开发客户端的应用
（3）React Native可以实现PHP传输，实现多人会议
（4）WebGL可以实现3D游戏的实现
（5）、WebASSEMBLY可以实现浏览器上运行代码
3、开发的编译器：vscode、Vim、WebStrom

HTML基本介绍

1、HTML是超文本标记语言
2、head是网页的设置，不用给用户看的
3、h1是内容的一级标题，还有h2,h3等
4、body里面放的是呈现给用户的内容
5、p是显示内容

HTML基本语法

• 属性值推荐用双引号包裹。
• 某些属性值可以省略，比如required、readonly。
• 没有顺序的列表可以有用ul来实现，ul嵌套li来实现一个列表项，实现的结果是有一个“·”作为一项的标记。

• 有顺序的列表用ol来实现，其他同上述列表。

• 假如父列表项中存在子列表项，那么可以使用dl来实现，dt是用来说明父列表项，dd是用来说明是子列表项。

<dl>
<dt>同学</dt>
<dd>xxx</dd>
<dd>yy</dd>
</dl>

• 链接是用标签a来实现的，属性href是跳转的链接地址，其中属性target是可以隐藏，当target赋值为_blank时，那么说明，跳转该链接时浏览器要新建一个标签页。

• 插入多媒体

  插入图片的实现

  

  插入音频的实现

  <audio scr="文件地址" controls></audio>

  插入视频的实现

  <video src="文件地址" controls></video>

• 输入

  1. <input placeolder="xxx">，其中placeolder是一个占位符，在用户没有输入的时候，就会显示什么内容。
  2. <input type="range">
  3. <input type="number" min="1" max="10">
  4. <input type"date" min="2018-02-10">
  5. <textarea>Hey</textarea>

• 选择

  多选

  <p>
  #支持多选
      <label><input type="checkbox"/>1</label>
      <label><input type="checkbox" />2</label>
  </p>
  

  单选1

  <p>
      <label><input type="radio" name="sport"/>3</label>
      <label><input type="radio" name="sport"/>4</label>
      #name是用来归为一个选择类
  </p>
  

  单选2__列表式

  <p>
      <selelt> 
          <option>1</option>
          <option>2</option>
          <option>3</option>
      </selelt>
  </p>
  

  单选3__输入式

  <p>
      <input list="countries"/>
      <datalist id="countries">
          <option>1212</option>
          <option>2121</option>
          <option>3232</option>
      </datalist>
  

• 文本内容

  1. 标签blockquote是适合长引用的
  2. 标签cite是短引用
  3. 标签q是表示双引号
  4. 标签strong是加粗字体
  5. 标签em是斜化字体

• 内容划分

  • 页头主要放在标签header里，也是显示给用户的内容
  • 页面主体主要放在main里面
  • 与文章有关之类的东西可以放在页面侧边，也就是标签aside里
  • 页尾就放在标签footer里面

语义化

HTML中的元素、属性及属性值都拥有某些含义，使用属性的时候，要赋上相对应的属性值。

引用

视频课程——前端与 HTML