这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天,我将分不同模块整理完成今天的笔记。
一、本堂课重点内容:
本课为我们介绍了前端的概念以及需要掌握的最主要的几个技术栈,并就其中的html语言为我们进行了详细介绍,为我们展示了HTML的常用语法与简单的示例,最后说明了一段html代码种的内容划分与语义化,强调了前端工作者需要考虑到用户的实际体验而编写代码。
二、详细知识点介绍:
- 前端最基础的三个技术栈,也就是俗称的前端三件套,分别是js、css与html,通过编写前端页面后再通过网络协议与服务器端交互,便能够将页面展示给使用者,同时前端工作者还应当关注前端页面的美观、安全、兼容、功能、体验、性能、无障碍登等方面。
常用的浏览器与编辑器如下所示:
- 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文档对象模型如此下:
- 列表写法: 无序列表
<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内容划分如下:
三、实践练习例子:
自己尝试编写一个简单网页:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
四、课后个人总结:
HTML难点在于
- doctype作用:声明的作用为了告诉浏览器该文件的类型。 让浏览器解析器知道应该用哪个规范来解析文档
- 父窗口与子窗口的框架交互
五、引用参考
引用参考了百度百科、菜鸟教程