前端与HTML | 青训营

idkwmnsb
62 阅读3分钟

什么是前端？

  • 解决GUI人机交互问题
  • 跨终端
    • PC/移动浏览器
    • 客户端/小程序
    • VR/AR等
  • Web技术栈

三件套对应->HTML内容，CSS样式，JS行为

前端应该关注：美观，功能，无障碍，安全，性能，兼容性，体验

HTML是什么？（HyperText Markup Language）

这是一个HTML框架，其中对应的含义如下

doctype：标记当前使用的html文件的版本，最终浏览器会根据这个去决定使用哪一种渲染模式

html：文档的根标签

head：放页面的元数据

body：呈现给用户的内容

<!doctype html>
<html>
    <head>
        <meta chatset="UTF-8">
        <title>页面标题</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <p>段落内容</p>
    <body>
<html>

HTML语法

  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合，比如input、meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以省略，比如required、readonly

标题标签：h1~h6

<h1>字体排印学</h1>
<h2>历史</h2>
<p>活字的雏形或可追溯至公元前两千年前后美
索不达米亚文明的乌鲁克和拉尔萨，砖块上面不
均匀的印花被视作有可能是活字思想雏形。</p>
<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术，公元868
年的《金刚经》是现存最古老的印刷品之一，使用
的技术即是木雕版印刷。</p>
<h2>应用</h2>
<p>...</p>

列表标签：有序列表ordered list（ol）、无序列表unordered list（ul）、自定义列表definition list（dl）

li：list item

dt：definition term自定义列表组

dd：definition description自定义列表描述

<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>

链接标签：anchor（a）

alter（alt）：当图片加载不出来时的替代文本

controls：显示播放的控件

<a href="https://www.bytedance.com/">
字节跳动官网
</a>

<a href="https://www.bytedance.com/" target="_blank">
字节跳动官网
</a>

<img src="图片.png" alt="Metal movable type" width="400"/>

<audio  src="音频.m4a" controls></audio>

<video src="视频t.mp4" controls></video>

表单标签

输入

placeholder：占位符,提示用户输入内容的文本

<input placeholder="请输入用户名">

<input type="range">

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

<input type="date" min="2000-01-01">

<textarea>Hey</textarea>

多选框、单选框、列表选择

<p>
    <!-- checkbox多选框，用于多选多 -->
    <!-- checked默认选中 -->
    <label for=""><input type="checkbox">🍎</label>
    <label for=""><input type="checkbox" checked>🍏</label>
</p>
<p>
    <!-- radio单选框，用于多选一 -->
    <!-- name分组，相同的为同一组，一组只能有一个被选中 -->
    <label for=""><input type="radio" name="sport">⚽</label>
    <label for=""><input type="radio" name="sport">🏀</label>
</p>

<p>
    <select name="" id="">
        <option value="">🥑</option>
        <option value="">🥩</option>
        <option value="">🥓</option>
    </select>
</p>

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

块级引用

cite标签，转引用

强调标签strong（重要，紧急）、em（语气上的强调）

<blockquote cite="http://t.cn/RfjKO0F">
    <p>天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长的民众产生、长育出来的，所以没有 这种民众，就没有天才。</p>
  </blockquote>

<p>我最喜欢的一本书是<cite>小王子</cite>。</p>

<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>

<p><code>const</code>声明创建一个只读的常量。</p>

<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>

<p>在投资之前，<strong>一定要做风险评估</strong>。</p>

<p>Cats <em>are</em> cute animals.</p>

语义化是什么？

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

  • 开发者应该遵循语义来编写HTML

    • 有序列表用ol；无序列表用ul

    • lang属性表示内容所使用的语言

语义化的好处

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

HTML是传达内容而不是传达样式

如何做到语义化？

  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不适用可视化工具生成代码
avatar
文章
阅读
粉丝