HTML入门笔记

简介: HTML入门笔记

HTML入门笔记


i、 HTML 是谁发明的HTML是Tim Berners-Lee“李爵士”发明的。他发明了万维网(WWW)包括HTML、HTTP、URL,万维网是基于互联网创建的。

ii、 HTML 起手式的意思是,写 HTML 时所必须的基本格式, 它包括文档类型,字符集编码,语言以及浏览器兼容等。一般在使用编译器的时候,可以通过! + Tab一键配置 HTML 的基本格式,如下图所示:

网络异常,图片无法展示
|

iii、 表章节标签

标题h1 ~h6

章节section

文章article

段落p

头部header

脚步footer

主要内容main

旁支内容aside

划分div

iv、 全局属性

class类。给元素取一个类名,一般配合 css 设置样式

id 全局唯一id,一般配合 js 使用,但是由于多处使用了浏览器也不报错,所以慎用

style 内联样式

title 鼠标移到标签上会在鼠标旁显示title的值

hidden 控制标签的隐藏

tabindex 如果元素需要被键盘tab键选中,可以设置值。值 < 0,表示不被tab选中;值 == 0,表示最后被选中;值 > 0 表示按值大小顺序选中

contenteditable 使标签可被直接编辑。想要更直观看到这个属性的效果可以点击这里修改样式试试看,或者复制下面的代码运行一下

v、 常用的内容标签

ol + li ordered list + list item。无序列表

ul + li unordered list + list item。有序列表

dl+ dd + dt description list + term + data。自定义列表

pre 被 pre 包裹的内容以原始内容输出。比如内容有多个空格以及换行都正常显示

hr 分隔线

br 换行

a 超链接标签

em 语气上强调

strong 表示内容重要

code 内容字体等宽。一般包裹代码块

q (quote) 引用。行内引用

blockquote 块级引用。被包裹的内容与上一行内容有一个缩进

reset.css 修改HTML默认样式

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
}
input,
button {
  font-family: inherit;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}


相关文章
|
前端开发 JavaScript C++
震惊!!!html竟然被...... 一篇博客让你从0开始熟悉并掌握html 超详细html笔记 全网独一份
本文是一份超详细的HTML学习笔记,从基础认知开始,介绍了网页的构成、五大浏览器、web标准、HTML/CSS/JavaScript的区别,然后详细讲解了HTML的概念、骨架结构、常用快捷键、注释、标签结构和关系。接着,通过大量实例深入探讨了HTML的各种标签,包括排版标签、文本格式化标签、媒体标签、链接标签、列表标签、表格标签、表单标签、语义化标签和字符实体,旨在帮助读者从0开始熟悉并掌握HTML。
206 2
震惊!!!html竟然被...... 一篇博客让你从0开始熟悉并掌握html 超详细html笔记 全网独一份
|
11月前
|
移动开发 前端开发 Java
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
290 20
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
325 13
|
缓存 Java 应用服务中间件
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
这篇文章详细介绍了在SpringMVC中创建JSP页面的全过程,包括项目的创建、配置、Tomcat的设置,以及如何实现页面跳转和配置模板解析器,最后还对比了JSP和HTML模板解析的差异。
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
|
前端开发 程序员 C++
【前端web入门第一天】01 开发环境、HTML基本语法文本标签
本文档详细介绍了HTML文本标签的基础知识。首先指导如何准备开发环境,包括安装VSCode及常用插件;接着全面解析HTML的基本结构与标签语法,涵盖从基本骨架搭建到注释的使用,以及标题、段落、换行和平行线、文本格式化等标签的具体应用,适合初学者循序渐进地掌握HTML。
237 3
|
移动开发 开发者 HTML5
构建你的首个个人网站:HTML基础入门
【8月更文挑战第29天】在数字化时代,拥有一个个人网站是展示自我、分享知识和技能的窗口。本文将引导你通过简单的步骤,使用HTML构建你的第一个个人网站。我们将探索HTML的基础标签,页面结构,以及如何将这些元素融合在一起创建一个简单的网页。无论你是编程新手还是希望扩展你的技术工具箱,这篇文章都提供了一条清晰的路径,帮助你开始你的网站开发之旅。
|
移动开发 前端开发 JavaScript
HTML入门(详细)
HTML入门(详细)
124 0
杨老师课堂之网页制作HTML的学习入门-含有案例1
杨老师课堂之网页制作HTML的学习入门-含有案例
172 3
|
存储 移动开发 API
HTML5本地存储:从入门到精通
HTML5本地存储:从入门到精通
343 1