位置: IT常识 - 正文

【WEB前端进阶之路】 HTML 全路线学习知识点梳理(中)(web 前端)

编辑:rootadmin
【WEB前端进阶之路】 HTML 全路线学习知识点梳理(中) 前言

推荐整理分享【WEB前端进阶之路】 HTML 全路线学习知识点梳理(中)(web 前端),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:web前端入门,web前端快速入门,web前端开发进阶手册,web前端进阶路线,web 前端,web 前端,web 前端,web前端开发进阶手册,内容如对您有帮助,希望把文章链接给更多的朋友!

本文是HTML零基础学习系列的第二篇文章,点此阅读 上一篇文章。

文章目录前言六.HTML标题1.HTML标题2.HTML水平线3.HTML 注释七.HTML段落1.HTML段落2.HTML换行八.HTML文本格式化九.HTML链接十.HTML头部十一.HTML图像十二.HTML表格十三.HTML列表十四.HTML区块1.HTML区块元素2.HTML内联元素3.HTML的 div 元素4.HTML的 span 元素六.HTML标题1.HTML标题

标题是通过 <h1> - <h6> 标签进行定义的。<h1> 定义最大的标题。 <h6> 定义最小的标题。浏览器会自动地在标题的前后添加空行,例如:

<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3>

标题用来正确的显示文章结构,通过不同的标题可以为文章建立索引,所以,标题是很重要的存在,所以,不要仅仅是为了生成粗体或大号的文本而使用标题。

2.HTML水平线

<hr> 标签在 HTML 页面中创建水平线,例如:

<p>段落1</p> <hr> <p>段落2</p> <hr> <p>段落3</p>3.HTML 注释

可以将注释插入 HTML 代码中,提高代码可读性,浏览器会忽略注释,也不会显示它们。

<!-- 这是一个注释 -->七.HTML段落1.HTML段落

HTML可以将文档分为不同的段落。段落是通过 <p> 标签定义的,例如:

<p>段落1...</p><p>段落2...</p>2.HTML换行

使用<br>标签在不产生新的段落的情况下换行,例如:

<p>这是<br>换行的<br>演示</p>

<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。

八.HTML文本格式化

HTML 使用标签 <b>(“bold”) 与 <i>(“italic”) 对输出的文本进行格式, 如:粗体 or 斜体。也可使用标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。但是两者的含义不同,<strong> 或者 <em>标签有你要呈现的文本是重要的,所以要突出显示的意思。

文本格式化的标签及其作用:

标签作用<b>定义粗体文本<em>定义着重文字<i>定义斜体文字<small>定义小号文字……

详细的HTML标签参考标签参考手册哦

九.HTML链接

HTML 使用超级链接与网络上的另一个文档相连,点击链接可以从一张页面跳转到另一张页面。

HTML使用标签 <a>来设置超文本链接。 在标签<a> 中使用了href属性来描述链接的地址。 一个未访问过的链接显示为蓝色字体并带有下划线,访问过的链接显示为紫色并带有下划线,点击链接时,链接显示为红色并带有下划线。

例如,使用 <a> 标签定义超文本链接:

<a href="url">链接文本</a>

其中,可以定义属性实现相应的功能:

使用 target 属性,你可以定义被链接的文档在何处显示。id 属性可用于创建一个 HTML 文档书签。十.HTML头部

1.HTML <head>元素:

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

2.HTML <title>元素:

<title> 标签定义了不同文档的标题。

定义了浏览器工具栏的标题 当网页添加到收藏夹时,显示在收藏夹中的标题 显示在搜索引擎结果页面的标题

例如,下面的HTML文档代码:

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>文档标题</title></head><body><p>文档内容......</p></body></html>

3.HTML <base>元素:

<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接,例如:

<head><base href="http://www.baidu.com/images/" target="_blank"></head>

4.HTML <link>元素 <link> 标签定义了文档与外部资源之间的关系,例如:

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

5.HTML <stytle>元素 <style> 标签定义了HTML文档的样式文件引用地址,例如:

<head><style type="text/css">body {background-color:yellow}p {color:blue}</style></head>【WEB前端进阶之路】 HTML 全路线学习知识点梳理(中)(web 前端)

6.HTML <meta>元素 <meta>标签描述了一些基本的元数据。

标签提供了元数据。元数据也不显示在页面上,但会被浏览器解析。 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。 一般放置于 <head> 区域。

7.HTML <script>元素 <script>标签用于加载脚本文件,如: JavaScript。

十一.HTML图像

在 HTML 中,图像由<img> 标签定义,<img> 是空标签。

要在页面上显示图像,需要使用源属性(src),源属性的值是图像的 URL 地址,例如:

<img src="url" alt="some_text">

alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时,浏览器将显示这个替代性的文本而不是图像,例如:

<img src="boat.gif" alt="显示图像">

height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。默认单位是像素,例如:

<img src="baidu.jpg" alt="百度" width="200" height="100">

注意:加载页面时,要注意插入页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,图像标签就会显示一个破碎的图片。

十二.HTML表格

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等,例如:

<table border="1"> <tr> <td>你好</td> <td>你好</td> </tr> <tr> <td>你好</td> <td>你好</td> </tr> </table>

大多数情况我们需要给表格加上边框,也可以不使用边框。

表格的表头使用 <th> 标签进行定义,大多数浏览器会把表头显示为粗体居中的文本。

十三.HTML列表

HTML 支持有序、无序和定义列表:

无序列表使用 <ul> 标签定义,使用粗体圆点(典型的小黑圆圈)进行标记,每个列表项始于 <li> 标签,例如: <ul> <li>java</li> <li>python</li> </ul>

有序列表使用<ol> 标签定义,使用数字进行标记,每个列表项始于 <li> 标签,例如: <ol> <li>java</li> <li>python</li> </ol>

自定义列表以 <dl> 标签开始,每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始,自定义列表是项目和注释的组合,例如: <dl> <dt>java</dt> <dd>-诞生于1995年</dd> <dt>python</dt> <dd>-诞生于1991年</dd> </dl>

十四.HTML区块

HTML 可以通过 <div> 和 <span>将元素组合起来。

大多数 HTML 元素被定义为块级元素或内联元素。

1.HTML区块元素

块级元素在浏览器显示时,通常会以新行来开始和结束。

2.HTML内联元素

内联元素在浏览器显示时通常不会以新行开始。

3.HTML的 div 元素

HTML <div> 元素是块级元素,它是用于组合其他 HTML 元素的容器。

例:让文档中的一块区域显示为红色,另一块区域加粗且显示为蓝色,HTML文档代码如下。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <h1>望庐山瀑布</h1> <h2>唐 李白</h2> <div style="color:red"> <p>日照香炉生紫烟,</p> <p>遥看瀑布挂前川。</p> </div> <div style="font-weight:bold;color:blue"> <p>飞流直下三千尺,</p> <p>疑是银河落九天。</p> </div></body></html>

显示效果:

<div>标签常用于组合块级元素,以便通过 CSS 来对这些元素进行格式化。

4.HTML的 span 元素

HTML <span> 元素是内联元素,可用作文本的容器。

例:对文档中的一部分文本进行着色,HTML代码如下。

<h2><span style="color:chartreuse">唐</span> -李白</h2>

显示效果:

<span> 用于对文档中的行内元素进行组合。

本文链接地址:https://www.jiuchutong.com/zhishi/300327.html 转载请保留说明!

上一篇:NeRF总结(nerf新手入门)

下一篇:【图像分割】Segment Anything(Meta AI)论文解读(图像分割csdn)

  • 怎么做微信营销来获取客户的信任,微信营销实战方法(如何做微信营销)

    怎么做微信营销来获取客户的信任,微信营销实战方法(如何做微信营销)

  • 小米civi怎么设置深色模式(小米civi怎么设置应用锁)

    小米civi怎么设置深色模式(小米civi怎么设置应用锁)

  • 怎么看qq音乐年龄多少年(怎么看qq音乐年度听歌报告)

    怎么看qq音乐年龄多少年(怎么看qq音乐年度听歌报告)

  • qq助手怎么导出通讯录到新手机(qq助手怎么导出通讯录到苹果)

    qq助手怎么导出通讯录到新手机(qq助手怎么导出通讯录到苹果)

  • 无法续传是什么意思(无法继续执行代码是什么意思)

    无法续传是什么意思(无法继续执行代码是什么意思)

  • 充电接口检测到液体(充电接口检测到液体 iPhone)

    充电接口检测到液体(充电接口检测到液体 iPhone)

  • 微信收藏可以锁吗(微信收藏可以锁上吗)

    微信收藏可以锁吗(微信收藏可以锁上吗)

  • 960p摄像头是多少像素(摄像头960p和3mp的区别)

    960p摄像头是多少像素(摄像头960p和3mp的区别)

  • 手机usb是什么(苹果手机usb设置在哪里)

    手机usb是什么(苹果手机usb设置在哪里)

  • 微信应用程序在哪里(微信应用程序在哪个文件夹里面)

    微信应用程序在哪里(微信应用程序在哪个文件夹里面)

  • 有线网络的传输线路有哪些(有线网络的传输介质有哪些各有什么特点)

    有线网络的传输线路有哪些(有线网络的传输介质有哪些各有什么特点)

  • mlaal00是什么型号(mla_tl00)

    mlaal00是什么型号(mla_tl00)

  • b站剪辑可以投自制吗(b站剪辑投稿)

    b站剪辑可以投自制吗(b站剪辑投稿)

  • sdm765g是什么处理器(手机sdm765g处理器怎么样)

    sdm765g是什么处理器(手机sdm765g处理器怎么样)

  • 苹果11出厂带膜吗(苹果11出厂带钢化膜吗)

    苹果11出厂带膜吗(苹果11出厂带钢化膜吗)

  • ppt文字样式怎么设置(ppt怎么设置文字效果)

    ppt文字样式怎么设置(ppt怎么设置文字效果)

  • 怎么把下划线弄整齐(怎么把下划线弄到中间)

    怎么把下划线弄整齐(怎么把下划线弄到中间)

  • 天猫二选一是什么意思(天猫要求商家二选一)

    天猫二选一是什么意思(天猫要求商家二选一)

  • 美团如何申请返现(美团如何申请返现金)

    美团如何申请返现(美团如何申请返现金)

  • 一招找回微信过期视频(一招找回微信过期删除文件)

    一招找回微信过期视频(一招找回微信过期删除文件)

  • 怎么唤醒jovi(怎么唤醒第二人格)

    怎么唤醒jovi(怎么唤醒第二人格)

  • 交管12123重置密码(交管12123重置密码审核后会通知吗)

    交管12123重置密码(交管12123重置密码审核后会通知吗)

  • 手机照片发白怎么用PS处理(手机照片发白怎么调色)

    手机照片发白怎么用PS处理(手机照片发白怎么调色)

  • Ubuntu搭建web站点并发布公网访问【内网穿透】(ubuntu搭建web服务器流程)

    Ubuntu搭建web站点并发布公网访问【内网穿透】(ubuntu搭建web服务器流程)

  • Vue中computed和watch的区别(vue中computed和watch区别)

    Vue中computed和watch的区别(vue中computed和watch区别)

  • 增值税进项税会计处理
  • 出口退税是什么部门负责
  • 个人独资企业税种有哪些
  • 契税完税凭证是不是契税发票
  • 工会经费应税项怎么算
  • 出纳购买东西能报销吗
  • 金融利息是什么意思
  • 辅导期一般纳税人
  • 保险公司代扣代缴车船税完税证明
  • 房产税和土地使用税计入什么科目
  • 纳税人在同一地级行政范围内跨县经营
  • 小规模纳税人收到专票有什么影响
  • 增值税是售价乘以税率吗
  • 净资产增长率为正数说明什么
  • 附加税减半征收政策是哪个文件
  • 关联方交易的税怎么算
  • 房地产企业预收房款开票
  • 生产型企业原材料出入库处理
  • 个税扣缴端如何删除员工信息
  • 汇算清缴退税调整利润表
  • 未分配利润为什么不分配
  • 当月的销项税额要转入哪里
  • 进口货物的企业有哪些
  • 房产契税征收率
  • 退休返聘人员的优点
  • 在win7系统中将打开窗口拖到屏幕顶端
  • php字符串函数大全
  • php查询数据库语句
  • 网线插上还是显示红叉
  • php5升级到php7
  • 计提坏账准备对所得税费用的影响
  • 建设项目的设计阶段分为
  • 大脊山,英格兰峰区国家公园 (© John Finney Photography/Moment/Getty Images)
  • php往数组中添加元素
  • php静态页面生成
  • javatoken生成机制
  • c++好学
  • crontab命令用法
  • 工程项目发票几个点
  • mongodb常见问题
  • 企业期末预收账款怎么算
  • 运输公司燃油费占比
  • 个体工商户能享受4050政策吗
  • 企业销售商品满足收入确认条件时,应当
  • centos 安装方法
  • 所得税预缴怎么申报
  • 只有销项没有进项怎么交税
  • 资产减值准备怎么理解
  • 支付工程款如何入账科目
  • win8系统界面切换成win7
  • xp局域网
  • 系统组策略打不开
  • mmc不能打开文件services.msc
  • win7 管理
  • windows7 ie
  • explore.exe进程占用cpu99%
  • ubuntu20.04软件中心
  • dl是什么文件
  • windows8无线网络选项消失不见
  • win11连接win7共享打印机
  • vs图片简单
  • opengl详解
  • 批处理自动确定
  • app录音功能开发
  • android dsl动态化
  • linux搭建ftp服务器
  • python制作简单图形
  • javascript如何学
  • 手机端apk反编译工具_android反编译工具
  • python如何处理文本
  • 自动寻路小说
  • 金税盘未反写
  • 黄金消费税税率是多少
  • 电子税务局做什么的
  • 工商税务登记流程视频
  • 土地增值税有哪些税收优惠
  • 泰兴市地方税务局
  • 北京昌平区租房价格
  • 新三步走和旧三步走的异同点
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设