打开pycharm,new一个HTML的文件
标签知识点:
h:标题标签
p:段落标签
a: href="https://www.baidu.com/"链接标签 属性值为#的时候是自己链接到自己,页面不发生变化
img标签:src里面要填写图片路径(重要),alt里面要填写图片加载不出来的提示
table:表格标签 tr表示行,td表示列 ,单元格合并 colspan跨列合并,rowspan跨行合并 表头caption
下方代码为练习代码:展示效果如下图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my_first_web_study</title>
</head>
<body>
<!--notes:ctrl+/-->
<h1>my_first_h1</h1>
<p>I like <font color="red" size="5"><strong><i>yuanyu</i></strong></font> very much</p>
<a href="https://www.baidu.com/">link to baidu</a>
<!--#号表示自己跳到自己,就不会有变化-->
<a href="#">my to my</a>
<img src="../phones/1.jpeg" alt="加载失败" title="爱情万岁" align="left" width="200">
<table border="1" width="40%" align="center" bgcolor="blue">
<caption>学生表</caption>
<tr align="center">
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr align="center">
<td>程鑫</td>
<td colspan="2">25&女</td>
<!-- <td>女</td>-->
</tr>
<tr align="center">
<td rowspan="2" align="center" bgcolor="red">袁宇&袁婷婷</td>
<td>26</td>
<td>男</td>
</tr>
<tr align="center">
<!-- <td>袁婷婷</td>-->
<td>19</td>
<td>女</td>
</tr>
</table>
</body>
</html>
展示效果:
列表标签:
有序列表:ol
无序列表:ul
下拉框:select
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web study</title>
</head>
<body>
<!--type disc默认为实心圆点,square为正方式 circle为空心圆点-->
<ul type="circle">
<li>app测试</li>
<li>web测试</li>
<li>小程序测试</li>
</ul>
<ol type="i">
<li>app测试</li>
<li>web测试</li>
<li>小程序测试</li>
</ol>
<select>
<option>功能测试</option>
<option>接口测试</option>
<option>自动化测试</option>
</select>
</body>
</html>
展示效果:
表单标签:form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>first form</title>
</head>
<body>
<form action="https://www.jd.com" method="post">
账 号 <input type="text" name="用户名" placeholder="邮箱/手机号/用户名"></br>
密 码 <input type="password" name="密码" placeholder="请输入密码"></br>
<input type="submit" value="点击登录">
</form>
</body>
</html>
效果展示:
frameset:frameset和body是不能同时使用的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>frameset</title>
</head>
<frameset rows="25%,25%,50%">
<frame src="study_day1.html">
<frame src="study_day2.html">
<frame src="study_form.html">
</frameset>
</html>
效果展示:
CSS选择器:有多个标签分类去展示效果,这时候加上class选择器,可以对同一分类进行效果编辑
class:用.class属性去修饰
id:用#id属性值去修饰
效果展示:
鼠标动作:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>keyboard click</title>
<style>
a:link{color:gray; background-color:yellow}
a:visited{color:black}
a:hover{color:red}
a:active{color:blue}
</style>
</head>
<body>
<!--link:访问之前-->
<!--visited:访问之后的-->
<!--hover:鼠标悬浮时-->
<!--active:鼠标按住不动-->
<a href="#">my own</a>
</body>
</html>
javaScript:同样的数据很多,可以写在js里面再进行引用
引用前:
引用后:
js:
利用函数,实现照片的鼠标事件:鼠标放在照片上,图片就放大,鼠标移出图片,照片就缩小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>imgchange</title>
<script>
function big(){
var img2=document.getElementById("img1");
img2.style.height="300px";
img2.style.width="300px";
}
function small(){
var img2 =document.getElementById("img1");
img2.style.height="100px";
img2.style.width="100px";
}
</script>
</head>
<body>
<img onmousemove="big()" onmouseout="small()" id="img1" src="../phones/1.jpeg" alt="加载失败">
</body>
</html>
文字点击事件: