前端与 HTML | 青训营笔记

一定好好学习
85 阅读5分钟

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

一、什么是前端？

前端开发是指网页前端开发，是指利用HTML、CSS、JavaScript等Web技术，对网站进行开发和维护的工作。

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

*对于前端来说，技术的更新是日新月异的，我们需要不断学习才能跟上时代的变化。

二、什么是HTML?

HTML是HyperText Markup Language的缩写，即超文本标记语言，是一种用来构建网页的标准语言。它是一种基于标记标签的语言，用于定义网页的内容和结构。

*HTML是一种标记语言，用来描述网页的结构和内容。比如文本、图像和链接等。

三、HTML的语法

HTML语法由一系列标记组成，这些标记被称为元素，每个元素都有一个开始标记和一个结束标记。元素之间可以有层次关系，嵌套，比如<p>元素可以嵌套在<div>元素里面。而大多数HTML元素都有属性，属性是用来定义元素的额外信息，比如<img>元素的src属性用来指定图片的路径。当然HTML还有一些特殊的元素，比如<script>元素用来添加客户端脚本，<style>元素用来定义文档的样式。

*HTML语法是指HTML文档的结构和内容的书写规则，我们需要正确的遵守和使用它。

四、HTML的主体结构

HTML（HyperText Markup Language）是一种标记语言，用于在网页上显示静态内容。它的语法由一系列的标签和属性组成，标签用于定义文档的结构，属性用于提供有关元素的附加信息。

如下代码案例中其中doctype是告诉浏览器，当前当前的文本是HTML5。html标签 是HTML的开头和结尾标签，head是HTML的头部标签，里面可以写标题以及编码等，body则是HTML的主体内容。

代码实操：

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

实操结果：

image.png

1. <!DOCTYPE>声明：定义文档类型
2. <html>标签：定义 HTML 文档
4. <head>标签：定义文档的头部，包含文档的标题、元数据等
5. <title>标签：定义文档的标题
6. <body>标签：定义文档的主体，包含所有的可见内容

五、HTML的常用标签。

1.标题标签

代码结果：

<h1>前端与HTML</h1>
<h2>前端</h2>
<p>前端开发是指网页前端开发，是指利用HTML、CSS、JavaScript等Web技术，对网站进行开发和维护的工作。</p>
<h3>HTML</h3>
<p>HTML是HyperText Markup Language的缩写，即超文本标记语言，是一种用来构建网页的标准语言。</p>
<h2>结束</h2>
<p>...</p>

实操结果：

image.png

2.列表标签

代码结果：

<h2>有序列表</h2>
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

<h2>无序列表</h2>
<ul>
    <li>3</li>
    <li>2</li>
    <li>1</li>
</ul>

<h2>定义列表</h2>
<dl>
    <dt>1</dt>
    <dd>2</dd>
    <dt>1</dt>
    <dd>2</dd>
</dl>

实操结果：

image.png

3.链接标签

代码结果：

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

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

实操结果：

字节跳动官网 （注：此链接直接替换当前页面）

字节跳动官网 （注：此链接会创建一个新页面）

4.多媒体标签

代码结果：

<img
    src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg"
    alt-"Metal movable type"
    width="400"
/>

<audio
    src="/assets/music.ogg"
    controls
></audio>

<video
    src="/assets/video.mp4"
    controls
></video>

实操结果：

image.png

5.输入标签

代码结果：

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

<p>
    <select>
        <coption>🍕</option>
        <coption>🍔</opt1on>
        <coption>🍟</option>
    </select>
</p>

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

实操结果： image.png

总结案例

代码结果：

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

实操结果：

image.png

*通过以上案例可以理解HTML常用标签的使用，他们有很多属性，我们只有掌握这些内容才能再深入的学习。

六、代码的语义化

1.语义化是什么

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

2.谁在使用我们写的HTML

  • 开发者 - 修改、维护页面
  • 浏览器 - 展示页面
  • 搜索引擎 - 提取关键词、排序
  • 屏幕阅读器 - 给盲人读页面内容

3.传达内容，而不是样式

  • <p style="font-size:32px">端工程师的自我修养</p>
  • <h1>前端工程师的自我修养</h1>

4.如何做到语义化

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

*我们需要在编写代码中做到语义化，要多实践，多打代码。

OVER

总的来说前端技术栈是由HTML、CSS、JavaScript等技术组成的，它们共同构成了前端开发的基础。前端开发的任务是解决用户界面的展示问题，而HTML是前端开发的基础，要想做好前端开发，就必须掌握 HTML 的基本语法和基本功能，同时要做到 HTML 语义化，而HTML 语义化是指在 HTML 代码中，使用有意义的标签来描述内容，使网页更容易被搜索引擎抓取、被视障人士阅读、被爬虫爬取、被浏览器解析等，从而提高网页的可用性。才能更好地改善用户体验，提高网站的转化率。此次课程教学简单，不过更多还是需要个人去实操才能深刻记忆。

avatar
文章
阅读
粉丝