Html自学知识点

已于 2022-08-23 09:38:25 修改
阅读量228 收藏
点赞数
文章标签： html 前端
于 2022-08-22 16:43:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dave0002/article/details/126447721
版权

第一个网页

<!-- 注释
  DOCTYPE:告诉浏览器使用什么规范
  head标签  网页头部
  body标签  网页主体
  title标签 网页标题
  meta标签  一般用来做seo,告诉网站需要做什么
  -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="Dave测试">
    <meta name="description" content="Dave测试描述">
    <title>Title</title>
    我是Dave
</head>
<body>
</body>
</html>

基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p>hello  world</p>
<p>hello  world</p>
<p>hello  world</p>
<p>hello  world</p>
<p>hello  world</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
hello  world<br/>
hello  world<br/>
hello  world<br/>
hello  world<br/>
hello  world<br/>
<!--字体样式标签   粗体 斜体-->
<h1> 字体样式标签    </h1>
粗体:   <strong>i love you</strong>
斜体:   <em>i love you</em><br/>
<!-- 特殊符号   空格:&nbsp;  大于:&gt;  小于:&lt;  版权符号:&copy; ©   -->
 空    格:<br/>
 空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格:<br/>
&gt;<br/>
&lt;<br/>
&copy;版权所有Dave <br/>
</body>
</html>

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img 学习
src:图片地址(必填)
    相对地址,绝对地址
    ../   -上一级目录
alt : 图片名字(必填)
title 鼠标悬停提示的额文字
width  图像宽度
height 图像高度
-->
<h1>飞凡汽车</h1>
<img src="../resources/image/1.jpg" alt="飞凡汽车" title="悬停文字" width="300" height="300">
</body>
</html>

链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--a标签
href:必填,表示要跳转到哪个页面
target:表示窗口在哪里打开
    _blank 在新标签打开
    _self  在自己的网页中打开
-->
<!--使用name 做为标记-->
<a name="top">顶部</a><br/>
<a href="#down">回到底部</a><br/>
<a href="1.我的第一个网页.html" target="_blank" >点击我跳转到网页一</a><br/>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a><br/>
<!--图像超链接-->
<a href="1.我的第一个网页.html" >
    <img src="../resources/image/1.jpg" alt="飞凡汽车" title="悬停文字" width="300" height="300">
</a>

<p>
    <a href="1.我的第一个网页.html" >
        <img src="../resources/image/1.jpg" alt="飞凡汽车" title="悬停文字" width="300" height="300">
    </a>
</p>
<p>
    <a href="1.我的第一个网页.html" >
        <img src="../resources/image/1.jpg" alt="飞凡汽车" title="悬停文字" width="300" height="300">
    </a>
</p>
<p>
    <a href="1.我的第一个网页.html" >
        <img src="../resources/image/1.jpg" alt="飞凡汽车" title="悬停文字" width="300" height="300">
    </a>
</p>
<p>
    <a href="1.我的第一个网页.html" >
        <img src="../resources/image/1.jpg" alt="飞凡汽车" title="悬停文字" width="300" height="300">
    </a>
</p>

<!--锚链接
    1.需要一个锚标记
    2.跳转到标记
-->
<a href="#top">回到顶部</a><br/>
<a name="down">down</a><br/>

<!--功能性链接
    邮件链接:mailto:
-->
<a href="mailto:123456789@qq.com">点你联系我</a><br/>
</body>
</html>

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表   ol:order list   1,2,3,4,5,6    学号,题号-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
    <li>测试</li>
</ol>
<hr/>
<!--无序列表  ...... 导航,侧边栏  -->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
    <li>测试</li>
</ul>
<hr/>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容       公司网站底部
-->
<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>C</dd>
    <dt>位置</dt>
    <dd>西安</dd>
    <dd>兰州</dd>
    <dd>上海</dd>
    <dd>北京</dd>
</dl>

</body>
</html>

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格table
行   tr   table rows
列   td
border 边框
colspan="4"   跨四列
rowspan="2"   跨两行
-->
<table border="1px">
    <tr>
        <!--colspan 跨列-->
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <!--rowspan 跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>
</body>
</html>

媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--音频和视频
src = :资源路径
controls ：控制条
autoplay : 自动播放
-->
<video src="../resources/video/测试视频.mp4" controls autoplay></video>
<audio src="../resources/audio/测试音频.mp3" controls autoplay></audio>
</body>
</html>

页面结构分析

header：标题头部区域内容(用于页面和页面中的一块区域)
footer:标记脚部区域的内容(用于整个页面或页面的一块区域)
section:web页面中一块独立的区域
article:独立的文章内容
aside:相关内容或应用(常用于侧边栏)
nav:导航类辅助内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>
<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体部分</h2>
</section>
<footer>
    <h2>网页脚部</h2>
</footer>
</body>
</html>

iframe 内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架iframe</title>
</head>
<body>
<!-- iframe 内联框架-->
<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97256834&page=1"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe><br/>
<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="800px"></iframe>
</body>
</html>

表单

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

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

-->
<h1>注册</h1>
<form action="1.我的第一个网页.html" method="get">
    <!--文本输入框
     input type="text"
     value：初始值
     maxlength="8" 内容长度限制
     size="50" 文本框长度
     type="submit" 提交
     type="reset"   重置 -->
    <p>名字:<input type="text" name="username" value="姓名" maxlength="8" size="50"></p>
    <!--密码框：input type="password" name="pwd" -->
    <p>密码:<input type="password" name="pwd"></p>
    <!-- 单选框标签
    input type="radio"
    value 单选框的值
    name 表示组，单选框必须组名一样

    -->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
    <!--多选框   type="checkbox"-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>
    <!--按钮标签
    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/1.jpg">
    </p>
    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>
    <!-- 列表框 下拉框

    -->
    <p>国家
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth" selected>瑞士</option>
            <option value="p">日本</option>
            <option value="i">印度</option>
        </select>
    </p>
    <!--文本域-->
    <p>反馈:
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>
    <!--文件域-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
    <!--邮件验证-->
    <p>邮箱:
        <input type="email" name="email">
    </p>
    <!--url 验证-->
    <p>url:
        <input type="url" name="url">
    </p>
    <!--数字验证-->
    <p>数字验证:
        <input type="number" name="num" max="100" min="10" step="10">
    </p>
    <!--滑块-->
    <p>音量:
        <input type="range" min="0" max="100" name="yinliang" step="2">
    </p>
    <!--搜索-->
    <p>搜索：
        <input type="search" name="search">
    </p>
    <!--只读  readonly-->
    <p>名字:<input type="text" name="username" value="Dave" maxlength="8" size="50" readonly></p>
    <!--隐藏  hidden -->
    <p>密码:<input type="password" name="pwd" hidden></p>

    <!--禁用   disabled-->
    <p>性别：
        <input type="radio" value="boy" name="sex"  disabled />男
        <input type="radio" value="girl" name="sex"/>女
    </p>
    <!--增强鼠标可用性  for  id-->
    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>
    <!--提示   placeholder-->
    <p>名字:<input type="text" name="username"  placeholder="请输入用户名"></p>
    <!--非空判断   required-->
    <p>名字:<input type="text" name="username"  placeholder="请输入用户名" required></p>
    <!--正则表达式  pattern-->
    <p>自定义邮箱：
        <input type="text" name="diyemail"  pattern="/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/" ></p>
    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
</form>
</body>
</html>
测试小明
关注
前端HTML基本知识汇总
m0_61608123的博客
02-24 2230
前端，html 知识汇总，前端表单知识
css入门小白自学记录知识点
06-11
以下是一些关于CSS入门的重要知识点： 1. **选择器**： - **元素选择器**：通过元素名来选中页面上的特定元素，如`p`选择所有的段落。 - **Id 选择器**：使用`#id名`来选中具有特定ID的元素，ID在页面中是唯一的...
HTML基础知识点大全
m0_69674158的博客
05-04 6990
一、什么是HTML HyperText Markup Language，即超文本标记语言 二、第一个HTML <！doctpye html> <html> <head></head> <body></body> <html> 三、常用的标签🀄️🀄️🀄️ 1⃣️p 标签 ，段落标签，占整行 2⃣️img 图片标签： ①src 图片路径：绝对路径http://xxx.xx/xx/x.jpg 相对路径..
自学html代码,新手学HTML代码的简易方法
weixin_34358799的博客
06-01 1657
如何快速入门学代码做音画贴有三种方法：①用HTML代码手工编辑，②网页软件制作，③图像处理软件做大图后用代码编贴。不论那一种方法，都必须采用HTML标签，才能发表见效果。因此，可以从学习HTML标签入门，先接触感性知识，有一定基础后，再去看HTML教材，就迎刃而解了。先来做个小实验吧！(一)在自己的电脑新建一个文件夹，随便命名为”学代码“。(二)文件夹内存放若干本记事本，作保存代码专用。(三)复制...
前端基础知识点
weixin_45875721的博客
07-30 3818
作为一名准大二学生，我准备提前预习前端的一些知识，所以就准备写了这篇文章，文章中有自己理解的，还有百度查到的，希望会对准备学习前端的同学有帮助。 1，什么是前端？ 前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。 2，前端的核心技术 HTML， CSS， JavaScript。 这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。这是前端的基础，一定...
自学是门手艺
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
12-04 5899
自学是门手艺 One has no future if one couldn't teach themself. 作者：李笑来 特别感谢霍炬（@virushuo）、洪强宁（@hongqn) 两位良师诤友在此书写作过程中给予我的巨大帮助！ 关于作者 李笑来，投资人，终生成长者。http://lixiaolai.com·xiaolai@github 出版书籍 TOEFL 核心词...
前端面试必备知识点总结
Laollaoaolao的博客
03-08 6183
这篇博客是对前端面试所必须掌握的知识点的总结,并且这篇博客正在持续更新中… 1.JavaScript 基础 1.执行上下文/作用域/闭包 1.什么是执行上下文? 执行上下文是评估和执行JavaScript代码环境的抽象概念。每当JavaScript代码在运行时，他都是在执行上下文中运行。 执行上下文的类型 JavaScript共有三种执行上下文类型 全局执行上下文 这是基础的上下文,任何不在函数内部的代码都在全局上下文中.他会执行两件事:创建一个全局的window对象(浏览器环境的情况下),并且设
学习JavaEE知识点总结
qq_36588953的博客
07-06 4417
Servlet 概念介绍 Java Servlet（Server Applet） 是运行在Web服务器或者应用服务器上的程序，它作为来自浏览器或者其他http客户端的请求和http服务器上的数据库或者应用程序的中间层。主要功能是用于交互式地浏览数据和修改数据，生成动态Web内容。 Sevlet工作模式介绍 ...
简单自学web前端——HTML+CSS基础入门
as740669149的博客
08-01 4736
　　虽然以前学过，不过还是有一些点忘记啦，所以那一晚上的时间看视频回顾了一下，以下记录自己一些记得不牢固的知识点。 html的语法 html的基本结构 文档设置标记 图像标记a标签 表格和表单 css简记...
HTML,CSS入门之登录页面(知识点详解)
高高冷的博客
06-13 1230
前言 Java面试Offer直通车 最近在自学JavaWeb，需要用到Html，css，js等的一些前端基础知识。花了一天时间学习了Html，css的一些基本操作（没有深入）。写了个经典的登录页面练习下。 知识点 CSS的几种基本选择器(id,clss) < img >标签调用背景图片(本地调用->src="…/…/") < a href=" ">标签 &
html5基础知识，期末复习大全
zm321917的博客
06-02 6950
html，css，js超详细基础知识及响应式设计，动画等进阶
html基础知识点以及常用标签
07-24
本文将深入讲解HTML的基础知识点，包括常用标签和属性，对于自学前端的人来说是很好的学习资料。 首先，HTML文档的头部通常包含`<title>`标签，它定义了浏览器标题栏显示的页面标题，如“家用电器排行榜”。`<meta>...
HTML自学.docx
10-15
总结一下，HTML自学的关键知识点包括： 1. 使用 `abbr` 和 `title` 展示缩写及全称。 2. `id` 与 `class` 的区别与应用。 3. `title` 在文档标题中的作用。 4. `target` 属性控制链接的打开方式。 5. `<table>`、`...
基于Java、Vue、JavaScript和HTML的冰智汇错题集与知识点学习系统设计源码
10-06
该项目是一款融合Java、Vue、JavaScript和HTML技术的综合学习系统源码，共计81个文件，其中Vue文件43个，JavaScript文件14个，JSON...每个模块均独立设计，便于扩展和维护，适用于学生和自学者的知识点积累与学习提升。
认识HTML（简介）
gjgeiugrwhgrewg的博客
11-11 722
只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。在这里，你将掌握一些重要的概念和语法，学习如何将 HTML 用于文本、如何创建超链接以及运用 HTML 去构建一个网页。该部分提供了一些链接，它们指向那些你在构建 Web 页面的过程中最常见的问题的解决方法：如何处理网页标题、添加图片或视频、强调某些内容、建立基本的表单等。这个模块将带领你探索如何使用 HTML 在你的网页中包含多媒体内容，包括通过许多不同的方式嵌入图片，以及如何嵌入视频、音频甚至整个其他网页。
HTML面试题
weixin_62668406的博客
11-14 557
src用于指定要加载的资源路径，常出现于标签由name（指定元数据的名称）和content（提供与name对应的数据）定义，用于描述网页。href用于指定的目标地址和在文档头部使用引入外部样式表时，用href制定样式表的地址。defer适用于需要在HTML完全解析后才运行的JS，尤其是依赖于DOM的JS，适用于包含多个JS的页面。5.
使用Markmap从链接生成脑图并下载为交互式HTML文件
Winfredzhang的博客
11-15 572
在这篇博客中，我们将探讨如何从指定链接中提取内容，生成Markdown格式的脑图，然后使用Markmap将其可视化，并最终下载为交互式HTML文件。通过以上步骤，我们可以轻松从链接中提取内容，生成Markdown格式的脑图，并使用Markmap进行可视化，最终下载为交互式HTML文件。接下来，我们使用Markmap将Markdown格式的脑图可视化。打开链接，使用浏览器的开发者工具（通常按F12）查看网页的结构，并定位文章的主要部分。根据分析的网页内容，我们生成一个Markdown格式的脑图结构。
CSS3_过渡（八）
最新发布
。
11-15 366
介绍CSS3过渡的属性及用法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值