HTML / 基础知识

已于 2022-07-11 14:03:53 修改
阅读量772 收藏
点赞数
分类专栏： 前端学习 文章标签： html 前端 javascript
于 2022-01-27 17:23:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39565174/article/details/122719736
版权

目录

一、Web标准的构成

二、基础标签

（1）骨架

（2）基础标签

（3）文本格式

（4）div和span

（5）图像标签

三、路径

（1）相对路径

（2）绝对路径

四、超链接

（1）超链接标签

（2）链接分类

五、注释

六、特殊字符

一、Web标准的构成

结构Structure+表现Presentation+行为Behavior

  • 结构：网页元素整理分类 HTML
  • 表现：网页元素的版式 CSS
  • 行为：网页模型定义与交互 JS

二、基础标签

（1）骨架

  • html 最大标签 根标签
  • head 头部
  • title 标题 网页名
  • body 主体 页面内容基本在body中

VSCODE中输入！+tab就能输出基本骨架

ctrl+shift+x扩展插件

  • 其中<!DOCTYPE>是文档类型声明 是声明标签 告诉浏览器HTML的版本 必须在页面的第一行
  • <html lang="en">定义整个文档显示的语言 en 英文 zh-CN 中文 fr 法语
  • <meta charset=“UTF-8"> 字符集 GB2312简体 BIG5繁体 GBK简繁 UTF-8万国码

（2）基础标签

  • <h1>-<h6> 标题标签 由大到小 由粗到细 独占一行
  • <p>段落标签 分段显示 paragraph 文本在一个段落中会根据浏览器窗口大小自动换行
  • <br /> 换行标签 break 是单标签

（3）文本格式

  • 加粗 <strong></strong>      <b></b>
  • 倾斜 <em></em>       <i></i>
  • 删除线 <del></del>       <s></s>
  • 下划线 <ins></ins>       <u></u>

（4）div和span

<div>和<span>无语义 相当于盒子用来装内容

  • div独占一行 相当于大盒子
  • span可以并列 一行显示多个 相当于小盒子

（5）图像标签

图像标签是单标签 <img />

属性采取键值对的形式

图片要和网页放在一起

  • src 必须属性 图片的路径
  • alt 替换文本 图不显示 显示的文字
  • title 提示文本 鼠标悬浮显示的文字
  • width 宽
  • height 高
  • border 边框

三、路径

（1）相对路径

图片相对于HTML页面的位置

同级 <img src="img.jpg" />

下一级 <img src="images/img.jpg" />

上一级<img src="../img.jpg" />

（2）绝对路径

从盘符开始，斜杠用\

网络图片可以用绝对路径

四、超链接

（1）超链接标签

<a></a> anchor锚

  • href 必须属性 链接地址
  • target 页面打开方式 _self为默认值 _blank为在新窗口中打开
  • <a href="..." target="...">文本或图</a>

（2）链接分类

  1. 外部链接 
        <a href="http://www.qq.com" target="_blank" >腾讯</a>
  2. 内部链接：网站内部网页相互链接 直接写网页名称 
        <a href="02-第一个页面.html">02页面</a>
  3. 空链接：链接可以先填#
  4. 下载链接：地址为.exe或.zip等压缩形式
  5. 网页元素的链接
  6. 锚点链接：点击链接可以定位到页面中的某个位置
  • 设置属性为#名字 的形式 如<a href="#two">第二集</a>
  • 给目标位置标签添加一个id属性=刚才的名字 如<h3 id="two">第二集</h3>

五、注释

<!--      注释        -->

快捷键 选中-CTRL+/

六、特殊字符

  • &nbsp; 空格
  • &lt; 小于号 less than <
  • &gt; 大于号 greater than >
  • &amp; 和 &
  • &yen; 人民币 ￥
  • &copy; 版权 
  • &reg; 注册商标
  • &deg; 摄氏度
  • &plusmn; 正负号
  • &times; 乘号
  • &divide; 除号
  • &sup2; 平方
  • &sup3; 立方

winglamx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML基础知识总结 2021新版
覃仔的博客
02-01 2786
第一章 HTML 基础知识 1、 HTML 简介 Hypertext Markup Language （超文本标记语言） 简写：HTML HTML 利用各种标记来标识文档的结构以及标识超链接的信息。 HTML是通过标签来标记要显示的网页中的各个部分。网页也是文件本身一种文本文件，通过在文本文件中添加标记符，告诉浏览器应该如何显示其内容（比如：文字的处理、网页的排版、图片的显示等） 图为HTML文本 2、 HTML 的标记组成 HTML 用于描述功能的符号称为“标记”。标记在使用时必须用尖括号“ &
Html基础知识点.docx
07-23
Html 基础知识点 Html 是一种标记语言，用于创建网页的结构和内容。以下是 Html 基础知识点： 一、Html5 文档类型和字符集 * Html5 文档类型：<!doctype html> * Html5 字符集： 二、Html5 Canvas 元素 * ...
webpack3.X 学习day1 （简单的Demo）
weixin_34380948的博客
01-04 80
2019独角兽企业重金招聘Python工程师标准>>> ...
HTML基础知识总结
qq_40046544的博客
11-14 3567
HTML 是用来描述网页地一种语言。HTML 指的是超文本标记语言（Hyper Text Markup Language）HTML 不是一种编程语言，而是一种标记语言（markup language）标记语言是一套标记标签（markup tag）HTML 使用标记标签来描述网页声明必须是 HTML 文档的第一行，位于 html 标签之前。声明不是 HTML 标签；它是指示 web 浏览器使用哪个 HTML 版本进行编写的指令。
HTML5基础知识
qq_46485137的博客
02-13 4334
一、初识HTML HTML：Hyper Text Markup Language（超文本标记语言） 超文本包括：文字、图片、音频、视频、动画等 HTML5的优势： 跨平台、 W3C标准 World Wide Web Consortium（万维网联盟） 成立于1994年，Web及时领域最权威和具影响力的国际中立性技术标准机...
HTML基础知识点
qq_40046544的博客
07-27 8305
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。HTML指的是超文本标记语言（HyperTextMarkupLanguage），它是用来描述网页的一种语言。web标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。绝对路径指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如D从。...
HTML基础知识点大全
m0_69674158的博客
05-04 6642
一、什么是HTML HyperText Markup Language，即超文本标记语言 二、第一个HTML <！doctpye html> <html> <head></head> <body></body> <html> 三、常用的标签🀄️🀄️🀄️ 1⃣️p 标签 ，段落标签，占整行 2⃣️img 图片标签： ①src 图片路径：绝对路径http://xxx.xx/xx/x.jpg 相对路径..
Java基础知识总结（2021版）
热门推荐
学Java，找哪吒
01-09 25万+
前言 大家好，我是素小暖，2012年毕业，2016年通过培训转行java开发，今天2021年1月9日，转行之路跌跌绊绊，蓦然回首，已经满满的4年工作经验了？但感觉知识还是相当的匮乏，没自信，也许是努力程度还不够吧。很感谢CSDN，因为是它给了我学习的动力，之前写了一篇记录CSDN博客访问量的文章，也许大家感觉很幼稚，但真的很有用，很有效果，仿佛磕了药一样，努力学习，进步。 2020年，是我较为成功的一年，工作上，跳了槽，涨了工资；学习上，啃了几本名著（Effective Java、重构 改善既.
HTML基础知识
xuan971130的博客
03-02 2841
一、基础知识： 1.网站：许多网页的集合。 2.HTML：超文本标记语言（Hyper Text Markup Language），用来描述网页的一种语言。不是一种变编程语言，而是一种标记语言。 3.浏览器内核（渲染引擎）：负责读取网页内容，整理讯息、计算网页的显示方式并显示页面。 4.Web标准的组成 ...
前端-HTML基础知识详解
qq_52262831的博客
12-23 4732
目录： 初始常用的HTML标签 资源路径 列表标签 表格标签 表单标签 表单提交
jsp/servlet基础知识
肖肖的博客
05-20 2884
这里写目录标题1、基本概念1.1、get、post格式get和post的区别2、内置对象2.1、九大内置对象2.2、解决页面中出现的中文乱码2.3、在请求中保存和获取属性2.4、转发和重定向2.5、request、response2.6、session2.7、cookie2.8、application 1、基本概念 1.1、get、post 格式 get和post的区别 2、内置对象 2.1、九大内置对象 2.2、解决页面中出现的中文乱码 idea默认utf-8，但是eclipse编码需要改变编码方式
HTML5基础知识.pdf
07-05
HTML5基础知识
html基础知识
12-04
html基础知识html基础知识html基础知识html基础知识html基础知识
html基础知识1111
03-26
html基础知识1111
HTML静态网页成品作业(HTML+CSS)—— 节日母亲节介绍网页(5个页面)
最新发布
weixin_42283461的博客
06-07 245
HTML静态网页成品作业(HTML+CSS)—— 节日母亲节介绍网页(5个页面)
交互式流程图组件DHTMLX Diagram v6.0 - 拥有更灵活的高度可定制功能
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
06-04 427
本文将为大家介绍交互式流程图组件DHTMLX Diagram v6.0发布的一些新功能，欢迎下载最新版体验！
HTML (总结黑马的)
SKL4399的博客
06-01 1258
img src="./cat.jpg" alt="替换文本" title="提示文本"> 替换文本是图片没有显示的时候显示对应的文字；定义列表： 标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情 类似于苹果官网最下面的那个效果。 女。
HTML:认识HTML与基本语法的学习
Dreamkidya的博客
06-03 1171
HTML（HyperText Markup Language）是一种用于创建网页的标记语言。它由一系列元素组成，每个元素都有特定的功能和语义，如标题、段落、链接、图像等。HTML的核心思想是将文档内容和结构与样式和布局分离，使得网页设计更灵活易于维护。CSS（Cascading Style Sheets）负责控制页面外观和样式，JavaScript负责实现互动和动态效果
html网页基础知识
08-27
- *1* *2* [网页设计html基础知识](https://blog.csdn.net/qq_35354139/article/details/125685291)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值