前端与 HTML | 青训营笔记

用户7448759578221
365 阅读2分钟

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

前端介绍

前端是什么

  • 解决GUI人机交互问题

  • 跨越端

  • WEB技术栈

前端技术栈

  • JavaScript
  • CSS
  • HTML

什么是前端需要关注的

  • 美观
  • 功能
  • 无障碍
  • 安全
  • 性能
  • 兼容
  • 体验

前端需要的开发环境

常用的浏览器————chrome，常用的编译器VSCode

HTML介绍

HTML：HyperText Markup Language（超文本标记语言）

image.png

HTML语法

标题
<h1>字体排印学</h1>（一级标题）
<h2>历史</h2>（二级标题）
<p>活字的雏形或可追溯至公元前两千年前后美
索不达米亚文明的乌鲁克和拉尔萨，砖块上面不
均匀的印花被视作有可能是活字思想雏形。</p>
<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术，公元868
年的《金刚经》是现存最古老的印刷品之一，使用
的技术即是木雕版印刷。</p>
<h2>应用</h2>
<p>...</p>
列表
有序列表：
<h2>世界电影票房排行榜</h2>
<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>
无序列表：
<h2>购物清单</h2>
<ul>
  <li>🍇</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>
定义列表
<h2>霸王别姬</h2>
<dl>
  <dt>导演：</dt>
  <dd>陈凯歌</dd>
  <dt>主演：</dt>
  <dd>张国荣</dd>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>
  <dt>上映日期：</dt>
  <dd>1993-01-01</dd>
</dl>
链接
以新的网页替代
<a href="https://www.bytedance.com/">
  字节跳动官网
</a>
打开一个新网页
<a href="https://www.bytedance.com/" target="_blank">
  字节跳动官网
</a>
输入
<input placeholder="请输入用户名">

<input type="range">：输入一个范围

<input type="number" min="1" max="10">

<input type="date" min="2018-02-10">：输入日期

<textarea>Hey</textarea>：输入较多信息

结果如下

image.png

下拉列表
<p>
  <label><input type="checkbox" />🍎</label>
  <label><input type="checkbox" checked />🍏</label>
</p>（该选择框可以多选）

<p>
  <label><input type="radio" name="sport" />⚽</label>
  <label><input type="radio" name="sport" />🏀</label>
</p>（添加name之后表示同名只能选择一个

<p>
  <select>
    <option>🥑</option>
    <option>🥩</option>
    <option>🥓</option>
  </select>
</p>（下拉列表）

<input list="countries" />
<datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
  <option>United States</option>
</datalist>

image.png

语义化

语义化是什么

  • HTML中元素、属性以及属性值都拥有某些含义

  • 开发者应该遵循予以来开发html

有序列表用ul,无序列表用ol，lang属性表示内容所使用的语言

谁在使用我们的HTML

  • 开发者修改、维护页面。

  • 浏览器展示页面。

  • 搜索引擎提取关键字、排序。

  • 屏幕阅读器给盲人阅读内容。

语义化的好处

  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提供无障碍性
avatar
文章
阅读
粉丝