2024/11/4日工作总结
学习html基础知识：
基础标签：
点击查看代码
<!--html5 标识-->
<!DOCTYPE html>
<html lang="en">
<head>
<!--页面的字符集-->
<meta charset="UTF-8">
<title>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.英文单词
2.rgb(1,2,3)取值范围：0-255
3.#值1值2值3,范围：00-FF
-->
<font face="楷体" size="5" color="#ffc0cb">石家庄铁道大学</font>
<hr>
据中央气象台网站消息，未来三天，受强冷空气影响，长江中下游以北地区有大风降温天气，内蒙古东部、黑龙江、西藏南部等地有雨雪天气，<br>
关注对交通运输、农牧业生产等的影响，建议做好防寒保暖、设施农业和临时搭建物的防风加固；3日早晨至上午，华北、黄淮等地有雾霾天气，关注对交通和人体健康等的影响；海南岛2日晚至5日有较强降雨，注意防范降雨叠加效应。<br>
<p>
据中央气象台网站消息，未来三天，受强冷空气影响，长江中下游以北地区有大风降温天气，内蒙古东部、黑龙江、西藏南部等地有雨雪天气，
</p>
<p>
关注对交通运输、农牧业生产等的影响，建议做好防寒保暖、设施农业和临时搭建物的防风加固；3日早晨至上午，华北、黄淮等地有雾霾天气，关注对交通和人体健康等的影响；海南岛2日晚至5日有较强降雨，注意防范降雨叠加效应。
</p>
建议做好防寒保暖<br>
<b>建议做好防寒保暖</b><br>
<i>建议做好防寒保暖</i><br>
<u>建议做好防寒保暖</u><br>
<center>
<b>建议做好防寒保暖</b>
</center>
</body>
</html>
图片、音频、视频标签：
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
路径：
1.绝对路径：完整路径
2.相对路径:相对位置关系
xxx/html/02-图片音频视频.html
xxx/html/a.jpg
./a.jpg & a.jpg
xxx/html/02-图片音频视频.html
xxx/html/img/a.jpg
./img/a.jpg
xx/html/02-图片音频视频.html
xxx/img/a.jpg
../img/a.jpg
-->
<img src="../img/a.png" width="200" height="280">
<img src="https://ts3.cn.mm.bing.net/th?id=OIP-C.neU_lyZXZpazGKjZXAlGywHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" width="200" height="280">
<audio src="b.mp3" controls></audio>
<video src="c.mp4" controls width="500" height="300"></video>
</body>
</html>
超链接标签：
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
_self:当前页面打开（默认值）
_blank:新建空白页面
-->
<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>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
<ol type="a">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>
</html>
表格标签：
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" cellspacing="0" width="500">
<tr align="center">
<th>序号</th>
<th>logo</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<tr align="center">
<td>010</td>
<td><img src="../img/a.png" width="60" height="50"></td>
<td>三只松鼠</td>
<td>三只松鼠</td>
</tr>
<tr align="center">
<td>009</td>
<td><img src="../img/a.png" width="60" height="50"></td>
<td>优衣库</td>
<td>优衣库</td>
</tr>
<tr align="center">
<td>008</td>
<td><img src="../img/a.png" width="60" height="50"></td>
<td>小米</td>
<td>小米科技有限公司</td>
</tr>
</table>
<br>
<hr>
<br>
<table border="1" cellspacing="0" width="500">
<tr align="center">
<th colspan="2">logo</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<tr align="center">
<td>010</td>
<td><img src="../img/a.png" width="60" height="50"></td>
<td>三只松鼠</td>
<td>三只松鼠</td>
</tr>
<tr align="center">
<td rowspan="2">009</td>
<td><img src="../img/a.png" width="60" height="50"></td>
<td>优衣库</td>
<td>优衣库</td>
</tr>
<tr align="center">
<td>008</td>
<td><img src="../img/a.png" width="60" height="50"></td>
<td>小米</td>
</tr>
</table>
</body>
</html>
布局标签：
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<span>我是span</span>
<span>我是span</span>
</body>
</html>
表单标签：
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
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</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="text" 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">游戏
<input type="checkbox" name="hobby" value="4">烹饪
<br>
头像：
<input type="file"><br>
城市：
<select name="city">
<option value="beijing">北京</option>
<option>上海</option>
<option>广州</option>
</select>
<br>
<label>
个人描述：
<textarea cols="20" rows="5" name="desc"></textarea>
</label>
<br>
<br>
<input type="submit" value="免费注册">
<input type="reset" value="重置">
<input type="button" value="一个按钮">
</form>
</body>
</html>
浙公网安备 33010602011771号