html 常用标签及基本用法

一个网页基本是由 结构（html） + 样式（css） + 脚本（js） 组成。
学习的话 应该从最基本的标签开始， 结构清晰了， 再用css美化, 最后可以用脚本加上特效

块级 和 行类标签

特点：
1. 宽度自适应父级，总是从新的一行开始。 行内的，不会折行。
<div>
    <div>123</div>
    <div>123</div>
</div>
<a>行1</a>
<a>行2</a>
<a>行3</a>

2. 高度，宽度...都可以自行控制. 而行类元素 则不能设置。
<div style="width:300px;height:200px;"></div>
// 无效
<span  style="width:300px;height:200px;"></span>

3.行内元素 和 块级元素是可以转变的
// 比2多了 display:block 有效
<span  style="width:300px;height:200px;display:block"></span>
display: inline(行) / inline-block（行块--兼具二者好处） / block（块）

---

常用块元素

// 最基本的--div
<div>我是最基本的标签div, 啥都能放，比如嵌套内容， 比如放图片， 段落...</div>

// 段落--p
<p>我是段落标签， 我一般放文字...</P>

// 标题 h1,h2...h6
<h3>一般用来放标题</h3>

// 有序列表--ul 和 无序列表--ol 一般和li配合起来使用 有何不同？拿到浏览器上一看就知。
<ul>
    <li>首页</li>
    <li>招聘</li>
    <li>关于</li>
</ul>
<ol>
    <li>首页</li>
    <li>招聘</li>
    <li>关于</li>
</ol>

// 表格--table
// tr代表一行 td代表一格
<table>
    // 表头--thead tabel(表单)的head(头）
    <thead>
        <tr>
            <td>岗位</td>
            <td>人数</td>
            <td>要求</td>
        <tr>
    <thead>
    // 表身--tbody
    <tbody>
        <tr>
            <td>设计</td>
            <td>1</td>
            <td>美女</td>
        </tr>
        <tr>
            <td>前端</td>
            <td>1</td>
            <td>帅哥</td>
        </tr>
    <tbody>
<table>

常用的行类元素

// 锚点--a 点击可以跳转到指定的链接
<a href="http://www.baidu.com"></a>

// 输入框--input
<input type="text" placeholder="请输入文本">

// 多行文本
<textarea></textarea>

// 图片--img
<img src="https://img11.360buyimg.com/n4/s130x130_jfs/t5605/44/3506681813/377317/f4addf34/593e1209Nacbe2e64.jpg" alt="鼠标划入会显示的文字" />

// 万能？？--span
<span>我经常被用到</span>

// 还有一些其他的 如
<em>斜体</em>
<strong>加粗</strong>
...

常用学校网站 w3c， 菜鸟教程... 有一定基础了 可以去慕课网...