HTML制作网页
基础标签
<html>
<head>
<title>html 快速入门</title>
</head>
<body>
<font color="red"> 乾坤未定，你我皆是黑马~</font>
</boby>
</html>
不区分大小写
<hr>分隔线
<br>分行
<p>分段
<b>加粗
<u>下划线
<i>倾斜
<center>居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>谈恋爱</h1>
<h2>谈恋爱</h2>
<h3>谈恋爱</h3>
<hr>
<font face="楷体“size="5 color="red">感情</font>
<hr>
我爱你呀<br></br>我不喜欢你
<p>
好的
</p>
<hr>
我喜欢你<br>
<b>我喜欢你</b><br>
<i>我喜欢你</i><br>
<u>我喜欢你</u><br>
</body>
</html>
图片音频视频标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title </title>
</head>
<body>
<!--
资源路径:
1.绝对路径：完整路径
2.相对路径：相对位置关系
xxx/html/html.html
xxx/html/a.jpg
./a.jpg & a.jpg(./可省略)
xxx/html/html.html
xxx/html/img/a.jpg(加一个img目录)
./img/a.jpg
../(退一级)
尺寸单位
px:像素
百分比
-->
<img src="a.jpg"width="300"height="400">
<img src="网页图片地址">
<audio src="b.mp3"controls></audio>
<video src="c.mp4"controls></video>
</body>
</html>
超链接表格列表布局表单表单项标签
超链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title </title>
</head>
<body>
<a href="https://www.itcast.cn"target="_blank">点我有惊喜</a>
</body>
</html>
列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title </title>
</head>
<body>
<ol type="A">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
<ul type="circle">
<!--
可用type属性更改
-->
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>
</html>
表格标签
建立一个img文件存放图片
border="1"cellpadding="0"去空白
align="center"居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title </title>
</head>
<body>
<table border="1"cellpadding="0">
<th>序号</th>
<th>品牌</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<tr align="center">
<td>010</td>
<td><img src"../img/三只松鼠.png"width="60"height="50"</td>
<td>三只松鼠</td>
<td>三只松鼠</td>
</tr>
<tr align="center">
<td>009</td>
<td><img src"../img/优衣库.png"width="60"height="50"</td>
<td>优衣库</td>
<td>优衣库</td>
</tr>
<tr align="center">
<td>008</td>
<td><img src"../img/小米.png"width="60"height="50"</td>
<td>小米</td>
<td>小米</td>
</tr>
</table>
</body>
</html>
空格：可做课表
colspan
rowspan
布局标签
表单标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title </title>
</head>
<body>
<!--
form:
action:指定表单数据提交的URL
想被提交必先指定name属性
method:指定提交方式
1.get:默认值
请求参数会拼接再URL后边
长度有限制4kb
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 </title>
</head>
<body>
<form action="#" method="post">
<input type="hidden"name="id"value="123">
<label for="username">用户名:</label>
<input type="text"name="username"><br>
<label for="password">密码:</label>
<input type="password"name="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>北京</option>
<option>上海</option>
<option>广州</option>
<!--
显示英文
<option value="shanghai">上海</option>
-->
</select>
<br>
个人描述:
<textarea cols="20"rows="5"></textarea>
<br>
<br>
<input type="submit"value="免费注册">
<input type="reset"value="重置">
<input type="button"value="一个按钮">
</form>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
