HTML简单介绍
1、html简介
HTML （ Hyper Text Markup Language ）是一种超文本标记语言，是用来对网页文档信息进行格式化展示的一门语言。描述浏览器所需的信息，而主体则包括头部（head）和主体（body）两大部分。简而言之：HTML是一种专门对网页信息进行规范化展示的语言。html后缀：.html or .htm 可通过浏览器直接运行推荐Google、火狐)
HTML语言被称为互联网的三大基石之一
三大基石简介：
HTTP协议：解决了服务器和浏览器之间数据如何传送、传送格式的问题！实现了分布式的信息共享。
URL统一资源定位符：解决了众多服务器中资源定位问题。从而让浏览器可以访问不同的服务器资源，实现了全球信息的精确定位。
HTML语言：解决了数据在浏览器中如何丰富多彩的展示，及如何合理标示信息的问题。
HTML规范
1：一个html文件有开始标签和结束标签<html>标签对</html>
2：html包含两部分
1)<head>设置相关信息</head>
2)<body>主体，用于显示内容</body>
3)标签成对出现
4)不区分大小写
5)有些标签不需要结束标签 <br/>换行 <hr/>一条横线
2、html中常用标签
文字标签和注释标签
文字标签:修改文字的样式：-<font></font>
属性：
-size:文字的大小 取值范围1-7
-color:文字的颜色表示方式:英文单词，十六进制数#ffff)
– 通过取色工具去获取相关颜色
注释标签： -html注释 <!–注释内容–>
3、标题标签、水平线标签和特殊字符
标题标签
-<h1></h1> 1-6级标题标签 依次变小,自动换行
水平线标签：-<hr/>
属性：
size:水平线粗细 取值范围 1-7
color:颜色
-代码：<hr size=”5″ color=”blue”/>
特殊字符
- 在网页上显示这样的内容 <html>:网页的开始
- 这是就需要特殊字符进行转义： < < > > 空格: & ：
&
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!-- meta：头标签 charset：编码格式--> 5 <meta charset="utf-8" /> 6 <!-- 标题标签内容会显示在浏览器的头标里--> 7 <title>标题标签、水平线标签和特殊字符</title> 8 9 <!--做搜索引擎优化的三个标签--> 10 <meta name="author" content="游戏解说柚子" /> 11 <meta name="keywords" content="girl,CF"/> 12 <meta name="description" content="游戏解说主播"/> 13 </head> 14 <body> 15 16 <!--被注释的内容--> 17 <h1>标题一</h1> 18 <h2>标题二</h2> 19 <h3>标题三</h3> 20 <h6>标题六</h6> 21 <!--演示水平线--> 22 <hr size="3" color="blue"/> 23 <!--演示特殊字符--> 24 <html>:是网页的 开始 25 </body> 26 </html>
4、列表标签
– 显示效果
信息工程学院
软件工程
计算机科学与技术
网络工程
<dl> </dl>:表示列表的范围
在dl里面 <dt> </dt>：上层内容
在dl里面 <dd> </dd>：下层内容
<table> <dl>信息工程学院 <dd>软件工程</dd> <dd>网络工程</dd> </dl> </table>
有序列表：
<ol> </ol>:有序列表的范围
- 属性 type: 设置排序方式1默认) a、 i
在ol标签里面<li>具体内容</li>
无序列表
<ul></ul>:无序列表的范围
- 属性:type:空心圆circle、实心圆disc、实心方块square、默认disc
在ul里面<li>具体内容</li>
<!--有序列表--> <ol type="1"> <li>HTML</li> <li>CSS</li> <li>JS</li> </ol> <!--无序列表--> <ul type="square"> <li>Java</li> <li>JavaScript</li> <li>Python</li> </ul>
5、图像标签
<img src=”img路径%20/”>
-src:图片的路径
-属性:width、height
-border:设置图片的边框
-alt:图片的描述信息，当图片加载失败的时候会显示alt中的内容
-title：当鼠标滑动到图片上显示的文本
<img src="img/5ba9901fa5.jpg"/ title="迪丽热巴" alt="迪丽热巴"><br /><hr /> <img src="img/5ba9948101fa5.jpg"/ border="12" width="500px" height="400px" title="迪丽热巴" alt="迪丽热巴">
6、路径的介绍
绝对路径
– D:JavaWebhtml_codeImg1P216130321-1.jpg
– http://www.baidu.come.jpg
相对路径
– 同个文件夹下读取
7、超链接标签
链接资源
– <a href=”要链接的资源路径”> 显示在页面上的内容</a>
target:设置打开的方式，默认当前页面
— _blank：新窗口打开
— _self:当前页面[默认]
– 当超链接不需要任何的地址 在href加上#
- <a href=”#”>超链接3</a>
定位资源
如果想要定位资源:定义一个位置
<a name=”top”>顶部</a>
<a href=”#top”>回到顶部</a>
原样输出:<pre> </pre>
1 <!--超链接标签--> 2 <a name="top">顶部在这</a><br/><hr/> 3 <a href="test.html" target="_blank">超链接1</a><br/> 4 <!--href参数为空 网页的存储路径--> 5 <a href="">超链接2</a><br/> 6 <!--href参数# 没有连接任何地址--> 7 <a href="#">超链接3</a><hr/> 8 9 <!-- 定位资源 --> 10 <pre> 11 很多现实的文本加载进去就看的出效果回到顶部的效果 12 </pre> 13 <a href="#top">回到顶部</a>
8、表格标签:对数据进行格式化，使数据更加清晰
<table></table>：表示表格的范围
– border：表格线
– bordercolor：表格线的颜色
– cellspacing：单元格的直接距离
– width：表格的宽度
– height：表格的高度
在table里面<tr></tr>：定义行
– 设置对齐方式 align：left center right
在tr里面<td></td>：定义单元格
– 设置显示方式 align：left center right
th 也表示单元格：居中且加粗
合并单元格
– rowspan:跨行
– colspan:跨列
<!--表格--> <table border="1" bordercolor="blue" cellspacing="0" width="150" height="100"> <caption>武侠小说</caption> <tr align="center"> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>东方不败</td> <td>男</td> <td>20</td> </tr> <tr> <td>岳不群</td> <td>男</td> <td>21</td> </tr>
1 <body> 2 <!-- 单元格跨列 --> 3 <table border="1" bordercolor="red" cellspacing="0" width="200"> 4 <tr> 5 <td colspan="3" align="center">人员信息</td> 6 </tr> 7 <tr> 8 <td>黄蓉</td> 9 <td>女</td> 10 <td>18</td> 11 </tr> 12 <tr> 13 <td>迪丽热巴</td> 14 <td>女</td> 15 <td>18</td> 16 </tr> 17 <tr> 18 <td>小龙女</td> 19 <td>女</td> 20 <td>18</td> 21 </tr> 22 </table> 23 24 <hr/> 25 <!-- 单元格跨行 --> 26 <table border="1" bordercolor="red" cellspacing="0" width="200"> 27 <tr> 28 <td colspan="3" align="center">人员信息</td> 29 </tr> 30 <tr> 31 <td>黄蓉</td> 32 <td>女</td> 33 <td rowspan="3">照片</td> 34 </tr> 35 <tr> 36 <td>迪丽热巴</td> 37 <td>女</td> 38 39 </tr> 40 <tr> 41 <td>小龙女</td> 42 <td>女</td> 43 </tr> 44 </table> 45 </body>
View Code
9、表单标签
<form></form>:定义一个表单的范围
属性
- action:提交到的地址默认当前页面)
- method:表单的提交方式
-常用的两种方式 get和post 默认是get
get和post区别:
1，get请求地址栏会携带提交的数据，post不会携带请求体里面。)
2，get请求安全级别较低，post较高
3，get具有请求数据大小的限制，post没有限制
– enctype:一般请求下不需这个属性，文件上传时需要这个属性值
输入项:可输入内容或者选择内容的部分
– 大部分输入项:<input type=”输入项内容”/>
普通输入项:<input type=”text”/>
密码输入项:<input type=”password”/>
属性值：placeholder【H5的新特性】、name、value等值
– placeholder 属性规定描述文本区域预期值的简短提示。该提示会在文本区域为空时显示，当字段获得焦点时消失。
登录:<input type="text" name="user" placeholder="账户/邮箱/手机号" /><br /> 密码:<input type="text" name="user" placeholder="请输入密码" />
单选输入项：<input type=”radio”/>
– 有一个name属性
– name属性值必须相同
– 必须有一个value值
实现默认选中的属性
– checked=”checked”【默认选择男性】
性别:<input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女
复选输入项:<input type=”checkbox”/>
– 有一个name属性
– name属性值必须相同
– 必须有一个value值
实现默认选中的属性
– checked=”checked”
爱好:<input type="checkbox" name="hobby" value="ping-pong" checked="checked" />乒乓球 <input type="checkbox" name="hobby" value="basketball" />篮球 <input type="checkbox" name="hobby" value="badminton" />羽毛球
下拉输入项：
<select name=”birth”>
<option value=”0″>请选择</option>
<option value=”1990″>1990</option>
<option value=”1991″>1991</option>
</select>
默认选择属性
— selected=”selected”
出生年月 <select name="birth"> <option value="0">请选择</option> <option value="1990">1990</option> <option value="1991">1991</option> <option value="1992">1992</option> <option value="1993">1993</option> <option value="1994">1994</option> <option value="1995">1995</option> </select>
文本域
<textarea cols=”20″ rows=”5″></textarea>
属性： – cols宽 rows 高
隐藏项不会显示在页面上，存在于html代码里)
<input type=”hidden”/>
自我描述:<br /><textarea cols="30" rows="10" name="text" placeholder="请开始你的表演" ></textarea>
提交按钮
<input type=”submit”/> 默认
<input type=”submit” value=”注册”/>
重置按钮回到输入初始状态)
<input type=”reset”/>
<input type=”reset”/ value=”撤销”>
普通按钮js点击事件用的比较多)
<input type=”button” value=”普通按钮”/>
图片提交
<input type=”image” src=”图片路径”/>
<input type=”image” src=”imgesug.png”/>
文件输入项:
<input type=”file”/> 文件上传
表单的整合小案例：
效果图：
10、其他常用标签的使用
p:段落标签比 br 标签多换一行
b:加粗
s:删除线
u:下划线
i:斜体
pre:原样输出
sub:上标
sup:下标
=== css经常用===
div:自动换行
span:下一行显示
1 <b>天之道</b> 2 <u>损有余而补不足</u> 3 <i>是故虚胜实</i> 4 <s>不足胜有余</s> 5 <hr /> 6 <pre> 7 开心就是笑，幸福就是开心的笑。开心就是笑，幸福就是开心的笑。开心就是笑，幸福就是开心的笑。开心就是笑，幸福就是开心的笑。 8 开心就是笑，幸福就是开心的笑。开心就是笑，幸福就是开心的笑。开心就是笑，幸福就是开心的笑。 9 开心就是笑，幸福就是开心的笑。开心就是笑，幸福就是开心的笑。开心就是笑，幸福就是开心的笑。 10 开心就是笑，幸福就是开心的笑。 11 </pre> 12 <hr /> 13 4<sup>200</sup> 14 <br /> 15 3<sub>100</sub> 16 <hr /> 17 18 <div>这是div1</div> 19 <div>这是div2</div> 20 <div>这是div3</div> 21 <hr /> 22 23 <span>这是span1</span> 24 <span>这是span2</span> 25 <span>这是span3</span> 26 <hr />
View Code
11、html头标签的使用
html两部分组成 head和body
在head里面的标签
title:表示在标签上显示的内容
<meta> 标签:设置页面的一些相关内容
- <meta http-equiv=”refre<sh” content=”3;url=01-hello.html” />
<base>:设置超链接的基本设置
- <base target=”_blank” />//统一设置超链接的打开方式
link标签:引入外部文件
- 引入css等文件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <!--<meta http-equiv="refre<sh" content="3;url=01-hello.html" />--> 6 <title>头标签的演示</title> 7 <base target="_blank" /> 8 </head> 9 <body> 10 <h1>头标签</h1> 11 <a href="01-hello.html">超链接1</a> 12 <a href="01-hello.html">超链接2</a> 13 <a href="01-hello.html">超链接3</a> 14 </body> 15 </html>
12、框架标签
<frameset>
– rows：按行进行划分
-<frameset rows=”80″,*”>
– cols：按列进行划分
-<frameset cols=”80″,*”>
<frame>
- 具体显示的页面
** <frame name=”lower_left” src=”b.html”>
frameborder=“yes”：是否显示框线,no不显示框线
frame：是 frameset分隔的一部分
noresize:使用者无法调节页面的大小
scrolling:是否有滚动条 yes有 no没有
注意：使用框架标签必须要把body主体部分去掉
<!--code解析--> <frameset rows="80,*"> // 把页面划分上下两部分 <frame name="top" src="top.html"> // 上面页面 <frameset cols="150,*"> // 把下面部分划分成左右两部分 <frame name="lower_left" src="b.html"> // 左面 <frame name="lower_right" src="c.html"> // 右面 </frameset> </frameset>
案例效果图：
HTML常用标签差不多就这样了，具体参照w3school进行详细的学习。剩下的就是多练习多操作增加熟练度。