web学习，html缺漏知识点

学习站点：免费HTML5在线教程 - 踏得网

缺漏知识点：

1、<a href="contact.html">联系我们</a>.

你可以定义3种类型的目标：

• 锚点（anchor），用来在网页内部跳转。
• 相对 URL，用来在网站内部跳转。
• 绝对 URL，通常用来在不同网站页面之间进行跳转。

锚点（Anchor） 用来跳转到同一页面的不同位置。通过在href属性中添加 # 符号，你可以定位到具有特定 id 属性的HTML元素所在位置。

比如，<a href="#footer"> 可以导航到同一HTML页面中的 <div id="footer"> 元素。

2、<abbr> 元素：

你可以为缩写添加一个标题 title 属性，来提示这个缩写的含义，鼠标悬停时会显示出来：

<p> 我刚买了一个 <abbr title="Compact Disc">CD</abbr>. </p>

3、图片 使用 <img> 元素，这是一个自关闭（self-closing） 内联元素（只有一个开始标签）。

<img src="//wow.techbrood.com/assets/landing.jpg" width="700" height="375">

4、表格列跨度（colspan）和 行跨度（rowspan）

5、占位符（Placeholders）

<input type="text" placeholder="请输入昵称">

6、复选框 是选择型控件，拥有两个状态：选中（checked）和未选中（unchecked）。一般用来接受用户回答“是”或“否”。

由于选择框很小，点击选中不方便，因此，比较好的实践是在该元素外面包裹一个 <label> ：

<label> <input type="checkbox"> 同意用户协议 </label>

除了上面的方法，也可以使用label的 <for> 属性来和input配对：

<input id="terms" type="checkbox">

<label for="terms">同意用户协议</label>

7、单选框，也可包裹一个 <label>方便选中

<label>婚姻状态</label>

<label> <input type="radio" name="status"> 单身 </label>

<label> <input type="radio" name="status"> 已婚 </label>

<label> <input type="radio" name="status"> 离异 </label>

8、下拉菜单（Dropdown menus）

<select>

<option>January</option>

<option>February</option> 

</select>

上面的列表你只能选择一个选项，要想选择多个选项，可以通过设置 multiple 属性：

<label>浏览器兼容性：</label>

<select multiple>

<option>Google Chrome</option>

<option>Internet Explorer</option>

<option>Mozilla Firefox</option>

<option>Opera</option>

<option>Safari</option>

</select>

我们还可以使用<optgroup>给下拉列表框中的选项进行分组，这样就能形成类似树形的分级选择控件。

        <label for="job">Job role:</label>
        <select id="job" name="user_job">

            <optgroup label="Web">
                <option value="frontend_developer">Front-End Developer</option>
                <option value="php_developer">PHP Developer</option>
                <option value="python_developer">Python Developer</option>
                <option value="rails_developer">Rails Developer</option>
                <option value="web_designer">Web Designer</option>
                <option value="wordpress developer">Wordpress Developer</option>
            </optgroup>

            <optgroup label="Mobile">
                <option value="android_developer">Android Developer</option>
                <option value="ios_developer">iOS Developer</option>
                <option value="mobile_designer">Mobile Designer</option>
            </optgroup>

            <optgroup label="Business">
                <option value="business_owner">Business Owner</option>
                <option value="freelancer">Freelancer</option>
            </optgroup>
        </select>