HTML中常用知识点整理

最新推荐文章于 2022-01-07 16:24:11 发布
最新推荐文章于 2022-01-07 16:24:11 发布
阅读量378 收藏 9
点赞数 3
分类专栏： # Html+CSS 文章标签： 列表 html sdl css bi
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34137397/article/details/121134316
版权

html复习

HTML

  1. 是一个超文本标记语言

  2. w3c标准：结构标准，表现标准，行为标准。

基本结构

<!doctype html>
<html>
    <head>
        <title>网页的标题</title>
        <meta charset="utf-8"/>
    </head>
    <body>
    </body>
</html>
基本标签

1.段落标签：

<p></p>

2.标题标签：

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

3.换行标签：

<br />

4.水平线：

<hr/>

5.字体样式标签：

<strong>加粗</strong>
<b>加粗</b>
<em>斜体</em>

6.特殊符号：

大于：&gt;
  小于：&lt;
  空格：&nbsp;
  引号：&quot;
  版权符号：&copy;

7.图像标签：

<img src="图片路径" alt="图片显示不出来时显示的内容" title="鼠标悬浮显示的内容" width="宽度" height="l高度"  />

  • 相对路径：相对于当前页面的路径，eg: ../img.jpg  img/img.jpg

  • 绝对路径：相对于本机的路径，eg:D:\常用资料\21IT技能大赛\img.jpg

  • src:图片的地址（相对路径和绝对路径都可以）

  • alt：图片显示不出来时显示的替换文字内容，eg:alt="这是图书"

  • title：鼠标悬浮时显示的内容，eg:title="这是图书"

  • width:图片显示的宽度，eg:width="100"

  • height:图片显示的高度，eg:height="100"

8.超链接：

<a href="路径" target="是否在当前窗口中打开">百度一下</a>

  • href:跳转页面的地址，相对路径和绝对路径都可以

  • target：有两个值，_self:当前窗口打开超链接 _blank:在新窗口中打开超链接

9.锚链接：

  • 从页面的甲处跳转到乙处

语法：

甲处：<a href="#yi">去乙处</a>
乙处：<p id = "yi"></p>

10.块级元素和行内元素：

  • 块级元素：单独占一行，宽度是浏览器的宽度

  • 行内元素：内容撑开宽度，内容多宽，元素就多宽。左右都是行内元素，自动排列在一行

列表、表格和媒体元素

1.无序列表：

<ul>
   <li>No.1</li>
   <li>No.2</li>
   <li>No.3</li>
   <li>No.4</li>
  </ul>

2.有序列表：

<ol>
   <li>No.1</li>
   <li>No.2</li>
   <li>No.3</li>
   <li>No.4</li>
  </ol>

3.定义列表：

<dl>
   <dt>蔬菜</dt>
   <dd>黄瓜</dd>
   <dd>南瓜</dd>
   <dd>冬瓜</dd>
   <dd>北瓜</dd>
  </dl>

4.表格：

<table border="1" cellspacing="0" style="text-align: center;">
   <tr>
    <td colspan="3">第一列</td>
   </tr>
   <tr>
    <td rowspan="2">第一列</td>
    <td>第二列</td>
    <td>最后一列</td>
   </tr>
   <tr>
    <td>第二列</td>
    <td>最后一列</td>
   </tr>
  </table>

运行结果：

第一列
第一列第二列最后一列
第二列最后一列

5.音频元素：

<audio src="音频文件" autoplay="autoplay" controls="controls"></audio>

6.视频元素：

<video src="视频文件" autoplay="autoplay" controls="controls"></video>

  • **src：**音频或者视频的路径

  • **autoplay：**自动播放

  • **controls：**显示播放控件

7.网页结构元素：

<header>
   <nav>导航</nav>
  </header>
  <section>中间</section>
  <footer>底部</footer>
表单元素

1.文本框 ：

<input type="text" name="name" value="mxx" size="20" maxlength="20" placeholder="请输入用户名" required="required" readonly="readonly" />

  • type：表单的类型

  • name：表单元素的名称

  • value：默认值，初始值

  • size：表单的初识宽度

  • maxlength：最大输入的字符数

  • placeholder：提示信息

  • required：是否必填，不写的话不用必填

  • readonly：是否只读

2.密码框：

<input type="password" name="pass"  />

3.单选按钮：

<input type="radio" name="sex" />男
<input type="radio" name="sex" />女

注意：name的值必须要一样，否则不能单选

4.复选框：

<input type="checkbox"  checked="checked name="hob" />打篮球
<input type="checkbox" name="hob" />堆雪人
<input type="checkbox" name="hob" />打雪仗

注意：checked是默认选中的意思，可适用于单选按钮和复选框

5.下拉列表：

<select>
 <option>山东</option>
 <option selected="selected">山西</option>
 <option>河南</option>
 <option>河北</option>
</select>

注意：selected是默认选中

6.按钮：

<button disabled="disabled">普通按钮</button>
<input type="button" value="普通按钮" />
<input type="reset" value="重置按钮" />
<input type="submit" value="提交按钮" />

注意：disabled：是禁用按钮

7.多行文本域：

<textarea cols="5" rows="20">欢迎关注微信公众号：雄雄的小课堂</textarea>

  • cols：列

  • rows：行

8.文件域：

<input type="file" name="files" />

9.邮箱：

<input type="email" name="files" />

10.数字框：

<input type="number" min="0" max="100" step="100"/>

  • min：最小值

  • max：最大值

  • step：步幅

11.滑块：

<input type="range" min="0" max="100" step="1"/>

12.日期表单：

<input type="date" name="borndate"/>

13.隐藏域：

<input type="hidden" name="id"/>

14.语义化标签：

<label>用户名</label>

15.正则表达式验证：

<input type="text" name="phone" pattern="^1[3456789]\d{9}" />

  • pattern：值是正则表达式

穆雄雄
关注
专栏目录
html知识点
07-26
学习html css所总结的一些知识点
HTML5知识点思维导图(手工整理）
10-16
以下是一些核心的HTML5知识点： 1. **基本结构与标签**：HTML5文档的基础是`<!DOCTYPE html>`声明，它告诉浏览器使用HTML5规范解析文档。`<html>`标签定义了整个文档的根元素，而`<head>`和`<body>`分别代表元数据...
html常用知识点
lbx1260103425的博客
10-28 198
1、前端页面的组成：HTML（超文本标记语言，结构层）、css（层叠样式表，表现层）、JavaScript（脚本语言，行为层） 2、HTML文档结构 3、HTML语法：<标签></标签> 双标签 <标签名 /> 单标签 4、html注释内容： css注释内容：/* css注释内容 ctrl + / 或Ctrl+ shift + / */ 5、标签——元素、标记 ...
html 常用知识点
我的小屋的博客
08-15 905
段落 登黄鹤楼 白日依山尽 黄河入海流 跳转页面 href : 链接的地址 target : 打开页面的方式 title ：指定提示 图片标签 scr :图片地址，也可以远程图片地址 alt：图片损坏时显示 强行换行 绘制一条横线 独立出来文字 我是中国人 span ：独立出来 “中国”两字 文本框
HTML必备知识点
xfWgaoqiang的博客
10-14 178
1. 你是如何理解 HTML 语义化的？ 让页面内容结构化，它有如下优点 1、易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。 2、有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。 3、方便其他设备解析，如盲人阅读器根据语义渲染网页 4、有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐 2. canvas画布 const ctx = canvas.getContext(‘2d’); // 获取它的2d上下文 ctx.fillStyle = ‘green’
HTML常用的知识点总结
qq_53524948的博客
01-07 376
一、什么是HTML （1）HTML是一种超文本标记语言，超文本就是在电脑纸质上实现不了的。 （2）HTML的标签有单标签和双标签两种： 单标签：<单词> 双标签：<单词></单词> 二、HTML标签的属性 书写格式：<单词 属性1:“属性值1” 属性2:“属性值2”></单词> 作用:用来修饰标签,给标签提供更多信息,附加一些额外的功能 三、HTML的模板 在visual studio Code软件上你只需要在英文状态下打一个感叹号回车即可出现模板
JS常用知识点整理
11-27
JavaScript是Web开发中不可或缺的一部分，这里我们来详细探讨一下标题和描述中提到的几个关键知识点。 1. CORS（跨资源共享） CORS是一种机制，它使用额外的HTTP头部来告诉浏览器允许一个域上的网页访问另一个域上...
html知识点笔记整理
03-29
HTML、CSS、JavaScript 基础知识点笔记 HTML HTML（HyperText Markup Language）是一种超文本标记语言，用于网页的创建和结构化。HTML 由标签组成，标签可以分为单标签和双标签。单标签只有一个组成，例如：` `...
matplotlib绘图可视化知识点整理
01-27
**matplotlib绘图可视化知识点整理** 在数据科学和数据分析领域，可视化是至关重要的工具，而matplotlib则是Python中最常用的数据可视化库之一。本篇文章将详细介绍matplotlib的一些关键知识点，包括使用ipython和...
java学习资源知识点整理
最新发布
01-22
Java学习资源知识点整理 在Java学习的道路上，深入理解各个领域的知识是至关重要的。本资源包涵盖的内容丰富，包括Java核心、操作系统管理以及相关的技术框架，旨在帮助开发者全面提升技术能力。 1. **Java核心** ...
html总结
Paradise丶GeMinI的博客
06-30 267
html总结：1、企业应用计算模式主要有：CS模式（客户端/服务器）和BS模式（浏览器/服务器模式）2、html:超文本标记语言。以标记和子标记描述网页元素。 http：超文本传输协议。3、网页以*.html作为后缀名。 网页以作为根元素，该元素中包含和两个子元素。 标记一般用于设置网页标题、设置网页编码、书写或导入样式、书写或导入JS等。 标记用于描述网页内容。4、设置网页编码集5、网页注
HTML常用知识
zkzkzkz46的博客
01-17 153
一些HTML常用的基础知识 文章目录一些HTML常用的基础知识前言一、html基本语法规范1.标签一般成对出现2.标签中的包含关系与并列关系二、关于编译器给出的代码段1.关于编译器给出的代码段三、常用标签1.标题标签2.段落标签与换行标签3.文本格式化4.两种盒子5.图像标签6.路径7.超链接标签 前言 记录了一些学习html过程中的一些基础知识 一、html基本语法规范 1.标签一般成对出现 html的标签一般成对出现，例如 <html> </html> 2.标签中的包含关系与并
HTML常用知识点
m0_51405446的博客
06-01 691
一、html语法和规范 1、所有的html都是以htm或者html结尾，建议使用html； 2、整个html页面由<head></head>头和<body></body>体组成； 3、html标签一般是有开始标签和结束标签来表示如<head></head>，但是也有特殊的，如换行标签</br>； 4、html标签字母的大小写不敏感（不区分大小写），但是为了规范还是建议使用小写； ...
HTML常用知识点整理一（基本结构）
weixin_41452476的博客
09-26 173
HTML的相关概念和建站流程 1HTML的概念：超文本标记语言（英文Hyper Text Markup Language的缩写） 2HTML的基本组成 结构 html/xhtml w3c(万维网联盟)制定规范 样式 css w3c(万维网联盟)制定规范 行为 js ECMA(欧洲电脑网商联合会) 3...
HTML 部分
weixin_45932733的博客
07-14 162
1.标签<hr>在 HTML 页面中创建水平线。 例如 2.文本格式化可以改变文字的形式，详情去查手册 3.使用 target 属性，你可以定义被链接的文档在何处显示。下面的这行会在新窗口打开文档 <a href="https://www.baidu.com/" target="_blank"> 访问百度 </a> 4.<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接,需要在<he
HTML知识点
前端小菜
12-12 334
1、样式表 行间样式表： 内部样式表: 外部样式表: 2、边框 边框的方向：上右下左 边框的形状：非矩形（可以做一个三角 形） 3、背景 重要： background-attachment    背景图是否滚动      fixed     固定在浏览器可视区域内      scroll    跟随滚动条滚动 4、文字 多行文字测量行高： （
java基础中IO知识点的整理
06-01
好的，关于Java IO的知识点整理如下： 一、IO流的分类 1.按数据流向：输入流、输出流 2.按操作单元：字节流、字符流 3.按角色：节点流、处理流 二、字节流和字符流的区别 1.字节流操作的是8位字节，适用于二进制文件，如图片、音频、视频等； 2.字符流操作的是16位字符，适用于文本文件，如txt、html、xml等； 三、节点流和处理流的区别 1.节点流直接与数据源相连，读写数据源； 2.处理流不直接与数据源相连，通过节点流读写数据源，对读写过程进行包装，提供更高层次的操作。 四、File类 1.可以用来表示文件或目录 2.常用方法：创建文件、创建目录、删除文件、删除目录、判断是否存在、获取文件名、获取绝对路径等。 五、InputStream和OutputStream 1.InputStream是字节输入流的抽象类，常用方法：read()、available()、close()； 2.OutputStream是字节输出流的抽象类，常用方法：write()、flush()、close()； 六、Reader和Writer 1.Reader是字符输入流的抽象类，常用方法：read()、ready()、close()； 2.Writer是字符输出流的抽象类，常用方法：write()、flush()、close()； 七、字节流与字符流的转换 1.InputStreamReader：将字节流转换成字符流； 2.OutputStreamWriter：将字符流转换成字节流。 以上是Java IO的基础知识点，希望能对您有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

穆雄雄

哎，貌似还没开张来着呢~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值