web开发基础（了解）

打开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">
  账&nbsp;号 <input type="text" name="用户名" placeholder="邮箱/手机号/用户名"></br>
  密&nbsp;码 <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>

文字点击事件：

web开发基础（了解）

猜你喜欢