1. 技术文章
  2. HTML入门篇

HTML入门篇

由 流过昼夜 提交于 2019-12-25 21:27:16

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代码
html语言
charset
meta
input
meta标签
html文件
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!