html随笔

最新推荐文章于 2024-06-07 14:56:22 发布

HuiDT

最新推荐文章于 2024-06-07 14:56:22 发布

阅读量178

点赞数

分类专栏： HTML+CSS 文章标签： html5

本文链接：https://blog.csdn.net/qq_42842786/article/details/98048474

版权

HTML+CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

基础随笔

HTML 输出- 使用提醒
段落
格式化
在当前页面链接到指定位置
定义所有链接的url
HTML area标签的 coords 属性
Tip

first(链接跳转例子，勿点！)

HTML 输出- 使用提醒

我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。点击测试例子

段落

除了使用区分段落，还可使用 拆行

标签	功能
`<p>`	定义段落
`<br>`	插入单个分行（换行）

但需注意理解 、 、 的区别
  是 HTML 写法。是 XHTML1.1 的写法, 也是 XML 写法。  是 XHTML 为兼容 HTML 的写法,也是 XML 写法。HTML5 因为兼容 XHTML，所以三种写法都可以使用。早期发布的 HTML 规范当中，  与 <img> 等元素是不用封闭自身的，但是这种元素造成了 HTML 规范的不严谨，于是在之后发布的 XHTML 语言中，参考了更为严谨的 XML 规范，在这些不用自身封闭的元素后加 / 来表示自行封闭，在逻辑上来讲等同于 ....（但是没有  这种写法），这样一来保证了较少的代码量，二来保证了规范的严谨。

格式化

请注意分别下列哪些时空标签（无闭合标签）

标签	描述
`<b>`	加粗
`<i>`	斜体
`<code>`	`电脑自动输出`
`<sub>`	下_标
`<sup>`	上^标
`<em>`	定义着重文字
`<small>`	小写
`<strong>`	强调
`<ins>`	插入效果
`<del>`	~~删除效果~~
`<big>`	放大文本
`<kbd>`(好像没啥用)	`键盘输入（标签闭合）`
`<tt>`	`打字机文本`
`<samp>`	`计算机代码样本`
`<var>`	`计算机变量`
`<address>`	Written by YAMA 地址（邮件等）点击查看解释
`<p>`	该段落文字从左到右显示
`<pre>`	定义预格式文本
`<p><bdo dir="rtl">...</bdo></p>`	该段落文字从右到左显示
`<abbr>`	缩写(sx) 缩写例子
`<acronym>`	首字母缩写(szmsx)

关于缩写：您把鼠标移至缩略词语上时可现实完整文本

在当前页面链接到指定位置

点击second将会跳转到文首的first

<ins><a id="ksbvf" href="嘻嘻嘻">first(链接跳转例子，勿点！)<a/><ins/>
<a href="#ksbvf">点击second将会跳转到文首的first<a/>

如果要跳转到其他页面的指定位置，需要在其他页面出设置标签
<a id="...">标签</a>
然后再当前页面设置
<a herf="指定页面URL再加上#设置的标签">点击跳转</a>

其实我不太理解下面的跳出框架，不就是打开新标签页吗？如果有知道的请给我留言

定义所有链接的url

点击测试例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>YAMA</title> 
<base href="//www.yama.gz.cn/" target="_blank">
<style>
  img
  {
    width: 600px;

  }
</style>
</head>

<body>
<img src="b.png"> <br> 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "http://www.yama.gz.cn/b.png"
<br><br>
<a href="//www.yama.gz.cn/resourse/about/">YAMA主页</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。

</body>
</html>

HTML area标签的 coords 属性

在创建图像映射时常会用到，附菜鸟教程链接

shape=rect时
coords(z1,z2,z3,z4)
(z1,z2)、(z3,z4)分别为左上角横纵坐标和右下角横纵坐标
shape=circle时
coords(z1,z2,z3)
(z1,z2)为圆心坐标，z3为圆半径，
shape=poly时
coords=(x1,y1,x2,y2,…,xn,yn)
该值规定多边形各顶点的值。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。

Tip

注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href=“http://www.yama.gz.cn/resourse/about”，
就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=“http://www.yama.gz.cn/resourse/about/”。
但是对于一些链接为文件内容的不需要加正斜杠
对于<a>标签以及其他部分标签，我们无法通过修改链接的外部样式表来修改其属性的值，只能通过内联方式才能修改

HuiDT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html随笔

基础随笔HTML 输出- 使用提醒段落格式化HTML 输出- 使用提醒我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。点击测试例子段落除了使用区分段落，还可使用&...
复制链接

扫一扫