weijie1215
随笔 - 33,  文章 - 0,  评论 - 0,  阅读 - 8272
html学习

HTML

1网页的基本信息

注释

<!-- 这是html的注释 -->

基本结构

<DOCTYPE> 告诉浏览器我们要是用什么规范

<!DOCTYPE html>
    <html>
        <head>
            <!--meta,描述性标签，用来描述网页的一些信息 -->
            <!--一般用来做SEO -->
            <meta charset="UTF-8">
            <meta name="description" content="这是一个网站">
            <!-- title 网页标签  -->
            <title>Title</title>
        </head>
        <body>
        
        </body>
    </html>

2网页的基本标签

###### 

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <!-- 标题标签 -->
            <h1>一级标签</h1>
            <h2>二级标签</h2>
            <h3>三级标签</h3>
            <h4>四级</h4>
            <h5>五级</h5>
            <h6>六级</h6>
            <!-- 段落标签 -->
            <p></p>
            <!-- 换行标签 -->
            <br/>
            <!--水平线标签 -->
            <hr/>
            <!--字体样式标签 -->
            <strong>粗体标签</strong>
            <em>斜体标签</em>
            <!--特殊符号 格式：&名字;  -->
            空格&nbsp;空格
            &gt;大于号
            &lt;小于号
        </body>
    </html>

3图像标签

<img src="" alt="" title="">

src图片路径

1.相对地址

../ 上一级目录

2.绝对地址

 

alt替换图片或文字

title 鼠标停在图片上显示文字

4链接标签

  1. 页面间链接

    <a href="path" target="目标窗口位置" ></a>

    target="_blank" 会打开一个新的网页

    target="_self" 在当前页面面打开

  2. 锚链接

    1）需要一个锚标记

    2）跳转到标记

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
           <!-- 用name做标记-->
            <a name="top">顶部</a>
            <!--省略很多行内容 -->
            
            <a href="#top">回到顶部</a>
            
        </body>
    </html>

  1. 功能性链接

    邮件链接

    <!DOCTYPE html>
        <html>
            <head>
                <meta charset="UTF-8">
                <title>Title</title>
            </head>
            <body>
               <!--邮件链接-->
                <a href="mailto:111111@qq.com">点击联系我</a>
               <!--qq链接 qq推广 -->
                
            </body>
        </html>

     

5行内元素 块元素

行内元素

内容撑开宽度 左右都是行内元素的可以排在一行内

块元素

无论内容有多少 元素独占一行

6列表

有序列表 <ol></ol>

无序列表<ul></ul>

自定义列表

<dl><!-- 标签 -->
    <dt></dt><!--列表名称 -->
    <dd></dd><!--列表内容 -->
</dl>

7表格标签

基本结构

单元格

行

列

跨行

跨列

<table> <!--表格标签 -->
    <tr><!--行标签 -->
        <td></td><!--列标签 -->
        <td></td>
        <td></td>
    </tr>
    <tr>
        <!--colspan跨列 -->
        <td colspan="3"></td>
        
    </tr>
    <tr>
        <!--rowspan跨行 -->
        <td rowspan="2"> </td>
        <td></td>
        <td></td>
    </tr>
</table>

8视频 音频

 

视频 <video src="../../123.mp4" controls autoplay></video>

 

音频<audio src="" controls autoplay></audio>

src资源路径

controls 进度条

autoplay 自动播放 （打开网页 自动播放）

9页面结构分析

元素名描述
header 标题头部区域内容
footer 标记脚步区域的内容
section web页面中一块独立区域
article 独立的文章内容
aside 独立内容或应用（常用于侧边栏）
nav 导航类辅助内容

10 iframe内联框架

在一个网页中 加入另一个网页

11<iframe src="path" name="mainFrame" ></iframe>

src 引用页面地址

name 框架标识名

11表单

11<form method="" action=""></form>

method 规定如何发送表单数据 常用：post get

action 表示向何处发送表单数据 可以是网站或是请求处理地址

1） form的各种type

属性说明
type 指定元素的类型：text、password、checkbox（多选框）、radio（单选框）、submit、reset、file、hidden、image、email、 url、search（搜索框）、selecct（下拉框）、range（滑块）
name 指定表单元素的名称
value 元素的初始值。type为radio时必须制定一个值
size 指定表单元素的初始宽度。当type为text或password时 表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength type为text或password时 输入的最大字符数
checked type为radio或checkbox时 指定按钮是否被选中 
<form method="post" action="12566.html">
    <p>
        名字<input type="text" name="username" >
    </p>
    <p>
        密码<input type="password" name="pwd">
    </p>
    <!--单选框要把选项放在同一组里面  也就是name值相同 -->
    <p>性别
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>
     <!--多选框 checkbox -->
     <p>爱好
        <input type="checkbox" value="sleep" name="hobby" >睡觉
        <input type="checkbox" value="code" name="hobby" checked>代码 <!--默认选项checked -->
        <input type="checkbox" value="bike" name="hobby">单车
        <input type="checkbox" value="chat" name="hobby">聊天
    </p>
    <!--按钮 button -->
    <p>
        <input type="button" value="点击" name="btn1">
    </p>
    <!--图片按钮  -->
    <p>
        <input type="image" src="../asda.jpg">
    </p>
    
    <p>
        <input type="submit">提交
        <input type="reset">重置
    </p>
   
    <!--下拉框 -->
    <p>
        <select name="列表名称">
            <option value="china" selected>中国</option><!--默认选择 selected -->
            <option value="USA">美国</option>
            <option value="11">德国</option>
            <option value="Risa">俄罗斯</option>
        </select>
    </p>
    <!--文本域  -->
    <p>反馈
        <textarea name="textarea"  cols="10" rows="10">文本内容</textarea>
    </p>
    <!--文件域  上传文件-->
   <p>
        <input type="file" name="files">    
   </p>
    
    <!--邮箱验证 url验证 -->
   <p>邮箱
        <input type="email" name="email1">    <!--如果输入的格式不是邮箱格式 会提示 -->
   </p>
    <p>url
        <input type="url" name="url">    <!--如果输入的格式不是url网址格式 会提示 -->
   </p>
     <!--验证数字  -->
    <p>商品数量：
        <input type="number" name="num" max="100" min="0" step="0">    <!--验证数字 step是上增下减的幅度为10-->
   </p>
   <!--滑块 -->
    <p>滑块
        <input type="range" name="vose" max="100" min="0" step="0">    <!--类似于window右下角调声音的滑块 -->
   </p>
    <!--搜索框 -->
   <p>搜索
        <input type="search" name="search">    
   </p>
</form>

2）只读 禁用 隐藏

`<form method="post" action="12566.html">
    <p>
        名字<input type="text" name="username" value="可惜君已逝i" readonly > <!--只读 不可修改 -->
    </p>
    <p>
        密码<input type="password" name="pwd"  hidden value="123"> <!--hidden 隐藏域 页面不显示 但后台显示value的值 可用于传递隐藏信息 -->
    </p>
     <p>
        <input type="submit" disabled>提交 <!--disabled 禁用 点击没反应  -->  
        <input type="reset">重置
    </p>
</form>

3）表单的初级验证 placeholder（提示信息）、required（非空判断）、pattem（正则表达式）

`<form method="post" action="12566.html">
    <p>
        名字<input type="text" name="username" placeholder="请输入用户名" > <!-- 框中提示请输入用户名 用于输入框中 --> 
    </p>
    <p>
        密码<input type="password" name="pwd" required><!--非空判断 提示必须填写内容 --> 
    </p>
    <p>自定义邮箱
        邮箱<input type="text" name="diyeamil" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
        <!--正则表达式 直接去搜常用正则表达式就好 -->
    </p>    
    
     <p>
        <input type="submit">提交 
        <input type="reset">重置
    </p>
</form>
 
posted on   可惜君已逝i  阅读(114)  评论(0)  编辑  收藏  举报
相关博文：
·  MarkDown语法学习
·  Scanner和选择结构、循环结构。顺序结构
·  【HTML 学习】
·  html简单学习！
·  HTML基础
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾（3.3-3.9）
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
Copyright © 2025 可惜君已逝i
Powered by .NET 9.0 on Kubernetes Powered By博客园
点击右上角即可分享
微信分享提示