HTML入门篇
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>
<!--   空格 -->
Hello World
<!-- br 换行 -->
<br>
Hello Python
<br>
<!-- < 小于号 -->
1 < 2
<br>
<!-- < 大于号 -->
2 > 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>