HTML知识学习总结(入门)

最新推荐文章于 2024-07-21 17:58:14 发布
最新推荐文章于 2024-07-21 17:58:14 发布
阅读量187 收藏 1
点赞数 1
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45845042/article/details/105369126
版权

HTML知识学习总结(入门)

1，网页基本结构

  • 文档类型DOCTYPE：告诉浏览器，我们使用的规范（html5)
  • html ：总标签
  • head：头部标签
  • meta：描述性标签，用来描述网页的信息：如设置字符集，keywords，description
  • title：网页标题
  • body：网页主体
<!--文档类型DOCTYPE：告诉浏览器，我们使用的规范（html5)-->
<!DOCTYPE html>
<!--总标签-->
<html lang="en">
<!--头部标签-->
<head>
    <!--meta 描述性标签，用来描述网页的信息：如设置字符集，keywords，description-->
    <meta charset="UTF-8">
    <!--网页标题-->
    <title>我的第一个网页</title>
</head>
<!--网页主体-->
<body>
HELLO WORLD
</body>
</html>

2，网页基本标签

  • h1-h6:一级到六级标题标签

  • p：段落标签常常我们在需要分段大换行时候，对内容前加

    内容后加

    即可实现文章换段落。

  • br标签，换行标签，单独标签,相对于分段标签，更为紧凑

  • 字体样式标签，粗体和斜体 strong em

  • hr 水平线标签

  • 特殊符号

<!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标签，分段标签-->
<p>我是文字   我是文字我是文字我</p>
<p>我是文字   我是文字我是文字我</p>
<p>我是文字   我是文字我是文字我</p>
<p>我是文字   我是文字我是文字我</p>
<p>我是文字   我是文字我是文字我</p>
<p>我是文字   我是文字我是文字我</p>
<p>我是文字   我是文字我是文字我</p>
<p>我是文字   我是文字我是文字我</p>

<!--br标签，换行标签，单独标签,相对于分段标签，更为紧凑-->
我是文字   我是文字我是文字我 <br>
是文字我是文字我是文字我是 <br>
文字我是文字我是文 <br>
字我是文字我是 <br>
文字我是文字 <br>
<!--hr 水平线标签-->
<hr>
text1
<hr>
text2
<hr>
text3
<br>
<!--字体样式标签，粗体和斜体-->
<strong>
    text
</strong>
<br>
<em>
    text
</em>
<!--特殊符号：&XXXX;-->
<br>
空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格
<br>
空格                 空格
<br>
<!--直接输入的多个空格，只会显示一个，除非使用，&nbsp;：代表空格的特殊字符
    常用特殊字符：
    &gt;   大于号
    &lt;   小于号
    &copy;  版权符
-->
&gt;   
<br>
&lt;
<br>
&copy;
<br>
</body>
</html>

网页显示效果：
在这里插入图片描述

3，图像标签 img

  • 图像标签
    • src:图片地址 采用相对地址 …/表示上一级目录 在idea中，可以直接推拽图片，生成img标签路径
    • height：显示高度
    • width：显示宽度
    • alt: 图像的替代文字（当图片无法载入时，显示的替代文字）
    • title**:鼠标悬停提示文字
<img src="../res/img/桌面壁纸.jpg" alt="桌面壁纸" title="鼠标悬停提示文字" height="800" width="1000"/>

<!--图片无法正常显示时-->
<img src="../res/img/桌面壁纸" alt="桌面壁纸" tilte="鼠标悬停提示文字" height="1407" width="2500"/>

4，超链接标签 a

  • href:超链接的地址
  • target:打开的方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签</title>
</head>
<body>
<!--超链接标签
href :超链接的地址
target：打开的方式
-->
<!--在新页面打开超链接-->
<a href="https://baidu.com" target="_blank">超链接1</a>
<!--在当前页面打开超链接-->
<a href="https://baidu.com" target="_self">超链接2</a>

</body>
</html>
  • 锚链接:利用a标签实现页面上下的跳动
<!--利用a标签设置一个锚-->
<a name="top">顶部</a>
<p><br><br><br><br><br><br><br><br><br></p>
<p><br><br><br><br><br><br><br><br><br></p>
<p><br><br><br><br><br><br><br><br><br></p>
<p><br><br><br><br><br><br><br><br><br></p>
<p><br><br><br><br><br><br><br><br><br></p>
<p><br><br><br><br><br><br><br><br><br></p>
<p><br><br><br><br><br><br><br><br><br></p>
<p><br><br><br><br><br><br><br><br><br></p>
<!--利用a标签：回到顶部-->
<a href="#top">回到顶部</a>
  • 功能性标签
<!--功能性标签
mailto 邮件标签
-->
<a href="mailto:2809881362@qq.com">邮件</a>

5，行内元素与块元素

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

6，列表标签

类型：

  • 无序列表
  • 有序列表
  • 自定义列表

ol:有序列表

li:列表元素

ul:无序列表

dl:自定义列表

dt:自定义列表标题

dd:自定义列表元素

<!--有序列表-->
<ol>
    <li>l1</li>
    <li>l2</li>
    <li>l3</li>
    <li>l4</li>
</ol>
<!--无序列表-->
<ul>
    <li>l1</li>
    <li>l2</li>
    <li>l3</li>
    <li>l4</li>
</ul>

<!--自定义列表-->
<dl>
    <dt>
        列表名称1
    </dt>
     <dd>1</dd>
     <dd>2</dd>
     <dd>3</dd>
     <dd>4</dd>
    <dt>
        列表名称2
    </dt>
    <dd>1</dd>
    <dd>2</dd>
    <dd>3</dd>
    <dd>4</dd>
</dl>

7，表格标签

table:表格标签

tr:行标签
td:列表签
border:边框
colspan：跨列
rowspan：跨行

<body>
<!--表格
table:表格标签
tr:行标签
td:列表签
border:边框
colspan：跨列
rowspan：跨行
-->
<table border="1px">
    <tr>
        <td colspan="8">课程表</td>
    </tr>
    <tr>
        <td></td>
        <td>周一</td>
        <td>周二</td>
        <td>周三</td>
        <td>周四</td>
        <td>周五</td>
        <td>周六</td>
        <td>周七</td>
    </tr>
    <tr>
        <td rowspan="4">上午</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>

    <tr>
        <td rowspan="4">下午</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

8，音视频标签

video:视频标签

audio:音频标签

src:资源目录

autoplay:自动播放

controls:可以控制视频的播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频与音频</title>
</head>
<body>
<!--可控制的自动播放音频-->
<audio src="../res/music/music1.mp3" controls autoplay></audio>
<video src="../res/music/video.mp4" controls autoplay></video>
</body>
</html>

9，页面结构分析

网页页面内容大致可以分为以下几个部分

<!--标记头部区域的内容-->
<header></header>
<!--标记脚部区域的内容-->
<footer></footer>
<!--Web页面的一块独立区域-->
<section></section>
<!--独立的文章内容-->
<article></article>
<!--相关内容或应用（常用于侧边栏）-->
<aside></aside>
<!--导航类的辅助内容-->
<nav></nav>

10，iframe内联框架

作用：在一个网页中内联另一个网页

<!--在浏览器中内联B站视频，此处可以通过b站视频下的分享连接获得-->
<iframe src="//player.bilibili.com/player.html?aid=837715197&bvid=BV1vg4y187Zz&cid=174271596&page=1"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

<!--利用iframe内联一个百度-->
<iframe src="https://baidu.com" frameborder="0" height="1000" width="1000"></iframe>

<!--利用a标签,将超链接目标显示在以定义名字的iframe框架中-->
<iframe src="" name ="baidu" frameborder="0" width="1000" height="1000"></iframe>
<a href="http://baidu.com" target="baidu">打开百度</a>

11，表单

11.1表单form

<form action="  " method="  "></form>
  • **action:**表示表单提交为地址，可以是一个网站，也可以是一个请求输入地址
  • method:表单提交的方式（get，post）

11.2文本框

<input type="text" name="username" maxlength="16" minlength="6">
  • name:文本框的名字
  • maxlength:最大输入长度
  • minlength:最短输入长度

11.3密码框

<input type="password" name="username" maxlength="16" minlength="6">

11.4单选框

<input type="radio" name="sex" value="boy" checked>男
<input type="radio" name="sex" value="girl">女
  • name:表示单选组名
  • value:单选框的值
  • checked:表示被选中

11.5复选框

学科擅长:
<input type="checkbox" value="chinese" name ="subject">语文
<input type="checkbox" value="math" name ="subject">数学
<input type="checkbox" value="english" name ="subject">英语
<input type="checkbox" value="science" name ="subject">科学
  • name:表示复选组名（最好一致，方便后期处理）
  • value:复选框的值

11.6下拉框

 <p>
        年级:
        <select name="grade">
            <option value="first">初一</option>
            <option value="second">初二</option>
            <option value="third">初三</option>
        </select>
 </p>

11.7文本域

<p>
        <textarea cols="50" rows="10">

        </textarea>
</p>

cols:列数

rows:行数

11.8文件域

<p>
        <input type="file" name="upload">
</p>

11.9按钮

  • 自定义按钮
  • 图片按钮
  • 提交按钮
  • 表单重置按钮
    <p>
    <input type="button" name="btn1" value="上传" >
    </p>
    <p>
    <input type="image" src ="../res/img/桌面壁纸.jpg" name="img_btn1" value="img_upload"        height="200" width="200">
    </p>
    <p>
    <!--提交按钮-->
        <input type="submit">
    <!--表单重置按钮-->
        <input type="reset">
    </p>

11.10 标签

用于增强鼠标的可用性：点击Lable标签只能跳到id所对应的组件

<label for="s">搜索</label>
<input type="search" name="search" id =s>

11.11功能性组件

  • 数值型
年龄:<input type="number" num="year" max="120" min="0" step="1" value="15">
  • 邮箱验证型（最基本的验证）
邮箱:<input type="email" name ="email" >
  • URL验证型
URL:<input type="url" name ="url" >
  • 滑块
滑块:<input type="range" name="range" min="0" max="100">

11.12 隐藏

hidden :隐藏组件，但不影响值得传递

<input type="text" name="username" maxlength="16" minlength="6" hidden>

11.13 只读

readonly:组件的值只能看，不能改

<input type="text" name="username" maxlength="16" minlength="6" readonly>

11.14 禁用

disabled:组件不可用（不是隐藏，会被显示出来）

<input type="text" name="username" maxlength="16" minlength="6" disabled>

11.15表单的初级验证

  • placeholder :提示性信息
<input type="text" name="username" maxlength="16" minlength="6" placeholder="请输入用户名">
  • required:要求非空
<input type="text" name="username" maxlength="16" minlength="6" required>
  • patten:正则表达式匹配
<input type="text" name="username" maxlength="16" minlength="6" placeholder="请输入中文用户名" pattern="^[\u4e00-\u9fa5]{0,}$">
  • ​ 常用的正则表达式

https://blog.csdn.net/ZYC88888/article/details/98479629

11.16表单练习源码

<h1>用户注册</h1>
<form action="1.网页基本结构.html">
    <p>
        用户名:
        <input type="text" name="username" maxlength="16" minlength="6" placeholder="请输入中文用户名" pattern="^[\u4e00-\u9fa5]{0,}$">
    </p>
    <p>
        密码：
        <input type="password" name="username" maxlength="16" minlength="6">
    </p>
    <p>
        性别:
        <input type="radio" name="sex" value="boy">男
        <input type="radio" name="sex" value="girl">女
    </p>
    <p>
        年龄:
        <input type="number" num="year" max="120" min="0" step="1" value="15">
    </p>
    <p>
        学科擅长:
        <input type="checkbox" value="chinese" name="subject" >语文
        <input type="checkbox" value="math" name="subject">数学
        <input type="checkbox" value="english" name="subject">英语
        <input type="checkbox" value="science" name="subject">科学
    </p>
    <p>
        年级:
        <select name="grade">
            <option value="first">初一</option>
            <option value="second">初二</option>
            <option value="third">初三</option>
        </select>
    </p>
    个人简介 <br>
    <p>
        <textarea cols="50" rows="10" name="textarea">

        </textarea>
    </p>
    <p>
        <input type="file" name="upload">
    </p>
    <p>
        <input type="button" name="btn1" value="上传">
    </p>
    <p>
        <input type="image" src="../res/img/桌面壁纸.jpg" name="img_btn1" value="img_upload" height="200" width="200">
    </p>
    <p>
        邮箱:<input type="email" name ="email" >
    </p>
    <p>
        URL:<input type="url" name ="url" >
    </p>
    <p>
        滑块: <input type="range" name="range" min="0" max="100">
    </p>
    <p>
        <label for="ss">搜索</label>
        <input type="search" name="search" id =s>
    </p>
    <p>
        <!--提交按钮-->
        <input type="submit">
        <!--表单重置按钮-->
        <input type="reset">
    </p>
</form>

在这里插入图片描述

nextdoorloureed
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Python基础知识点总结
学Python的小白！
08-25 7万+
本文包括python基本知识：简单数据结构，数据结构类型（可变：列表，字典，集合，不可变：数值类型，字符串，元组），分支循环和控制流程，类和函数，文件处理和异常等等。
html学习心得，我感觉很好
08-28
这是别人写的html学习资料，我看了感觉不错，这里分享给大家 希望有用
HTML基础教学
Skywalker10的专栏
05-25 8554
课题:HTML基础课时:8课时一、  教学目标1.  了解WEB静态网页结构。2.  掌握HTML网页布局。3.  掌握HTML中最常用的标签。4.  掌握CSS在标签中的用法。5.  掌握网络教程的学习及使用方法。6.  了解HTML语义化。二、    教学重点1.  掌握HTML网页布局。2.  掌握HTML中最常用的标签。3.  掌握CSS在标签中的用法三、    教学难点1. 如何运用HT...
HTML"创作"心得
石页
07-16 1955
HTML"抄袭"网页制作(静态网页)[手动滑稽] 参考网站：http://www.178vr.com/sy 截图： 很好看，，，，very nice 我做的 截图： (JS正在学所以只能做静态网页) HTML看起来很简单但对我这种新手党也算不上友好 这也算的上是第一次实战了 心得： 1、在做网页是要对网页布局想好，实在不行就画下来。在...
Vue基础知识总结 1：Vue入门
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
HTML基础知识总结
qq_40046544的博客
11-14 3819
HTML 是用来描述网页地一种语言。HTML 指的是超文本标记语言（Hyper Text Markup Language）HTML 不是一种编程语言，而是一种标记语言（markup language）标记语言是一套标记标签（markup tag）HTML 使用标记标签来描述网页声明必须是 HTML 文档的第一行，位于 html 标签之前。声明不是 HTML 标签；它是指示 web 浏览器使用哪个 HTML 版本进行编写的指令。
HTML常用知识点总结笔记
果冻
07-01 6435
目录 前言 一、HTML简介 1.什么是HTML? 2.HTML 标签 (1)HTML标签 (2)head标签 (3)body标签 3.HTML 元素 二、基础知识 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、图片标签 (五)、相对路径和绝对路径 (六)、超链接标签（重点） (七)、列表标签 HTML3种列表 (1)、有序列表 (2)、无序列表 (3)、自定义列表 (八)、表格标签 (...
HTML入门（详细）
qq_63525426的博客
05-03 2万+
HTML（全称为“超文本标记语言”）是一种用于创建Web页面的标记语言。它是Web开发的基础，允许开发者定义页面的结构、内容和样式。HTML使用一些标记或“标签”来描述文本和媒体内容的结构和格式，这些标签可以指示网页浏览器如何显示内容，包括标题、段落、列表、超链接、图像、音频、视频等等。HTML还可以与其他Web技术（如CSS和JavaScript）结合使用，以实现更复杂和交互性的Web应用程序。这篇文章只是介绍HTML的基础标签的使用。
鸿蒙入门学习的一些总结
Abner_Crazy的博客
01-25 1574
鸿蒙入门学习的一些总结，包括学习资料和搜索问题的一些网站
HTML5 基础知识总结(全)
IT_Holmes的博客
04-22 7312
HTML 一1.文档类型2.字符集3.标签< h1 >到< h6 >4.文本格式化标签（熟记）5.标签属性6.图像标签img 学习HTML推荐使用Sublime Text软件来操作练习，一定要熟练使用这个软件，对以后的无论是工作还是学习都有很大帮助。 1.文档类型<!DOCTYPE> <!DOCTYPE html> 这句活就是告诉我们使用那个html版本。 只需要记住，看到上面这行代码，说明使用的是html5的版本。 2.字符集 <meta chars
HTML的知识点总结 HTML.xmind
05-26
HTML基本知识点总结，它是用xmind总结的，整体看起来思路会比较清晰，对于学习html的小伙伴，希望有所帮助
HTML入门学习总结.docx
11-22
HTML入门学习涉及许多基础知识，包括元素结构、属性的使用、布局技巧等。本文将深入探讨这些关键知识点。 一、盒子模型 在HTML布局中，盒子模型是理解网页元素布局的基础。每个HTML元素都可以视为一个矩形盒子，...
PHP编程入门的基本语法知识点总结
12-19
它的语法利用了 C、Java 和 Perl，易于学习。该语言的主要目标是允许 web 开发人员快速编写动态生成的 web 页面，但 PHP 的用途远不只于此。  简单来说，就是php是一种脚本语言，可以做很多事情。①服务器端脚本 ...
JavaScript入门系列之知识点总结
10-22
本文将总结JavaScript的入门知识点，帮助初学者快速理解和掌握这门语言。 首先，我们了解JavaScript的基本特性。JavaScript是一种动态类型语言，这意味着变量的类型可以在运行时改变。它也是弱类型语言，允许变量在...
HTML5知识点总结汇总
01-02
内容概述：文章包含了最基础的HTML5的知识点。 适用人群：适用于初级选手，可用作复习资料。 能学到什么：最开始的入门学习以及初识HTML。 阅读建议：先看视频在看本文章。
Spring MVC详解(学习总结)
热门推荐
梦想也许遥不可及，但重要的是追梦的过程，用博客记录自己的成长，记录自己一步一步向上攀登的印记
07-14 9万+
本篇文章对Spring MVC的常用知识点做了总结，画了思维导图，而且每个程序自己都亲自去测试过，文章也放了测试结果的图片，这篇博客主要是用了方便自己以后复习的，写得也比较详细，希望也可以帮助到大家......
html--图片变化
2301_81140745的博客
07-20 466
2.点击上传图片会有变化。
黑马JavaWeb企业级开发（知识清单）01——前端介绍，HTML实现标题：排版
最新发布
apple_68589597的博客
07-21 688
本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）01：前端介绍、html实现标题格式内容的总结，帮助需要学习Web开发的朋友温故而知新。
网页隐藏版之一行小说阅读器
m0_47147246的博客
07-19 344
网页隐藏版一行小说阅读器
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值