《小白学前端》系列博客是根据腾讯课堂IMWeb前端小白训练营每天任务的内容加以整理而成。
任务一：W3SCHOOL---“HTML简介”到“HTML注释”+“HTML文档类型”
HTML简介
- HTML 是用来描述网页的一种语言(超文本标记语言)
疑问1：编程语言与标记语言的区别？
《知乎回答：编程语言 标记语言 脚本语言分别有哪些？ 区别是什么？》
标记语言不用于向计算机发出指令，常用于格式化和链接。 2、脚本语言介于标记语言和编程语言之间，脚本语言脚本语言不需要编译，可以直接用，由解释器来负责解释。 3、编译型语言写的程序执行之前，需要一个专门的编译过程，把程序编译成为机器语言的文件，比如exe文件，以后要运行的话就不用重新翻译了，直接使用编译的结果就行了（exe文件），因为翻译只做了一次，运行时不需要翻译，所以编译型语言的程序执行效率高。
-
HTML 标签通常是成对出现的
疑问2：不成对出现的标签有哪些？
有少部分标签不是成对的,我们称之为空标签或空元素.如<br />换行 <hr />水平线，它们在 > 前加入 (空格)/ 代表标签的结束.（HTML5<br> <hr>也是合理的）。 -
浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容
疑问3：浏览器解析HTML的原理是什么？
浏览器的渲染原理简介
常见HTML标签
- 标题
<h1>This is a heading</h1>
<h1> 定义最大的标题。<h6> 定义最小的标题。h1到h6逐渐变小。
- 段落
<p>This is a paragraph.</p>
- 链接：
<a href="http://www.w3school.com.cn">This is a link</a>
href 链接到的地址
- 图像
<img src="abc.com" width="50px" height="50px">
src图片的来源地址
width height图片的宽、高
常见HTML文档结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>An HTML Template</title>
</head>
<body>
<!-- 这里是网页内容 -->
</body>
</html>
- <!DOCTYPE html> 标签声明了该 HTML 文档的文档类型为 HTML5。只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。
- <html></html> 标签是 HTML 文档的最底层标签，包含了文档的所有内容。
- <head></head> 代表了 HTML 文档的“头部”，这里描述了浏览器需要的一些信息，也可以定义一些需要从外部引入的文件（如 .css .js 文件）。
- <title></title> 定义了网页的标题，该信息会显示在浏览器的标题栏（或浏览器标签）以及收藏夹中。
- <body></body> 定义了网页的内容，也就是我们可以从浏览器中看到的内容。
常见Style属性
- style 作用：提供了一种改变所有 HTML 元素的样式的通用方法。
- 将样式表加入到HTML中的几种方法
属性样例：
font-family:arial;
color:red;
font-size:20px;
text-align:center
HTML文本格式化
<b>This text is bold</b>
<b>This text is bold</b>
<i>This text is italic</i>
<i>This text is italic</i>
<pre>
这是
预格式文本。
它保留了 空格
和换行。
</pre>
<pre>
这是
预格式文本。
它保留了 空格
和换行。
</pre>
<code>Computer code</code>
<code>Computer code</code>
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>
一打有 <del>二十</del> <ins>十二</ins> 件。
一打有 <del>二十</del> <ins>十二</ins> 件。
其他
- HTML的大多数标签都可以嵌套使用。
- HTML 标签对大小写不敏感，推荐使用小写标签。
- HTML 属性值本身就含有双引号，必须使用单引号。如：name='Bill "HelloWorld" Gates'
- HTML 注释，提高其可读性``
任务二：软谋教育网站开发绝杀技---“HTML开篇”到“html常用标签使用（一）”
网站开发需要的知识
- 前端
HTML ------ 内容
CSS ------ 外观
js ------ 动作交互效果 - 后端
- 数据库
HTML标签
<p>段落标签</p>
<h1>大标题</h1>
<br> 换行标签
``
<b>粗体</b>
<i>斜体</i>
<u>下划线</u>
<u>下划线</u>
<s>删除线</s>
<s>删除线</s>
<del>删除线</del>
<del>删除线</del>
p<sup>上标签</sup>
p上标签
p<sub>下标签</sub>
p下标签
<ol type="a"> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> </ol>
<ol type="1">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<ul type="square"> <li>无序列表</li> <li>无序列表</li> <li>无序列表</li> <li>无序列表</li> </ul><ul type="square">
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<dl> <dt>Name</dt> <dd>Godzilla</dd> <dt>Born</dt> <dd>1952</dd> <dt>Birthplace</dt> <dd>Japan</dd> <dt>Color</dt> <dd>Green</dd> </dl>
<dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
</dl>
<body>HTML转义
<body>HTML转义
<abbr title="Internationalization">缩写说明</abbr>
<abbr title="Internationalization">缩写说明</abbr>
<p>Simple table with header</p>
<table>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
<p>Simple table with header</p>
<table>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
<p>Table with thead, tfoot, and tbody</p>
<table>
<thead>
<tr>
<th>Header content 1</th>
<th>Header content 2</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer content 1</td>
<td>Footer content 2</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Body content 1</td>
<td>Body content 2</td>
</tr>
</tbody>
</table>
<p>Table with thead, tfoot, and tbody</p>
<table>
<thead>
<tr>
<th>Header content 1</th>
<th>Header content 2</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer content 1</td>
<td>Footer content 2</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Body content 1</td>
<td>Body content 2</td>
</tr>
</tbody>
</table>
<p>Table with colgroup</p>
<table>
<colgroup span="4"></colgroup>
<tr>
<th>Countries</th>
<th>Capitals</th>
<th>Population</th>
<th>Language</th>
</tr>
<tr>
<td>USA</td>
<td>Washington D.C.</td>
<td>309 million</td>
<td>English</td>
</tr>
<tr>
<td>Sweden</td>
<td>Stockholm</td>
<td>9 million</td>
<td>Swedish</td>
</tr>
</table>
<p>Table with colgroup</p>
<table>
<colgroup span="4"></colgroup>
<tr>
<th>Countries</th>
<th>Capitals</th>
<th>Population</th>
<th>Language</th>
</tr>
<tr>
<td>USA</td>
<td>Washington D.C.</td>
<td>309 million</td>
<td>English</td>
</tr>
<tr>
<td>Sweden</td>
<td>Stockholm</td>
<td>9 million</td>
<td>Swedish</td>
</tr>
</table>
<p>Table with colgroup and col</p>
<table>
<colgroup>
<col style="background-color: #0f0">
<col span="2">
</colgroup>
<tr>
<th>Lime</th>
<th>Lemon</th>
<th>Orange</th>
</tr>
<tr>
<td>Green</td>
<td>Yellow</td>
<td>Orange</td>
</tr>
</table>
<p>Table with colgroup and col</p>
<table>
<colgroup>
<col style="background-color: #0f0">
<col span="2">
</colgroup>
<tr>
<th>Lime</th>
<th>Lemon</th>
<th>Orange</th>
</tr>
<tr>
<td>Green</td>
<td>Yellow</td>
<td>Orange</td>
</tr>
</table>
网友评论