【前端学习】 html学习笔记

这段时间在学前端,跟着一个up主的视频边学边敲,整理了一下笔记。

感觉学前端难的不是知识的深度,而是背单词,像在学英语一样……

废话不说,切入正题。

目录:

    • 一、html基本元素
    • 二、html列表元素
    • 三、html表单元素
    • 四、html表格元素
    • 五、html动画、过渡实例
    • 六、html嵌入视频
    • 七、html嵌入图片与创建分区响应图

一、html基本元素

      
      

<head>            
    <meta charset="UTF-8">       
    <title>Titletitle>         
head>

<body>
<a href="" target="_blank">徐大虾nba>         

<h1>我的第一个标题h1>        

<p>我的第一个段落p>        

<b>徐大虾nbb>                  
<strong>徐大虾nbstrong>

<i>徐大虾nbi>                  
<em>徐大虾nbem>

<u>徐大虾nbu>               

<s>徐大虾nbs>              
<del>徐大虾nbdel>

这个是<sup>上标sup>        

这个是<sub>下标sub>        

<br/>       
<hr/>       
body>

html>     

二、html列表元素







<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表元素title>
head>
<body>
    
<ol>
    <li>ali>
    <li>ali>
    <li>ali>
ol>
    
<ol reversed>         
    <li>ali>
    <li>ali>
    <li>ali>
ol>
    
<ol type="a">       
    <li>ali>
    <li>ali>
    <li>ali>
ol>
    
<ol type="I">       
    <li>ali>
    <li>ali>
    <li>ali>
ol>
    
<ol>
    <li>题目li>
    <ol type="a">             
        <li>ali>
        <li>ali>
        <li>ali>
        <li>ali>
    ol>
ol>
    
<ul>                 
    <li>ali>
    <li>ali>
    <li>ali>
    <li>ali>
ul>
    
body>
html>

三、html表单元素




<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>

<body>
<form>
    <input type="text">            
    <br/><br/>                 
    <input type="text" value="梅乃丹nb">       
    <br/><br/>
    <input type="text" placeholder="徐大虾nb">      
    <br/><br/>
    <input type="text" placeholder="徐大虾nb" maxlength="9">      
    <br/><br/>
    <input type="text" placeholder="徐大虾nb" size="50">       
    <br/><br/>
    <input type="text" value="徐大虾nb" readonly>            
    <br/><br/>
    <input type="password" placeholder="请输入密码">            
    <br/><br/>

    <textarea>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaatextarea>       
    <br/><br/>
    <textarea rows="20">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaatextarea>      
    <br/><br/>
form>

<form>
    <input type="button" value="按钮">         
    <button>按钮button>            
    <input type="submit" value="提交">        
    <br/><br/>

    <input type="range" min="-100" max="100">       
    <br/><br/>
    <input type="range" min="-100" max="100" step="20" value="-100">    
    <br/><br/>
    <input type="number" min="-100" max="100" value="0">      
    <br/><br/>
    <input type="checkbox">选择        
    <input type="radio">选择         
    <br/><br/>

    <input type="radio" name="a" checked>选择        
    <input type="radio" name="a">选择
    <input type="radio" name="a">选择
    <br/><br/>

    你最喜欢的水果是啥?
    <select>                             
        <option>苹果option>
        <option>香蕉option>
        <option>西瓜option>
    select>

    <input type="text" list="datalist">             
    <datalist id="datalist">
        <option>苹果option>
        <option>香蕉option>
        <option>西瓜option>
    datalist>
    <br/><br/>
form>

<form>
    <input type="email">
    <input type="tel">
    <input type="url">
    <input type="hidden">     
    <input type="date">       
    <input type="color">      
    <input type="search">     
    <br/><br/>
    <input type="image" src=".idea/mnd.jpg">               
    <input type="image" src=".idea/mnd.jpg" width="80">    
    <br/><br/>
    <input type="file">          
    <input type="file" multiple>            
form>
body>

html>

四、html表格元素




<html lang="en">
    
<head>
    <meta charset="UTF-8">
    <title>创建表格title>
head>

<body>
<table border="1px">          
    <thead>            
    <tr>
        <th>姓名th>         
        <th>学号th>
        <th>年级th>
    tr>
    thead>
    <tbody>
    <tr>
        <td>小明td>
        <td>001td>
        <td>大一td>
    tr>
    <tr>
        <td>小红td>
        <td>0000002td>
        <td>大三td>
    tr>
    <tr>
        <td>小张td>
        <td>0003td>
        <td>大二td>
    tr>
    tbody>
    <tfoot>                  
    <tr>
        <td>姓名td>
        <td>学号td>
        <td>年级td>
    tr>
    tfoot>
table>

<br>
<table border="1px">
    <tr>
        <th rowspan="2">aaaath>        
        <th>aaaath>
        <th>aaaath>
        <th>aaaath>
    tr>
    <tr>
        <td colspan="2">aaaatd>        
        <td>aaaatd>
    tr>
    <tr>
        <td>aaaatd>
        <td>aaaatd>
        <td>aaaatd>
        <td>aaaatd>
    tr>
table>
body>
html>



五、html动画、过渡实例


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html动画、过渡实例title>
    <style type="text/css">
        .div {
      
            text-align: center;
        }
        .img {
      
            margin-top: 130px;
            width: 600px;
            height: 600px;
        }
        .img:hover {
                          /*这种鼠标要跟着图片移动*/
            animation-name: img;
            animation-delay: 500ms;
            animation-fill-mode: forwards;
        }
        html:hover .img {
                     /*鼠标放在图片那里一次就行,但是离开浏览器界面图片还是会恢复*/
            animation-name: img;
            animation-delay: 500ms;
            animation-duration: 1s;
            animation-fill-mode: forwards;
        }
        @keyframes img {
      
            to {
      
                width: 100px;
                height: 100px;
                margin-top: 0px;
            }
        }
        p {
      
            font-family: 华文楷体;
            font-size: 40px;
            text-shadow: 10px 10px 2px black;
        }
        html:hover p {
      
            transition-delay: 500ms;
            transition-duration: 1s;
            font-family: 华文楷体;
            font-size: 10px;
            text-shadow: 10px 10px 2px black;
            opacity: 0;
        }
    style>
head>
<body>
<div class="div">             
    <img src="mnd.jpg" class="img">
    <p>梅乃丹nbp>
div>
body>
html>

六、html嵌入视频


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<video src="荒野乱斗.mp4" height="500px" autoplay>video>          
<video src="荒野乱斗.mp4" height="500px" controls preload="auto">video>      
<video src="荒野乱斗.mp4" height="500px" controls preload="metadata">video>       
<video src="荒野乱斗.mp4" height="500px" controls preload="metadata" poster=".idea/mnd.jpg">video>      

<video src="荒野乱斗.mp4" height="500px" controls preload="metadata">

    <source src="mnd.ogv" type="video/ogg">
video>

body>
html>

注意,视频文件要和html文件放在同个文件夹中!

七、html嵌入图片与创建分区响应图


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建图片title>
head>
<body>
<img src=".idea/皮卡丘.jpg">
<img src=".idea/皮卡丘.jpg" width="128px" height="200px">        
<img src=".idea/皮卡丘.jpg" width="128px" alt="备用按钮">       



<a>

a>
body>
html>

你可能感兴趣的:(前端)