1.HTML基础入门

1.HTML

网页基本结构

<!--DOCTYPE 告诉浏览器 我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!-- meta描述性标签 他用来描述我们网站的一些信息   -->
	<!--mata一般用来SEO-->
    <meta charset="UTF-8">
	<!-- keywords 关键字   -->
    <meta name="keywords" content="林宏程">
	<!--description 描述 -->
    <meta name="description" content="来自网络工程">
    <!-- 网页标题-->
    <title>Title</title>
</head>
<!--body代表网页主题-->
<body>
helloworld
</body>
</html>

网页基本标签

标题标签

<!--标题标签-->
<h1>1级标签</h1>
<h2>2级标签</h2>
<h3>3级标签</h3>
<h4>4级标签</h4>
<h5>5级标签</h5>
<h6>6级标签</h6>

段落标签

<p>跑得快</p>
<p>跑得慢</p>

换行标签

跑得快 <br/>
跑得按 <br>

水平线标签

<hr>

粗体 斜体

<h1>字体一样式</h1>
粗体: <strong>i love you</strong>
斜体: <em>i love you</em> <br>

特殊符号

空   格: <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格:

<br>
&gt;
<br>
&lt;
<br>
&copy;

<!--
特殊符号记忆方式
& ;
查百度
-->

图片标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--
img学习
    src 图片地址
    相对地址(推荐使用) 绝对地址
    ../ 上一级
    
    alt 当图片显示错误的时候说明文字
    title 悬停在图片上的文字
    width 宽度
    height 高度
-->
<img src="../resource/image/a.jp" alt="我的头像" title="悬停文字" width="300" height="300">
</body>
</html>

链接标签

在这里插入图片描述

页面间链接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--
a标签
href 必填写 表示要跳转到那个页面
target 表示窗口在哪里打开
        _blank在新标签中打开
        _self 在自己网页中打开
-->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a> <br>
<a href="http://www.baidu.com">百度</a>
<br>

<a href="1.我的第一个网页.html">
    <img src="../resource/image/a.jpg" alt="我的头像" title="悬停文字" width="300" height="300">
</a>
</body>
</html>
锚链接

4.链接标签.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>

<!--
锚链接
1.需要一个锚标记
2.跳转到标记
3.# 只能在a标签锚链接
#
-->
<a href="#top" name="down">回到顶部</a>
</body>
</html>

3.图像标签学习.html

也可以使用跳转到4.链接标签.html+#down 到锚链接down的位置

<a href="4.链接标签.html#down">到4.链接标签的down</a>
功能性链接
<!--
功能性链接
邮件链接:mailto:
QQ链接:去QQ推广里找
-->
<a href="mailto:1025993689@qq.com">点击联系我的qq邮箱</a>

行内元素和块元素

在这里插入图片描述

块元素
粗体: <strong>i love you</strong>
斜体: <em>i love you</em> <br>

在这里插入图片描述

这种写了2行表示出是一行的就是块元素

行内元素
<p>跑得快</p>
<p>跑得慢</p>

在这里插入图片描述

这种无论内容多少 都直接占一行的就是行内元素

列表

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表  orderlist
应用范围 试卷 问答
-->
<ol>
    <li>java</li>
    <li>python</li>
    <li>运维</li>
    <li>前端</li>
    <li>c/c++</li>
</ol>
<!--分割线-->
<hr>
<!--无序列表 unorderlist
应用范围 导航 侧边栏
-->
<ul>
    <li>java</li>
    <li>python</li>
    <li>运维</li>
    <li>前端</li>
    <li>c/c++</li>
</ul>

<!--自定义列表 definelist
dl 标签
dt 列表名称
dd 列表内容
应用范围 公司底部
-->
<dl>
    <dt>学科</dt>
    
    <dd>python</dd>
    <dd>运维</dd>
    <dd>前端</dd>

    <dt>联系方式</dt>

    <dd>手机</dd>
    <dd>qq</dd>
    <dd>邮箱</dd>
    
</dl>


</body>
</html>

表格

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格table
行 tr table rows
列 td table data
-->

<table border="1px">
    <tr>
<!--       colspan 跨列-->
        <td colspan="3">1-1</td>

    </tr>
    <tr>
        <!--       rowspan 跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
    </tr>
</table>
</body>
</html>

媒体元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
<!--音频和视频
src 资源路径
controls 控制条
autoplay 自动播放
-->

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

<audio src="../resource/audio/a.m4a" controls autoplay></audio>
</body>
</html>

页面结构分析

在这里插入图片描述

<!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>

iframe内联框架

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe内联框架</title>
</head>
<body>
<!--iframe内联框架
src 地址
width 宽度
height 高度
name
-->

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

<a href="1.我的第一个网页.html" target="hello">点击跳转</a>
</body>
</html>

表单

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action 表单提交的位置 可以退是网站 也可以是一个请求处理地址
method post get 提交方式
    get方式提交 我们可以在url中看到我们提交的信息 不安全 但高效
    post方式提交 比较安全 可以传输大文件
-->
<form action="1.我的第一个网页.html" method="post">
    <!--文本输入框 <input type="text"> -->
    <p>名字: <input type="text" name="username"></p>

    <!--密码框 <input type="password" name="pwd">-->
    <p>密码: <input type="password" name="pwd"></p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>

</form>


</body>
</html>

post提交

在这里插入图片描述

get提交

在这里插入图片描述

但是可以在header抓包看见

在这里插入图片描述

表单元素格式

在这里插入图片描述

文本框和单选框

radio必须有value是因为如果没有值 你选择的radio是空的 实际传值是value 不是后面的 男 女 那是没有意义的 和多选框必须有value是一个道理 传值传的是value 不是后面输入的字 那个只是让用户看的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action 表单提交的位置 可以退是网站 也可以是一个请求处理地址
method post get 提交方式
    get方式提交 我们可以在url中看到我们提交的信息 不安全 但高效
    post方式提交 比较安全 可以传输大文件

    所有输入的东西都必须有name 不然他没法传值!!!!!!!!
    所有输入的东西都必须有name 不然他没法传值!!!!!!!!
    所有输入的东西都必须有name 不然他没法传值!!!!!!!!

-->
<form action="1.我的第一个网页.html" method="get">
    <!--文本输入框
        <input type="text">
        value="用户名" 默认输入用户名
        maxlength="8" 最大输入8个字符
        size="30"     大小30
    -->
    <p>名字: <input type="text" name="username"></p>

    <!--密码框 <input type="password" name="pwd">-->
    <p>密码: <input type="password" name="pwd"></p>


    <!-- 单选框标签
            type="radio" 单选框
            value="boy" 单选框的值
            name="gender" 表示组 名字相同的时候为一个组 这样才是单选 不同组可以多选
            checked 默认选中
    -->
    <p>性别:
        <input type="radio" value="boy" name="gender" checked><input type="radio" value="girl" name="gender"></p>
    
    <p>
        <!--
            input type="submit" 提交按钮
            input type="reset"  重置按钮
            -->
        <input type="submit">
        <input type="reset">
    </p>

</form>


</body>
</html>

按钮和多选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action 表单提交的位置 可以退是网站 也可以是一个请求处理地址
method post get 提交方式
    get方式提交 我们可以在url中看到我们提交的信息 不安全 但高效
    post方式提交 比较安全 可以传输大文件

    所有输入的东西都必须有name 不然他没法传值!!!!!!!!
    所有输入的东西都必须有name 不然他没法传值!!!!!!!!
    所有输入的东西都必须有name 不然他没法传值!!!!!!!!

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



    <!--多选框
        checked 默认选中
    -->
    <p>爱好:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>

    <!--按钮-->
    <p>按钮:
        <!--
            input type="button" 普通按钮
            input type="image"  图片按钮
           -->
        <input type="button" name="btn1" value="点击变长">
        <!-- 图片按钮会提交 所以会跳转(大概-->
        <input type="image" src="../resource/image/a.jpg">

    </p>
    
    <p>
        <!--
            input type="submit" 提交按钮
            input type="reset"  重置按钮
            -->
        <input type="submit">
        <input type="reset">
    </p>

</form>


</body>
</html>

下拉框 文本域 文件域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action 表单提交的位置 可以退是网站 也可以是一个请求处理地址
method post get 提交方式
    get方式提交 我们可以在url中看到我们提交的信息 不安全 但高效
    post方式提交 比较安全 可以传输大文件

    所有输入的东西都必须有name 不然他没法传值!!!!!!!!
    所有输入的东西都必须有name 不然他没法传值!!!!!!!!
    所有输入的东西都必须有name 不然他没法传值!!!!!!!!

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

    <!--下拉框 列表框
    -->
    <p>下拉框:
        <!--
            selected 默认选中
            -->
        <select name="列表名称" id="">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth" selected>瑞士</option>
            <option value="india">印度</option>
        </select>
    </p>

    <!--文本域-->
    <p>文本域:
        <!--  cols 列数
              rows 行数
              -->
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>
    <!--文件域-->
    <p>文件域:
        <!--
            input type="file"  文件按钮
            name="files"
            -->
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

    <p>
        <!--
            input type="submit" 提交按钮
            input type="reset"  重置按钮
            -->
        <input type="submit">
        <input type="reset">
    </p>

</form>


</body>
</html>

搜索框 滑块和简单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action 表单提交的位置 可以退是网站 也可以是一个请求处理地址
method post get 提交方式
    get方式提交 我们可以在url中看到我们提交的信息 不安全 但高效
    post方式提交 比较安全 可以传输大文件

    所有输入的东西都必须有name 不然他没法传值!!!!!!!!
    所有输入的东西都必须有name 不然他没法传值!!!!!!!!
    所有输入的东西都必须有name 不然他没法传值!!!!!!!!

-->
<form action="1.我的第一个网页.html" method="get">
    
    <!--邮件功能-->
    <p>邮箱:
        <input type="email" name="email">
    </p>

    <!--地址功能-->
    <p>URL:
        <input type="url" name="url">
    </p>

    <!--数字-->
    <p>商品数量:
        <input type="number" name="number" max="100" min="0" step="10">
    </p>

    <!--滑块-->
    <p>音量:
        <!--
            input type="range"
            -->
        <input type="range" name="voice" min="0" max="100">
    </p>

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

    <p>
        <!--
            input type="submit" 提交按钮
            input type="reset"  重置按钮
            -->
        <input type="submit">
        <input type="reset">
    </p>

</form>


</body>
</html>

表单的应用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action 表单提交的位置 可以退是网站 也可以是一个请求处理地址
method post get 提交方式
    get方式提交 我们可以在url中看到我们提交的信息 不安全 但高效
    post方式提交 比较安全 可以传输大文件

    所有输入的东西都必须有name 不然他没法传值!!!!!!!!
    所有输入的东西都必须有name 不然他没法传值!!!!!!!!
    所有输入的东西都必须有name 不然他没法传值!!!!!!!!

-->
<form action="1.我的第一个网页.html" method="get">
    
    <!--readonly  只读-->
    <p>名字: <input type="text" name="username" value="林宏程" readonly></p>

    
    <!--hidden 隐藏input文本框-->
    <p>密码: <input type="password" name="pwd" hidden value="123456"></p>
    
	<!--disabled 禁用-->
    <input type="radio" value="girl" name="gender" disabled><!--增强鼠标可用范围-->
    <p>
        <!--
            点击到 label范围也可以输入文本
            for是指向那个标签 用id作为标记
            -->
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>
    
</form>


</body>
</html>

表单初级验证

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<form action="1.我的第一个网页.html" method="get">

    <!--文本域-->
    <p>文本域:
        <!--  cols 列数
              rows 行数
              placeholder 在开始输入的时候提示 请输入内容
              -->
        <textarea name="textarea" cols="50" rows="10" placeholder="请输入内容"></textarea>
    </p>


    <!--邮件功能-->
    <p>邮箱:
        <!--
            required 非空判断
            -->
        <input type="email" name="email" required>
    </p>

    <p>自定义邮箱:
        <input type="text" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>


</form>


</body>
</html>

总体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action 表单提交的位置 可以退是网站 也可以是一个请求处理地址
method post get 提交方式
    get方式提交 我们可以在url中看到我们提交的信息 不安全 但高效
    post方式提交 比较安全 可以传输大文件

    所有输入的东西都必须有name 不然他没法传值!!!!!!!!
    所有输入的东西都必须有name 不然他没法传值!!!!!!!!
    所有输入的东西都必须有name 不然他没法传值!!!!!!!!

-->
<form action="1.我的第一个网页.html" method="get">
    <!--文本输入框
        <input type="text">
        value="用户名" 默认输入用户名
        maxlength="8" 最大输入8个字符
        size="30"     大小30
        readonly  只读

    -->
    <p>名字: <input type="text" name="username" value="林宏程" readonly></p>

    <!--
        密码框 <input type="password" name="pwd">
        hidden 隐藏input文本框
        -->
    <p>密码: <input type="password" name="pwd" hidden value="123456"></p>


    <!-- 单选框标签
            type="radio" 单选框
            value="boy" 单选框的值
            name="gender" 表示组 名字相同的时候为一个组 这样才是单选 不同组可以多选
            checked 默认选中
            disabled 禁用
    -->
    <p>性别:
        <input type="radio" value="boy" name="gender" checked><input type="radio" value="girl" name="gender" disabled></p>


    <!--多选框
        checked 默认选中
    -->
    <p>爱好:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>

    <!--按钮-->
    <p>按钮:
        <!--
            input type="button" 普通按钮
            input type="image"  图片按钮
           -->
        <input type="button" name="btn1" value="点击变长">
        <!-- 图片按钮会提交 所以会跳转(大概-->
        <input type="image" src="../resource/image/a.jpg">

    </p>

    <!--下拉框 列表框
    -->
    <p>下拉框:
        <!--
            selected 默认选中
            -->
        <select name="列表名称" id="">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth" selected>瑞士</option>
            <option value="india">印度</option>
        </select>
    </p>

    <!--文本域-->
    <p>文本域:
        <!--  cols 列数
              rows 行数
              placeholder 在开始输入的时候提示 请输入内容
              -->
        <textarea name="textarea" cols="50" rows="10" placeholder="请输入内容"></textarea>
    </p>
    <!--文件域-->
    <p>文件域:
        <!--
            input type="file"  文件按钮
            name="files"
            -->
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

    <!--邮件功能-->
    <p>邮箱:
        <!--
            required 非空判断
            -->
        <input type="email" name="email" required>
    </p>

    <p>自定义邮箱:
        <input type="text" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>

    <!--地址功能-->
    <p>URL:
        <input type="url" name="url">
    </p>

    <!--数字-->
    <p>商品数量:
        <input type="number" name="number" max="100" min="0" step="10">
    </p>

    <!--滑块-->
    <p>音量:
        <!--
            input type="range"
            -->
        <input type="range" name="voice" min="0" max="100">
    </p>

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

    <!--增强鼠标可用范围-->
    <p>
        <!--
            点击到 label范围也可以输入文本
            for是指向那个标签 用id作为标记
            -->
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>


    <p>
        <!--
            input type="submit" 提交按钮
            input type="reset"  重置按钮
            -->
        <input type="submit">
        <input type="reset" disabled>
    </p>

</form>


</body>
</html>

HTML总结

https://www.processon.com/mindmap/5f64b9dbe0b34d080d576b74

在这里插入图片描述

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值