目录
(一). 学习内容
- 正确使用 Markdown 完成博客的编写;
- HTML 重要标签讲解:P A IMG H1-H6 TABLE 等;
- 使用 Sublime 开发简单的网页。
(二). 课程关键字
关键字 | 英文 | 解释 |
---|---|---|
b标签 | <b> | 定义粗体字 |
br标签 | <br> | 定义简单的折行 |
table标签 | <table> | 定义表格 |
tbody标签 | <tbody> | 定义表格中的主体内容 |
td标签 | <td> | 定义表格中的单元 |
th标签 | <th> | 定义表格中的表头单元格 |
thead标签 | <thead> | 定义表格中的表头内容 |
tr标签 | <tr> | 定义表格中的行 |
合并单元格 | colspan | 合并列 |
合并单元格 | rowspan | 合并行 |
(三). 课程重点
- Markdown 的语法规范;
- 对于 HTML 语义化的理解;
- 对于标签、属性的理解;
- 理解 HTML 的嵌套结构;
- 熟练使用已学标签进行页面开发;
(四). 作业完成情况
1. 使用 Table 标签完成一个课程表的编写
代码展示
<html>
<head>
<meta charset="utf-8" />
<title>课程表</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2">课程表</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
</tr>
<tr>
<td rowspan="3">上午</td>
<td>1</td>
<td>数学</td>
<td>英语</td>
<td>体育</td>
<td>物理</td>
<td>音乐</td>
</tr>
<tr>
<td>2</td>
<td>物理</td>
<td>数学</td>
<td>体育</td>
<td>音乐</td>
<td>化学</td>
</tr>
<tr>
<td>3</td>
<td>美术</td>
<td>体育</td>
<td>生物</td>
<td>音乐</td>
<td>数学</td>
</tr>
<tr>
<td rowspan="3">下午</td>
<td>4</td>
<td>电脑</td>
<td rowspan="2">音乐</td>
<td>化学</td>
<td rowspan="2">体育</td>
<td>语文</td>
</tr>
<tr>
<td>5</td>
<td>土建</td>
<td>设计</td>
<td>UI</td>
</tr>
<tr>
<td>6</td>
<td>JAVA</td>
<td>NBA</td>
<td>CBA</td>
<td>足球</td>
<td>篮球</td>
</tr>
</table>
</body>
</html>
成果展示
课程表 | 一 | 二 | 三 | 四 | 五 | |
上午 | 1 | 数学 | 英语 | 体育 | 物理 | 音乐 |
2 | 物理 | 数学 | 体育 | 音乐 | 化学 | |
3 | 美术 | 体育 | 生物 | 音乐 | 数学 | |
下午 | 4 | 电脑 | 音乐 | 化学 | 体育 | 语文 |
5 | 土建 | 设计 | UI | |||
6 | JAVA | NBA | CBA | 足球 | 篮球 |
2. 回答问题
a. 什么是HTML的标签语义化?
“语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息,让网页能够被机器理解,最终让人类受益。
HTML 标签语义化是让大家直观的认识标签(markup)和属性(attribute)的用途和作用,很明显Hx系列看起来很像标题,因为拥有粗体和较大的字号。<strong>,<em>
用来区别于其他文字,起到了强调的作用。
语义化的网页的好处,最主要的就是对搜索引擎友好,有了良好的结构和语义,你的网页内容自然容易被搜索引擎抓取,你网站的推广便可以省下不少的功夫。
b. 什么是SEO优化,在HTML标签中如何体现?
SEO(Search Engine Optimization):汉译为搜索引擎优化。是一种方式:利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是:为网站提供生态式的自我营销解决方案,让其在行业内占据领先地位,获得品牌收益;SEO包含站外SEO和站内SEO两方面;为了从搜索引擎中获得更多的免费流量,从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划,还会使搜索引擎中显示的网站相关信息对用户来说更具有吸引力
一、内部优化
(1)META标签优化:例如:TITLE,KEYWORDS,DESCRIPTION等的优化
(2)内部链接的优化,包括相关性链接(Tag标签),锚文本链接,各导航链接,及图片链接
(3)网站内容更新:每天保持站内的更新(主要是文章的更新等)
二、外部优化
(1)外部链接类别:友情链接、博客、论坛、B2B、新闻、分类信息、贴吧、知道、百科、站群、相关信息网等尽量保持链接的多样性
(2)外链运营:每天添加一定数量的外部链接,使关键词排名稳定提升。
(3)外链选择:与一些和你网站相关性比较高,整体质量比较好的网站交换友情链接,巩固稳定关键词排名
c.什么是浏览器的兼容性问题?
浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中,做好浏览器兼容,才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计,浏览器对标准的更好兼容能够给用户更好的使用体验。
3. 使用W3School提供的字典,查阅A标签和IMG标签,描述这两个标签的解释,以及属性的定义内容,在Markdown中详细的描述出来;
(一) A标签
定义和用法:
<a>
标签定义超链接,用于从一张页面链接到另一张页面。
<a>
元素最重要的属性是 href 属性,它指示链接的目标。
在所有浏览器中,链接的默认外观是:
- 未被访问的链接带有下划线而且是蓝色的;
- 已被访问的链接带有下划线而且是紫色的;
- 活动链接带有下划线而且是红色的。
(二) IMG标签
定义和用法:
img 元素向网页中嵌入一幅图像。
请注意,从技术上讲,<img>
标签并不会在网页中插入图像,而是从网页上链接图像。<img>
标签创建的是被引用图像的占位空间。
<img>
标签有两个必需的属性:src 属性 和 alt 属性。
4.预习 HTML 列表、块、布局三个单元的内容。
已完成!