HTML简介
html： 超文本标记语言，是由标签和内容组合，由浏览器来来展示的一种语言
- html指的是超文本标记语言：Hyper Text Markkup Language
- html不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签（markup tag）
- html使用标记标签来描述网页
- html文档包含了html标签以及文本内容
- html文档也叫web页面
html后缀名.html 、.htm
html基本格式：
<html>
<head>
<title>网页名称</title>
</head>
<body>
网页内容
</body>
</html>
HTML网页的标签
标签是页面中最重要的组成部分，标签决定着页面中的内容是如何显示，怎么显示，在哪里显示等等
标签：
双标记标签：
内容
单标记标签：<img src="" … />
html中的所有的标签都是固有标签，不可写错。HTML自动拥有容错机制。
例如：
<hn align="left/center/right">标题标签， n：1--6之间的数字，数字越大，字体越小，默认加粗换行</hn>
<p align="left/center/right"> 段落标签</p>
<hr color="" align="left/center/right" size="" width=""/> 水平线标签
<br /> 换行标签
<center>居中显示</center>
<font color="" size="" face="">字体标签</font>
<s>删除标签</s>
<b>加粗标签</b>
<u>下划线</u>
<i>斜体</i>
<sub>下标</sub>
<sup>上标</sup>
<img src="图片路径" width="" height="" border="" />
<a href="" target="">超链接</a>
href:
网址 http://www.baidu.com
本地资源 页面、图片、视频、音频、
锚点连接 调到指定页面中的某个锚点处
1，使用a标签的name属性创建锚点
2，再超链接中的href中使用 #锚点名 即可
target：
_self 再当前的窗口打开 默认
_blank 再新窗口中打开
_parent 再框架的父窗口中打开
自定义名称 再指定的名称窗口中打开
<video src="" controls>音频</video>
<audio src="" controls>音频</audio>
<embed src="" controls>视频</embed>
<table>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
.......
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
.......
</tr>
.......
</table>
table : 表格的外部大标签
border : 表格边框
bordercolor ： 设置表格边框颜色
bgcolor : 设置表格背景颜色
background : 设置表格背景图片
frame ： 设置表格外边框样式 void above below hsides lhs rhs vsides box border
rules ： 设置表格内边框样式 none groups rows cols all
cellspacing : 设置表格内外边框之间的缝隙
cellpaddiing ： 设置单元格与内容之间的间距
align ： 设置表格在父标签中的水平位置
width: 设置表格的宽度
height： 设置表格的高度
tr : 表格中的行
bgcolor : 设置行背景颜色
background : 设置行背景图片
align ： 设置行中的内容再单元格的水平位置
height： 设置行的高度
th : 表格中的列，一般可以为表头,内容自动居中且加粗
td : 表格中的列
bgcolor : 设置单元格背景颜色
background : 设置单元格背景图片
align ： 设置单元格的内容的水平位置
width： 设置单元格的宽度
rowspan : 行合并
colspan : 列合并
<ul type="circle/square/desc">
<li>列表值</li>
<li>列表值</li>
.....
</ul>
<ol type="1/a/A/i/I" start="2">
<li>列表值</li>
<li>列表值</li>
......
</ol>
<dl>
<dd>列表项</dd>
<dd>列表项</dd>
.....
</dl>
表单
<form method="get/post" action="请求路径" enctype="multipart/form-data">
<input
type="text/radio/checkbox/password/tel/email/button/number/date/datetime_loal/hi dden/file/image/range/url/search/reset/submit"
name="" id="" class="" value="" checked placeholder=".."/>
<select name="" multipart>
<option selected value="">列值</option>
<option selected value="">列值</option>
</select>
<textarea name="" vlue="" rows="" cols="">多行文本输入框</textarea>
</form>
滚动标签
<marquee direction="left/right/up/down" scrollamount="15"
behavior="scroll/slide/alternate" loop="-1/数字"
οnmοuseοver="this.stop()"οnmοuseοut="this.start()">
我是一段滚动的文字
</marquee>
框架
<iframe name="" width="" height="" scrolliing="yes/no" frameborder="1/0">
一个单独的小窗口
</iframe>
**小案例二 form **
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form method="" action="" >
用户名：<input type="text" name="username" placeholder="请输入用户名" /><br/>
密码：<input type="password" name="pwd" placeholder="请输入密码" /> <br/>
姓名：<input type="text" value="李四" /> <br/>
性别：<input type="radio" name="sex" checked />男
<input type="radio" name="sex"/>女 <br/>
年龄：<input type="number" /><br/>
爱好：<input type="checkbox" name="hobby"/>篮球
<input type="checkbox" name="hobby"/>足球
<input type="checkbox" name="hobby"/>排球
<input type="checkbox" name="hobby"/>乒乓球 <br/>
电话：<input type="tel"/><br/>
邮箱：<input type="email" /> <br/>
主页：<input type="url"/> <br/>
头像：<input type="file"/><br/>
出生日期：<input type="date"/><br/>
订单日期：<input type="datetime-local"/><br/>
按钮： <input type="button" value="按钮"/><br/>
隐藏： <input type="hidden" name="h" value="你好"/> <br/>
搜索：<input type="search"/><br/>
进度条：<input type="range"/><br/>
省份： <select name="address" >
<option value="hns">河南省</option>
<option>河北省</option>
<option>湖南省</option>
<option selected>湖北省</option>
</select><br/>
备注： <textarea name="bz" rows="5" cols="15" ></textarea>
<br/>
<input type="reset"/>
<input type="submit" value="添加"/>
<input type="image" src="image/3.jpg"/>
</form>
</body>
</html>
小案例三
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> </head> <body>
<table align="center" width="600px" border="1">
<tr height="350px">
<td>
<iframe name="ifr" src="image/01.png" width="600px" height="350px" scrolling="no" frameborder="0">
</iframe>
</td>
</tr>
<tr height="100px">
<td>
<marquee onmouseover="this.stop()" onmouseout="this.start()">
<a href="image/01.png" target="ifr">
<img src="image/01.png" width="120" height="70"/>
</a>
<a href="image/02.jpg" target="ifr">
<img src="image/02.jpg" width="120" height="70"/>
</a>
<a href="image/03.jpg" target="ifr">
<img src="image/03.jpg" width="120" height="70"/>
</a>
<a href="image/04.jpg" target="ifr">
<img src="image/04.jpg" width="120" height="70"/>
</a>
<a href="image/05.jpg" target="ifr">
<img src="image/05.jpg" width="120" height="70"/>
</a>
<a href="image/06.jpg" target="ifr">
<img src="image/06.jpg" width="120" height="70"/>
</a>
</marquee>
</td>
</tr>
</table>
</body>
</html>
扫一扫
1635
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
