Udemy Web Design for Beginners Real World Coding in HTML & CSS（视频教程学习笔记）

HTML = Content

CSS = Style

HTML elements can be nested like russian stacking dolls.

Include audio files in a webpage:

<audio controls>
    <source src="audio/sanmateo01.mp3" type="audio/mpeg">
</audio>

在网页中加入优酷视频:

<iframe height=498 width=510 
src='http://player.youku.com/embed/XNDAzNDQ0MTIzNg==' 
frameborder=0 'allowfullscreen'>
</iframe>

Add a video clip to a webpage:

<video controls>
    <source src="video/welcome.mp4" type="video/mp4">
</video>

Include a map in a webpage:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
        src="https://www.openstreetmap.org/export/embed.html?bbox=120.23231506347658%2C31.125260367018715%2C120.75828552246095%2C31.478452047933082&amp;layer=mapnik" 
        style="border: 1px solid black">
</iframe>
<br/>
<small><a href="https://www.openstreetmap.org/#map=11/31.3020/120.4953">Ver mapa más grande</a></small>

Add a calender table in a webpage:

<table width="589" border="0" cellpadding="0" cellspacing="1" bgcolor="#CAA682">
    <thead>
          <tr bgcolor="#FFFFFF">
          <th width="83" bgcolor="#F7EEE6" >星期日</th>
          <th width="83" >星期一</th>
          <th width="83" >星期二</th>
          <th width="83" >星期三</th>
          <th width="83" >星期四</th>
          <th width="83" >星期五</th>
          <th width="83" bgcolor="#F7EEE6" >星期六</th>
        </tr>
    
    </thead>
    
    <tbody>
        


        <tr bgcolor="#FFFFFF">
        <td width="83" bgcolor="#F7EEE6" >&nbsp;</td>
        <td width="83" bgcolor="#FFFFFF" >&nbsp;</td>
        <td width="83" bgcolor="#FFFFFF" >&nbsp;</td>
        <td width="83" bgcolor="#FFFFFF" >&nbsp;</td>
        <td width="83" bgcolor="#FFFFFF" >&nbsp;</td>
        <td width="83" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#FFFFFF'" bgcolor="#FFFFFF">1</td>
        <td width="83" bgcolor="#F7EEE6" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#F7EEE6'">2</td>
        </tr>

        <tr bgcolor="#FFFFFF">
        <td bgcolor="#F7EEE6" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#F7EEE6'">3</td>
        <td width="83" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#FFFFFF'">4</td>
        <td width="83" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#FFFFFF'">5</td>
        <td width="83" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#FFFFFF'">6</td>
        <td width="83" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#FFFFFF'">7</td>
        <td width="83" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#FFFFFF'">8</td>
        <td width="83" bgcolor="#F7EEE6" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#F7EEE6'">9</td>
        </tr>

        <tr bgcolor="#FFFFFF">
        <td bgcolor="#F7EEE6" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#F7EEE6'">10</td>
        <td width="83" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#FFFFFF'">11</td>
        <td width="83" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#FFFFFF'">12</td>
        <td width="83" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#FFFFFF'">13</td>
        <td width="83" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#FFFFFF'">14</td>
        <td width="83" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#FFFFFF'">15</td>
        <td width="83" bgcolor="#F7EEE6" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#F7EEE6'">16</td>
        </tr>

        <tr bgcolor="#FFFFFF">
        <td bgcolor="#F7EEE6" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#F7EEE6'">17</td>
        <td width="83" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#FFFFFF'">18</td>
        <td width="83" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#FFFFFF'">19</td>
        <td width="83" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#FFFFFF'">20</td>
        <td width="83" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#FFFFFF'">21</td>
        <td width="83" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#FFFFFF'">22</td>
        <td width="83" bgcolor="#F7EEE6" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#F7EEE6'">23</td>
        </tr>

        <tr bgcolor="#FFFFFF">
        <td bgcolor="#F7EEE6" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#F7EEE6'">24</td>
        <td width="83" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#FFFFFF'" bgcolor="#FFFFFF">25</td>
        <td width="83" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#FFFFFF'" bgcolor="#FFFFFF">26</td>    
        <td width="83" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#FFFFFF'" bgcolor="#FFFFFF">27</td>    
        <td width="83" onmouseover="this.bgColor='#FFCC00'" onmouseout="this.bgColor='#FFFFFF'" bgcolor="#FFFFFF">28</td>
        <td width="83" bgcolor="#FFFFFF" class="tb3">&nbsp;</td>
        <td width="83" bgcolor="#F7EEE6" class="tb1">&nbsp;</td>
        </tr>
        
        
    <tfoot>
        <tr> 
            <td colspan="7">This is where tfoot elements sits.</td>
        </tr>
    </tfoot>
        
        
        
    </tbody>
    
</table>

Create a description list:

<dl>
    
  <dt><strong>Casa</strong></dt>
  <dd>
      名词
  </dd>
  <dd>
      1.房子
  </dd>
  <dd>
      2.家
  </dd>
    
  <!-- Other terms and descriptions -->
    
</dl>

<header> and <footer> elements can be put inside <article> element.

<nav> element is usually used for putting a list of important links together.

<div> is a block-level non-semantic element, a generic container; <span> is an inline non-semantic element.

 

<!-- Add comments in HTML documents like this one. -->

Create a form:

        <form>
            <label for="firstName">First Name:</label>
            <input id="firstName" type="text" name="firstName">
            
            <label for="lastName">Last Name:</label>
            <input id="lastName" type="text" name="lastName">
            
            <label for="email">Email:</label>
            <input id="email" type="email" name="email">    
 
            <label for="telephone">Telephone:</label>
            <input id="telephone" type="tel" name="telephone">  
            
            <label for="yourMessage">Your Message:</label>
            <textarea id="yourMessage"></textarea>
            <input type="submit" value="提交">
        </form>
        

Let users choose a few predetermined options:

<label for="favoriteColor">What is your favorite color?</label>
<select id="favoriteColor" name="favoriteColor">
    <option value="colorRed">红色</option>
    <option value="colorOrange">橙色</option>
    <option value="colorYellow">黄色</option>
</select>

<fieldset>
    <legend>What is your favorite meal?</legend>
    <input type="radio" id="breakfast" name="favoriteMeal"  value="meal1"><label for="breakfast">Breakfast</label>
    <input type="radio" id="brunch" name="favoriteMeal" value="meal2"><label for="brunch">Brunch</label>        
    <input type="radio" id="lunch" name="favoriteMeal" value="meal3"><label for="lunch">Lunch</label>
</fieldset>

<fieldset>
    <legend>What meals do you enjoy? (check all that apply)?</legend>
    <input type="checkbox" id="breakfast" name="favoriteMeal"  value="meal1"><label for="breakfast">Breakfast</label>
    <input type="checkbox" id="brunch" name="favoriteMeal" value="meal2"><label for="brunch">Brunch</label>        
    <input type="checkbox" id="lunch" name="favoriteMeal" value="meal3"><label for="lunch">Lunch</label>
</fieldset>

Self-clearing float:

.group:before,
.group:after {
    content: "";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1;
}

 

CSS shorthands:

/*
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 20px;
    padding-bottom: 20px;
*/

/*  padding: 20px 40px 20px 40px;*/


/*以上两种写法等同于下面的写法*/
    padding: 20px 40px;

Parent elements are only aware of child elements that are not floated.

 

<a> element by default is inline element.

 

Elements positioned absolute will find the closest parent elements that are positioned relative and regard this parent element as its base its position.

 

By default, <img> is inline element.

 

Elements that use position:relative has itself as its reference.

 

For elements that are all using position: relative or position: absolute, the element that come later in the HTML will be shown on top. This default rule can be overwith z-index, elements will higher z-index will be shown on top.