可以完成99%的静态页面的HTML标签

HTML:一套浏览器认知的规则
HTML分为两个部分，头和身体。一个完整的网页相当于一个裸体的人，我们利用HTML给它穿上衣服，使它更好看。
下面我将为大家介绍一下HTML一些基本的标签，而这些基本的标签，基本上可以完成百分之九十以上的页面编写。
首先介绍一下一个网页的基本结构，分为头head，身体body；基本结构如下所示：

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

</body>

</html>

HTML的注释为

我们需要做的就是在body中给这个基本的页面穿上美观的衣服。
<html></html>
   HTML文档中的第一个标记，用于表示该文档是HTML文档，当浏览器遇到<html>标签时，就会按HTML的标准来解释文本。
<head></head>
   头部，一般这里定义编码方式，、刷新页面和跳转时间等等。我们的css样式也写到这里。这里说一句，我们现在所见的网站大部分都是以div＋css组成，老式的网站一般都是使用table完成的。
<title></title>
   html表头，也就是我们见到浏览器最上方的一段文字信息。
<body></body>
   身体，一个网页所显示的静态效果，用户可以最直观的看到的效果。
废话了这么多，也没有实质性的东西，下面我给大家介绍我们要学习的10个标签，也就是body中的标签。
   首先给大家介绍几种特殊符号： 空格   >大于号   < 小于号
   为了方便大家学习，我下面给大家结合实例讲解

　　　　　<p></p>        <!--段落标签，及块级标签-->

        <span></span>    <!--行内标签-->

        <div></div>        <!--块级标签-->

        <h1></h1>         <!--块级标签，可以设置为h1到h6,-->

        <br>             <!--回车标签-->

结合着四个标签，大家区分一下他们的差别在哪里，可简单写一些代码演示：
eg:

<!DOCTYPE html>

                <html>

                <head>

                    <title>区分4个标签</title>

                </head>

                <body>

                    <p>这是一个p标签</p>

                    <br>

                    <span>这是一个span标签</span>

                    <br>

                    <div>这是一个div标签</div>

                    <br>

                    <h1>这是一个h1标签</h1>

                    <br>

                    <h2>这是一个h2标签</h2>

                    <br>

                    <h6>这是一个h6标签</h6>

                </body>

                </html>

为什么会存在这些标签呢？我们需要利用这些标签进行css操作和JS操作，使页面更加的美观。又扯远了。言归正传。

　　　　 <input type="text" name="text">            <!--文本框，注册和登录框-->

        <input type="password" name="password">        <!--密码框，一般的浏览器都是密文显示-->

        <input type="button" name="button">            <!--按钮-->

        <form></form>        <!--表单，我们提交的登录信息都是通过表单上传到服务的-->

eg：

  <!DOCTYPE html>

                <html>

                <head>

                    <title>表单</title>

                </head>

                <body>

                    <form action="http：//winford.top" method="POST">    <!--action既是提交的表单到那里，method是URL的信息，有两种形式，GET和POST，一般情况下使用POST，不懂得问baiduyixia,google-->

                        <input type="text" name="text">

                        <br>

                        <input type="password" name="password">

                        <br>

                        <input type="button" name="button" value="登录">    <!--value既是值，可以尝试每个input标签都加上value属性，查看效果-->

                        <br>

                        <p>上传文件</p>

                        <input type="file" name="fname">

                        <br>

                        <input type="radio" name="gender">男

                        <input type="radio" name="gender">女    <!--单选框，相同则互斥-->

                        <br>

                        <input type="checkbox" name="favor">写代码

                        <input type="checkbox" name="favor">撩妹    <!--复选框-->

                    </form>

                </body>

                </html>

<a href=""></a> 
eg：

 <!DOCTYPE html>

                <html>

                <head>

                    <title>超链接</title>

                </head>

                <body>

                    <!--利用超链接也可以做锚-->

                    <a href="#i1">我爱你</a>

                    <a href="#i2">I LOVE YOU</a>

                    <a href="#i3">i love you</a>

                    <a href="#i4">wo ai ni</a>

                    <div id="i1" style="height: 500px;">我爱你，一生一世</div>

                    <div id="i2" style="height: 500px;">我爱你，海枯石烂</div>

                    <div id="i3" style="height: 500px;">我爱你，永不分离</div>

                    <div id="i4" style="height: 500px;">我爱你，天荒地老</div>

                </body>

                </html>

  eg：

                <!DOCTYPE html>

                <html>

                <head>

                    <title>img标签</title>

                </head>

                <body>

                    <img src="一个图片的路径" style="height: 200px;width: 200px;" title="鼠标放到图片上显示的文字信息" alt="未找到图片现实的文字信息">

                </body>

                </html>

<ul>           
           <li></li>
       </ul>
           eg：

  <!DOCTYPE html>

                <html>

                <head>

                    <title>列表</title>

                </head>

                <body>

                    <ul type="circle">        <!--type的属性有三种disc：原点；circle：空心点；square:方点-->

                        <li>winford.top</li>

                        <li>winford.top</li>

                        <li>winford.top</li>

                        <li>winford.top</li>

                    </ul>

                </body>

                </html>

<table></table> 
eg：

   <!DOCTYPE html>

                <html>

                <head>

                    <title>表格</title>            <!--合并单元格，左右合并colspan,上下合并rowspan-->

                </head>

                <body>

                    <table border="1px">

                        <thead>

                            <tr>

                                <th>表头第一列</th>

                                <th>表头第二列</th>

                                <th>表头第三列</th>

                            </tr>

                        </thead>

                        <tbody>

                            <tr>

                                <td>表体第一列</td>

                                <td>表体第二列</td>

                                <td>表体第三列</td>

                            </tr>

                            <tr>

                                <td>表体第一列</td>

                                <td>表体第二列</td>

                                <td>表体第三列</td>

                            </tr>

                        </tbody>

                    </table>

                </body>

                </html>

<label></label> 
eg：

 <!DOCTYPE html>

            <html>

            <head>

                <title></title>

            </head>

            <body>

                <label for="username">用户名</label>

                <input type="text" name="user" id="username">

                <fieldset>

                    <legend>登录</legend>            <!--一个登录的界面，用处不大-->

                </fieldset>

            </body>

            </html>

可以完成99%的静态页面的HTML标签的更多相关文章

生成静态页面的PHP类
生成静态页面的PHP类: 复制代码代码如下: <?php class html { var $dir; //dir for the htmls(without/) var $ ...
高并发分布式系统中生成全局唯一（订单号）Id js返回上一页并刷新、返回上一页、自动刷新页面父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数
高并发分布式系统中生成全局唯一(订单号)Id 1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...
今天做一个项目的时候，要在一个编辑的jsp页面的textarea标签设置value属性，结果发现他没有value属性，但是是编辑页面又必须要回显要修改的内容，所以在参考了w3cschool之后很轻松的解决了这个问题。
今天做一个项目的时候,要在一个编辑的jsp页面的textarea标签设置value属性,结果发现他没有value属性,但是是编辑页面又必须要回显要修改的内容,所以在参考了w3cschool之后很轻松的 ...
html页面的head标签下
head区是指首页html代码的<head>和</head>之间的内容. 必须加入的标签 1.公司版权注释 <!--- the site is designed b ...
一个简单的NodeJs静态页面的web服务器
主要功能 1 显示www文件夹下静态html或文本类型的文件. 2 缺省访问文件功能. 通过config.js的defaultfile属性设置 3 如果文件夹下没有缺省文件,显示文件夹下文件列表 4 ...
记一次针对静态页面的DDOS基本防护
可以说是我试图进入安全口的天才第一步了,能走多远鬼知道呢背景去年年前接到的一个外包项目,是一个base在日本的中国人留学机构做的静态页面.出于锻炼自己的目的,选择为他们按次结薪做长期服务维护.20 ...
删除静态页面的html
function dellist(obj) { $(obj).parent().parent().remove(); }
关于Jsp页面的jstl标签的级联属性的异常。
使用SpringMVC框架时,当我做表单回显时. 情景描述.Employee 类有一个Department类的属性.这两个类存在多对一关联关系. 下面是Employee类的属性的定义. public ...
手机页面的meta标签
<meta charset="utf-8"/><meta name="viewport" content="width=device ...

随机推荐

hive中使用rcfile
(1)建student & student1 表:(hive 托管)create table student(id INT, age INT, name STRING)partitioned ...
ZLG zigbee 虚拟串口配置
一.设置网关工作模式: 在ZNetCom Utility工具中,将设置网关工作模式为 Real COM 模式启动 ZNetCom Utility 搜索设备获得设备信息修改工作模式为:real c ...
MySql基本数据类型及约束
1. 常用的数据类型(data_type) 字符串类型 CHAR(n) : 固定长度 VARCHAR(n) : 可变长度 NCHAR(n) : 使用utf8存储,固定长度 NVARCHAR(n) : ...
搭建mysql主从复制和删库数据恢复策略
搭建主从复制主机: [mysqld] 下增加 vim /etc/my.cnf ## 设置 server_id,一般设置为 IP server_id=8 # # 复制过滤:需要备份的数据库,输出 bi ...
洛谷P1731 [NOI1999]生日蛋糕(爆搜)
题目背景 7月17日是Mr.W的生日,ACM-THU为此要制作一个体积为Nπ的M层生日蛋糕,每层都是一个圆柱体. 设从下往上数第i(1<=i<=M)层蛋糕是半径为Ri, 高度为Hi的圆柱 ...
Floyd 算法详解
Floyd-Warshall Floyd算法,是一种著名的多源最短路算法. 核心思想: 用邻接矩阵存储图,核心代码为三重循环,第一层枚举中间点k,二三层分别枚举起始点i与目标点j.然后判断经过中间点k ...
Ganglia监控安装配置
172.17.20.123 node1 gmetad.gmond.web 172.17.20.124 node2 gmond 1.服务器安装好epel源后,安装ganglia yum install ...
wordpress整站无损搬迁的几种方法最后一种最完美
网站建设之wordpress整站无损搬迁的几种方法最后一种最完美网站搬家,当我们更换php虚拟主机,空间升级或更好空间提供商都会发生,站长们请注意,掌握网站迁移方法,是网站日常维护技术中必须掌握的 ...
ajax在同一页面中同控制器不同方法中调用数据并异步刷新的实例
我在实习以来都有做一些笔记,之前做的笔记都在简书里,现在我提前把公司给我的任务做好了,坐在电脑前又不好玩别的,那么我就整理下我之前的笔记吧!(此项目是thinkphp5开发的) 先上效果图这是整体页 ...
Apache httpd Server 配置正向代理
背景代理(Proxy),位于客户端与实际服务端之间,当客户端需要请求服务端内容时,先向代理发起请求,代理将请求转发到实际的服务器,再原路返回.也可以在代理服务器设置缓存,将实际服务器上不常变化的内容 ...

可以完成99%的静态页面的HTML标签

可以完成99%的静态页面的HTML标签的更多相关文章

随机推荐

热门专题