html 相关

最新推荐文章于 2024-07-31 14:35:30 发布

Colin-YYYY

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量208

点赞数

分类专栏：学习笔记文章标签： html 前端

本文链接：https://blog.csdn.net/qq_29935433/article/details/123318778

版权

学习笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

html 相关

文章目录

HTML 链接

如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。

这是一个链接

HTML 图像

alt 属性用来为图像定义一串预备的可替换的文本

假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

换行

水平分割线

标签在 HTML 页面中创建水平线

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

HTML 提示 - 如何查看源代码

你是否看过一些网页然后惊叹它是如何实现的。

如果您想找到其中的奥秘，只需要单击右键，然后选择"查看源文件"（IE）或"查看页面源代码"（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。

标题大小与字体大小的关系

1到6号标题与1到6号字体逆序对应，比如1号字体对应6号标题，2号字体对应5号标题。

<h1>这是1号标题</h1>
<font size="6">这是6号字体文本</font>

<b>加粗文本</b><br>
<i>斜体文本</i><br>
<code>电脑自动输出</code><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>

<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u5znT7h3-1646575717392)(C:\Users\BZL\AppData\Roaming\Typora\typora-user-images\image-20201013165601973.png)]

单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本

<base href="//www.runoob.com/images/" target="_top">

元素:

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

HTML 元素

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

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

HTML

```

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部区域使用

html 样式

# 背景颜色
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

# 字体，字体颜色，字体大小
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

# 文本对齐方式
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>

单元格

每个表格从一个 table 标签开始。每个表格行从 tr 标签开始。每个表格的数据从 td 标签开始。表格的表头使用标签进行定义。

Monthly savings

一列:

100

一行三列:

100

200

300

单元格跨行与跨列

<th rowspan="2">Telephone:</th>
<th colspan="2">Telephone</th>

# 单元格边距
cellpadding="100"
# 单元格间距
cellspacing="100"

列表

# 无序列表
<ul style="list-style-type:disc">
<ul style="list-style-type:circle">
<ul style="list-style-type:square">

<ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
</ul>

# 有序列表
<ol start="50" type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

# 自定义列表
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

HTML

元素是块级元素，它可用于组合其他 HTML 元素的容器

HTML 元素是内联元素，可用作文本的容器

颜色(Color)	颜色十六进制(Color HEX)	颜色RGB(Color RGB)
	#000000	rgb(0,0,0)
	#FF0000	rgb(255,0,0)
	#00FF00	rgb(0,255,0)
	#0000FF	rgb(0,0,255)
	#FFFF00	rgb(255,255,0)
	#00FFFF	rgb(0,255,255)
	#FF00FF	rgb(255,0,255)
	#C0C0C0	rgb(192,192,192)
	#FFFFFF	rgb(255,255,255)

实体（Entities）

&lt; 等同于 <
&gt; 等同于 >
&#169; 等同于 ©

markdown 目前支持的 HTML 元素有： ^_等

使用 Ctrl+Alt+Del 重启电脑

示例

<style type="text/css">
body {
    text-align: center;
    color:#FF0000;
}
#wrap {
    width: 400px;
    margin: 0 auto;
    text-align: left;
}
#header {
    height: 40px;
    line-height: 40px;
    margin: 0 0 2px 0;
    text-align: center;
    color: #FF0000;
    background: #66CC66;
}
ul#nav {
    list-style: none;
    margin: 2px 0 0 0;
    padding: 10px 0 0 10px;
    float: left;
    width: 84px;
    height: 190px;
    color: #000;
    background: #CCFF33;
}
#wrap #main {
    float: right;
    height: 200px;
    width: 300px;
    margin: 2px 0 0 2px;
    color: #000;
    background: #FF99CC;
}
ul#nav li {
    line-height: 1.5em;
}
#main div {
    padding: 12px 2em;
}
</style>

<div id="wrap">
    <h3 id="header">Welcome</h3>
    <ul id="nav">
        <li>link1</li>
        <li>link2</li>
        <li>link3</li>
    </ul>
    <div id="main">
        <div>正文内容</div>
    </div>
</div>

class：定义类规则或样式规则
id：定义元素的唯一标识
style：定义元素的样式声明
rel：定义当前页面与其他页面的关系（从源文档到目标文档的关系）
rev：定义当前页面与其他页面的链接关系（从目标文档到源文档的关系）

<input type="image" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2358290546,837413891&fm=26&gp=0.jpg"  width="32px" height="32px" alt="">

<a href="4-3.html" rel="prev">链接到集合中的前一个文档</a>

：定义元素的唯一标识

style：定义元素的样式声明
rel：定义当前页面与其他页面的关系（从源文档到目标文档的关系）
rev：定义当前页面与其他页面的链接关系（从目标文档到源文档的关系）

<input type="image" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2358290546,837413891&fm=26&gp=0.jpg"  width="32px" height="32px" alt="">

<a href="4-3.html" rel="prev">链接到集合中的前一个文档</a>

Colin-YYYY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 相关

html 相关文章目录html 相关HTML 链接HTML 图像换行水平分割线HTML 提示 - 如何查看源代码标题大小与字体大小的关系HTML 元素HTML HTML 链接如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。这是一个链接HTML 图像alt 属性用来为图像定义一串预备的可替换的文本假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。换行水平分割线标签在 H
复制链接

扫一扫

专栏目录