I finally worked up the courage to properly start learning web front-end basics. I’d already picked up bits of HTML from running into it often, but I’d never really studied it in any systematic way.
Let’s see how long I can keep this up this time… no, forget that. Just keep going.
So here are a few notes from the process.
Jan 30
The basic structure of an HTML file
<table> <thead> <tr> <th>1 2 3 4 5 6 7 8 9 10 11 12 13</th>
<th><!DOCTYPE HTML> <html> <head> <!--head 的信息--> <title>...</title> <meta> <link> <style>...</style> <script>...</script> </head> <body> </body> </html></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Adding a mail link
<table> <thead> <tr> <th>1 2 3</th>
<th><a href="mailto:[email protected]?cc=抄送地址&bcc=密件抄送地址&subject=主题&body=内容" target=_blank> 点我发邮件！ </a></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Result:
点我发邮件！
Forms
Input fields
<table> <thead> <tr> <th>1 2 3 4 5 6</th>
<th><form> 文本输入框： <input type="text" name="typeText"> 密码输入框： <input type="password" name="password"> </form></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Result:
Writing HTML directly in a blog editor is surprisingly convenient. Markdown on one side, HTML on the other, and you can see the result right away. That part is genuinely satisfying.
Text area
<table> <thead> <tr> <th>1 2 3 4 5 6 7</th>
<th><form method="post" action="save.php"> 文本域： <!--cols行数，rows为列数--> <textarea cols="30" rows="3"> 留下些什么吧 </textarea> </form></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Result:
Feb 7
Selection controls
<table> <thead> <tr> <th>1 2 3 4 5 6 7 8 9 10 11</th>
<th><form method="post" action="save.php"> 单选框:<br /> <input type="radio" value="1" name="chooce" checked="checked">是 <input type="radio" value="0" name="chooce">否 </form> <form method="post" action="save.php"> 复选框:<br /> <input type="checkbox" value="1" name="yes" checked="checked">是 <input type="checkbox" value="0" name="no">否 </form></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Result:
This editor is honestly pretty awkward for writing code. But fine—if I can get used to the annoying tools, then using a good one later should feel easy enough. Or so I tell myself.
Mar 4
It had been quite a while since I last sat down to study, which probably means I’d already started slacking off. Not great. Time to continue, and keep going seriously this time.
Drop-down list
<table> <thead> <tr> <th>1 2 3 4 5 6</th>
<th><from name="iform"> <label>列表</label> <select> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Result:
列表 123