整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

「代码」Web前端CSS测试段落

1)HTML<head>

使用<title>标签定义HTML文档的标题,<title>在 HTML/XHTML文档中是必须的。
定义了浏览器工具栏的标题
当网页添加到收藏夹时,显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

代码:

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>这里可以改标题</title> </head><body><h1>Hello word!</h1></body></html>

效果:

(2)HTML<base>

使用<base>定义页面中所有链接默认的链接目标地址。

代码:

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>Web前端</title>

<base href="https://www.ictliuxiao.com" target="_blank"></head><body>

<a href="">默认链接</a></body></html>

效果:

(3)HTML<link>

<link>标签定义了文档与外部资源之间的关系。
<link>标签通常用于链接到样式表。俗称外链样式表。

HTML代码:

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>Web前端</title>

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

<p>CSS的测试段落1</p>

<a href="https://www.ictliuxiao.com">CSS的测试段落2,链接</a></body></html>

CSS代码:

p{

font-size: 100px; /*字体大小100px*/

font-family: "微软雅黑"; /*字体为微软雅黑*/

color: red; /*颜色为红色*/}

a{

text-decoration: none; /*链接去掉下划线*/}

效果:

(4)HTML<style>

<style>标签定义了HTML文档的样式文件引用地址。
在<style>元素中你也可以直接添加样式来渲染 HTML 文档。俗称内联样式表。

HTML代码

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>Web前端</title>

<style type="text/css">

p{

font-size: 100px; /*字体大小100px*/

font-family: "微软雅黑"; /*字体为微软雅黑*/

color:aqua; /*颜色为青色*/

}

a{

text-decoration: none; /*链接去掉下划线*/

color: red; /*颜色为红色*/

}

</style></head><body>

<p>CSS的测试段落1</p>

<a href="https://www.ictliuxiao.com">CSS的测试段落2,链接</a></body></html>

效果:

(5)HTML CSS

CSS 可以通过以下方式添加到HTML中,最好的方式是通过外部引用CSS文件。
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head>区域使用<style>元素 来包含CSS
外部引用 - 使用外部 CSS 文件

代码:

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>Web前端</title> </head><body style="background-color:yellow;">

<h2 style="background-color:red;">这是一个标题</h2>

<p style="background-color:green;">这是一个段落。</p></body></html>

一课认识了什么是网页,这节课来讲一下制作网页的常用标签。先来回顾一下上一节课。

·双击一下这边新建一个文件,先保存一下,起个名字,随便起。

·ai,一定要记得写点html后缀,保存。

·然后来打标签,html做网页一定得打这一个,一定一点有的,还有head头部是得有的。

·body是代表着网页的框码,头部就是放一些文文件的,这个就是写正文,就是内容来的。现在把选一个,这是保存一下,打开,现在就可以了。

·现在标题是没有的,现在就用一下常用的代码标题。来到这边pat里面写标题,这是标题的意思是网页的标题,这是一个标题,保存。

·刷新一下页面,标题在这边。

·然后来看一下常用的,h1到h6就是定义文档的标题,h1的值最大,h6的值最小,一一四排,排一减的。

·比如来一个h1对比一下,保存,刷新,h1的最大,s3的就小一点,s6的最小。

·现在来看一下p就是定义段落,写完章之后有很多一段,一段是有很多行字的。比如写个p,这边可以写很多句话,比如随便写,这么长一段字,这里很长的。

·假如要换行就用到标标签,换行标签b r,就从这里加的,这叫打算考,后面加的pr,所以就换行了。

·定义超链接,平常上完之后就会点击,点击到一些东西会跳到另外一个页面或者会进行下载,是不是就是利用标标签的。

·边选跳到百度,跳到百度,看一下,跳不了,原因是还要选地址,a码是条连起来的,写个地址,h r,跳到百度,点c o n,保存,刷新,点击一下,跳来了,不过电。

先这样,有事,拜拜。

TML <base> 元素

指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 <base> 元素。

包含属性href 和

target 可以指定a 标签的默认窗口打开行为

<base href="https://www.baidu.com/img/123" target="_banlk"></base> 默认就打开新的窗口 <a href="aaa">123</a>

使用

<base href="https://www.baidu.com/img/"></base> <img src="bd_logo1.png?where=super"></img>

虽然在codepen 的代码上编写的但是能够正确的通过base url + img 的src 定位显示出图片

content 标签

HTML <aside> 元素

表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。

HTML <blockquote> 元素

(或者 HTML 块级引用元素),代表其中的文字是引用内容。通常在渲染时,这部分的内容会有一定的缩进(注 中说明了如何更改)。若引文来源于网络,则可以将原内容的出处 URL 地址设置到 cite 特性上,若要以文本的形式告知读者引文的出处时,可以通过 <cite> 元素。

HTML <figure> 元素

代表一段独立的内容, 经常与说明(caption) <figcaption> 配合使用, 并且作为一个独立的引用单元。当它属于主内容流(main flow)时,它的位置独立于主体。这个标签经常是在主文中引用的图片,插图,表格,代码段等等,当这部分转移到附录中或者其他页面时不会影响到主体。

Inline text semantics

HTML 缩写元素<abbr>

用于展示缩写,并且可以通过可选的 title 属性提供完整的描述。

ps: 完整描述样式貌似不能自定义

HTML键盘输入元素(<kbd>)

用于表示用户输入,它将产生一个行内元素,以浏览器的默认monospace字体显示。

HTML标记文本元素(< Mark >)

表示为引用或符号目的而标记或突出显示的文本,这是由于标记的段落在封闭上下文中的相关性或重要性造成的。

ps:项目中大量使用span 标记的做法不符合html5 的语义化

HTML Ruby Base(<rb>)

元素用于分隔<ruby>注释的基本文本组件(即正在注释的文本)。一个<rb>元素应该包装基本文本的每个单独的原子段。

ps: 拼音注解

<samp> 元素

用于标识计算机程序输出,通常使用浏览器缺省的 monotype 字体(例如 Lucida Console)。

HTML 中的<small>

元素將使文本的字体变小一号。(例如从大变成中等,从中等变成小,从小变成超小)。在HTML5中,除了它的样式含义,这个元素被重新定义为表示边注释和附属细则,包括版权和法律文本。

HTML <sub> 元素定义了一个文本区域,出于排版的原因,与主要的文本相比,应该展示得更低并且更小。

ps: 下脚标

HTML <sup> 元素定义了一个文本区域,出于排版的原因,与主要的文本相比,应该展示得更高并且更小。

ps: 上脚标

HTML <u> 元素

使文本在其内容的基线下的一行呈现下划线。在HTML5中, 此元素表示具有未标注的文本跨度,显示渲染,非文本注释,例如将文本标记为中文文本中的专有名称(一个正确的中文标记), 或 将文本标记为拼写错误

HTML <map>

与 <area> 属性一起使用来定义一个图像映射(一个可点击的链接区域).

HTML <track> 元素

被当作媒体元素—<audio> 和 <video>的子元素来使用。它允许指定计时字幕(或者基于时间的数据),例如自动处理字幕。

HTML <object> 元素

(或者称作 HTML 嵌入对象元素)表示引入一个外部资源,这个资源可能是一张图片,一个嵌入的浏览上下文,亦或是一个插件所使用的资源

ps: 支持引入的资源类型

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types

关于支持资源类型的测试

http://joliclic.free.fr/html/object-tag/en/index.php