[ 前端与 HTML | 青训营笔记 ]

95 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天,我将分不同模块整理完成今天的笔记。

一、本堂课重点内容:

本课为我们介绍了前端的概念以及需要掌握的最主要的几个技术栈,并就其中的html语言为我们进行了详细介绍,为我们展示了HTML的常用语法与简单的示例,最后说明了一段html代码种的内容划分与语义化,强调了前端工作者需要考虑到用户的实际体验而编写代码。

二、详细知识点介绍:

  • 前端最基础的三个技术栈,也就是俗称的前端三件套,分别是js、css与html,通过编写前端页面后再通过网络协议与服务器端交互,便能够将页面展示给使用者,同时前端工作者还应当关注前端页面的美观、安全、兼容、功能、体验、性能、无障碍登等方面。 image.png 常用的浏览器与编辑器如下所示: image.png
  • HTML 指的是超文本标记语言: HyperText Markup Language,其中hypertext可以指图片、标题、链接、表格,markup language则表示标记语言,HTML 不是一种编程语言,而是一种标记语言。
  • 在HTML中,图像由<img>标签定义,其语法为<img src="*url*" alt="*some_text*">src 指 "source",源属性的值是图像的 URL 地址,
  • 标题(Heading)通过 <h1> - <h6> 标签进行定义。<h1> 定义最大的标题。 <h6> 定义最小的标题。
  • HTML 链接通过标签 <a>来定义,其语法为<a href="https://www.runoob.com">这是一个链接</a>
  • HTML 段落通过标签<p> 来定义,其语法为<p>这是一个段落。</p>
  • HTML文档对象模型如此下: image.png
  • 列表写法: 无序列表
<ul> 
<li>项目</li> 
<li>项目</li> 
</ul>

有序列表

<ol>
<li>第一项</li> 
<li>第二项</li>
</ol>

定义列表

<dl> 
<dt>项目 1</dt> 
<dd>描述项目 1</dd> 
<dt>项目 2</dt> 
<dd>描述项目 2</dd> 
</dl>

表格(Tables)

<table border="1"> 
<tr> <th>表格标题</th> 
<th>表格标题</th> </tr> 
<tr> <td>表格数据</td> 
<td>表格数据</td> 
</tr> 
</table>
  • html内容划分如下: image.png

三、实践练习例子:

自己尝试编写一个简单网页:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>

</body>
</html>

四、课后个人总结:

HTML难点在于

  • doctype作用:声明的作用为了告诉浏览器该文件的类型。 让浏览器解析器知道应该用哪个规范来解析文档
  • 父窗口与子窗口的框架交互

五、引用参考

引用参考了百度百科、菜鸟教程