Programming Foundations with JS, HTML and CSS

HTML

Course Resources: https://www.dukelearntoprogram.com/

Programming Tool: https://codepen.io/your-work

有别的不会的查这个: https://www.w3school.com.cn/h.asp

注意: 编写特殊符号, &lt ; 代表<, &gt ;代表>

<b> </b> bold text 大写

<p> </p< paragraph 段落

<em> </em> emphasize text 强调, 也就是斜体

<img src=”path of image” width = “75%” /> image 直接显示

<a href=”http://www.linkofwebsite/”> some text </a> 指向网址的超链接 和可点击的文字

常见html character entities 查这里: https://www.w3schools.com/html/html_entities.asp

ul→unorder list 无序列表
ol→order list 有序列表, 列表自动标号

1
2
3
4
5
<ul>
<li> content1 </li> 
<li> content2 </li>
<li> content3 </li>               
</ul>

• content1
• content2
• content3

表格 table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table>

<tr>     
<th> header1 </th> 
<th> header2 </th>  
<th> header3 </th>  
</tr>          

<tr>      
<td> data1 </td>        
<td> data2 </td>         
<td> data3 </td>             
</tr> 

</table>   

CSS

Syntax , Style and ID

1
2
3
4
.h1{ 
      text-align: center;
      color : blue;
}

上面这个例子会把html中所有h1标题全都居中变蓝，如果想通过CSS修改一类标题或者格式，需要先对class进行声明，比如：

1
<li class = "foodLi"> Food List </li>                     Note：声明的class名字不能有括号空格

1
.foodLi { color : green}

如果想通过CSS修改某个标题或者格式，需要使用CSS id，比如：

1
<img src = "cake.jpg" id = "cakeimg" />

1
#cakeimg {float: right}                                    Note：id 选择器以#开头

Color

颜色选择器：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool.

选择完颜色之后直接使用颜色代码调整文本颜色：

1
.foodLi {color: #3f3fbf}                                   %%% 此处对应rbg(63, 63, 191)

JavaScript

• Previous
  Brick Pattern Classification (ResNet50)
• Next
  HTML5总结「1」

「游客及非Github用户留言」：