前端与HTML

用户5930124872831
149 阅读4分钟

前端

  • 解决图形界面下的人机交互问题
  • 前端工程师是运用web技术栈解决多端图形用户界面交互问题的工程师

前端技术栈

  • JS(行为）如：页面的对于用户操作的响应
  • CSS（样式）位置，大小，颜色
  • html(内容)
  • 上面三个均运行在浏览器里，浏览器通过http协议和服务器进行通信，把前端的代码通过http协议从服务器拿到并渲染成我们看到的界面，也可把用户行为通过网络协议提交到服务器端

关注方面

  • 功能
  • 美观
  • 无障碍：是否对于所有人都可用
  • 安全
  • 性能：动画是否流畅等
  • 兼容性：在各种设备正常使用
  • 用户体验

HTML

代码示例

<!DOCTYPE html> <!--标记当前文件是什么HTML版本，浏览器根据这决定使用什么渲染-->
<html><!--根标签-->
     <head><!--页面需要的信息但不需要展示给用户：标题是什么，用了什么样的编码 -->
        <meta charset="UTF-8">
        <title>页面标题</title>
     </head>
     <body><!--呈现给用户-->
        <h1>一级标题</h1>
        <p>段落内容</p>
     </body>
</html>

浏览器拿到HTML后，会对其进行解析，解析成一个dom树

image.png

HTML语法

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

标题h1~h6

标题标签示例

<h1>字体排印学</h1>
<h2>历史</h2>
<p>活字的...</p>
<h3>印刷体源流</h3>
<p>中国在唐代就已经...</p>
<h2>应用</h2>
<p>...</p>

运行结果：

image.png

列表标签示例

<h2>霸王茶姬</h2>
<dl><!--定义列表-->
    <dt>导演</dt><!--描述列表里的标题-->
    <dd>陈凯歌</dd><!--具体的描述-->
    <dt>主演</dt>
    <dd>张国荣</dd>
    <dd>张丰毅</dd>
    <dd>巩俐</dd>
</dl>

运行结果：

image.png

链接

示例

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

<a href="http://www.bytedance.com/"
target="_blank">  <!--跳转新窗口打开-->
    字节跳动官网
</a>

运行结果：

image.png

多媒体

<!-- 图像元素 -->
<img
    src="https://example.com/image.jpg" <!-- 图像的URL -->
    alt="Metal movable type" <!-- 图像的替代文本 -->
    width="400" <!-- 图像的宽度为400像素 -->
/>

<!-- 音频元素 -->
<audio
    src="/assets/music.org" <!-- 音频文件的URL -->
    controls <!-- 添加播放控件,允许用户暂停和调整音量 -->
></audio>

<!-- 视频元素 -->
<video
    src="/assets/video.mp4" <!-- 视频文件的URL -->
    controls <!-- 添加播放控件 -->
></video>

输入

<!-- 输入框，用于输入用户名 -->
<input placeholder="请输入用户名">

<!-- 范围输入框，可以通过滑块选择数值 -->
<input type="range">

<!-- 数字输入框，限制输入范围为1到10 -->
<input type="number" min="1" max="10">

<!-- 日期输入框，限制选择日期从2018年1月1日开始 -->
<input type="date" min="2018-01-01">

<!-- 文本区域，初始内容为"Hey" -->
<textarea>Hey</textarea>
  • 输入框（<input>）：用于接受用户输入文本，placeholder属性是在输入框内显示的提示文本，提示用户应该输入什么。
  • 范围输入框（<input type="range">）：允许用户通过滑块选择一个值，可以用于调整音量、亮度等。
  • 数字输入框（<input type="number">）：用于接受数值输入，min和max属性限制了可以输入的最小值和最大值。
  • 日期输入框（<input type="date">）：允许用户选择日期，min属性限制可选的最早日期。
  • 文本区域（<textarea>）：用于多行文本输入，初始内容为"Hey"。
<p>
    <label><input type="checkbox"/>苹果</label><!--复选框选项-->
    <label><input type="checkbox"/>梨</label>
</p>

<p>
    <label><input type="radio" name="sport" />男</label><!--单选框选项-->
    <label><input type="radio" name="sport" />女</label>
</p>

<p>
    <select>
        <option>1</option> <!--下拉列表选项-->
        <option>2</option>
        <option>3</option>
    </select>
</p>

<input list="countries" /><!--输入框-->
<datalist id="countries"><!--数据列表-->
    <option>4</option><!--数据列表选项-->
    <option>5</option>
    <option>6</option>
</datalist>
  • 复选框组（<input type="checkbox">）：允许用户从多个选项中选择一个或多个选项。标签内的文本是复选框的标签，用户点击标签时，复选框会被选中或取消选中。
  • 单选框组（<input type="radio">）：允许用户从多个选项中选择一个选项。这些单选框都有相同的name属性，这样它们会成为同一组，用户只能选择其中一个。
  • 下拉选择框（<select>）：显示一个下拉列表供用户选择。列表中的每个<option>元素是一个可供选择的选项。
  • 输入框与数据列表（<input>和<datalist>）：<input>元素创建一个文本输入框，<datalist>元素定义了输入框的选项列表。用户可以输入文本或从列表中选择一个选项。

image.png

引用

<!-- 引用块，引用来自 http://t.cn/Rfjk08F 的内容 -->
<blockquote cite="http://t.cn/Rfjk08F">
    <p>学习前端进行中。</p>
</blockquote>

<!-- 段落，提到最喜欢的书是“小王子” -->
<p>我最喜欢的一本书是<city>小王子</city>。</p>

<!-- 段落，提到“第一章”和字符串的不可变性 -->
<p>在<city>第一章</city>,我们讲过<q>字符串是不可变量</q></p>
  • 引用块（<blockquote>）：用于引用其他来源的内容，cite属性指定引用的来源链接。
  • 段落（<p>）：用于表示一段文本。
  • 自定义元素（<city>）：这个元素并非HTML中的内置元素，可能是自定义的标签。（引用别人作品的名字或章节）
  • 内联引用（<q>）：用于表示引用的短语或句子（引用具体的内容）

其他类型

<!-- 代码块 -->
<pre>
    <code>
        const add = (a,b)=>a+b;
        const multiply = (a,b) =>a*b;
    </code>
</pre>

<!-- 段落，强调在投资之前要做风险评估 -->
<p>在投资之前，<strong>一定要做风险评估</strong>。</p>

<!-- 段落，斜体表示 Cats are cute animals. -->
<p>Cats <em>are</em> cute animals.</p>
  • 代码标记（<code>）：用于表示计算机代码。
  • 代码块（<pre>和<code>）：用于表示多行代码的块。
  • 强调（<strong>和<em>）：分别用于表示强调和斜体文本

图例

image.png

内容划分

image.png

语义化

  • HTML中的元素、属性及属性值都拥有某些含义
  • 开发者应遵循语义来编写HTML
    • 有序列表用ol；无序列表用ul
    • lang属性表示内容所使用的语言

如何做到语义化

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