HTML——从三个例子轻松掌握

来源：互联网发布：淘宝客服差评回复编辑：程序博客网时间：2024/05/16 11:39

HTML孙鑫视频内容简介：

介绍HTML的常用标记及属性，为xml及后续学习打下良好的基础。

目的：帮助对HTML还不熟悉的学员快速掌握常用标记的使用。

一、元素四种形式：

1.空元素<br>

2.带属性<hrcolor="blue">

3.带内容<title>...</title>

4.带内容和属性<fontcolor="red"></font>

基础知识：

①<palign="#">

paragra，创建一个段，align表示对齐方式

②<br>

表示line break换行

③<hr color="clr">

插入一条水平线，color制定线的颜色

二、与文本显示相关的标签：

1.<center></center>居中

2.<hn align="#"></hn>n表示数字，1表示最大标题，6表示最小

3.<font size=n color="clr"></font>字体大小和颜色，颜色名字clr

4.<b></b>粗体

5.<i></i>斜体

6.注释：<！---->

7.常用的字符实体：html标签不区分大小写，实体区分。

例1：

<html>    <head><title>静夜思</title></head>    <body>          <!--这是首诗-->        <center>            <h2><font color="red">静夜思</font></h2>            <!--换成全角空格也可以-->         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                         <b>作者： 李白</b>            <hr color="blue">            <p>                    <b><font color="green" size="3">窗前明月光，疑是地上霜。<br>            举头望明月，低头思故乡。</font></i></b>        </center>    </body></html>

效果图：

三、列表项：

1．表格：

<caption>表格标题

<tr align="alignment"valign="alignment">...</tr>表格中添加新行，valign指定垂直方向上的对齐方式，alignment可以是top/middle/bottom

<th>定义表头

<td>定义单元格

例2：

<html>    <head><title>表格的例子</title></head>    <body>        <table border="1"align="center" bgcolor="#ffdddd">        <caption>2004年度期末考试成绩单</caption>        <tr align="center"valign="middle">            <th>姓名</th>            <th>语文</th>            <th>数学</th>        </tr>        <tr align="center"valign="middle">            <th>张三</th>            <th>98</th>            <th>96</th>        </tr>        <tr align="center"valign="middle">           <th>李四</th>           <th>94</th>           <th>95</th>        </tr>        </table>    </body></html>

效果图：

2．表单创建：

提交表单中没有安全性的考虑，我们用get方法，如果数据量大或安全方面有，用post

<input>创建表单中的控件

type="text"/submit（提交）/reset/password/radio（单选按钮）/checkbox/hidden（隐藏）

例子：

<html>   <head><title>表单的例子</title></head>    <body>    <form method="get" action="reg.jsp">    <table>    <tr>    <td>用户名：</td>    <td><input type="text" name="user" value="游客" size="30" >    </td>    </tr>    <tr>    <td>密码：</td>    <td><input type="password" name="pwd"></td>    </tr>    <tr>    <td>性别：</td>    <input type="radio" name="sex" value="1" checked>男    <input type="radio" name="sex" value="0">女</td>    </tr>    <tr>    <td>兴趣爱好：</td>    <td><input type="checkbox" name="interest" value="football">足球    <td><input type="checkbox" name="interest" value="basketball">篮球    <td><input type="checkbox" name="interest" value="swim">游泳    </td>    </tr>    <tr>    <td>最高学历：</td>    <td>    <selet size="1" name="education">        <option value="" selected>...</option>        <option value="高中">高中</option>        <option value="大学">大学</option>        <option value="硕士">硕士</option>        <option value="博士">博士</option>    </select>    </td>    </tr>    <tr>    <td>个人简介：</td>    <td><textarea name="personal" rows="5" cols="30"></td>    </tr>    <tr>    <td>个人简介：</td>    <td><input type="reset" value="重写"></td>    <td><input type="submit" value="注册"></td>    </tr>    </table><br>    </form>    </body></html>

效果图：

四、其他：

1．超链接：

2．嵌入图像：GIF/JPEG

src图像资源的额位置

3．给图片加超链接：

五、总结：

这个视频将HTML中最常用的一些标签及他们的使用方法仔细讲了一遍，看完之后，感觉很容易上手，这次学习HTML，对牛腩中的一些设置理解更深了，温习了上一阶段的学习过程，确实不错，很好的资料。不管再简单的材料，都应该亲手实践一下，这样才会印象深刻，也有主语理解。思想上移，行动下移，我们才会更好的掌握它。

0 0