html笔记

Hyper Text Markup Language （超文本标记语言）

前言

  • W3C标准：

    • 结构化标准语言（HTML、XML）；

    • 表现标准语言（CSS）；

    • 行为标准（DOM、ECMAScript）；

1、网页基本信息

html注释：<!-- --> ;

<!DOCTYPE html>：告诉浏览器使用的规范；

<head></head> ; 网页头部

<body></body> ；网页主体

<html></html> ;所有的内容都被包括在这个标签内部

  • 基本标签：

    • 一级标签：<h1> </h1>

    • 段落标签：<p></p>

    • 换行标签：

    • 水平线标签：<hr></hr>

  • 字体样式标签：

    • 粗体：<strong></strong>

    • 斜体：<em></em>

  • 特殊符号：

    • 空格：&nbsp;

    • 版权符号：©&copy;

    • 大于号>：&gt;

    • 小于号<：&lt;

2、图像标签

  • 图片标签：<img src="" alt="" title="" width="" height=""/>;

3、连接标签

  • 页面跳转链接：<a href="path" target="目标窗口位置">连接文本或图像</a>;

    • href:表示要跳转到哪一个页面；

    • target：

      • _blank---在新标签打开；

      • _self---在当前网页中打开

  • 锚链接：<a name ="top">顶部</a>------------<a href="#top">回到顶部</a>

    • 需要一个标记：

    • 跳转到标记：#

    锚链接还可以跳转到别的页面：

    • <a href="4.连接标签.html#down">跳转</a>----//跳转到down标记出

    • <a name="down"></a>-----//down标记

  • 功能性链接：

    • 邮件链接：mailto:<a href="mailto:1027880379@qq.com">点击联系我</a>

    • QQ链接：（官网QQ推广中有样式）

4、块元素和行内元素

  • 块元素：

    • 无论内容多少，该元素独占一行；

    • （p、h1-h6....）

  • 行内元素

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

    • （a . strong . em ...）

 

5、列表

  • 无序列表：<ul> <li></li> .... <li></li> ... </ul>

  • 有序列表：<ol> <li></li> .... <li></li> ... </ol>

  • 自定义列表：<dl> <dt></dt>(列表标题) <dd>Java</dd> </dl>

 

6、表格标签

 <table border="1px"><!--边框粗细-->
     <tr>
         <!--colspan  跨列-->
         <td colspan="4"></td>
         <td></td>
     </tr>
     <tr>
          <!--rolspan  跨行-->
         <td rolspan="2"></td>
         <td></td>
     </tr>
 </table>

6、视频和音频

  • 视频：<video src= "../xxx" controls></video>

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

    • src:资源路径

    • controls：控制条

    • autoplay：打开网页自动播放

7、页面结构分析

元素名 | 描述：

  • header：标题头部区域的内容（用于页面或页面中的一块区域）；

  • footer：标记脚部区域的内容（用于整个页面或页面中的一块区域）；

  • section:Web页面中的一块独立区域；

  • article：独立的文章内容；

  • aside：相关内容或应用（常用语侧边栏）；

  • nav：导航类辅助内容；

8、iframe内联框架

  • iframe内联标签：<iframe src="path" name="mainFrame"></iframe>

    • 还可以骚操作：<a href="https://blog.kuangstudy" target="hello">点击跳转</a>。

    • 利用这种方式可以把要新跳转的连接，借用内联框架打开！

9、表单

9.1、登录表单：

 <form method="post" action="result.html">
     <p>名字：<input name="name" type="text"> </p>
     </p>
     <p>密码：<input name="pass" type="password"> </p>
     <p>
         <input type="submit" name="Button" value="提交"/>
         <input type="reset" name="Reset" value="重填"/>
     </p>
 </form>

  • type：{text，password，checkbox、radio、submit、reset、file、hidden、image和button，默认为text}；

  • name：指定表单元素的名称；

  • value：元素的初始值。type为radio时必须指定一个值；

  • size：指定表单元素的宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位；

  • maxlength：type为text或password时，输入的最大字符数；

  • checked：type为radio或checkbox时，指定按钮是否被选中；

9.2、单选框

 <!--   单选框标签
         input type="radio"
         value : 单选框的值
         name : 表示组
  -->
     <p>性别：
         <input type="radio" value="boy" name="sex"/> 男
         <input type="radio" value="girl" name="sex"/>女
     </p>

9.3、多选框

     <!--按钮
         input type="button"-----普通按钮
         input type="image"      图像按钮
         input type="submit"     提交按钮
         input type="reset"      重置按钮
     -->
     <p>按钮：
         <input type="button" value="bt1" name="点击变长"/> 睡觉
         <input type="image" src="../手机壁纸.png">
     </p>
 ​
 ​
 <p>
     <input type="submit">
     <input type="reset">
 </p>

9.4、 下拉框

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

9.5、文本域

     <!--文本域-->
     <p>反馈：
         <textarea name="textarea"  cols="30" rows="10">哈哈哈</textarea>
     </p>

9.6、文件域

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

9.7、简单验证

 

     <!--邮箱验证-->
     <p>邮箱:
         <input type="email" name="email">
     </p>
     <!--url验证-->
     <p>邮箱:
         <input type="url" name="url">
     </p>
     <!--数字验证-->
     <p>邮箱:
         <input type="number" name="num" max="100" min="0" step="10">
     </p>
 ​
     <!--滑块-->
     <p>滑块：
         <input type="range" name="音量" max="100" min="0">
     </p>
 ​
     <!--搜索框-->
     <p>搜索：
         <input type="search" name="search">
     </p>

9.8、搜索框

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

10、表单的应用

10.1、默认、只读

  • 默认：value=“”；checked

  • 只读：readonly=“”

  • 禁用：disable

  • 隐藏：hidden

10.2、增强鼠标可用性

点击文字就能锁定输入框：

     <p>
         <!--        增强鼠标可用性-->
         <label for="mark">你点我试试</label>
         <input type="text" id="mark">
     </p>

通过id标记，可以点击文字锁定到对应文本框；

11、表单的初级验证

保证效率、安全；

  • 提示输入框：

     <p>名字：<input type="text" name="username" placeholder="请输入用户名"></p>   <!--提示用户输入信息：placeholder="请输入用户名"--->

  • 非空判断：

     <p>密码：<input type="password" name="password" required></p>     <!--不能为空：required-->

  • 正则表达式：

     <!--自定义邮箱-->
     <p>自定义邮箱：
         <input type="email" name="diyemael" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
     /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/">
     </p>

  •  

posted @ 2022-03-11 10:05  devynlime  阅读(20)  评论(0)  编辑  收藏  举报