Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html文档的基本结构及常用标签的使用-2019年7月2日
Blogger Information
Blog 8
fans 0
comment 0
visits 5135
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html文档的基本结构及常用标签的使用-2019年7月2日
珍珠宝宝的博客
Original
817 people have browsed it

一、HTML文档的基本结构

1.<!DOCTYPE html>声明文档的类型为html

2.<html></html>称为根标签，所有的网页标签都在<html></html>中。

3.<head></head>标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>，<meta>等标签，内容用户不可见，供浏览器解读，主要信息为网页内容的描述及文档声明。

4. <body></body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来供用户观看。

<HTML>
<head>(头部)
<title>网页显示的标题</title>
</head>
<body>（主体）
在这里面编写网站内容.

<body>

</HTML>

二，列表 

1，无序列表

<ul>
    <li>内容</li>
    <li>内容</li>
    <li>内容</li>
</ul>

2，有序列表

<ol>
    <li>内容</li>
    <li>内容</li>
    <li>内容</li>
</ol>

3，定义列表

<dl>
    <dt>标题</dt>
    <dd>描述项</dd>
</dl>

三，表格

border：表格边框属性；当使用border="1"设置边框时，会在所有td以及table上嵌套边框，当border加大时，只有table框会加粗。

cellspacing：单元格与单元格之间的间隙。当cellspacing="0"时，单元格之间的间隙为0，但边框线并不会合并。

cellpadding:单元格内边距，单元格中文字与单元格边框之间的距离。

width/height:表格的宽高

align：设置表格在父容器中的对齐方式 ，left/居左 center/居中 right/居右

bgcolor：背景色

colspan，某单元格跨N列，则该单元格右边的N-1个td就不需要了。

rowspan，某单元格跨N行，则该单元格下边的N-1个td就不需要了。

<table border="1" cellpadding="5" cellspacing=0" width="500" align=left">

    <thead>
    <tr>

        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>总分</th>


    </thead>

    <tbody>
    <tr>
        <td width="100">李小萌</td>

        <td width="50">80</td>
        <td width="50" >90</td>
        <td width="50">170</td>

    </tr>
    <tr>
        <td>宋笑天</td>
        <td>91</td>
        <td>95</td>
        <td>186</td>

    </tr>
    <tr>
        <td>李明</td>
        <td>89</td>
        <td>92</td>
        <td>181</td>
    </tr>
    </tbody>
    <tfoot>
    </tfoot>

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>夏***在学习</title>
</head>
<body>
<hr role="article">
<h1>文本</h1>
<p>学习使我快乐</p>
<h2>超链接</h2>
<br>
<a href="http://www.zzjtl.com" target="_parent" rel="nofollow"> 郑州金特莱</a>
<br>
<a href="http://www.zzjtl.cn" target="_blank"  rel="nofollow">金特莱电子</a>
<h2>图片</h2>
<a href="http://www.zzjtl.cn" target="_blank"  rel="nofollow"><img src="static/images/girl.jpg" alt="小姑娘" WIDTH="450" HEIGHT="300" ></a>
<h3>无序列表</h3>
<ul>
    <li>1.周一去上学</li>
    <li>2.周二去上班</li>
    <li>3.周三去游泳</li>
    <li>4.周四去钓鱼</li>
</ul>

<h3>有序列表</h3>
<ol>
    <li>5月1日周一去上学</li>
    <li>5月2日周二去上班</li>
    <li>5月3日周三去游泳</li>
    <li>5月4日周四去钓鱼</li>
</ol>

<h3>无序列表导航栏</h3>
<ul>
    <li><a href="http://www.zzjtl.com">5月1周一去上学</a></li>
    <li><a href="http://www.zzjtl.com">5月2周二去上班</a></li>
    <li><a href="http://www.zzjtl.com">5月3周三去游泳</a></li>
    <li><a href="http://www.zzjtl.com">5月4周四去钓鱼</a></li>
</ul>

<hr>
<table border="2 " cellspacing="0" width="300"  align="center">
    <caption>日程表</caption>
    <thead>
    <tr bgcolor="#7fff00">
        <th>编号</th>
        <th>日期</th>
        <th>星期</th>
        <th>去哪</th>
    </tr>
    </thead>

    <tbody>
    <tr bgcolor="#ff7f50">
        <td width="100">1</td>
        <td width="160">5月1</td>
        <td width="100">周一</td>
        <td width="400">上学</td>
    </tr>

    <tr>
        <td> 2</td>
        <td> 5月2</td>
        <td> 周二</td>
        <td> 上班</td>
    </tr>

    <tr>
        <td> 3</td>
        <td> 5月3</td>
        <td> 周三</td>
        <td> 游泳</td>
    </tr>

    <tr>
        <td> 4</td>
        <td> 5月4</td>
        <td> 周四</td>
        <td> 钓鱼</td>
    </tr>
    </tbody>

    <tfoot>
    <tr>
        <td content="3"align="center">总计</td>

        <td>4</td>
        <td>4</td>
        <td>4</td>
    </tr>
    </tfoot>
</table>

<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="username">密码：</label>
        <input type="password" id="password" name="password" placeholder="6-12个字母或者数字">
     </p>
    <p>
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" placeholder="example@mail.com" required>
    </p>
    <p>
        <label for="age">年龄：</label>
        <input type="number" id="age" name="age" min="18" max="80">
    </p>
    <p>
        <label for="age">年龄：</label>
        <input type="date" id="birthday" name="birthday" >
    </p>
    <p>
        <label for="love">爱好：</label>
        <select name="love" id="love"  size="1">
            <optgroup label="肉：">
            <option value="0">请选择</option>
            <option value="1">牛肉</option>
            <option value="2">羊肉</option>
            <option value="3">鱼肉</option>
            </optgroup>
            <optgroup label="水果：">
            <option value="0">请选择</option>
            <option value="1">苹果</option>
            <option value="2">橘子</option>
            <option value="3">香蕉</option>
            </optgroup>
            <optgroup label="零食：">
            <option value="0">请选择</option>
            <option value="1">巧克力</option>
            <option value="2">蛋糕</option>
            <option value="3">超级多的水薯片</option>
            </optgroup>


        </select>
    </p>
    <p>
        <label for="programme">喜欢的动画:</label>
        <input type="checkbox" name="hobby[]" value="programme" id="programme"><label for="programme">七龙珠</lable>
    <input type="checkbox" name="hobby[]" value="programme" id="programme"><label for="programme">海贼王</lable>
    <input type="checkbox" name="hobby[]" value="programme" id="programme"><label for="programme">火影忍者</lable>
    </p>
    <p>
        <label for="male">性别: </label>
        <input type="radio" name="gender" value="male" id="male"><label for="male">男生</label>
        <input type="radio" name="gender" value="female" id="female"><label for="female">女生</label>
        <input type="radio" name="gender" value="secrecy" id="secrecy" checked><label for="secrecy">不告诉你</label>
    </p>


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

    <p>
        <input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="重置">
        <input type="button" name="button" value="按钮">
</form>


</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

四，表单

表单是可以把浏览者输入的数据传送到服务器端

1，form 属性规定输入域所属的一个或多个表单，form标签用于包裹表单中的元素，并将信息通过get/post方法提交

2.表单结构p>label>input，label中for的值用于绑定input中的id，type（类型）=“username/password/email/number/date”

3，select>option（选项）下拉选择框，size="1"下拉选项显示个数

4，复选框<input type="table tennis" name="sport" id="table tennis" value="table tennis" checked><label for="table tennis">乒乓球</label>，type="checkbox"，checked默认选项

5，单选框<input type="radio" name="sex" id="male" value="male"><label for="male">男</label>

6，文本域<textarea name="text" id="text" cols="20" rows="5" maxlength="100" placeholder="不超过100字"></textarea>，cols行宽度，rows列宽，maxlength最长文本，placeholder提示内容

7，提交按钮<input type="submit" name="submit" value="提交">等价于<button type="submit">提交</button>

       重置按钮<input type="reset" name="reset" value="重置">



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

    <p>
        <label for="password">密码：</label>
        <input type="password" name="password" id="password" placeholder="6-12位数字或字母" autofocus>
    </p>

    <p>
        <label for="email">邮箱：</label>
        <input type="email" name="email" id="email" placeholder="email@qq.com" requider>
    </p>

    <p>
        <label for="age">年龄：</label>
        <input type="number" name="age" id="age" max="99">
    </p>

    <p>
        <label for="birthday">生日：</label>
        <input type="date" name="birthday" id="birthday">
    </p>
    <p>
        <label for="course">课程：</label>
        <select name="course" id="course" size="1">
            <option value="0">请选择</option>
            <option value="1">HTML</option>
            <option value="2">CSS3</option>
            <option value="3">JAVE</option>
            <option value="4">PHP</option>
            <option value="5">MYSQL</option>
            <option value="6">THINKPHP</option>
        </select>
    </p>
    <p>
        <label for="sport">运动：</label>
        <input type="checkbox" name="sport" id="table tennis" value="table tennis" checked><label for="table tennis">乒乓球</label>
        <input type="checkbox" name="sport" id="Basketbal" value="Basketbal"><label for="Basketbal">蓝球</label>
        <input type="checkbox" name="sport" id="football" value="football"><label for="football">足球</label>
    </p>
    <p>
        <label for="male">性别：</label>
        <input type="radio" name="sex" id="male" value="male"><label for="male">男</label>
        <input type="radio" name="sex" id="female" value="female"><label for="female">女</label>
        <input type="radio" name="sex" id="secrecy" value="secrecy"><label for="secrecy">保密</label>
    </p>
    <p>
        <label for="text">个人简介：</label>
        <textarea name="text" id="text" cols="20" rows="5" maxlength="100" placeholder="在这里输入内容"></textarea>
    </p>
    <p>
        <button type="submit">提交</button>
        <input type="reset" name="reset" value="重置">

    </p>
</form>
Correction status：qualified

Teacher's comments：基础很重要
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post