HTML

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。

一、编写html文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

</body>

</html>


\<!DOCTYPE html\> 作用告诉浏览器用什么样的规范来解析html文件
  • 一个html文件中只能有一对html标签，标签内部可以写属性

二、注释

<!-- 注释内容 -->

三、head标签

1.meta标签

<!DOCTYPE html>

<html lang="en">

<head>

	<!-- 页面编码 告诉浏览器是什么编码 -->

    <meta http-equiv="content-type" content="text/html" charset="utf-8" />

    <!-- 30秒自动刷新一次页面 -->

    <meta http-equiv="refresh" content="30" />

    <!-- 10秒钟以后自动跳转到百度 -->

    <meta http-equiv="refresh" content="10; Url=http://www.baidu.com" />

    <!-- 关键词 搜索引擎中输入的关键词 -->

    <meta name="keywords" content="汽车,汽车之家,汽车网,汽车报价,汽车图片,新闻,评测,社区,俱乐部" />

    <!-- 描述信息 -->

    <meta name="description" content="汽车之家为您提供最新汽车报价，汽车图片，汽车价格大全，最精彩的汽车新闻、行情、评测、导购内容，是提供信息最快最全的中国汽车网站。"/>

    <title>IT运维</title>

</head>

<body>

    <p>窗前明月光</p>

</body>

</html>

2.title标签

网页头部信息

<title>IT运维</title>

四、body标签

1.图标与换行

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>IT运维</title>

</head>

<body>

    <!-- &nbsp 空格 -->

    Hello&nbspWorld

    <!-- br 换行 -->

    <br>

    Hello&nbspPython

    <br>

    <!--  &lt 小于号 -->

    1 &lt 2

    <br>

    <!--  &lt 大于号 -->

    2 &gt 1

</body>

</html>

更多图标请点击查看

2.p标签

p表示段落，默认段落之间是有间隔的！


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>IT</title>

</head>

<body>

    <p>床前明月光，</p>

    <p>疑是地上霜。</p>

    <p>举头望明月，</p>

    <p>低头思故乡。</p>

</body>

</html>

3.h系列标签

h标签是几号标题，从1到6

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h1>一级标题</h1>

    <h2>二级标题</h2>

    <h3>三级标题</h3>

    <h4>四级标题</h4>

    <h5>五级标题</h5>

    <h6>六级标题</h6>

</body>

</html>

4.div标签

div标签是白板，默认什么属性都没有，属于块级标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div>收藏本站</div>

    <span>你好世界</span>

    <span>你好世界</span>

</body>

</html>

5.span标签

span标签也是白板,属于行内标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div>收藏本站</div>

    <span>你好世界</span>

    <span>你好世界</span>

</body>

</html>

6.input系列加from标签

6.1、文本框

<input type="text" name="query" value="王恩志"/>



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

效果图

6.2、按钮

input type='submit'   - value="按钮名称"  提交按钮，表单

input type='button'   - value='按钮名称'  按钮

input type="reset"  - value="重置" 会将表单中选择的内容全部恢复


<input type="submit" value="提交" />

<input type="reset" value="重置" />

效果图

6.3、单选框

男：<input type="radio" name="gender" value="1" checked="checked" />

女：<input type="radio" name="gender" value="2" />

效果图

6.4、复选框

    看电影：<input type="checkbox" name="hobby" value="1" />

    听音乐：<input type="checkbox" name="hobby" value="2" />

    写代码：<input type="checkbox" name="hobby" value="3" />

效果图

6.5、上传文件

<p>上传文件</p>

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

效果图

6.6、多行文本输入

<p>多行文本输入</p>

<textarea name="menu" style="width: 500px;height: 200px;">多行文本输入</textarea>

效果图

6.7、 select可选标签

select标签属性；name="属性名" ; size="1" 显示几个 ；multiple="multiple" 可以多选

select内部标签；option或者optgroup里面在包含option

<p>请选择城市</p>

<select name="city" size="1" >

  <option value="1">北京</option>

  <option value="2" selected="selected">上海</option>

  <option value="3">香港</option>

</select>

<select>

  <optgroup label="黑龙江省">

    <option value="1">哈尔滨</option>

    <option value="2">牡丹江</option>

  </optgroup>

  <optgroup label="河北省">

    <option value="1">石家庄</option>

    <option value="2">保定</option>

  </optgroup>

</select>

效果图

6.8、a标签和img标签

<a href="http://www.baidu.com"></a> 用来实现页面间跳转

<img src="图片路径" title="大美女" style="height: 200px;width: 200px;" alt="美女"/>


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div>

        <!-- href="跳转链接" 点击百度就会自动跳转至http://www.baidu.com -->

        <a href="http://www.baidu.com">百度</a>

    </div>

    <br>

    <div>

        <!-- 如果把img标签放到<a>标签内部，点击图片会跳转至a标签指定的链接中 -->

        <a href="http://www.cnblogs.com/ITOps/">

            <!-- src="图片位置" -->

            <!-- title="大美女"鼠标移动到图片上显示的文字 -->

            <!-- style="height: 200px;width: 200px;" 高度和宽度为200像素 -->

            <!-- alt="美女" 图片不存在时显示的文字 -->

            <img src="1.jpg" title="大美女" style="height: 200px;width: 200px;" alt="美女">

        </a>

    </div>

</body>

</html>

7.列表

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <!-- <ul>行首自动加上一个点 -->

    <ul>

        <li>昨夜西风凋碧树。独上高楼，望尽天涯路。</li>

        <li>为伊消的人憔悴，衣带渐宽终不悔。</li>

    </ul>

    <!-- <ol>行首自动加上数字序号 -->

    <ol>

        <li>昨夜西风凋碧树。独上高楼，望尽天涯路。</li>

        <li>为伊消的人憔悴，衣带渐宽终不悔。</li>

    </ol>

    <!-- <dl>里面必须有<dt>和<dd> -->

    <dl>

        <dt>技能</dt>

        <dd>熟悉Python</dd>

        <dd>熟练部署常见服务</dd>

    </dl>

</body>

</html>

效果图

8.表格<table>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <table border="1">

        <!-- <thead> 表头（列名）-->

        <thead>

            <tr>

                <th>主机名</th>

                <th>IP地址</th>

                <th>端口号</th>

            </tr>

        </thead>

        <!-- <tbody> 表内容）-->

        <tbody>

            <tr>

                <td>TN-1.188-www.ebrun.com</td>

                <td>192.168.1.188</td>

                <td>22</td>

            </tr>

            <tr>

                <td>TN-1.189-www.ebrun.com</td>

                <td>192.168.1.189</td>

                <td>22</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

效果图

标签里面还可以有属性去合并单元格

\<td colspan="2"\>xxx\</td\> 左右合并单元格

\<td rowspan="2"\>xxx\</td\> 上下合并单元格


<tr>

  <!--colspan="2" 一行占用左右两个列的表格 -->

  <td colspan="2">1</td>

  <td>2</td>

  <td>3</td>

</tr>

<tr>

<!--rowspan="2" 一列里面占用上下两个表格  -->

  <td rowspan="2">1</td>

  <td>2</td>

  <td>3</td>

  <td>4</td>

</tr>

<tr>

  <td>2</td>

  <td>3</td>

  <td>4</td>

</tr>

9.lable标签

用于点击文字，使得关联的标签获取光标

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <!-- lable标签用来实现点击文本框旁边的文字时自动将光标关联到文本框中 -->

    <!-- lable标签中必须有for与input中的id对应 -->

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

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

</body>

</html>

10.fieldest标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <fieldset>

        <legend>登录</legend>

        <!-- lable标签用来实现点击文本框旁边的文字时自动将光标关联到文本框中 -->

        <!-- lable标签中必须有for与input中的id对应 -->

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

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

    </fieldset>

</body>

</html>

效果图

五、css样式

1.直接在标签中写style样式

height，         高度 百分比

width，          宽度 像素，百分比

text-align:ceter, 水平方向居中

line-height，垂直方向根据标签高度

color、     字体颜色

font-size、 字体大小

font-weight 字体加粗


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="height: 48px;

    width: 80%;

    border: 1px solid red;

    font-size: 16px;

    text-align: center;

    line-height: 48px;

    font-weight: bold

    ">Hello.World</div>

</body>

</html>

2.写在head里面 style标签中写样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1{

            background-color: #dddddd;

            height: 38px;

            line-height: 38px;

        }

        .pg-header{

            width: 980px;

            margin: 0 auto;

        }

    </style>

</head>

<body style="margin: 0 auto">

    <!-- div标签内使用class="xxx"的方式去继承上面head中定义的style样式 -->

    <div class="c1">

        <!-- div标签内使用class="xxx"的方式去继承上面head中定义的style样式 -->

        <div class="pg-header">

            <div style="float: left">收藏本站</div>

            <div style="float: right">

                <a target="_blank" href="http://www.baidu.com">登录</a>

                <a target="_blank" href="http://www.baidu.com">注册</a>

            </div>

        </div>

    </div>

</body>

</html>

3.float

该属性的值指出了对象是否及如何浮动

none :　 默认值。对象不飘浮

left :　 文本流向对象的右边

right :　 文本流向对象的左边

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body style="margin: 0 auto">

    <!-- 不使用float属性时效果 -->

    <div style="background-color: #dddddd;height: 38px; line-height: 38px;">

        <div>收藏本站</div>

        <div>注册</div>

        <div style="clear: both"></div>

    </div>

    <br>

    <!-- 使用float属性效果 -->

    <div style="background-color: #dddddd;height: 38px; line-height: 38px;">

        <div style="float: left">收藏本站</div>

        <div style="float: right">注册</div>

        <div style="clear: both"></div>

    </div>

</body>

</html>

4.css注释符号

    <style>

        /*

        注释的内容

        */

    </style>

HTML入门篇的更多相关文章

  1. Membership三步曲之入门篇 - Membership基础示例

    Membership 三步曲之入门篇 - Membership基础示例 Membership三步曲之入门篇 -  Membership基础示例 Membership三步曲之进阶篇 -  深入剖析Pro ...

  2. spring boot(一)：入门篇

    构建微服务:Spring boot 入门篇 什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框 ...

  3. 1. web前端开发分享-css,js入门篇

    关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...

  4. 一个App完成入门篇（七）- 完成发现页面

    第七章是入门篇的倒数第二篇文章了,明天整个APP将进入收官. 本节教程主要要教会大家使用二维码扫描和用do_WebView组件加在html页面. 导入项目 do_WebView组件 扫描功能 自定义事 ...

  5. [原创]Linq to xml增删改查Linq 入门篇：分分钟带你遨游Linq to xml的世界

    本文原始作者博客 http://www.cnblogs.com/toutou Linq 入门篇(一):分分钟带你遨游linq to xml的世界 本文原创来自博客园 请叫我头头哥的博客, 请尊重版权, ...

  6. 转：OSGi 入门篇：模块层

    OSGi 入门篇:模块层 1 什么是模块化 模块层是OSGi框架中最基础的一部分,其中Java的模块化特性在这一层得到了很好的实现.但是这种实现与Java本身现有的一些模块化特性又有明显的不同. 本文 ...

  7. 转：OSGi 入门篇：生命周期层

    OSGi 入门篇:生命周期层 前言 生命周期层在OSGi框架中属于模块层上面的一层,它的运作是建立在模块层的功能之上的.生命周期层一个主要的功能就是让你能够从外部管理应用或者建立能够自我管理的应用(或 ...

  8. 【three.js详解之一】入门篇

    [three.js详解之一]入门篇   开场白 webGL可以让我们在canvas上实现3D效果.而three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的 ...

  9. [Maven]Apache Maven 入门篇

    作者:George Ma 上 写这个 maven 的入门篇是因为之前在一个开发者会的动手实验中发现挺多人对于 maven 不是那么了解,所以就有了这个想法.这个入门篇分上下两篇.本文着重动手,用 ma ...

  10. Unity3D大风暴之入门篇（海量教学视频版）

    智画互动开发团队 编   ISBN 978-7-121-22242-9 2014年2月出版 定价:79.00元 328页 16开 编辑推荐 长达800分钟的高清教学视频,手把手教会初学者 数个开发案例 ...

随机推荐

  1. Windows Phone 的 TextBox 的实现 PropertyChanged

    比如,View 的文本框 TextBox1 绑定了 ViewModel 的 Msg 属性, 当想把文本框输入的内容输入过程中实时更新到绑定的 Msg ,在Windows Phone 中是无法通过设置  ...

  2. MFC&Halcon之图片显示

    上一篇介绍了MFC调用Halcon功能的简单例子,在这个例子中,点击按钮会弹出一个窗口显示图片,但是这样显示并不美观,而且...于是我决定把显示窗口做在MFC的窗体内部. 具体的方案是:使用一个Pic ...

  3. Using Nuget in Visual Studio 2005 & 2008

    NuGet is a Visual Studio extension that makes it easy to install and update third-party libraries an ...

  4. 再次推荐一款逼真的HTML5下雪效果

    再次推荐一款逼真的下雪效果 效果图: 效果描述:之前推荐过一款下雪的jQuery插件之前的那款下降速度比较缓慢,今天推荐的这个下降速度比较快,大雪哇 使用方法:1.将index.html中的样式复制到 ...

  5. .NET多线程总结和实例介绍

    摘要:.Net提供了许多多线程编程工具,可能是因为太多了,所以掌握起来总是有一些头疼,我在这里讲讲我总结的一些多线程编程的经验,希望对大家有帮助. 1.多线程的总结 不需要传递参数,也不需要返回参数 ...

  6. 【夯实Mysql基础】记一次mysql语句的优化过程

    1. [事件起因] 今天在做项目的时候,发现提供给客户端的接口时间很慢,达到了2秒多,我第一时间,抓了接口,看了运行的sql,发现就是 2个sql慢,分别占了1秒多. 一个sql是 链接了5个表同时使 ...

  7. Javascript 创建对象方法的总结

    最近看了一下<Javascript高级程序设计(第三版)>,这本书很多人都推荐,我也再次郑重推荐一下.看过之后总得总结一下吧,于是我选了这么一个主题分享给大家. 使用Javascript创 ...

  8. 删掉SQL Server登录时登录名下拉列表框中的选项

    问题: 我以前创建了一个登录名如kpi,之后在"安全性-登录名" 里删掉了,但是每次登录时,登录名的下拉框中总是能显示登录名kpi,怎么把它删掉呢? 解决方案: 1).SQL Se ...

  9. #8.31课堂总结#JS基础

    一.Javascript能做些什么? 表单数据合法性验证 网页特效:使用DOM和CSS可以实现网页特效 交互式菜单:创作具有动态效果的交互式菜单,完全能够与flash制作的导航菜单相媲美 动态页面:使 ...

  10. SharePoint 2013 图文开发系列之创建内容类型

    SharePoint内容类型,是很有特色的,就好比发布新闻,同在一张列表里,可以由内容类型区分图片新闻.文字新闻等,顾名思义,就是在一张列表里发布不同类型的项目. 1.添加新项目,选择SharePoi ...