HTML常用标签

HTML 标签

1 HTML 基本的结构
2 HTML 标签的介绍与使用

2.1 head 标签
2.2 body标签
2.3 a 标签
2.4 img 图片标签
2.5 table 表格标签
2.6 iframe 标签
2.7 frameset 标签
2.8 form 标签

3 相关练习

3.1 温习
3.2 模拟百度搜索
3.3 简单注册页面
3.4 简历练习

4 总结

HTML 标签

本文介绍了HTML常用标签的定义，简单实现和相关的作用，以及一些简单实现的代码，主要的目的是加深学习的记忆和日后的查询。

1 HTML 基本的结构

基本的 H5 结构展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

2 HTML 标签的介绍与使用

简略的讲解了一下一些标签日常的使用及个别小细节。

2.1 head 标签

head 标签主要用于设置浏览器的配置方面内容，有：

meta 标签设置网页解析编码格式配置
title 标签设置网页的标题

<!--  head标签主要配置浏览器的设置  -->
<head>
<!--  meta标签网页解析编码格式配置  -->
    <meta charset="UTF-8">

<!--  以下三条供了解  -->
    <meta name="keywords" content="HTML初学"/><!--  网页关键字，可以提升在浏览器中的搜索率  -->
    <meta name="description" content="开始学习的一些路程！"/><!--  网页描述  -->
    <meta name="author" content="Linyuqi"/><!--  网页作者  -->
    <meta http-equiv="refresh" content="3,url=http://www.baidu.com"/><!--  网页自动跳转  -->
<!--  title标签设置标题标签  -->
    <title>head标签</title>
</head>

2.2 body标签

body 标签属于网页主题的内容，通常会有：

h1 标题标签:加粗加黑显示，自动换行共有六级 (块级元素)
hr 水平线标签
p 段落标签 (块级元素）
nbsp&; 空格占位符 (记忆法：“牛逼视频”)
b i u del 文本权重标签
ul>li 无序列表
ol>li 有序列表
dl>dt dd 自定义列表

<body>

<!--  文本标签  -->
<!--  标题标签:加粗加黑显示，自动换行 共有六级  (块级元素)-->
    <h1 align="center">html的初步学习</h1>
    <h2>html的初步学习</h2><!--  标签属性：align(设置位置):left center right  -->
    <h3>html的初步学习</h3>

<!--  水平线标签  -->
    <hr width=40% size="20px" color="red"/><!--  width(设置宽度)  size(设置粗细)  color(设置颜色)  -->

<!--  段落标签  (块级元素)-->
    <p>html的初步学习</p>
    <p>html的初步学习</p>

<!--  空格占位符  (记忆法："牛逼视频")-->
    今&nbsp;&nbsp;天&nbsp;&nbsp;天&nbsp;&nbsp;气&nbsp;&nbsp;不&nbsp;&nbsp;错

<!--  文本权重标签  -->
    今天<b>天气</b>不错<!--  加黑  -->
    今天<i>天气</i>不错<!--  斜体  -->
    今天<u>天气</u>不错<!--  下划线  -->
    今天<del>天气</del>不错<!--  中划线  -->


<!--  列表标签  -->
<!--  无序列表  -->
    <h1>学级：</h1>
    <ul>
        <li>大一</li>
        <li>大二</li>
        <li>大三</li>
    </ul>

<!--  有序列表  -->
    <h1>兴趣爱好：</h1>
    <ol type="i"><!--  type改变顺序编码的值 默认阿拉伯数字  -->
        <li>听音乐</li>
        <li>打游戏</li>
        <li>出去玩</li>
    </ol>

<!--  自定义列表  -->
<dl>
    <dt>游戏：</dt><!--  标题  -->
    <dd>CF</dd><!--  内容  -->
    <dd>CS</dd>
    <dd>lol</dd>

    <dt>爱好：</dt>
    <dd>music</dd>
    <dd>games</dd>
    <dd>hiking</dd>
</dl>
</body>

2.3 a 标签

a 标签有超链接和锚点两种功能，分别是跳转外网和页面内的跳转：

<body>
<!--  超链接标签  -->
    <!--  本地资源  -->
    <a href="body(文本和列表).html">body(文本和列表)</a>

    <!--  外网资源  -->
    <a href="http://www.baidu.com" target="_self">百度一下</a>
    <!--  target：_self(当前页面)  _blank(新标签页)  _parent(父级页面)  _top(最顶层页面)  -->

<!--  锚点标签  -->
    <a href="#sc">跳转至sc</a><!--  跳转至目标锚点位置(href="#" 默认回到顶部)  -->
    <a name="sc"></a><!--  设置锚点名称  -->
</body>

2.4 img 图片标签

img 用来链接内部或外部的图片：

<body>
<!--  图片标签  -->
    <!--  本地资源使用  -->
    <img src="img/1.jpg" width="360px"><!--  单独设置width，图片等比例变化  -->

    <!--  链接外网资源  -->
    <img src="http://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=图片&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined&copyright=undefined&cs=3300305952,1328708913&os=188573792,343995474&simid=4174703319,828922280&pn=0&rn=1&di=178640&ln=1626&fr=&fmq=1561696916678_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=http%3A%2F%2Fpic37.nipic.com%2F20140113%2F8800276_184927469000_2.png&rpstart=0&rpnum=0&adpicid=0&force=undefined">

    <img src="" title="图片标题" alt="图片加载不成功后提示该信息">
</body>

2.5 table 表格标签

table 用来创建表格：

<body>
<!--  表格标签  -->
<table border="2px">
    <tr height="50px">
        <th width="60">姓名</th>
        <th width="60">爱好</th>
        <th width="120">手机</th>
    </tr>
    <tr height="50px">
        <td>Linyuqi</td>
        <td>听音乐</td>
        <td>13060453555</td>
    </tr>
    <tr height="50px">
        <td>张三</td>
        <td>打游戏</td>
        <td>11111111111</td>
    </tr>

<!--
    table:声明一个表格
        tr:声明一行
            th:声明单元格 表头格 默认加粗加黑
            td:声明单元格 默认居左显示原始数据

    属性:
        border:给表格添加边框
        width:设置表格的宽度
        height:设置表格的高度
        cellpadding:内容距边框的距离
        cellspacing:边框的大小
        colspan:列合并
        rowspan:行合并
    相关设置规则：
        table:bolder cellspacing cellpadding
        tr:height(第一列)
        td:width(第一行)
  -->
    
</table>

2.6 iframe 标签

iframe 用来创建一个页面内的窗口，用来链接内部或外部的页面显示：

<body>
<!--  内嵌标签的学习  -->
<table width="100%">
    <tr>
        <td align="center"><a href="http://www.jd.com" target="_if">京东商城</a></td>
        <td align="center"><a href="http://www.baidu.com" target="_if">百度一下</a></td>
        <td align="center"><a href="http://www.taobao.com" target="_if">淘宝</a></td>
    </tr>
</table>

    <iframe src="" frameborder="0" width=100% height="500px" name="_if"></iframe>

<!--
    width:宽度
    height:高度
    name:设置内嵌区域的名称
-->
</body>

2.7 frameset 标签

frameset 用来创建合适的框架，需要删除body标签使用：

<!--需要删除body标签-->
<!--  框架标签  -->
    <frameset rows="10%,*,10%">
        <frame src="">
        <frameset columns="10%,*">
            <frame src="">
            <frame src="">
        </frameset>
        <frame src="">
    </frameset>

2.8 form 标签

form 标签用于处理页面的数据提交给服务器的一个过程，是一个非常重要的标签：

<body>
<!--  表单标签  -->
    <form action="" method="">
        用户名：<input type="text" name="username"><br>
        密&nbsp;&nbsp;码:<input type="password" name="password"><br>
        性别： 男<input type="radio" name="sex" value="1" checked="checked">
                女<input type="radio" name="sex" value="0"><br>
        爱好: 听歌 <input type="checkbox" name="fav" value="1">
            睡觉 <input type="checkbox" name="fav" value="2">
            打游戏 <input type="checkbox" name="fav" value="3"><br>
        籍贯：<select>
                 <option value=""></option>
                    <option value="1">北京</option>
                    <option value="2">上海</option>
                    <option value="3">陕西</option>
            </select><br>
        自我介绍：<br>
        <textarea name="intro" rows="3" cols="20"></textarea><br>
        <input type="submit" value="submit" >
        
    </form>

<!--form：
        action:收集的数据的提交地址
        method:提交的方式
    form表单域：
        文本输入：
            input:作为用户输入相关数据
                type:
                    text:收集少量的文本数据，用户可见
                    password:用于密码，用户不可见
                name:数据提交的键
                value:默认值
        单选框：
            input:
                type:
                    radio:单选类型
                name:name属性相同的单选框只能选择一个值
                value:要提交的数据
                checked:checked 设置默认选择状态
        多选框：
            input:
                type:
                    checkbox
                name:一个数据组要使用同一个name
                value:要提交的数据
                checked:checked 设置默认选择状态
        下拉框：
            select:
                name:数据提交的键名
                option:表示一个下拉选项
                    value:提交的数据值
        文本域：
            textarea:
            name:数据提交的键名
            rows:行数
            cols:列数
        普通按钮：
            input:
                type:
                    button
                value:显示的值
        隐藏内容：
            input:
                type:
                    hidden
                name:数据名
                value:提交的值
-->
</body>

3 相关练习

3.1 温习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习一</title>
    <meta name="keywords" content="练习">
    <meta name="description" content="多加练习">
    <meta name="author" content="Linyuqi">

<!--    <meta http-equiv="refresh" content="3;url=http://www.baidu.com">-->
</head>
<body>
    <h1>HTML复习</h1>
    <hr>
    <p>
        &nbsp;&nbsp;&nbsp;&nbsp;今天天气不错，<br>马上开始CSS的学习了！
    </p>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <ol>
        <li>大一</li>
        <li>大二</li>
        <li>大三</li>
    </ol>

    <dl>
        <dt>电影：</dt>
        <dd>变形金刚</dd>
        <dd>我的世界</dd>
        
        <dt>游戏：</dt>
        <dd>CF</dd>
        <dd>CS</dd>
    </dl>

<!--  预格式文本标签pre  -->
<pre>
    今天天气不错，马上开始CSS的学习了！

    1 大一
    2 大二
    3 大三

    电影：
        变形金刚
        我的世界
    游戏：
        CF
        CS

</pre>
</body>
</html>

3.2 模拟百度搜索

<body>
<h1>模拟百度</h1>
<hr>
<form action="https://www.baidu.com/s" method="get">
    word: <input type="text" name="wd">
    <input type="submit" value="NiuBi">
</form>
</body>

3.3 简单注册页面

<form action="" method="get">
    <table border="1px" cellspacing="0px" cellpadding="10px">
        <tr height="35px">
            <td width="100px">用户名：</td>
            <td width="150px"><input type="text" name="username"></td>
        </tr>
        <tr height="35px">
            <td>密码：</td>
            <td><input type="password" name="password" value=""></td>
        </tr>
        <tr height="35px">
            <td>性别：</td>
            <td>男<input type="radio" name="sex" value="1" checked="checked">
                女<input type="radio" name="sex" value="0"></td>
        </tr>
        <tr height="35px">
            <td colspan="2"><input type="submit" value="submit"> </td>
        </tr>
    </table>


</form>

</body>

3.4 简历练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简历作业</title>
</head>
<body>
<h1>简历作业</h1>
<hr>
<table border="1px" cellspacing="0px" style="border-bottom: none">
    <tr height="27px">
        <td colspan="5">基本情况</td>
    </tr>
    <tr height="27px">
        <td width="120px">姓名</td>
        <td width="120px"></td>
        <td width="120px">性别</td>
        <td width="120px"></td>
        <td width="120px" rowspan="7" ></td>
    </tr>
    <tr height="27px">
        <td>民族</td>
        <td></td>
        <td>出生年月</td>
        <td></td>
    </tr>
    <tr height="27px">
        <td>政治面貌</td>
        <td></td>
        <td>健康</td>
        <td></td>
    </tr>
    <tr height="27px">
        <td>籍贯</td>
        <td></td>
        <td>学历</td>
        <td></td>
    </tr>
    <tr height="27px">
        <td>电子信箱</td>
        <td></td>
        <td>联系电话</td>
        <td></td>
    </tr>
    <tr height="27px">
        <td>专业 </td>
        <td colspan="3"></td>
    </tr>
    <tr height="27px">
        <td>毕业院校</td>
        <td colspan="3"></td>
    </tr>
    <tr height="27px">
        <td>求职意向</td>
        <td colspan="4"></td>
    </tr>
</table>
<table border="1px" cellspacing="0px" style="border-bottom: none" >
    <tr height="27px">
        <td colspan="4">教育情况</td>
    </tr>
    <tr height="27px">
        <td width="152px">时间</td>
        <td width="152px">院校</td>
        <td width="152px">专业</td>
        <td width="152px">学历</td>
    </tr>
    <tr height="27px">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr height="27px">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
<table border="1px" cellspacing="0px">
    <tr height="27px">
        <td colspan="4">培训经历</td>
    </tr>
    <tr height="27px">
        <td width="152px">时间</td>
        <td width="152px">培训机构</td>
        <td width="152px">课程</td>
        <td width="152px">证书</td>
    </tr>
    <tr height="27px">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr height="27px">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
</body>
</html>

4 总结

多学习一些新的东西，并巩固一些旧的知识，把自己当一天学习到的东西记录下来应该是最好的一种方式了吧，今天学习的这些东西，以后复习也有地方查看。

水瓶座

发布了28 篇原创文章 · 获赞 5 · 访问量 2214

私信关注

网页开发和设计之HTML标签