首页 > 其他分享 >HTML入门学习笔记

HTML入门学习笔记

时间：2023-04-24 10:23:10浏览次数：58  
标签：入门 标签 元素 笔记 表单 HTML type 页面

HTML学习笔记详解

01 初识HTML

  • HTML

HTML，英文全称为 Hyper Text Markup Language，中文翻译为超文本标记语言，其中超文本包括：文字，图片，音频，视频，动画等

  • 目前

目前主流使用的是HTML5+CSS3

  • HTML的优势

    • 主流浏览器都支持
      • 微软
      • GOOGLE
      • 苹果
    • 市场的需求
    • 跨平台（类似JVM）

  • W3C标准

    • W3C

    • W3C标准包括

      • 结构化标准语言（HTML（ 超越文本标记语言）、XML（配置文件 ））
      • 表现标准语言（CSS（表现标签语言 ））
      • 行为标准（DOM（文档对象模型 ）、ECMAScript（JavaScript））

02 HTML基本结构

  • <body>、</body>等成对的标签，分别叫开放标签和闭合标签。
  • 单独呈现的标签（空元素），如"
    ;"意为用“/”来关闭元素
<!--DOCTYPE：告诉浏览器，本文件将使用什么规范-->
<!DOCTYPE html>
<html lang="en">
    <!-- head标签代表网页头部 -->
<head>
    <!--meta描述性标签，它用来描述我们网站的一些信息-->
    <!-- meta一般用来做SEO -->
    <meta charset="UTF-8">
    <meta name = "keywords" content = "学习前端">
    <meta name = "description" content = "can can need">
    <!--title网页标题（显示在上面的窗口里）-->
    <title>myFirstpage</title>
</head>
<!-- body标签代表网页主体 -->
<body>
        我的第一个web网页</p>
        Hello world！
        <image: src:"">
</body>
</html>

03 网页基本标签

  • 标题标签
  • 段落标签
  • 换行标签
  • 水平线标签
  • 字体样式标签
  • 注释和特殊符号
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>

<!--  标题标签  -->
<h1> 一级标题 </h1>
<h2> 二级标题 </h2>
<h3> 三级标题 </h3>
<h4> 四级标题 </h4>
<h5> 五级标题 </h5>
<h6> 六级标题 </h6>

<!-- 段落标签  -->
<!-- 使用<p>和</p>  -->
<h3> 两只老虎 </h3>
<p>两只老虎，两只老虎，</p>
<p>跑得快，跑得快，</p>
<p>一只没有眼睛，</p>
<p>一只没有尾巴，</p>
<p>真奇怪！真奇怪！</p>
<p>两只老虎，两只老虎，</p>
<p>跑得快，跑得快，</p>
<p>一只没有耳朵，</p>
<p>一只没有尾巴，</p>
<p>真奇怪！真奇怪！</p>

<!-- 水平线标签  -->
<hr/>

<!-- 使用<br/>  -->
<!-- 注意两种换行方式的不同  -->
<h3> 两只老虎 </h3>
两只老虎，两只老虎，<br/>
跑得快，跑得快，<br/>
一只没有眼睛，<br/>
一只没有尾巴，<br/>
真奇怪！真奇怪！<br/>
两只老虎，两只老虎，<br/>
跑得快，跑得快，<br/>
一只没有耳朵，<br/>
一只没有尾巴，<br/>
真奇怪！真奇怪！<br/>

<hr/>

<!-- 粗体 斜体  -->
<h3>字体样式标签</h3>
粗体：<strong>I LOVE HTML</strong><br/>
斜体：<em>I LOVE HTML</em><br/>

<hr/>
<!-- 特殊符号  -->
<h3>特殊符号</h3>
1、空格：&nbsp;<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;格<br/>
注意，按空格也会有，但是多个space只会显示一个<br/>
空    格<br/>
2、大于小于符号<br/>
&gt;：大于号<br/>
&lt;：小于号<br/>
&copy;：版权号<br/>
<!--
     特殊符号不记得时可以上百度查询
-->

</body>
</html>

04 图像标签

  • 常见的图像格式
    • JPG
    • GIF
    • PNG
    • BMP
    • .........
  • 调用格式
<img src="path" alt="text" title="text" width = "x" height = "y"/>

path：指图片加载路径（必填）

  • 建议使用相对地址（推荐），绝对地址（也可以，但不推荐）

  • 在这里可以看到copy过来的绝对地址或者在本project中的地址。

../：--上一级目录

alt：图片名字，指如果图片无法正常加载会出现的替代文本

title：当鼠标置于图片上时会显示图片名称

width：设置宽度

height：设置高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>俾斯麦号战列舰</title>
</head>
<body>
      <h1>俾斯麦号战列舰</h1>
      <img src="../resource/image/bismarck.jpg" alt="俾斯麦号战列舰" title="bismarck" width = "1960" height="1080">
</body>
</html>

05 链接标签

  • 使用格式
<a href = "path" target = "目标窗口位置">链接文本或图像</a>
<!-- a标签
    href：必填。表示要跳转到哪个页面
    target：表示窗口在哪里打开
        _blank  在新标签中打开
        _self   在当前页面的页面中打开
-->
  • 文本超链接
  • 图像超链接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<a name = "#top"></a>
<a href="imageTest.html" target="_blank">点我查看俾斯麦号高清大图</a><br/>
<a href="imageTest.html" target="_blank">
    <img src="../resource/image/bismarck.jpg" alt="俾斯麦号战列舰" title="bismarck" width = "120" height="100">
</a>
<p><img src="../resource/image/bismarck.jpg" alt="俾斯麦号战列舰" title="bismarck" width = "1960" height="1080"></p>
<p><img src="../resource/image/bismarck.jpg" alt="俾斯麦号战列舰" title="bismarck" width = "1960" height="1080"></p>
<p><img src="../resource/image/bismarck.jpg" alt="俾斯麦号战列舰" title="bismarck" width = "1960" height="1080"></p>
<p><img src="../resource/image/bismarck.jpg" alt="俾斯麦号战列舰" title="bismarck" width = "1960" height="1080"></p>
<p><img src="../resource/image/bismarck.jpg" alt="俾斯麦号战列舰" title="bismarck" width = "1960" height="1080"></p>
<p><img src="../resource/image/bismarck.jpg" alt="俾斯麦号战列舰" title="bismarck" width = "1960" height="1080"></p>
<a href="#top">点我回到顶部</a><br/>
<a name = "down">down</a>
</body>
</html>
  • 首先明确，超链接一共三类
    • 页面间链接
      • 从一个页面链接到另一个页面
    • 锚链接
    • 功能性链接

06 块元素和行内元素

  • 块元素
    • 无论内容多少，该元素独占一行
    • 例如（p,h1-h6,......）
  • 行内元素
    • 内容撑开宽度，左右都是行内元素的可以排在一行
    • （a.strong.em......）

07 列表标签

  • 什么是列表
    • 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的形式显示出来，以便浏览者能更快捷的获得相应的信息。
  • 列表的分类
    • 无序列表
    • 有序列表
    • 自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--有序列表
显示带数字
常用范围：试卷、问答之类
-->
<ol>
  <li>Java</li>
  <li>Python</li>
  <li>C/C++</li>
  <li>Linux</li>
</ol>

<hr>

<!--无序列表
显示只有黑点之类的类似markdown类似的排序
常用范围：导航、侧边栏
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>C/C++</li>
    <li>Linux</li>
</ul>


<hr>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
常用范围：常见于网站底部的导航栏
-->

<dl>
    <dt>计算机编程语言</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>C/C++</dd>
    <dd>Linux</dd>
</dl>

</body>
</html>

08 表格标签

  • 为什么使用表格

    • 简单通用
    • 结构稳定

  • 基本结构

    • 单元格
    • 行
    • 列
    • 跨行
    • 跨列
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
</head>
<body>

<table border="1px">
  <tr>
    <td colspan="3" text>学生成绩</td>
  </tr>
    <td rowspan="2">吴同</td>
    <td>语文</td>
    <td>100</td>
  </tr>
    <td>数学</td>
    <td>100</td>
  </tr>
    <td rowspan="2">肉食动物</td>
    <td>语文</td>
    <td>100</td>
  </tr>
    <td>数学</td>
    <td>100</td>
  </tr>
</table>

</body>
</html>

09 视频和音频

  • 视频元素
    • video
  • 音频元素
    • audio
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素调用</title>
</head>
<!-- 音频和视频
src:资源路径
controls:控制条
outplay:自动播放
ps:有些人的自动播放功能可以不太好使，可能是浏览器设置问题。解决思路可以上网去查。
-->
<body>

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

<audio src="../resource/audio/xxx.mp3" controls></audio>
</body>

</html>

10 页面结构分析

元素名 描述
header 标题头部区域的内容（用户页面或页面中的一块区域）
footer 标记脚部区域的内容（用于整个页面或页面的一块区域）
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用（常用于侧边栏）
nav 导航类辅助内容 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主体</h2>
</section>

<footer>
    <h2>网页脚部</h2>
</footer>

</body>
</html>

11 iframe内联框架

  • 使用结构
<iframe src="path" name="mainFrame" width="??px" height="??px"></iframe>
  • path:引用页面地址
  • mainFrame:框架识别名
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe网站内联框架</title>
</head>
<body>

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

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

</body>
</html>
  • 有些网站如baidu等拒绝使用内联框架访问，所以显示不成功可以换一个网站，如b站
  • 下一个示例是在内联窗口中打开跳转网页
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe网站内联框架</title>
</head>
<body>

<iframe src="" name = "bgm" frameborder="0" width="1000px" height="800px"></iframe>
<a href = "媒体元素学习.html" target="bgm">点击跳转</a>

</body>
</html>

12 初识表单和提交

<!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="myFirstpage.html" method="post">
          <!--文本输入框：input type="text"-->
          <p>用户：<input type="text" name = "username"></p>
          <!--密码框：input = "password"-->
          <p>密码：<input type="password" name = "pwd"></p>
          <p>
              <input type="submit">
              <input type="reset">
              <input type="button" value="注册" name = "register">
          </p>
      </form>
</body>
</html>
  • 但事实上，使用post也十分危险，按F12打开开发者工具，进入网络监听（Network，然后在左边点击提交

  • 可以看到右下角出现一个提交文件，点开后在上面选择payload，即可以看到传输的相关内容

  • 因此其实这个也不安全，具体何种方法传输此类保密信息比较安全，需后期进一步学习。

13 表单元素格式

属性 说明
type 指定元素类型。text、password、checkbox（多选）、radio（单选）、reset、file、hidden、image和button。默认为text
name 指定表单元素的名称（后期java程序读取该属性）
value 元素的初始值。type为radio时必须指定一个值
size 指定表单元素的初识宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位（px）
maxlength type为text或password时，输入的最大字符数
checked type为radio或checkbox时，指定按钮是否被选中

14 文本框和单选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
<h1>注册</h1>
<form action="表单学习.html" method="get">
    
    <!-- 文本输入框 input type="text"
    value="xxx" 默认初始值
    maxlength="x" 最长能写几个字符
    size="x" 文本框的长度
    -->
    <p>用户：<input type="text" name = "username"></p>
    
    
    <p>密码：<input type="password" name = "pwd"></p>
    <!--单选框标签
         input type="radio"
         value="boy"单选框的值，选中这个项传输的也是这个
         name = ""分组类别。如果想让两个选项在一个组中就必须统一name
         最后面的中文是填充在单选框中的内容
      -->
    <p>性别：
        <input type="radio" value="boy" name = "sex"/>男
        <input type="radio" value="girl" name = "sex"/>女
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

</body>
</html>

15 多选框和按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body background="../resource/image/checkin.jpg"
      style="background-repeat:no-repeat;
               background-attachment:fixed;
               background-size:100% 100%; ">
<h1 style="text-align:center;" >注册</h1>
<form action="表单学习.html" method="get">
    <!-- 文本输入框 input type="text"
    value="xxx" 默认初始值
    maxlength="x" 最长能写几个字符
    size="x" 文本框的长度
    -->
    <p style="text-align:center;" >用户：<input type="text" name = "username"></p>

    <!--密码框
    input type="password"
    会自动将输入字符转变为*
    -->
    <p style="text-align:center;" >密码：<input type="password" name = "pwd"></p>

    <!--单选框
    input type="radio"
    value="xx" 单选框的值
    name = "xx" 表示哪一组
    checked 在此单选框下的默认取值
    最后写单选框内容
    -->
    <p style="text-align:center;" >性别：
        <input type="radio" value="boy" name = "sex" checked/>男
        <input type="radio" value="girl" name = "sex"/>女
    </p>

    <!--多选框
    input type="checkbox"
    value="xx" 多选框的值
    name = "xx" 表示哪一组
    最后写多选框内容
    -->
    <p style="text-align:center;" >爱好：
        <input type="checkbox" value="sleep" name = "hobby"/>睡觉
        <input type="checkbox" value="learn" name = "hobby"/>学习
        <input type="checkbox" value="chat" name = "hobby"/>聊天
        <input type="checkbox" value="game" name = "hobby"/>游戏
    </p>
    
    
    <p style="text-align:center;" >
        <input type="submit">
        <input type="reset">
    </p>
    <p style="text-align:center;">
        电子木鱼：
        <input type="button" value="功德+1" name="gongde"/>
    </p>
   <!-- <p style="text-align:center;">
        <input type="image" src="../resource/image/bismarck.jpg" width="128px" height="80px">
    </p>-->

    <!--下拉框选择-->
    <p style="text-align:center;">
        国籍：
        <select name = "国籍" >
            <option value="ch">中国</option>
            <option value="usa">美国</option>
            <option value="swz">瑞士</option>
            <option value="jpa" selected>日本</option>
        </select>
    </p>

    <!-- 文本域 -->
    <p style="text-align:center;">
        反馈：
        <textarea name="textarea" cols="50" rows="10"></textarea>
    </p>

    <!--文件域-->
    <p style="text-align:center;">
        上传文件：
        <input type="file" name="files">
        <input type="button" value="提交" name="upload">
    </p>

</form>

</body>
</html>

  • html中按钮有4种

    • input type="button" 普通按钮
    • input type="image" 图像按钮
    • input type="submit" 提交按钮
    • input type="reset" 重置

  • 除了button按钮外，剩余三种都会产生不同效果。

  • image点击会直接进入上方action对象中

  • 提交按钮和image类似

  • 重置即清空当前页面的表单内容

16 列表框文本域和文件域

<!--下拉框选择-->
    <p style="text-align:center;">
        国籍：
        <select name = "国籍" >
            <option value="ch">中国</option>
            <option value="usa">美国</option>
            <option value="swz">瑞士</option>
            <option value="jpa" selected>日本</option>
        </select>
    </p>

    <!-- 文本域 
         cols="50" rows="10"
    -->
    <p style="text-align:center;">
        反馈：
        <textarea name="textarea" cols="50" rows="10"></textarea>
    </p>

    <!--文件域
             type="file" name="files
     -->
    <p style="text-align:center;">
        上传文件：
        <input type="file" name="files">
        <input type="button" value="提交" name="upload">
    </p>

17 搜索框滑块和简单验证

    <!--邮箱验证-->
    <p style="text-align:center;">邮箱:
        <input type="email" name="email">
    </p>

    <!--URL-->
    <p style="text-align:center;">URL:
        <input type="url" name="url">
    </p>

    <!--数字
    input type="number"
    max:最大值
    min:最小值
    step:点击右边上下按钮增减步长
    -->
    <p style="text-align:center;">数量：
        <input type="number" name="name" max="100" min="0" step="1">
    </p>


    <!--音量
    input type="range"
    max:最大值
    min:最小值
    -->
    <p style="text-align:center;">音量：
        <input type="range" name="voic" max="100" min="0">
    </p>

    <!--搜索
       input type="search"
     -->
    <p style="text-align:center;">搜索:
        <input type="search" name="search">
    </p>

18 表单应用

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

拓展：使用label增强鼠标可用性，即点击某部分会进入某一编辑部分

 <p style="text-align:center;">
        <label for="mark">点点看吧</label>
    </p>
    <p style="text-align:center;">
        <input type="text" name="text" id="mark">
    </p>

19 表单初级验证

  • 为什么要进行初级验证
    • 对输入内容进行简单判断，从而降低服务器负载
    • 安全，进行初级验证可以对用户输入内容进行简单查验，对系统有一定保护作用
  • 常用方式：
    • placeholder 提示信息
    • required 非空判断
    • pattern 正则表达式

20 总结

标签：入门,标签,元素,笔记,表单,HTML,type,页面
From： https://www.cnblogs.com/wutong666/p/17348618.html

相关文章

  • HTML-CSS笔记
    HTML一、网页的基本结构和基础1、html基础<!doctypehtml><html> <head> <!--可以通过meta标签来设置网页的字符集，避免乱码的问题--> <metacharset="UTF-8"/> <title>网页的基本结构</title> </head> <body> <!-- 迭代 网页的版本......
  • LCA（最近公共祖先）学习笔记
    前言没想到干完lca的时间比tarjan的还要长（我不能这么弱下去了！！）前置知识dfs序这东西有点类似于时间戳（dfn），但是它分为两部分（回溯之前和回溯之后）。并且dfs序还分为两种。这里只介绍一倍的dfs序。如上图，蓝色代表左端点，红色代表右端点，（学过Tarjan的都知道），蓝色其实就是这棵树的dfn（......
  • 上篇：运维人员不得不看的K8S API入门实战，呕心沥血整理得又臭又长，有人看吗
    K8SAPI概述可参考：https://kubernetes.io/zh-cn/docs/concepts/overview/kubernetes-api/KubernetesAPI是Kubernetes控制平面的核心。它是一组RESTAPI，用于与Kubernetes中的各种对象进行交互，如Pods、Namespaces、ConfigMaps和Events等。通过这些API，可以查询和操作Kubernetes中A......
  • SpringSecurity从入门到精通：简介
    SpringSecurity从入门到精通：简介SpringSecurity是Spring家族中的一个安全管理框架，想比另外一个安全框架Shiro，它提供了更丰富的功能，社区资源也比Shiro丰富一般来说中大型的项目都是使用SpringSecurity来做安全框架，小项目有Shiro的比较多，因为想比与SpringSecurity，Shiro的......
  • CountDownLatch 学习笔记
    1.概念CountDownLatch是在JDK1.5的时候被引入的，位于java.util.concurrent并发包中，CountDownLatch叫做闭锁，也叫门闩。允许一个或多个线程一直等待，直到其他线程执行完成后再执行。2.工作原理CountDownLatch通过一个计数器来实现的。计数器的初始化值为线程的数量。每当一个线程......
  • 【视频版】基于飞腾芯片的设计与调试入门指导
    飞腾爱好者技术交流群码公众号“乌拉大喵喵” 本文已录制讲解视频发布到B站，可以搜索UP主“乌拉大喵喵”或者扫二维码进入B站专辑进行查看：  一、啥是自主可控国产CPU现在厂家细算起来其实有很多，现在华为、小米也在做自己的CPU，瑞芯微、全志等的SoC现在也是广泛应用。但......
  • 期望入门
    什么是期望当我们在做一些题目的时候可能会balablabla一堆，然后问你XXX的期望，这个时候像我这种连期望定义都不知道的人就傻了，所以先来了解一下定义是什么。我们现在有一个变量\(x\)和一个序列\(a\)，其中值为\(a_{i}\)的数可能不只有一个，\(x\)的取值可能为\(a_{1}\)到......
  • Fine-Grained学习笔记(1):卷积,FFT
    Fine-Grained,在算法复杂度理论中特指,对各类算法的复杂度,进行(相较于P与NP的粗粒度分类的)细粒度分类,例如,证明某问题存在$n^2/\logn$的算法.Fine-Grained是一个新兴领域,其研究前景可看作是计算机科学学科中的石墨烯与钙钛矿(误).本系列主要参考UniversityofIllinoisa......
  • 【学习笔记】2-SAT
    适应性问题存在若干命题\(p_i\)，以及若干形如\(x_{k_1}\lorx_{k_2}\lor\dots\lorx_{k_n}\)的\(s_k\)，其中\(x_i\)为\(p_i\)或\(\lnotp_i\)其中一个。要求是否存在一个命题的取值集合使得条件\(s\)均成立，其中每个条件最多包含\(n\)个命题，这样的问题称为n-SAT问......
  • Java学习笔记（四）
    1、break、continue、return的区别（1）break常在switchcase中使用，也可以在循环中使用。作用：当遇到break，则结束当前整个switchcase语句或者当前整个循环。执行外面语句。（2）continue：只能在循环中使用。作用是结束当前这一次循环，执行下一次循环。（3）return：在方法中使用，作用是结束当前......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99