简介
HTML（超文本标记语言）是一门语言，所有的网页都是用HTML这门语言编写出来的
超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
标记语言：由标签构成的语言
HTML执行在浏览器上。HTML标签由浏览器来解析
HTML标签都是预定义好的，例如使用<img>展示图片
W3C标准：网页主要由三部分组成
结构：HTML
表现：CSS
行为：JS
快速入门
HTML标签参考手册
HTML标签不区分大小写，HTML语法比较松散
<html>
<head>
<title>html快速入门</title>
</head>
<body>
乾坤未定，你我皆是黑马
<font color="red"> 乾坤未定！！！</font>
</body>
HTML结构标签
<html>
<head>
<title>
<body>
基础标签
<font face="楷体" size="5" color="#ffc0cb"> 定义文本的字体，字体尺寸，字体颜色
<h1>~<h6> 定义标题，h1最大，h6最小
<hr> 定义一条水平线
<b> 定义粗体文本
<i> 定义斜体文本
<u> 定义文本下划线
<center> 定义文本居中
<p> 定义段落
<br> 定义折线
<hr> 定义水平线
转义字符
练习
<!DOCTYPE html><!--html5的标识-->
<html lang="en">
<head>
<meta charset="UTF-8"><!--定义字符集-->
<title>基础标签</title>
</head>
<body>
<h1>标题h1</h1>
<h2>标题h2</h2>
<h3>标题h3</h3>
<h4>标题h4</h4>
<h5>标题h5</h5>
<h6>标题h6</h6>
<hr>
<!--
html 表示颜色
1.英文单词：red,pink,blue.....
2.三原色：rgb(值1，值2，值3)
3.#值1值2值3（与rgb相似，16进制表示）
-->
<font face="楷体"size="5"color="#ffc0cb">html基础练习</font><!--过时了font标签用于控制文本样式，现在用CSS来控制-->
<hr>
超文本是一种组织信息的方式，<br>它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。
这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。
这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，<br>为人们查找，检索信息提供方便。
<hr>
<p>超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。</p>
<p>这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。</p>
<p>这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。</p>
<hr>
天王盖地虎<br>
<b>天王盖地虎</b>
<br>
<i>天王盖地虎</i>
<br>
<u>天王盖地虎</u>
<br>
<center>天王盖地虎</center><!---控制文字的显示位置，用CSS来完成-->
</body>
</html>
图片、音频和视频标签
<img> 定义图片
<audio> 定义音频
<video> 定义视频
img :定义图片
src:规定图片的URL
heigth:定义图像的高度
width:定义图像的宽度
audio:定义音频。支持音频格式：MP3,WAV,OGG
src:规定音频URL
controls:显示播放控件
video:定义视频。支持音频格式：MP4,WebM,OGG
src:规定视频的URL
controls:显示播放控件
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片、音频、视频</title>
</head>
<body>
<!--
资源路径：
大小：像素、百分比（占body）
-->
<img src="a.jpg" width="240" height="320">
<audio src="薛之谦%20-%20暧昧.mp3" controls="controls"></audio>
<video src="周杰伦-兰亭序(标清).mp4 " controls="controls" width="500"height="300"></video>
</body>
</html>
效果
超链接标签
<a> 定义超链接，用于链接另一个资源
href:指定访问资源的URL
target:指定打开资源的方式
_self:默认值
_blank:在空白页面打开
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接标签</title>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度</a>
</body>
</html>
列表标签
<ol> 定义有序列表
<ul>定义无序列表
<li>定义列表项
属性type:（一般不用，用CSS样式）
有序列表（order list）
1.咖啡
2.茶
3.牛奶
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
无序列表（unorder list）
咖啡
茶
牛奶
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
<hr>
<ol type="A">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
<hr>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>
</html>
表格
<table> 定义表格
<tr> 定义行
<td> 定义单元格
<th> 定义表头单元格
table:定义表格
border:规定表格边框厚度
width:规定表格的宽度
cellspacing:规定单元格之间的空白
tr:定义行
align:定义表格行的内容对齐方式
td:定义单元格
rowspan:规定单元格可横跨的行数（合并单元格）
colspan:规定单元格可横跨的列数（合并单元格）
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1" cellspacing="0"width="500px">
<tr align="center">
<th>序号</th>
<th>品牌log</th>
<th>品牌名称 </th>
<th>企业名称</th>
</tr>
<tr align="center">
<td>010</td>
<td><img src="优衣库.jpg" width="60" height="50"></td>
<td>优衣库</td>
<td>优衣库服装</td>
</tr>
<tr align="center">
<td>009</td>
<td><img src="小米.jpg" width="60" height="50"></td>
<td>小米</td>
<td>小米科技</td>
</tr>
<tr align="center">
<td>008</td>
<td><img src="三只松鼠.jpg" width="60" height="50"></td>
<td>三只松鼠</td>
<td>三只松鼠食品</td>
</tr>
</table>
</body>
</html>
布局标签
<div> 定义HTML文档中的一个区域部分，经常与CSS一起使用，用来布局网页
<span> 用于组合行内元素
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局</title>
</head>
<body>
<div>我是div</div><!--块级标签，占满一整行-->
<div>我是div</div>
<span>我是span</span><!--行内标签-->
<span>我是span</span>
</body>
</html>
表单
表单：在网页中主要负责数据采集功能，使用<form>标签定义表单
表单项：不同类型的input元素，下拉列表、文本域等
<form> 定义表单
<input> 定义表单项，通过type属性控制输入形式
<label> 为表单项定义标注
<select> 定义下拉列表
<option> 定义下拉列表的列表项
<textarea> 定义文本域
form:定义表单
action:规定当提交数据时向何处发送表单数据，URL
method:规定用于发送表单数据的方式
get:浏览器将数据直接附在表单的action URL之后，大小有限制
post:浏览器会将数据放到http请求信息中，大小无限制
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--
form
action:指定表单数据提交的URL
* 表单项数据要想被提交，则必须要指定其name属性
method:指定表单提交的方式
*1.get：默认值
*请求的参数会拼接在URL地址栏后面
*URL长度有限（意味着请求参数不能太长）
*2.post：
*请求参数会在http协议的请求体中
*请求参数无限制
-->
<form action="#" method="post">
<input type="text" name="username">
<input type="submit">
</form>
</body>
</html>
表单项
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单项</title>
</head>
<body>
<form action="#" method="post">
<input type="hidden"name="id" value="123">
<label for="username">用户名：</label>
<input type="text" name="username" id="username"><br>
<label for="password">密码：</label>
<input type="password" name="password" id="password"><br>
性别：
<input type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
<input type="radio" name="gender" value="2" id="female"><label for="female">女</label>
<br>
爱好：
<input type="checkbox" name="hobby" value="1"> 旅游
<input type="checkbox" name="hobby" value="2"> 电影
<input type="checkbox" name="hobby" value="3"> 游戏
<br>
头像：
<input type="file">
<br>
城市：
<select name="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">广西</option>
</select>
<br>
个人描述：
<textarea cols="20" rows="10" name="desc"></textarea>
<br>
<input type="submit" value="免费注册">
<input type="reset" value="重置">
<input type="button" value="一个按钮">
</form>
</body>
</html>
8889
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
