【遇见狂神说--HTML5学习笔记】

1.我的第一个网页





DOCTYPE html>

<html lang="en">

<head>
    
    
    <meta charset="UTF-8">
    <meta name="keywords" content="狂神说JAVA,西部开源.">
    <meta name="description" content="来这个地方学习JAVA.">

    

    <title>我的第一个网页title>
head>
<body>

Hello,World!

body>
html>

2.基本标签

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签title>
head>
<body>


<h1>一级标签h1>
<h2>二级标签h2>
<h3>三级标签h3>
<h4>四级标签h4>
<h5>五级标签h5>
<h6>六级标签h6>


<hr/>




<p>跑得快       跑得快p>
<p>一只没有耳朵     一只没有尾巴p>
<p>真奇怪      真奇怪p>



跑的快       跑得快<br/>
一只没有耳朵    一只没有尾巴<br/>
真奇怪    真奇怪 <br/>


<h1>字体样式标签h1>

粗体:  <strong>I love you!strong>
斜体:  <em>I love you!em>

<br/>


空              格
<br/>            <br/>

>

<br/>

<

<br/>

©版权所有狂神




body>
html>

3.图像标签

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习title>
head>
<body>

<img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300">


body>
html>

4.链接标签

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习title>
head>
<body>

<a href="top">顶部a>





<a href="1.我的第一个网页.html" target="_blank">点击跳转到我的第一个网页a>
<a href="https://wwww.baidu.com" target="_self">点击跳转到百度a>

<br/>
<a href="1.我的第一个网页.html"><img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300">图片转跳a>

<p><img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300">p>
<p><img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300">p>
<p><img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300">p>
<p><img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300">p>
<p><img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300">p>
<p><img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300">p>
<p><img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300">p>
<p><img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300">p>
<p><img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300">p>
<p><img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300">p>
<p><img src="../resource/image/1.png" alt="蔷薇图片" tiele="悬停文字" width="300" height="300">p>


<a href="#top">回到顶部a>


<a href="mailto:[email protected]">点击联系我邮件a>



body>
html>

5.列表

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习title>
head>
<body>


<ol>
    <li>Javali>
    <li>Pythonli>
    <li>Cli>
    <li>C++li>
ol>

<hr/>


<ul>
    <li>Javali>
    <li>Pythonli>
    <li>Cli>
    <li>C++li>
ul>


<dl>
    <dt>学科dt>

    <dd>Javadd>
    <dd>Pythondd>
    <dd>Cdd>
    <dd>C++dd>

    <dt>位置dt>
    <dd>重庆dd>
    <dd>上海dd>
    <dd>北京dd>
    <dd>天津dd>
dl>


body>
html>

6.表格

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习title>
head>
<body>



<table border="1px">
    <tr>

        <td colspan="4">1-1td>


        <td>1-4td>
    tr>

    <tr>
        <td rowspan="2">2-1td>

        <td>2-4td>
    tr>
table>

body>
html>

7.媒体元素

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频和音频学习title>
head>
<body>


<video src="../resource/1.mp4" controls autoplay>video>

<audio src="../resource/1.mp3" controls autoplay>audio>

body>
html>

8.页面结构

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构学习title>
head>
<body>

<header>
    <h2>网页头部h2>
header>

<section>
    <h2>网页主体h2>
section>

<footer>
    <h2>网页尾部h2>
footer>

body>
html>

9.内联框架

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








<iframe src="https://www.4399.com" name="hello" frameborder="0" width="1000px" height="800px">iframe>

<a href="https://www.7k7k.com" target="hello">点击跳转a>

body>
html>

10.学习表单

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册title>
head>
<body>

<h1>注册h1>




<form action="1.我的第一个网页.html" method="get">

    
    <p 名字><input type="text" name="username" value="请输入你的名字" readonly maxlength="8" size="30">p>
    <p 名字><input type="text" name="username" placeholder="请输入你的名字"  required maxlength="8" size="30">p>


    
    <p 密码><input type="password" name="pwd" hidden>p>




    <p>性别:p>
    <input type="radio" value="boy" name="sex" checked disabled><input type="radio" value="girl" name="sex">
    <p>爱好:
        <input type="checkbox" value="sleep" name="hoby">睡觉
        <input type="checkbox" value="code" name="hoby" checked>敲代码
        <input type="checkbox" value="chat" name="hoby">聊天
        <input type="checkbox" value="game" name="hoby">游戏
    p>


 <p>按钮
     <input type="button" neme="btn1" value="点击变长">
     <input type="image" src="../resource/image/1.png" height="100px" width="100px">
 p>






    <p>下拉框:
        <select name="列表名称" id="">
            <option value="选项的值">中国option>
            <option value="选项的值" selected>美国option>
            <option value="选项的值">瑞士option>
            <option value="选项的值">印度option>

        select>
   p>



    <p>反馈:
        <textarea name="textarea" id="12" cols="30" rows="10">文本内容textarea>

    p>



    <p>
        <input type="file">
        <input type="button" value="上传" name="upload">


    p>


    <p>邮件:
        <input type="email" name="emails">

    p>



    <P>URL:
        <input type="url" name="url
">
    P>



    <p>商品数量:
        <input type="number" name="num" max="10" min="0" step="2">

    p>



    <p>滑块:
        <input type="range" name="vioce" min="2" max="10" step="2">

    p>

    

    <p>搜索:
        <input type="search" name="search" >

    p>

    
    <p>你点我试试
        <label for="mark">label>
        <input type="text" id="mark">
    p>


    

    

    <p>自定义邮件
        <input type="text" pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$">

    p>

    
    <input type="submit">

    
    <input type="reset" value="清空表单">
form>


body>
html>

总结树状图 :

https://www.processon.com/view/link/6243cea6e0b34d0730e65e66

源自:

https://www.bilibili.com/video/BV1x4411V75C

你可能感兴趣的:(html5)