7.2 HTML常用标签极速入门

7.2课程内容

1 HTML基本术语与文档结构    

2 HTML常用标签

代码练习

实例1

<h2>PHP中文网的小伙伴们,大家好~~</h2>

实例2

<article>
  <h1>HTML是什么?</h1>
    <p>HTML是超文本标记语言</p>

  <h2>HTML与CSS之间的关系是什么?</h2>
<p>html通常用来写页面的基本结构,css用来设置元素样式</p>

<h3>JavaScript可以做什么?</h3>
    <p>JavaScript是前端唯一的脚本编程语言, 得到了所有浏览器的支持</p>
<p>JavaScript可以控制页面元素的显示与行业, 使页面具有交互性,提升用户体验</p>
<h4>我学历不高, 可以学编程吗?</h4>
    <p>与其它传统行业不同, 编程与学历之间的并无因果关系,很多人也只有初中学历,并不妨碍他们成为行业大神</p>
<h5>30多了, 学编程还来得及吗?</h5>
<p>学什么并不重要, 已经开始学了才重要, 别在选择中浪费时间了, 否则明年你还问同样的问题</p>

<h6>g我每天都要上班,还有家庭,根本没时间怎么办?</h6>

 <p>你只需要把手机和电脑中的游戏全部卸载, 从此告别头条和抖音快手,远离朋友圈, 你会发现你的时间还是很多的</p>


</article>

实例3

<a href="http://www.php.cn">php中文网: 默认当前页面打开</a>
<br>
<a href="http://www.php.cn" target="_self">php中文网:  默认值是_self</a>
<br>
<a href="http://www.php.cn" target="_blank">php中文网:新窗口打开 _blank</a>
<br>
<a href="http://php.cn" target="_parent">php中文网: 父窗口打开_parent</a>
<br>
<a href="http://php.cn" target="_top">php中文网: 顶层窗口打开 _top</a>

实例4

<img src="static/images/girl.jpg" alt="小美女" width="300" title="我爱的和爱我的">
<hr>
<img src="http://www.php.cn/static/images/index_yunv.jpg" alt="我很幸福" width="300">

实例5

<!--无序列表-->
<h3>购物车1</h3>
<ul>
    <li>有备无患的奔驰专用机油, 1个, 800元</li>
    <li>能看清鞋子的京东摄像头, 2个, 300元</li>
    <li>带暖手宝功能的笔记本电脑, 1台, 7800元</li>
</ul>

<!--有序列表-->
<h3>购物车2</h3>
<ol>

    <li>有备无患的奔驰专用机油, 1个, 800元</li>
    <li>能看清鞋子的京东摄像头, 2个, 300元</li>
    <li>带暖手宝功能的笔记本电脑, 1台, 7800元</li>

</ol>

<!--开发中无序列表使用更广泛-->
<ul>
    <li><a href="">首页</a> </li>
    <li><a href="">公司新闻</a></li>
    <li><a href="">公司产品</a></li>
    <li><a href="">关于我们</a></li>
    <li><a href="">联系我们</a></li>

</ul>

<!--定义类别，常用于页脚-->

<dl>

    <dt>php</dt>
    <dd>全球最流行的通用的服务器端编程脚本语言</dd>

    <dt>mysql</dt>
    <dd>使用最广泛的免费开源的关系型数据库管理系统</dd>

    <dt>ThinkPHP</dt>
    <dd>国内使用最广泛的轻量级免费开源的PHP开发框架</dd>

</dl>

实例6

<h3>购物车-不方便的列表</h3>
<ul>
    <li>1. 有备无患的奔驰专用机油, 1个, 800元</li>
    <li>2. 能看清鞋子的京东摄像头, 2个, 300元</li>
    <li>3. 带暖手宝功能的笔记本电脑, 2台, 9000元</li>
</ul>

<hr>

<table border="1" cellspacing="0" cellpadding="4" width="600" align="left" >
 <caption>购物车-表格形式的</caption>
<thead>
<tr>
    <th>编号</th>
    <th>名称</th>
    <th>单价</th>
    <th>数量</th>
    <th>金额</th>

</tr>
</thead>

    <tbody>
    <tr >
        <td width="50" >1</td>
        <td width="200">有备无患的奔驰专用机油</td>
        <td width="70">800</td>
        <td width="50">1</td>
        <td width="80" rowspan="2">1200</td>
        <!--单元格相加为450,为什么表格宽度要设置为500, 因为还有cellpadding=5,共50px-->
        <!--细学的同学可能发现了, 表格线不算宽度吗?当然算,所以表格在总宽度不变的情况下,内部会有轻微缩放-->
    </tr>
    <tr>
        <td>2</td>
        <td>能看清鞋子的京东摄像头</td>
        <td>150</td>
        <td>2</td>

    </tr>
    <tr>
        <td>3</td>
        <td>带暖手宝功能的笔记本电脑</td>
        <td>4500</td>
        <td>2</td>
        <td>9000</td>
    </tr>
    </tbody>

    <tfoot>

    <tr>
        <td colspan="3">共计</td>

        <td>9</td>
        <td>16000</td>
    </tr>


    </tfoot>


</table>

实例7

<h3>用户注册</h3>
<form action="" method="get" name="register">

<p>
<label for="username">账号</label>
<input type="text" id="username" name="username" placeholder="不超过8个字符" autofocus>
</p>


<p>
<label for="password">密码</label>
<input type="password" id="password" name="password" placeholder="不超过8个字符" autofocus>
</p>

<p>
<label for="email">邮箱</label>
<input type="email" id="email" name="email" placeholder="example@mail.com" required>
    <!--        required: 必填项的意思，就是必须要填写-->
</p>


<p>
<label for="age">年龄</label>
<input type="number" id="age" name="age" min="16" max="70">
    <!--        required: 必填项的意思，就是必须要填写-->
</p>


<p>
<label for="birthday">生日</label>
<input type="date" id="birthday" name="birthday" >
    <!--        required: 必填项的意思，就是必须要填写-->
</p>


<p>
<label for="sourse">课程</label>
<select id="sourse" name="sourse" size="10">
<optgroup label="前端">
    <option value="0">请选择</option>
    <option value="1">HTML5</option>
    <option value="2">CSS3</option>
    <option value="3" selected>JavaScript</option>

</optgroup>

<optgroup label="后端">
    <option value="4">PHP</option>
    <option value="5">MySQL</option>
    <option value="6">ThinkPHP</option>

</optgroup>

</select>
</p>

<!--复选框-->
<p>
<label for="programme">爱好</label>
<input type="checkbox" name="hobby" id="game" value="game"><label for="game">游戏</label>
<input type="checkbox" name="hobby" id="programme" value="programme"><label for="programme">撸代码</label>
<input type="checkbox" name="hobby" id="movies" value="movies"><label for="movies">看片</label>

</p>

<!--单选框-->
<p>
        <label for="male">性别</label>
        <input type="radio" name="gender" id="nan" value="nan"><label for="nan">男</label>
        <input type="checkbox" name="gender" id="nv" value="nv"><label for="nv">女</label>
        <input type="checkbox" name="gender" id="fei" value="fei"><label for="fei">保密</label>

 </p>

<!--文本域    -->

  <p>
  <label for="comment">简介:</label>
<textarea name="comment" id="comment" cols="30" rows="10"  placeholder="不超过30字"  >

</textarea>

  </p>

<p>
    <input type="submit" id="submit" name="submit">

    <input type="reset" id="reset" name="reset">

    <input type="button" id="button" name="button" value="按钮">

    <button>提交1</button>

    <button type="submit">提交2</button>

    <button type="button">提交3</button>


</p>





</form>