Html基础入门

爱学习的小段

已于 2022-09-24 09:31:40 修改

阅读量201

点赞数

分类专栏：学习文章标签： html 前端

于 2022-09-24 09:30:13 首次发布

本文链接：https://blog.csdn.net/qq_57457954/article/details/127021359

版权

学习专栏收录该内容

21 篇文章 0 订阅

订阅专栏

Html

<!--段落标签-->
<p>这就是爱 </p>
<p>一个两个三四个</p>

<!--换行标签-->
这就是爱 <br/>
一个两个三四 <br/>

<!--水平线-->
<hr>

<!-- 粗体，斜体-->
<h1>字体样式</h1>
粗体： <strong>i love you</strong>
斜体： <em>i love you</em>
<br>

<!--特殊符号-->

空格 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!-- &   ;  -->

图像标签

<!--img学习
scr：图片地址（必填）
    相对地址推荐使用，绝对路径
    ../  上一级目录

    alt:图片名称（必填）

    title="悬停文字"

-->

链接标签

<a name="top">顶端</a>
<br>

<!-- a标签
href：必填 表示要跳转的那个页面
target: 表示窗口在哪里打开
  _blank 在新标签页面打开
  _self  在自己的页面打开
-->
<a href="https://www.huawei.com" target="_blank">欢迎来到华为</a>

<br>

<a href="https://www.huawei.com" target="_self">
<img src="../resources/image/鸿蒙.jpg" alt="鸿蒙" title="华为" width="800" height="600">
</a>
<br>

<a href="https://www.huawei.com" target="_self">
  <img src="../resources/image/鸿蒙.jpg" alt="鸿蒙" title="华为" width="800" height="600">
</a>
<!--锚链接
1.需要一个锚标签
2.跳转到标记
#
-->
<br>
<a href="#top">回到顶端</a>
<!--功能性链接
邮箱邮件：mailto
QQ链接
-->
<br>
<a href="mailto:1810209179@qq.com">QQ邮箱</a>

列表

<!--有序列表
应用：试卷，问答
-->
<ol>
  <li>java</li>
  <li>python</li>
  <li>前端</li>
  <li>网安</li>
  <li>C/C++</li>
</ol>
<hr>
<!--无序列表
应用：导航，侧边栏
-->
<ul>
  <li>java</li>
  <li>python</li>
  <li>前端</li>
  <li>网安</li>
  <li>C/C++</li>
</ul>
<hr>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表 内容
-->
<dl>
  <dt>学科</dt>
    <dd>Java</dd>
    <dd>python</dd>
    <dd>C/C++</dd>
    <dd>Linux</dd>

  <dt>地点</dt>
    <dd>北京</dd>
    <dd>上海</dd>
    <dd>深圳</dd>
    <dd>郑州</dd>
</dl>

表格

<!--表格table
行 tr
列 td
-->
<!--border显示边框-->
<table border="1">
  <tr>
  <!--  colspan 跨列  -->
    <td colspan="3">一个大表格</td>
  </tr>
  <tr>
  <!--  rolspan 跨列  -->
    <td rowspan="2">编程</td>
    <td>java</td>
    <td>python</td>
  </tr>
  <tr>
    <td>Linux</td>
    <td>C/C++</td>
  </tr>
</table>

音频和视频

<!--音频和视频
scr:资源路径
controls:控制条
autoplay:自动播放
-->

<video src="../resources/video/隐入尘烟.mp4" controls autoplay></video>
<audio src="../resources/audio/《世界这么大还是遇见你》.mp3" controls autoplay></audio>

页面结构

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

内联框架

<!--内联框架iframe
src:地址
w-h:宽高
-->
<iframe src="" name="hello" frameborder="0" width="800" height="450"></iframe>

<br>

<a href="https://www.bilibili.com" target="hello">B站</a>

表单

表格属性

属性	说明
type	指定元素的类型。text,passward,checkbox,radio,sumbit.reset,file,hidden,image,button,默认为text
name	指定表单元的名称
value	元素的初始值。type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或password时，表单元素的大小为字符单位。对于其他类型，宽度以像素为单位
maxlength	当type为text或password时，输入的最大字符数
checked	当type为radio或checkbox时，指定按钮是否被选中

隐藏域 hidden ；只读 readonly；禁用 disabled

提示信息 placeholder ; 非空判断 required ；正则表达式 pattern

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

<h1>注册</h1>

<!--表单form
action:表格提交的位置，可以是网站，也可以是一个请求处理地址
method：post get 提交方式
  get：我们可以在url中看到我们提交的信息，不安全，高效
  method：比较安全，可以传输大文件
-->

<form action="https://huawei.com" method="post">
  <!--文本输入框：input type="text"-->
  <p>名字：<input type="text" name="username" value="admir" readonly> </p>
  <!--密码框：input type="password"-->
  <p>密码：<input type="password" name="password" value="123456" hidden></p>

<!--  单选框标签
    checked初始化选择
    input type = “radio”
    value ： 单选框的值
 -->
    <p>性别：
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

<!--多选框标签
    input type=”checkbox“
-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>

<!--下拉框，列表框
    selected表示初选择
-->
    <p>国家：
        <select name="列表名称" id="">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth">瑞士</option>
            <option value="yindu">印度</option>
        </select>
    </p>

<!--文字域
    cols="30" rows="10"
-->
    <p>
        <label for="mark">反馈</label>
        <textarea name="textarea" id="mark" cols="30" rows="10" placeholder="请输入文字"></textarea>
    </p>

<!-- 文件域
    input type="file" name="files
-->
<p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
</p>

<!--邮箱验证-->
    <p>邮箱：
        <input type="email" name="email" required>
    </p>
<!--url-->
    <p>url：
        <input type="url" name="url">
    </p>
<!--数字-->
    <p>商品数量：
        <input type="number" name="num" max="100" min="0" step="10">
    </p>
<!--滑块-->
    <p>音量：
        <input type="range" name="voice" max="100" min="0" step="2">
    </p>

    <br>
    <br>
<!--按钮
    input type="button"  普通按钮
    input type="image"   图像按钮
    input type="submit"  提交按钮
    input type="reset"   重置
-->
    <p>
        <input type="button" name="btn1" value="点击变长">
<!--        <input type="image" src="../resources/image/鸿蒙.jpg">-->
    </p>
    <p>
        <input type="submit">
        <input type="reset" value="清空">
    </p>

</form>


</body>
</html>

爱学习的小段

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Html基础入门

图像标签链接标签列表表格音频和视频页面结构元素名描述header标题头部区域的内容（用于页面或页面中的一块区域）footer标记脚部区域的内容（用于整个页面或页面的一块区域）sectionWeb页面中的一块独立的区域article独立的文章内容aside相关内容或应用（常用于侧边栏）nav导航辅助内容内联框架表单表格属性属性说明type指定元素的类型。text,passward,check
复制链接

扫一扫