HTML5基本元素的使用。

HTML5基本元素的使用。

HTML5：

• 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）

HTML 编辑器推荐:

Notepad++：https://notepad-plus-plus.org/
Sublime Text：http://www.sublimetext.com/
HBuilder：http://www.dcloud.io/
WebStorm：https://www.jetbrains.com/webstorm/

个人推荐使用：WebStorm

• 有很强的代码提示功能跟调试功能

---

HTML是由众多标签组成的，所以掌握了标签你就掌握了网页开发的的基础

• 接下来只演示常用的一些标签，目的是为了能让初学者快速制作一个网页

<!--    -->     注释
<title>         标题
<a href=””>     网页连接
<from>          from表单

<input>标签


帐号：  <input type="text" name="username" id="username">
密码：  <input type="password" name="password" dir="password">

type:指定一个类型

---

HTML 标题（Heading）是通过<h1 > - <h6> 标签来定义的.


<h1>this is my page</h1>
<h2>this is my page</h2>
<h3>this is my page</h3>
<h4>this is my page</h4>
<h5>this is my page</h5>
<h6>this is my page</h6>

---

<br>        换行
<p>         换段
<b>         加粗


<div>   盒子

实例：文档中的一个区域将显示为蓝色：

    <div style="color:#0000FF"> 
        <h3>这是一个在 div 元素中的标题。</h3>
        <p>这是一个在 div 元素中的文本。</p> 
    </div>

---

多行文本框

<textarer cols="" rows=""> 

cols : 列
rows:  行

---

锚：

• 设置锚：

<a name="mao1">

• 链接锚：

<a href="#mao1">第一个锚</a><br>

---

图像链接

<img src="图片url或者觉得路径" alt=""> 

• 通过获取网络图片的方式显示图片：

<img src="http://img.taopic.com/uploads/allimg/140513/235059-14051310145412.jpg" alt="小企鹅">

• 通过绝对路径的方式显示图片：

<img  src="235059-14051310145412.jpg" alt="大企鹅">

---

background =”img.jpg” 背景图片

• 给刚刚的多行文本框设置一个背景图片：

<textarea style="background: url('235059-14051310145412.jpg') " name="textarea" id="textarea" cols="20" rows="10" size="14"></textarea>

效果图：

表格标签

<table> 表格标签
<th>    标题
<tr>    行
<td>    列   


----------


<table width="500px" border="1" bgcolor="aqua" >
    <caption><h2>学生信息表</h2></caption>
    <tr bgcolor="#a52a2a">
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr >
        <td>1001</td>
        <td>张三</td>
        <td>男</td>
    </tr>
    <tr>
        <td>1002</td>
        <td>李四</td>
        <td>男</td>
    </tr>
</table>

---