前端学习日记(1) - HTML 初入门

是的！我胡汉三又回来了，目前的职业是产品经理，但是由于自己比较喜欢编程，也想更加顺畅的与程序员沟通，也希望可以自己创造出一些有趣的内容，于是我开始学习起了前端！我会尽量保持一周最少一更的频率，同步学习进度！为了巩固学习内容，锻炼我写HTML的能力，博客园的内容我计划均以文本框内容编写！

1. 什么是 HTML

HTML在我的理解中被用于构建文本展示形式，即用户在打开一个页面布局时所看见的内容板块分类，就是HTML的作用。比如我现在将我的文章分为一二三不同的模块，或者是我要搭建表格，构建表单，与布局相关的内容均与HTML相关。

HTML通过 ELEMENT (点击可了解现有的所有ELEMENT)实现布局的调整。

而前端三件套中的另外两个，CSS用于调整样式，比如HTML中段与段之间的间距，字体的颜色、样式、大小等；JAVAScript 用于编写用户的HMTL之间的逻辑，以及与后端之间的逻辑。

2. ELEMENT 分类

Inline element

在段落内出现，不会在前后产生空白或者换行。比如 <a>,<img>等。

Block-level element

用于生成不同的区块，会在先后禅城空白或者换行。比如 <div>,<p>等。

3.目前我已经知道的ELEMENT

有序列表

<ol> 结合<li>

1. List item 1
2. List item 2
3. List item 3
4. List item 4
5. List item 5

   <ol>
       <li> List item 1</li>
       <li> List item 2</li>
       <li> List item 3</li>
       <li> List item 4</li>
       <li> List item 5s</li>
   </ol>

无序列表

<ul> 结合<li>

• List item 1
• List item 2
• List item 3
• List item 4
• List item 5

  <ul>
      <li> List item 1</li>
      <li> List item 2</li>
      <li> List item 3</li>
      <li> List item 4</li>
      <li> List item 5s</li>
  </ul>

表格

使用<table>声明表格段落，表格分为head与body两部分，其中:
head 部分使用：<thead> 声明该部分为head,　<tr> 为新建一行, <th>为新建单元格，给column命名（可以有多个表头，也可以不要表头）
body 部分使用：<tbody> 声明该部分为body, <tr> 同样为新建一行, <td>为新建单元格，依次填写每个 column 的数据

First name	Last name	Age
Meng	Wang	26

<table>
    <thead>
        <tr>
        <th>First name</th>
        <th>Last name</th>
        <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td>Meng</td>
        <td>Wang</td>
        <td>26</td>
        </tr>
    </tbody>
</table>

填写表单

使用<form>声明表单段落，类似于<table>声明表格段落

First name

Last name

Age

Email

<form>
    <div>
        <lable>First name</lable>
        <input type="text" placeholder = "Input your first name">
    </div>
    <div>
        <lable>Last name</lable>
        <input type="text" placeholder = "Input your Last name">
    </div>
    <div>
        <lable>Age</lable>
        <input type="number" placeholder = "Input your age">
    </div>
    <div>
        <lable>Email</lable>
        <input type="email" placeholder = "Input your email">
    </div>
</form>

提交按钮

<button>

This is a submit button

<p><button>This is a submit button</button></p>

插图

<img src="", alt = "">

<img src="https://images.unsplash.com/photo-1719937206491-ed673f64be1f?q=80&amp;w=1374&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="img" style="width: 100vw;" /></p>

缩写

<abbr>

我在此进行缩写

<p>我在此进行<abbr title="这是一个缩写">缩写</abbr></p>

引用

<cite>

我在此进行引用

<p>我在此进行<cite>引用</cite></p>

水平线

<hr>

---

4.结束语

经历千辛万苦，终于使用文本编辑方式写完了，后期会随时同步相关学习进度！