快速入门 HTML 语言 | Story Begins……

一个网页包括 HTML、CSS、JavaScript。

HTML：定义网页的结构和信息
CSS：定义网页的样式
JavaScript：定义用户和网页的交互逻辑

HTML 是什么

        HTML
        
      
<!DOCTYPE HTML> //告知浏览器这是一个 HTML 
<html>
    xxx //往里面填内容
</html>

HTML 常用标签

标题

        HTML
        
      
<h1>这是一个一级标题</h1>
<h2>这是一个二级标题</h2>
<h3>这是一个三级标题</h3>
<h4>这是一个四级标题</h4>
<h5>这是一个五级标题</h5>
<h6>这是一个六级标题</h6>

文本段落

        HTML
        
      
<p>给岁月以文明</p>
<p>而不是给文明以岁月</p>

---

换行的方式：
1.给多个<p>xxx</p>标签
2.在换行处加入<br>标签。

---

文本操作：
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>

图片、链接

        HTML
        
      
<img src="xxx" width="500px" height="500px">

<a href="xxx" target="_self">xxx</a>
//前面 xxx 是地址，后面 xxx 是你想要它显示的名字
//属性（可填可不填）target="_self"：表示在当前页面打开;target="_blank"：表示在新页面打开

容器

        HTML
        
      
<div>
    <a href="xxx">div元素下的链接1</a>
    <a href="xxx">div元素下的链接2</a>
</div>

---

<span>
    <a href="xxx">span元素下的链接1</a>
    <a href="xxx">span元素下的链接2</a>
</span>

---
行内
<a href="xxx">我是<div style="background-color:red;">一个</div>红色<div style="background-color:red;">链接</div></a>
<a href="xxx">我是<span style="background-color:red;">一个</span>红色<span style="background-color:red;">链接</span></a>

把标签放到容器里，这样做的一个好处是，如果想要全部应用 CSS 样式，可以直接在容器上添加。

两者的区别是 div 是块级元素，独占一行，span 是内联元素，一行可以有多个元素。

有序 / 无序列表

        HTML
        
      
<ol>
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
</ol>
---
<ul>
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
</ul>
---
//ol=ordered list
//ul=unordered list
//li=list

表格

        HTML
        
      
<table> //表格
    <thead> //表头
        <tr> //定义表格行
            <td>表头1</td> //定义单元格数据
            <td>表头2</td>
        </tr>
    </thead>
    <tbody> //表主体
        <tr>
            <td>111</td>
            <td>333</td>
        </tr>
        <tr>
            <td>222</td>
            <td>444</td>
        </tr>
    </tbody>
</table>
---
//属性：可以给表格加边框
<table border="2">
    xxx
</table>

class 属性

帮助分组。如

        HTML
        
      
class="content"
class="review"