小白学前端Day1

来源：互联网发布：怎样加入网络直销编辑：程序博客网时间：2024/06/05 09:37

《小白学前端》系列博客是根据腾讯课堂IMWeb前端小白训练营每天任务的内容加以整理而成。

任务一：W3SCHOOL—“HTML简介”到“HTML注释”+“HTML文档类型”

HTML简介

HTML 是用来描述网页的一种语言(超文本标记语言)
疑问1：编程语言与标记语言的区别？
《知乎回答：编程语言标记语言脚本语言分别有哪些？区别是什么？》
标记语言不用于向计算机发出指令，常用于格式化和链接。 2、脚本语言介于标记语言和编程语言之间，脚本语言脚本语言不需要编译，可以直接用，由解释器来负责解释。 3、编译型语言写的程序执行之前，需要一个专门的编译过程，把程序编译成为机器语言的文件，比如exe文件，以后要运行的话就不用重新翻译了，直接使用编译的结果就行了（exe文件），因为翻译只做了一次，运行时不需要翻译，所以编译型语言的程序执行效率高。
HTML 标签通常是成对出现的
疑问2：不成对出现的标签有哪些？
有少部分标签不是成对的,我们称之为空标签或空元素.如 <br />换行 <hr />水平线 ，它们在 > 前加入 (空格)/ 代表标签的结束.（HTML5 <br> <hr> 也是合理的）。
浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容
疑问3：浏览器解析HTML的原理是什么？
详见：CoolShell 浏览器的渲染原理简介

常见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="w3school.jpg" width="104" height="142" />

src图片的来源地址
width height图片的宽、高

常见HTML文档结构

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>An HTML Template</title> </head> <body> <!-- 这里是网页内容 --> </body></html>

标签声明了该 HTML 文档的文档类型为 HTML5。只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。
标签是 HTML 文档的最底层标签，包含了文档的所有内容。
代表了 HTML 文档的“头部”，这里描述了浏览器需要的一些信息，也可以定义一些需要从外部引入的文件（如 .css .js 文件）。
定义了网页的标题，该信息会显示在浏览器的标题栏（或浏览器标签）以及收藏夹中。
定义了网页的内容，也就是我们可以从浏览器中看到的内容。

常见Style属性

style 作用：提供了一种改变所有 HTML 元素的样式的通用方法。
将样式表加入到HTML中的几种方法

属性样例：

font-family:arial;color:red;font-size:20px;text-align:center

HTML文本格式化

<b>This text is bold</b>

This text is bold

<i>This text is italic</i>

This text is italic

<pre>这是预格式文本。它保留了      空格和换行。</pre>

这是预格式文本。它保留了      空格和换行。

<code>Computer code</code>

Computer code

<blockquote>这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。</blockquote>

这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。

一打有 <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>
下划线

<s>删除线</s>
~~删除线~~

<del>删除线</del>
~~删除线~~

p<sup>上标签</sup>
p^上标签

p<sub>下标签</sub>
p_下标签

<ol type="a"> 
    <li>有序列表</li> 
    <li>有序列表</li> 
    <li>有序列表</li> 
    <li>有序列表</li> 
</ol>

有序列表
有序列表
有序列表
有序列表

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

Name: Godzilla
Born: 1952
Birthplace: Japan
Color: Green

<body>HTML转义
<body>HTML转义

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

Simple table with header

First name Last name John Doe Jane Doe

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

Table with thead, tfoot, and tbody

Header content 1 Header content 2 Footer content 1 Footer content 2 Body content 1 Body content 2

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

Table with colgroup

Countries Capitals Population Language USA Washington D.C. 309 million English Sweden Stockholm 9 million Swedish

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

Table with colgroup and col

Lime Lemon Orange Green Yellow Orange

<p>Simple table with caption</p><table>  <caption>Awesome caption</caption>  <tr>    <td>Awesome data</td>  </tr></table>

Simple table with caption

Awesome caption Awesome data

0 0