前端基础之HTML总结（一）

最新推荐文章于 2022-04-17 10:46:58 发布
最新推荐文章于 2022-04-17 10:46:58 发布
阅读量437 收藏 2
点赞数 4
分类专栏： web前端开发基础总结 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiuqiudongdong/article/details/108922589
版权

HTML

一、 网页的结构：

  • 一个网页由三部分组成：
  1. 结构
    结构是页面的整体结构，哪里是标题，哪里是段落，哪里是图片。
    结构使用HTML来编写。
  2. 表现
    表现是页面的外在的样式，比如字体，字体大小，字体颜色，背景等等。
    使用CSS来设置页面中元素的样式。
  3. 行为
    页面和用户之间的交互行为。
    使用JavaScript来设置页面的行为。
  • 一般网页要求结构、表现、行为三者分离
  • 在开发中面临一个问题—程序之间的耦合，三者分离就是为了解耦合

二、HTML，超文本标记语言。

三、负责页面中的结构，定义出页面中的各个组成部分。

四、HTML是采用纯文本的形式的编写，采用HTML标签来标识出页面中的不同部分。

五、标签

  • 成对出现：
  • <标签名></标签名>
  • 自结束标签：
  • <标签名/>

六、属性

  • 通过属性可以设置标签的效果
  • 属性需要定义在开始标签中或这自结束标签中
  • 属性实际上是一组一组名值对结构
  • 例子：
  • <标签名 属性名=“属性值” 属性名=“属性值”></标签名>
  • <标签名 属性名=“属性值” 属性名=“属性值” />

七、HTML页面的基本结构

在这里插入图片描述
八、文档声明

  • <!doctype html>
  • 用来标识当前页面的html的版本
  • 该声明用来告诉浏览器，当前的页面是使用HTML5的标准编写的

九、常用标签

  • <html>
  1. 网页的根标签
  2. 一个页面中有且只有一个根标签
  3. 网页中的所有内容都需要写在html标签的内部
  • <head>
  1. 网页的头部
  2. 该标签中的内容不会在网页中直接显示
  3. 该标签用于帮助浏览器解析页面
  4. 子标签
    （1） <title>
    a. 用来设置网页的标题
    b. 默认会在浏览器的标题栏中显示
    c.搜索引擎检索网页时，会主要检索title中的内容，它会影响到页面在搜索引擎中的排名
    （2） <meta>
    a.用来设置网页的元数据，比如网页使用的字符集
    <meta charset=“utf-8” />
    b.设置网页的关键字
    <meta name=“keywords” content=“关键字,关键字,关键字,关键字”/>
    c.设置网页的描述
    <meta name=“description” content=“网页的描述”/>
    d.请求的重定向
    <meta http-equiv=“refresh” content=“秒数;url=地址” />
  • <body>
  1. 网页的主体
  2. 网页中所有的可见部分都需要在body中编写
  • <h1> ~ <h6>
  1. 标题标签
  2. 在html中一共有六级标题
  3. 六级标题中，h1最重要，h6最不重要，一般页面中只会使用h1~h3
  4. h1的重要性仅次于title，浏览器也会主要检索h1中的内容，以判断页面的主要内容
  5. 一般一个页面中只能写一个h1
  • <p>
  1. 段落标签
  • <br/>
  1. 换行标签
  • <hr />
  1. 水平线标签
  • 内联框架
  1. 可以向一个页面中引入其他的外部页面
  2. <iframe></iframe>
  3. 属性:
    a.src
    外部页面的地址，可以使用相对路径
    b.width和height
    可以设置框架的宽度和高度
    c.name
    可以为内联框架指定一个名字
    可以将该属性值设置为超链接的target属性的值
    这样当点击超链接时，页面将会在相应的内联框架中打开
  4. 内联框架中的内容不会被搜索引擎所检索，所以开发中尽量不要使用内联框架
  • 超链接
  1. 可以使当前页面跳转到其他的页面
  2. <a>链接的文字</a>
  3. 属性
    a.href
    指向链接跳转的目标地址，可以是一个相对路径
    还可以是#id属性值，这样当点击超链接以后，将会跳转到当前页面的指定位置
    可以使用mailto:来创建一个发送电子邮件的超链接
    b.target
    指定在哪个窗口中打开链接
    可选值

十、注释

  • 语法：
  1. <!-- 注释内容 -->
  • 注释中的内容不会在页面中显示，但是会在源码中显示，我们可以通过注释来说明网页的代码。
  • 也可以通过注释隐藏一些页面中不想显示的内容

十一、实体

  • 在HTML页面中一些特殊符号是不能直接使用，需要使用实体来代替这些特殊符号
  • 实体也可以称为转义字符
  • 实体的语法
  1. &实体名;
  • 常用的实体
  1. 空格: 
  2. <:&lt;
  3. >:&gt;
  4. 版权符号:&copy;

十二、图片标签

  1. <img />
  2. 使用图片标签可以向页面中引入一个外部图片
  3. 属性
    a.src
    指向一个外部图片的路径，可以使用相对路径
    b.alt
    指定一个在图片无法加载时对图片的描述
    搜索引擎主要通过该属性来识别图片的内容
    如果不写该属性则搜索引擎会对图片进行收录
    c.width
    设置图片的宽度
    d.height
    设置图片的高度
  4. 图片的格式
    a.JPEG:颜色丰富的图片，如，照片
    b.GIF:颜色单一，简单透明的图片，动态图
    c.PNG:颜色丰富，复杂透明的图片
    d.图片选择的原则:
    效果一致，用小的
    效果不一致，用效果好的

十三、相对路径

  • 相对于当前资源所在的目录的路径
  • 可以使用…/返回一级目录，返回几级使用几个…/

十四、xHtml语法规范

  • HTML中不区分大小写，但是尽量使用小写
  • HTML的注释不能嵌套
  • 标签必须结构完整（成对出现或者自结束标签）
  • 标签可以嵌套但是不能交叉嵌套
  • 属性必须有值，且值必须加引号，单引号双引号都可以

十五、文本标签

  • <em>：表示语气上的强调
  • <strong>:表示内容的重要性
  • <i>:表示单纯的斜体
  • <b>:表示单纯的加粗
  • <small>:表示细则一类的内容
  • <cite>:表示参考的内容，凡是加书名号的都可以使用cite
  • <q>:短引用，行内引用
  • <blockquote>:长引用，块级引用
  • <sup>:上标
  • <sub>:下标
  • <ins>:插入的内容
  • <pre>:预格式标签，可以保留代码中空格换行这些格式
  • <code>:表示程序代码

十六、列表

  • 无序列表：

  1. 使用ul来创建一个无序列表，在列表中使用li来表示一个列表项
    （以下三个分别为1.无序列表、2.有序列表、 3. 定义列表）
    在这里插入图片描述

  2. 无序列表使用符号作为项目符号

  • 有序列表：
  1. 使用ol来创建一个无序列表，在列表中使用li来表示一个列表项
  2. 使用有序的序号作为项目符号
  • 定义列表
  • 列表相关的元素都是块元素，他们之间可以互相嵌套
  • 去除项目符号：list-style:none
葡萄籽啊
关注
专栏目录
a标签href不跳转_《HTML常用标签》
weixin_39837727的博客
12-29 1204
1.a 标签的用法（1）定义和用法 a标签定义超链接（用于从一张页面链接到另一张页面）或锚（用于从页面当前位置跳转至指定锚点），它最重要的属性是 href 属性，指示链接的目标。所有浏览器都支持 a 标签。（2）常用属性 hreftargetdownloadrel=noopener （3）href具体用法： <a href="">空链接，当前页面跳转，刷新页面&l...
前端基础总结
12-26
在学习前端基础时，重要的是要掌握HTML的结构化语义和布局，理解不同标签的用途和属性，以及它们如何共同工作来构建一个网页。这些基础知识是成为前端开发者的起点，也是深入学习其他前端技术的基石。随着前端技术的...
a标签不跳转
sinat_38992528的博客
12-06 1929
a标签href不跳转 禁止跳转 当页面中a标签不需要任何跳转时，从原理上来讲，可分如下两种方法： 标签属性href，使其指向空或不返回任何内容。如： 点此无反应javascript:void(0) 点此无反应javascript: 标签事件onclick，阻止其默认行为。如： return false; return false; 注意：只有
html中点击A超链接标签使其不跳转
热门推荐
程宇寒
06-08 2万+
html中点击A标签使其不跳转&lt;a href="#"&gt;&lt;/a&gt;有一个缺点，如果页面很长的话，会跳到本页面的顶部，有点像是跳到了一个新页面的感觉，体验不是很好！&lt;a href="#" onclick="return false"&gt;&lt;/a&gt;&lt;a href="javascript:void(0)"&gt
前端学习：HTML的学习总结
菜鸟-传奇
09-17 487
html简介 1 html是什么：超文本标记语言 超文本：文字/图片/音频/视频 标签/标记：<body></body> 怎么做：使用标签来创建网页 2 HTML的用途：是用来编写静态网页的。 搭建整个网页。（框架）CSS用来装修。。。 3 html结构 1 <html> 2 <head> 3...
深入A标签点击触发事件而不跳转的详解
langqiao123的专栏
02-10 9378
本文介绍下，当点击A标签时，触发事件但不跳转的实现方法，有需要的朋友参考下吧。 点击页面上的空链接，点击后页面自动刷新，并会定位到页面顶端。 不过，有时需要点击#页面但不作跳转，可以这样写:   脚本学堂---网站编程 在#后加上点别的东西即可，这样就不会链到别的页面，也不会刷新定位到顶端了。 附，A标签点击触发事件但不跳转的实现方法。
前端小白-HTML基础知识学习总结
03-23
前端小白-HTML基础知识学习总结
Web前端HTML+CSS+JavaScript基础知识总结.xmind
07-27
本思维导图涵盖HTML、CSS所需掌握的主要应用知识，及JavaScript基础语法，是本人2020年暑假学习笔记，总计35618字。体系清晰，逻辑分明，适合已学习人群对基础知识的复习，初学者也可以以此为基础进行自己的知识体系...
前端 js html css 基础教程
08-17
总结来说，本书是一本非常适合初学者的前端基础教程，通过对HTML、CSS、JavaScript等核心技术的讲解，帮助读者构建起前端开发的初步认识，并能够实现基本的网页设计和交互功能。对于希望进一步深化前端技能的学习者...
前端练习01-前端-HTML（文档总结）
最新发布
03-24
这个“前端练习01-前端-HTML（文档总结）”显然是一份关于HTML学习和实践的资料，适合初学者掌握和巩固HTML基础知识。在这个文档总结中，可能会包含HTML的基本结构、元素、属性等内容。 1. HTML基本结构：每个HTML...
a标签href不跳转几种方式
L_JLJL的博客
05-03 5282
标签属性href，使其指向空或不返回任何内容。如：&lt;a href="javascript:void(0);" &gt;点此无反应javascript:void(0)&lt;/a&gt;&lt;a href="javascript:;" &gt;点此无反应javascript:&lt;/a&gt;原理: void 操作符指定超级链接标签事件onclick，阻止其默认行为。如：&lt;a hre
javascript a标签href点击不进行跳转的解决办法
yehaocheng520的博客
10-16 1万+
a标签的href 跳转失效的问题 我找到两个解决办法：记录如下： 在你的URL最后添加一个随机的参数，这样写的原因，是可能浏览器认为你需要跳转的URL与当前页面的URL是一样，所以加上随机参数，能够解决（但是这个方案对我的问题不管用，但是放出来，或许能帮到一些人） 舍弃href属性，在<a>标签中使用onclick方法：οnclick="window.location = 'URL' ",href:"###"，完美解决问题。 ...
前端HTML总结
一路生花
04-17 170
首先，在我学习HTML的时候，我先去学习了HTML的基本框架 就像C语言： #include<stdio.h> int main() { return 0; } 而HTML的基本框架就是： ​ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" ..
前端-html总结
qq_39009130的博客
06-15 241
复习提纲 一.HTML 1.html概述 1.HTML：超文本标记语言 2.HTML文件：以“.html”或“.htm”为后缀 3.HTML文档结构：由、和三大元素组成 4.HTML 5文档类型声明：<!DOCTYPE html \> 2.Head元素 1.标签包括以下：<meta>、<base>、<link>、<script>以及<style> <meta> meta元素用于向客户的浏览器传递信息和命令，而不是用来显示内容
前端-HTML总结
cjxiaobaic的博客
12-24 474
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
a标签href不跳转_[网页编程]-06 HTML5 超链接标签
weixin_31313071的博客
12-27 233
超链接的作用实际上就是为实现页面跳转功能以及锚点功能(跳转到当前页面的顶部和尾部或设定的位置)测试代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <a hr...
a标签href不跳转 禁止跳转
eclipsejy的博客
04-30 372
当页面中a标签不需要任何跳转时，从原理上来讲，可分如下两种方法： 标签属性href，使其指向空或不返回任何内容。如： 点此无反应javascript:void(0) 点此无反应javascript: 标签事件onclick，阻止其默认行为。如： return false; return false; 注意：只有一个href="#"是不可以的。 原理： 标签属性href=“javascript:vo...
前端页面HTML总结
qq_30505673的博客
09-19 1196
在前端页面中, 我们往往用表单来制作用户的注册, 登录等功能. 表单包含很多内容, 例如: 单选: radio 多选: checkbox 密码: password 文本: text 按钮: reset, submit, file 多行文本输入: textarea 下拉菜单: select option 表单( form )可以直接提交: 提交方法包含 get ...
a标签href不跳转_HTML常用标签
weixin_42515158的博客
12-29 936
a标签href可以用来跳转网页，建议写成"//http://baidu.com"的形式，这样会继承http头减少报错用作路径跳转，/a/b/c === a/b/c， ./index.html === index.html（这里的/与文件的不同，不是代表根目录，而是以你起服务的文件夹作为根目录）伪协议，href = "javascript:;"。:;之间写代码可以执行，什么都不写可以实现一个什么都不...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值