html

最新推荐文章于 2023-02-04 17:11:07 发布

s梦二

最新推荐文章于 2023-02-04 17:11:07 发布

阅读量148

点赞数

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

本文链接：https://blog.csdn.net/qq_41292655/article/details/106943200

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

# 潦草的第一次笔记-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">字符编码格式
    <title>网页标题</title>
<!--    <meta>描述性标签 描述网页信息-->
    <meta name='keywords' content='关键词描述这里是用于搜索引擎方便 某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。'>
</head>
<body>
 HTML Hyper Text Markup Language 超文本标记语言
 <!--  注释  中横线-->
<a name="la">锚链接测试</a>
<h1>标题标签</h1>
<p>段落标签</p>
<br/>换行标签
<hr/>水平线标签 xx/这种是自闭合标签
 <strong>粗体</strong><em>斜体</em>
空&nbsp;&nbsp;格
大于号&gt;小于号&lt;
&copy;版权所有smy
 <br/>
 图片标签img

<br/> 超链接标签 href表是要跳转到的页面
 <a href="http://www.baidu.com" target="_blank">百度 新页面</a>

 <a href="../h1/h1.html">
     <img src="../resource/g.jpg" target="_self" alt="lala图片名字必填../上级目录 相对地址"
          title='鼠标悬停文字' width='30' height='40' >
 </a>
<p><img src="../resource/g.jpg" target="_self" alt="lala图片名字必填../上级目录 相对地址"
        title='鼠标悬停文字' width='500' height='700' ></p>
<br/>
 锚链接<a href="#la">回到上面</a>
     <a href="../h1/h1.html#l">另一页面</a>
<br/>功能性链接 邮件链接： mailto
<a href="mailto:68508159@qq.com">点击联系我</a>
<br/>
 <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=68508159&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:68508159:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

<br/>
块元素
行内元素
<br/>
列表
<!--有序列表-->
<ol>
    <li>java</li>
    <li>c</li>
    <li>c++</li>
    <li>c#</li>
</ol>
<!--无序列表-->
<ul>
    <li>java</li>
    <li>c</li>
    <li>c++</li>
    <li>c#</li>
</ul>..<dl>
    <dt>语言</dt>
    <dd>c</dd>
    <dd>java</dd>

    <dt>地址</dt>
    <dd>保定</dd>
    <dd>北京</dd>
</dl>
<!--表格
行 tr
列td-->
<table border="5px">
    <tr>
<!-- colspan 跨列-->
        <td colspan="2">第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
<!--rowspan 跨行-->
        <td  rowspan="2">第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
    <tr>
        <td>第三行第一列</td>
        <td>第三行第二列</td>
    </tr>

</table>

<br/>
<!--媒体元素 音频视频  controls 可控 autoplay自动播放-->
 <video src="../resource/tq.mp4" controls autoplay width="400px" height="600px"></video>
 <audio src="../resource/叮咛.mp3" controls autoplay></audio>
<br/>

<!--页面结构分析-->
<header><h2>网页头部</h2></header>
 <section>
     <h2>网页主体</h2>
 </section>
<footer><h2>网页脚部</h2></footer>

<br/>
<!-- 内联框架 src引用页面地址 name框架标识名-->
 <iframe src="http://wwww.baidu.com" frameborder="0" name="baidu" width="500px" height="300px"></iframe>
 <a href="../h1/h1.html" target="baidu">点击跳转</a>
 <iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"
         scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

<br/>
<!--表单
action 表单提交位置 可以是网站可以使请求处理位置
method ： post 比较安全 可以传输大文件
get 在url中能看到 不安全但快速-->
 <h1>注册</h1>
 <form action="../h1/h1.html" method="post">
<!--  文本输入框 input type:'text'-->
     <p>name:<input type="text" name="username"></p>
<!-- 密码框-->
     <p>password:<input type="password" name="pwd"></p>
<!--    提交-->
     <p><input type="submit">
     <input type="reset"></p>
 </form>

</body>

表单元素们

表单元素注意别忘了name

 <form action="../h1/h1.html" method="post">
<!--  文本输入框 input type:'text'-->
     <p>name:<input type="text" name="username" value="初始值" maxlength="8" size="30"></p>
<!-- 密码框-->
     <p>password:<input type="password" name="pwd"></p>
<!--    提交-->
     <p><input type="submit">
     <input type="reset"></p>
 </form>

value 初始值 maxlength 最大输入字符长度 size文本框长度

单选框

<p>sex:
    <input type="radio" value="man" name="sex" checked>男
<input type="radio" value="woman" name="sex">女
</p>

当name相同时表示同一组只能选一个

checked 默认选中

多选框

<p>爱好：<input type="checkbox" value="sleep" name="hobby" checked >sleep
    <input type="checkbox" value="code" name="hobby">code
    <input type="checkbox" value="game" name="hobby">game
</p>

按钮

p>按钮：
<input type="button" name="btn1" value="点击变长" >
    <input type="image" src="../resource/g.jpg" >
</p>

button普通按钮 image图片按钮

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

submit提交按钮 reset清空表单

下拉框

<p>国家
    <select name="列表名称">
        <option value="china" >中国</option>
        <option value="india">印度</option>
        <option value="uk" selected>英国</option>
        <option value="us">美国</option>
    </select>
</p>

selected 默认选中

文本域

<p>反馈：
   <textarea name="textarea" cols="10" rows="10" >请输入。。。</textarea>
</p>

cols 列 rows行数

文件域

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

邮件/url/数字验证

<p>邮箱：
    <input type="email" name="email">

</p>
<p>url:
   <input type="url" name="url">
</p>
<p>数字：
   <input type="number" name="num" max="100" min="0" >
</p>

滑块

音量：
<input type="range" name="voice" min="0" max="100" step="2" >

搜索框

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

表单设置权限

<p>name:<input type="text" name="username" value="初始值" maxlength="8" size="30" readonly></p>

readonly 只读

<p>sex:<input type="radio" value="man" name="sex" checked disabled>男

disabled 禁用

<p>password:<input type="password" name="pwd" hidden></p>

hidden 隐藏（可以通过隐藏域提交默认值）

提高鼠标可用性

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

为什么要进行表单验证呢？

1.减轻服务器压力

2.保证数据安全性

常用方法

1.placeholder 默认提示信息 (应用：输入框控件)

2.requierd 不能为空非空判断

3.pattern 正则表达式验证

<p>name:<input type="text" name="username"
               placeholder="请输入用户名"
               maxlength="8" size="30" required></p>

<p>邮箱：
    <input type="email" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">

</p>

完结撒花!

继续努力！

走花路鸭~

s梦二

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html

# 潦草的第一次笔记-html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">字符编码格式 <title>网页标题</title> <meta name='keywords' content='关键词描述这里是用于搜索引擎方便某些搜索引擎在遇到这
复制链接

扫一扫