html基础知识

最新推荐文章于 2022-03-14 20:33:36 发布
最新推荐文章于 2022-03-14 20:33:36 发布
阅读量674 收藏 4
点赞数
分类专栏： # html学习笔记 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaotai1234/article/details/106538167
版权

html基础知识

1.windows快捷键

  • Ctrl + C：复制
  • Ctrl + V：粘贴
  • Ctrl + X：剪切
  • Ctrl + S：保存
  • Ctrl + N：新建
  • Ctrl + A：全选
  • Ctrl + Z：撤销上一个操作
  • win + E：打开资源管理器
  • Alt + tab：切换程序（注意Alt键不松手）
  • Win + D：切换到桌面
  • Win + R：快速运行（打开软件）
    • cmd：命令行
    • calc：运行计算器
    • mspaint：运行画图工具
      2.五大浏览器介绍
  • IE（Edge）浏览器·
  • Firefox（火狐）浏览器
  • Chrome（谷歌）浏览器
  • Safari浏览器
  • Opera（欧朋）浏览器

浏览器内核
作用：将网页代码解析（转换）并渲染（显示）成用户眼中的界面

  • IE浏览器（Trident）
  • Firefox（火狐）浏览器（Gecko）
  • Chrome（谷歌）浏览器（blink）
  • Safari浏览器（webkit）
  • Opera（欧朋）浏览器（blink 早期：presto ）

3.HTML的概念
HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标记语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

4.HTML骨架结构

页面的标题 写自己的代码

为了便于阅读：包含关系的标签使用用缩进

5.HTML的标签分类
双标签：如标签的内容
语法：<开始标签> 标签内容 </结束标签>
我要变粗 …
单标签：
单标签都是功能性的标签，例如换行等功能里面不需要添加内容
语法：<标签名 />

…

6.HTML中的标签
h 系列的标签 (Header) : 标题标签
h1，h2，h3，h4，h5，h6

作用 : 给页面上的文字加上标题的语义

代码 :

我就是h1标签

效果 : h1，h2，h3，h4，h5，h6 将文字放大、加粗、并且逐渐变小（h1标签是最大的）

特点 : 独占一行

注意 : h1 标签尽量少用，太多不利于SEO(搜索引擎优化) 。 一般h1 都是给文章的标题或者 logo使用。
p 标签 (Paragraph) : 段落标签
作用: 给页面上的一段文字加上段落的语义

代码:

这是段落

特点：页面上的一个段落，单独占一行，并且与上下内容之间存在距离。

hr 标签 (Horizontal Rule)：水平线标签
作用: 在页面上显示一条横线

代码:

或者

br 标签 (break row=行)：换行标签
作用：强制换行（代码中换行无效）

代码：

(4组)文本格式化标签
作用:

  • b: 加粗
  • u: 下划线
  • i: 倾斜
  • s: 删除线

建议不要使用, 因为这些标签没有语义

作用:

  • strong: 加粗
  • ins: 下划线
  • em: 倾斜
  • del: 删除线

可以使用

语义: 起强调加强语气作用
7.标签的属性
属性为 HTML 元素提供附加信息。（让同一种标签有不同的显示效果）
比如：

格式： <标签名 属性名1="属性值1" 属性名2="属性值2" …> 内容
  • 标签可以同时有多个属性，并且属性之间以空格隔开（可读性、规范）
  • 标签名与属性名之间，必须以空格隔开！
  • 属性与属性之间没有顺序关系！
  • 每个标签上的属性并不是完全相同

提倡：尽量不使用样式属性。
8.图片标签
img 标签 (image的简写) ：图片标签
作用： 在页面中显示一张图片

代码：

特点： 就是显示图片

属性：

  • src：图片显示的路径（必须）
  • alt：如果图片加载不出来，会显示这个属性中的文字
  • title：介绍这张图片
  • width：图片的宽度
  • height：图片的高度

图片宽高只设一个, 另一个会等比例缩放

两个都设可能会变形，所以一般我们只设一个。
9.路径问题
绝对路径

用的较少，可移植性差

带有盘符的路径: C:\Users\ziyue\Desktop\代码\01.jpg

相对路径

用的很多，可移植性很好

同级目录

如果页面与图片同一级目录，直接写目标文件的名字（类比如我们俩都在大厅）
<src=“2.jpg”>
或者
<src="./2.jpg">

下级目录

下级目录：如果图片在同级目录image文件夹下
< src=“image/1.jpg”>
步骤：

  1. 找到图片所在的目录（先写文件夹的名字）
  2. 去图片所在文件夹里面（文件夹名字/）
  3. 然后直接写目标文件的名字即可（文件夹名字/目标文件的文件名）

上级目录
上级目录：如果图片在页面的上一级目录、
< src=”…/2.jpg” >
步骤：

  1. 首先去目标文件所在的目录。去上一级目录（…/）
  2. 直接在路径后面写目标文件的名字（…/目标文件的名字）
    总结：
  • 通过文件夹名 / 可以来到下一级目录，通过…/ 可以来到上一级目录
  • 一般开发中用的最多的是相对路径，因为相对路径的可移植性要强。（我发给你，你能看~）

10.链接标签
a 标签 (Anchor ) : 超链接（锚）
超链接在页面中起到跳转或定位的作用（超链接、锚链接、a链接、a标签）
a标签的跳转功能
作用: 可以从一个页面跳转到另一个页面

代码: <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

效果：

  1. 链接未点击的时候，默认显示蓝色
  2. 链接点击过以后，显示为紫色（因为浏览器有默认的缓存机制，只要访问过一次的链接，默认都会展示成紫色，只有清除浏览器的缓存，才会变蓝）

注意：

  1. 在 a 标签之内必须写上内容, 如果没有内容, 页面上会看不到
  2. a 标签不能嵌套（如果有两个a标签嵌套，那么点击的时候去哪里呢？）
    a 标签的属性
  • href：a 标签跳转的目标地址（路径）
    • 外部链接（互联网上）需要添加 https:// www.baidu.com
    • 内部链接（文件夹中）直接链接页面的路径即可 比如 < a href=“index.html”> 首页
  • target：用于指定链接页面的打开方式
    • _self ：在当前页面，进行跳转
    • _blank : 保留原始页面，再进行跳转
  • 相关标签 ：
    base 标签
    作用：可以为页面上所有的a标签设置跳转的方式（base标签一般放在titile标签下面）
    a 标签的其他用法
  • 可以不跳转 (不写路径其实会刷新页面！刷新也不要哦~)
    • href="#"
    • 项目中没有确定链接目标时，通常将链接标签的href属性值定义为“#”，表示该链接暂时为一个空链接
  • 可以进行下载（一般不用）
    • 当路径指向的目标文件是浏览器打不开的文件时，浏览器会默认下载下来。
      a标签的定位功能
      a标签可以快速定位到当前页面或者其他页面的目标内容（百度百科）
      在当前页面进行定位
      步骤：
  1. 给目标标签加上id属性
    <p id="mao">我是一只猫</p>
  2. 给链接的href属性中写上#目标标签的id属性值
    <a href="#mao">吸猫大法</a>

在跳转的页面进行定位
步骤：

  1. 给目标文件中的目标标签加上id属性
    <p id="mao">我是一只猫</p>

2.给当前文件的链接的href属性中写上 目标文件路径#目标标签的id属性值
<a href="目标文件路径#mao">吸猫大法</a>

11.结构中每个标签的含义
DOCTYPE : 文档类型
作用： 用来定义文档类型（告诉浏览器，使用哪种规范去解析html页面）

位置：文档的最前面的位置

规范：HTML 或 XHTML 规范

html:xt ：XHTML规范，已经淘汰了， 一些特别老的网站会有，知道即可

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html:5 ： HTML5规范，非常的简洁

<!DOCTYPE html>

html 标签

<html lang="en">
</html>

en-英文 zh-中文
英文的意思并不是告诉浏览器，我们这就是纯英文的，而且告诉浏览器我们的内容以英文为主，提高浏览器的渲染性能

head 标签
作用：用于存放网页的配置标签和引入文件的标签

title、meta、base、style、script、link

注：在head标签中我们必须要设置的标签是title, 其他可有可无

body 标签
作用：页面在的主体部分，用于存放页面中的html标签

p、h、a、b、u、i、s、em、del、ins、strong、img

meta 标签
作用：设置网页的元信息

注意：meta中设置的所有的内容在页面都不会显示, 在其中可以设置编码格式、样式、关键字等等

设置字符集（编码格式）：

<meta charset="UTF-8">

Charset（字符集的格式）：UTF-8

ヾ(๑╹◡╹)ﾉ"乱码的原因

最常见的3种字符集（字典）：

  • UTF-8：国际化的字典，字体库，收录是全世界所有的语言中的文字
    1汉字 = 3个字节
  • GBK：收录了大陆汉字，还加了港澳台的文字-》ANSI（中国）
    1个汉字= 2个字节
  • GB2312：收录了大陆汉字

约定：将来我们在整个学习过程中都用utf-8（与国际接轨）
title 标签
作用：让页面拥有一个属于自己的标题。

注意：title中的文本在 seo 中占有很大的权重，不能乱写
12.SEO与标签语义化
title标签与h1标签的权重
SEO : 搜索引擎优化
Search Engine Optimization

写网页的目的-》用户的习惯-》用户的结果-》怎样排名靠前-》seo

作用：用来优化网站，使用网站在搜索引擎上的排名靠前

怎样提升网站的SEO

  • 花钱买排名
    缺点：烧钱。
    优点：效果杠杠的
  • 将页面做成静态页面（html后缀）
  • 发外链（类似于广告）
  • 标签语义化（语义化规范）
    在合适的地方使用合适的标签
    标签语义化的应用：每个html标签都有属于自己的语义，有使用标签时候要一定要了解每个标签的语义，合理使用。

标签语义化的好处
在合适的地方使用合适的标签（比如title和h1）

  1. 对搜索引擎的友好，提高网页的SEO（将来网络爬虫进入页面之后可以很方便的得到页面的重要信息）
  2. 提升用户体验（css加载不出来也能看出重要性）
  3. 利于代码的可读、维护、提高开发效率 (网页源代码方便查询)
xiaotai1234
关注
专栏目录
Html基础知识点.docx
07-23
Html 基础知识点 Html 是一种标记语言，用于创建网页的结构和内容。以下是 Html 基础知识点： 一、Html5 文档类型和字符集 * Html5 文档类型：<!doctype html> * Html5 字符集： 二、Html5 Canvas 元素 * ...
『HTML系列』段落标签 p
老__L的博客
10-16 3654
本文主要介绍p标签。 可以把 HTML 文档分割为若干段落的标签。该标签通常表现为一整块与相邻文本分离的文本，或以垂直的空白或以首行缩进。在网页中要把文档有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是 HTML 文档中的最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。是块级元素；起始标签是必需的，
html语言中的p标记,关于HTML中p标记的所有信息
weixin_39690391的博客
06-04 1791
标签将有助于将您的内容组织到下一段中。内容的每一段都应该在HTML中的p标记的开头 和结尾 之间给出，HTML中的特定属性pf p标记HTML中的标记还支持表中下面提到的其他属标签将有助于将您的内容组织到下一段中。内容的每一段都应该在HTML中的p标记的开头 和结尾 之间给出，HTML中的特定属性pf p标记HTML中的标记还支持表中下面提到的其他属性。属性值描述AlignLeftRightCen...
HTML5主要知识点总结
Seven的博客
06-28 1257
html5主要知识点总结一、HTML5的概念二、HTML5 新增部分简介1，新增的结构标签2，新增的智能表单2.1 input表单新增了type属性值：2.2 表单智能验证2.3 表单新属性2.4 智能表单过滤（datalist）3，video和audio标签4，canves的基本用法4.1 canves元素4.2 一个简单的例子5，js获取元素的新方式6，js操作类名的新方法7，js自定义属性8，网络状态9，地理定位9.1 获取地理位置的方式9.2 API详解10，web存储10.1 特性10.2 win
html5知识点
yookooi
03-14 1079
一、html5是什么 HTML5 是最新的 HTML 标准。 HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。 HTML5 拥有新的语义、图形以及多媒体元素。 HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。 HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。 二、新增语义化标签 html5中新增的语义化标签可以分为两大类：块元素标签和内联元素标签。 1.块元素标签 （1）<header&gt
day01
zw_10254534的博客
04-11 537
# 认识网页```网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。```&lt;img src="media/mi.png"alt=""&gt;```思考：  网页是如何形成的呢?```&lt;img src="media/web.png" /&gt;# 常见浏览器内核介绍```浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox...
html基础知识1111
最新发布
03-26
html基础知识1111
HTML基础知识点汇总
12-04
HTML 基础知识点汇总 HTML（Hypertext Markup Language，超文本标记语言）是网页设计的基础语言，它将影像、声音、图片、文字等连接显示出来。HTML 语言使用标记式的指令（Tag），将网页文件组织起来，并由浏览器...
HTML基础知识讲解！
03-26
HTML 基础知识讲解 HTML 基础知识是网页开发的基础，了解 HTML 基础知识是学习网页开发的必备条件。本文将详细讲解 HTML 基础知识，包括 HTML 标题、HTML 段落、HTML 链接和 HTML 图像等。 HTML 标题 -------- ...
HTML5基础知识归纳汇总
08-30
HTML知识点汇总，包括HTML文档结构和基本语法、HTML4元素、HTML4属性、HTML5元素、HTML5属性和HTML5全局属性的知识点。使用XMind打开。
html5和CSS知识点分享
04-21
CSS3和html5的知识点总结，适合入门的朋友预览。是学习CSS3之前，预习的好知识点。
关于HTML 笔记篇
天涯海风的博客
08-20 2613
学习目标: 了解常用浏览器 掌握WEB标准 理解标签语义化 掌握常用的排版标签 掌握常用的文本格式化图像链接等标签 掌握三种列表标签 掌握表格标签 掌握表格标签 掌握表单标签 typora-copy-images-to: media 自我介绍 前端基础 html +css 基础班 html 2 +css 7天 9 天 传统布局 + 3天...
p标签和超链接的认识
热门推荐
点点的java小栈
08-02 1万+
本文主要介绍html里常用的基本标签<p>标签，以及特别讲解a标签超链接的使用。
HTML常用标签、p段落标签、br换行标签、文本格式化标签
七七的博客
03-03 3263
根据标签的语义,在合适的地方给一个最为合理的标签,可以让页面结构更清晰。 标题标签< h1> - < h6> 为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题， <h1> - <h6>。 <h1> 我是一级标题 </h1> 单词head的缩写,意为头部、标题。 标签语义 : 作为标...
html入门（二）—— 段落和文字
快乐程序猿的博客
02-11 680
1. 标题标签h1~h6 A. 一个页面中只能有一个h1，但可以有多个h2到h6。从h1到h6，级别越来越低，也就是字体越来越小。2. 段落标签p，用于标记一段文字 A. 连续多个段落标签p或标题标签h1~h6之间会自动换行，并且有一定的空隙。3. 换行标签br，即<br/> A. 被换行标签分割的多个连续段落间没有空隙。 e.g. <p>...
4.3 段落标签<p>
mmsx2017的博客
03-06 316
一、段落标签&lt; p&gt; 语法：&lt; p&gt;段落内容&lt; /p&gt; 段落标签会自动换行，并且段落与段落之间有一定的空隙 二、换行标签&lt; br/&gt; 方法一：采用两个&lt; p&gt;标签（两行之间有空隙） 例如：&lt; p&gt;床前明月光，疑是地上霜。&lt; /p&gt; &lt; p&gt;举头望明月，低头思故乡。&a
＜!doctype＞标记
小小唐僧的博客
05-11 583
目录一. < !doctype>标记 一. < !doctype>标记 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> </body> </html> 初始自带源
html5—史上最全的知识点
贤蛋大眼萌
01-23 474
史上最全的html5知识点新增的主体结构元素article元素section元素nav元素aside元素time元素和pubdate属性新增的非主体结构元素header元素address元素footer元素和hgroup元素网页编排规则 新增的主体结构元素 article元素 article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或者报刊中的文章、一篇论坛的帖子、一段用户评论或独立的插件，或是其他任何独立的内容 article元素可以嵌套使用 article元
HTML基础知识详解
...它是Web开发的基础，允许开发者通过各种标签...这些只是HTML基础知识的一部分，实际开发中还有表格、列表、链接、图像、表单、框架、多媒体等诸多元素和属性。熟练掌握这些基本概念是成为一名合格的前端开发者的基础。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值