CS571

---

对于网页而言，最主要的语言就是HTML，css和JavaScript了。
如果说HTML是骨骼，那么css就是皮囊，而js是灵魂，是你和网页交互的窗口。
网页如果缺少了HTML将不能称之为网页，缺少了css会变得丑陋，缺少了js则不能与之交互。
而作为一门通俗，易学，简单的超文本语言:

HTML

也是网页最重要的语言，毫无疑问我们从HTML开始学习

• 关于前端开发有两个网站可以作为很棒的学习资料:

• MDN

• W3 Schools

• 目录

• Web-Dev-Basis

  • HTML
    • part-one
  • CSS
    • part-one

---

Web-Dev-Basis-1

HTML

html-part-one

• img

<img src="example.com" width="  " height=" " alt=" ">

img语段，src表示链接，可以是网址，也可以是本地文件，width是宽度，height是长度，alt是图片的文字描述

• h

<h1> this is a header</h1>

标题段，最多只有h6,和md的#类似

• sub

<sub>this is a sub header</sub>

子标题，字面意义

• p

<p>this is a paragraph</p>
<p align="center">this is a center words</p>//文本居中

定义一个段落，将文本分离成独立的段落

• table

<table id="ingredients">//定义一个表格
    <caption>表的标题</caption>
    <thead>//表格的头部
        <tr>//表格中的一行
            <th>Amount</th>//表头单元格 ，一般会加粗居中
            <th>Unit</th>
            <th>Item</th>
        </tr>
    </thead>//头部结束
    <tbody>//表格主体
        <tr class="important-ingredient">//class类，为元素定义一个类名，类名可以为元素设置特定的样式，或者通过JavaScript对这些元素进行操作
        <td>1</td>//td是表格中的单元格
        <td>lb</td>
        <td>ground beef</td>
        </tr>
    </tbody>
    <tfoot>//表脚
        <tr>
            <td colspan="3">this is a tfoot</td>
        </tr>
    </tfoot>
</table>

下面是参考效果：

表的标题

Amount	Unit	Item
1	lb	ground beef
this is a tfoot

---

• ol

<ol>//有序列表
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

参考效果：

1. 第一项
2. 第二项
3. 第三项

---

• label

<label for="username">Username:</label>
<input type="text" id="username" name="username">

参考效果：
Username:

---

• select

<label>Number of Servings</label>
<select onchange="updateYield()" id="serving-selector">
	<option>1</option>
	<option>2</option>
	<option>3</option>
</select>

这是参考效果：
Number of Servings

1
2
3

---

• button

<button onclick="displayReview()">Display Review</button>
displayReview()函数是js的接口，详细实现会在js中

reference effect:
Display Review

---

CSS

css-part-one

css有三种使用方法
分别是内联，内部样式和外部样式

Design-Thinking