HTML基础知识点笔记

最新推荐文章于 2024-07-31 22:37:55 发布
最新推荐文章于 2024-07-31 22:37:55 发布
阅读量280 收藏
点赞数
分类专栏： 其他
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zichen7055/article/details/94595161
版权

具体教程为https://www.runoob.com/

属性="值"

属性

描述

accesskey

设置访问元素的键盘快捷键。

class

规定元素的类名（classname）

contenteditable

规定是否可编辑元素的内容。

contextmenu

指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单

data-*

用于存储页面的自定义数据

dir

设置元素中内容的文本方向。

draggable

指定某个元素是否可以拖动

dropzone

指定是否将数据复制，移动，或链接，或删除

hidden

hidden 属性规定对元素进行隐藏。

id

规定元素的唯一 id

实例：

<a id="tips">提示</a>

<a href="http://www.runoob.com/html/html-links.html#tips"> #提示</a>#从另一个页面创建一个链接到"提示(id="tips"）"

 

lang

设置元素中内容的语言代码。

spellcheck

检测元素是否拼写错误

style

规定元素的行内样式（inline style）

tabindex

设置元素的 Tab 键控制次序。

title

规定元素的额外信息（可在工具提示中显示）

translate

指定是否一个元素的值在页面载入时是否需要翻译

实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<h1>我的第一个标题</h1> #元素

<!-- 这是一个注释 -->

<p>我的第一个段落。</p>

</body>

</html>

 

<标签> <标签/>

https://www.runoob.com/tags/html-reference.html

  •  <head>

添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, <base>.

<meta charset="utf-8">

 

定义网页编码格式为 utf-8

实例：

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者:

<meta name="author" content="Runoob">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">

<base href="http://.../" target="_blank">

描述了基本的链接地址/链接目标，作为HTML文档中所有的链接标签的默认链接

 

<link rel="stylesheet" type="text/css" href="mystyle.css">

通常用于链接到样式表

<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>

定义了HTML文档的样式文件

 

 

 

  • <iframe src="URL"></iframe> #网页内联框架
  • <br> 表示换行 无结束标签，但可以使用<br />
  • <p> 元素定义一个段落
  • <param>定义对象的参数。
  • <a href="http://www.runoob.com"  target="_blank">这是一个链接</a>
  • <hr> 在 HTML 页面中创建水平线，分割内容
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • 标题： <h1> - <h6> 标签
  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <h1> 定义最大的标题。 <h6> 定义最小的标题。

 

图像img

无结束标签

img的属性：border="0" src="smiley.gif"  width="32" height="32"

  • <img src="/图像url地址.png" alt="可替换的文本"  width="258" height="39" />

表格Table:

<tr>

    <th>Month</th>

 </tr>

 <tr>

    <td>January</td>

 </tr>

<table>

定义表格

<th>

定义表格的表头

<tr>

定义表格的行

<td>

定义表格单元

<caption>

定义表格标题

<colgroup>

定义表格列的组

<col>

定义用于表格列的属性

<thead>

定义表格的页眉

<tbody>

定义表格的主体

<tfoot>

定义表格的页脚

 

HTML 表单标签

标签

描述

 

<form>

定义供用户输入的表单

<form>

First name: <input type="text or password" name="name"><br>

</form>

<input>

定义输入域

type="checkbox" #复选框

type="radio" #单选按钮

type="password" #密码

type="submit" #提交按钮

<textarea>

定义文本域 (一个多行的输入控件)

 

<label>

定义了 <input> 元素的标签，一般为输入标题

 

<fieldset>

定义了一组相关的表单元素，并使用外框包含起来

 

<legend>

定义了 <fieldset> 元素的标题

 

<select>

定义了下拉选项列表

<select name="cars">

<option value="volvo">Volvo</option>

<optgroup>

定义选项组

 

<option>

定义下拉列表中的选项

 

<button>

定义一个点击按钮

 

<datalist>

指定一个预先定义的输入控件选项列表

 

<keygen>

定义了表单的密钥对生成器字段

 

<output>

定义一个计算结果

 

 

HTML 列表标签

<ol>

<li>

定义有序列表
  • Coffee
  • Milk

<ul>

<li>

定义无序列表

定义列表项
  • Coffee
  • Milk

<dl>

定义列表

<dl>

  <dt>项目 1</dt>

    <dd>描述项目 1</dd>

  <dt>项目 2</dt>

    <dd>描述项目 2</dd>

</dl>

<dt>

自定义列表项目

 

<dd>

定义自定列表项的描述

 

HTML 分组标签

标签

描述

<div>

定义了文档的区域，布局

<div id="container" style="width:500px">

<span>

用来组合文档中的行内元素， 内联元素(inline)

 

HTML 脚本标签

标签

描述

 

<script>

定义了客户端脚本

JavaScript教程：

https://www.runoob.com/js/js-tutorial.html

<noscript>

定义了不支持脚本浏览器输出的文本

 

 

HTML 字符实体

HTML 中的预留字符必须被替换为字符实体。

一些在键盘上找不到的字符也可以使用字符实体来替换。

https://www.runoob.com/tags/ref-entities.html

 

文本格式化

<b>粗体文本</b>

<code>计算机代码</code>

<em>强调文本</em>

<i>斜体文本</i>

<kbd>键盘输入</kbd>

<pre>预格式化文本</pre>

<small>更小的文本</small>

<strong>重要的文本</strong>

<abbr> （缩写）

<address> （联系信息）

<bdo> （文字方向）

<blockquote> （从另一个源引用的部分）

<cite> （工作的名称）

<del> （删除的文本）

<ins> （插入的文本）

<sub> （下标文本）

<sup> （上标文本）

 

zichen7055
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML基础知识学习笔记
T122498的博客
01-13 472
HTML基础知识学习笔记 快捷键的使用： Ctrl+N 新建页面 F4隐藏所有面板 F12预览页面 Ctrl+shift+S 另存为 Ctrl+tab 编辑窗口切换 新建时，一般要建三个文件夹 （CSS js images） HTML基础语法 - 标题字体 <h1></h1>（唯一性，一般放网页logo） <h2></h2>二级标题 <h3...
html相关知识点 笔记
qq_51983617的博客
12-04 441
因为html4基于SGML，需要DTD声明来告诉浏览器该文档的解析规范，但是html5不基于SGML，所以不需要DTD声明。他们分别是什么？如何区分标准模式和混杂模式严格模式和混杂模式导致页面元素有什么区别都是html中特定元素的属性，都用来引入外部的资源。区别：由结构层，表现层，行为层构成iframe标签可以将一个网页嵌入到另一个网页里面。title属性内容可以在鼠标放到图片上的时候显示在鼠标箭头旁边，alt属性的内容会在图片加载失败的时候代替图片显示出来。 行内元素和块元素 分别有什么元素有什么区别
HTML+CSS基础课程 笔记
晴晴晴的博客
07-13 1234
其实我也知道，自己的基础不好，很多知识没有学牢固。 所以，那么就不断总结，不断积累，不断沉淀吧~ 保持战斗力！ 关于html+CSS的一些笔记 div id="版块名称">…div> tbody>…tbody> 当表格内容非常多时，表格会下载一点显示一点，但如果加上tbody>标签后，这个表格就要等表格内容全部下载完才会显示。 p标签不能包含其它块标签 语言代码段
HTML基础笔记
最新发布
2301_79235379的博客
07-31 719
（定义项目/名字）和（描述每一个项目/名字）一起使用。名词1名词1解释1名词1解释2
HTML基础知识点总结 .doc
11-21
思沃普智能会议管理系统，是一个集智能控制，会议预约，会议管理，设备运维，音视频会议于一体的智能化会议系统。是未来企业办公以及联合办公空间发展趋势所在。如果贵公司觉得我们的建议对您有所帮助，请与我联系。思沃普，邀您共享智能会议：http://www.smartwork.link/Saas.html
HTML基础知识总结
盛哥修行录的博客
11-22 481
经过这段时间的学习，对于html的一些基础知识有了一定的了解。所谓好记性不如烂笔头，唯有一点点累积，才能汇聚成知识的海洋。现在，我对这段时间的学习做一个总结。 一、HTML的定义 HTML，超文本标记语言，写给浏览器的语言，目前网络上应用最广泛的语言。HTML也在不断的更新，最新版本已经出现了HTML5。在HTML5中出现了许多新特性，也遗弃了一些旧元素。我们...
HTML基础知识笔记
如你眉间朱砂的博客
10-16 113
以下为我在学习中总结的相关笔记 网站就是特定相关内容网页的集合，网页是构成网站的基本元素。 什么是HTML？ HTML就是超文本标记语言，它不是编程语言，而是一种标记语言，标记语言是一种标记标签。 什么是超文本？ 超文本就是可以加入图片，声音，动画等内容，而这些内容超越了文本限制；并且可以从一个文件跳到另一个文件，即超级链接文本。 目前常用的浏览器有IE,Firefox，Chrome，Safari，Opera 浏览器内核的定义：浏览器内核又称为渲染引擎，负责读取网页内容，整理信息，计算网页的显
html知识点笔记整理
03-29
HTML、CSS、JavaScript 基础知识点笔记 HTML HTML（HyperText Markup Language）是一种超文本标记语言，用于网页的创建和结构化。HTML 由标签组成，标签可以分为单标签和双标签。单标签只有一个组成，例如：` `...
bootstrap基础知识学习笔记
09-01
通过深入学习和实践以上知识点，你可以熟练掌握 Bootstrap 的基础用法，从而高效地构建美观且响应式的网站或应用。在实际项目中，结合其他前端技术（如 Angular, React, Vue 等）和后端框架，Bootstrap 可以发挥更大...
PHP基础知识笔记
01-08
在PHP基础知识笔记中，我们将深入探讨以下几个核心概念： 1. **PHP语法**：PHP脚本以`开始，`?>`结束，可以放置在HTML文档的任何位置。PHP文件的默认扩展名为`.php`，通常包含HTML和PHP代码。 2. **注释**：PHP...
html,css基础知识笔记.doc
01-14
以下是对这些知识点的详细解释： 1. **HTML基础** - **超文本标记语言（HTML）**：HTML是一种标记语言，用于定义网页的结构和内容。它的主要任务是组织网页的元素，如文本、图片、链接等。 - **HTML发展**：HTML...
JavaScript基础知识学习笔记
10-25
以下是对标题和描述中所述知识点的详细展开： 1. **JavaScript的定义**： JavaScript并非与Java相关的语言，尽管它们名字相似。JavaScript最初由Netscape公司的Brendan Eich开发，其设计目标是让网页具有动态性和...
HTML基础知识笔记（0基础入门）
whylllll的博客
11-11 836
HTML&CSS基础知识笔记HTML一、HTML介绍二、实体三、meta标签四、语义化标签（一）五、语义化标签（二）六、语义化标签（三）七、列表八、超链接九、图片标签十、内联框架十一、音视频功能快捷键合理的创建标题，有助于目录的生成插入链接与图片 HTML HTML(Hyper Text Markup Language)超文本标记语言 一、HTML介绍 网页的基本结构： <html> <head> <meta> <title></t
HTML_基础
anxyanxyan的博客
07-17 267
1.浏览器内核 浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。 渲染引擎 它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。 JS 引擎 则是解析 Javas...
Bootstrap3.3.5基础知识学习笔记：HTML/CSS/JS应用详解
以下是关键知识点： 1. 引入Bootstrap库：学习笔记提供了页面引用部分，展示了如何在HTML中引入Bootstrap的核心JavaScript（`bootstrap.js`）、CSS样式表（`bootstrap.css`和`bootstrap-theme.css`）。这些文件通常...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值