HTML

HTML

html是超文本标记语言,是一种标记语言,而不是编程语言,html使用标签描述网站

html文档包含标签和文本内容,html文档也叫做web网页

title:描述文本的标题

meta:元数据

<p>文本段落

<h1>文本的大标题

<body>包含文本页面的可见内容

<p>,<html>等都是成对出现,<p>为开始,</p>为结尾,其他的也类似

html5声明文本格式:<!DOCTYPE html>

html

<head>

头部元素 : <title>

<meta>

</head>

html结构图:

可见内容:<body>

<h1>:第一个标题</h1>

<p>第一个段落</p>

</body>

</html>

HTML链接属性:html链接通常用<a>来表示

1.href定义链接目标

可以是地址,电话号码,邮件等

2.target:定义链接打开的方式

blank:在新窗口或则新标签页内打开链接

self:在当前窗口或则标签中打开链接

parent:在父框架中打开链接

top:在整个窗口中打开链接,取消任何框架

3.rel:定义链接与目标页面的关系

nofollow:表示该搜索引擎不应该追踪该链接,常用于外部链接

noopener:防止网页上下文访问windos.opener属性和open方法

防止新页面打开链接的安全问题,尤其是blank

noreferrer:即告诉你目标网站从哪里来的

4.download:表示下载链接目标而不是跟踪目标

5.title:定义链接的额外方式,当鼠标悬停时显示工具的提示

6.id:用于链接锚点,通常用于同一个界面跳转到一个特定的页面

7.hreflang:指定链接的URL的语言

8.type:指定链接资源的MIME的类型

9.class:指定的类名元素

10.style:直接在元素上指定css的样式

<a href="https://www.example.com" style="color: red;">红色链接</a>

HTML头部

title:表示搜索引擎结果页面的标题

title表示不同文档的标题,是html不可缺少的

表示定义了浏览器工具栏的标题’

表示当页面添加到收藏夹时,显示在收藏夹中的标题

<base>描述了基本的链接地址或则链接目标,该文档作为HTM文档所有的链接标签的默认链接

<head>

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

</head>

<link>标签定义了文档与外部资源的关系

<link>标签通常用于链接到样式表

<head>

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

</head>

<style>定义了HTML文档的样式文件引用地址

在<style>中也可直接添加样式来渲染地址

<head>

<style type="text/css">

body {

background-color:yellow;

}

p {

color:blue

}

</style>

</head>

meta描述了一些基本的元数据

meta使用实例

每30秒刷新当前页面

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

搜索引擎定义关键词

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

定义网页作者

<meta name="author" content="Runoob">

为定义网页描述内容

<meta name="description" content="免费 Web & 编程 教程">

<script>标签用于加载脚本文件

HTML CSS

背景颜色(background-color)属性定义一个元素的背景属性

<body style="background-color:yellow;">

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

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

</body>

定义字体的样式可用font-family(字体),font-size(字体大小),color(颜色)来描述

<h1 style="font-family:verdana;">一个标题</h1>

<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

文本对齐方式
使用 text-align(文字对齐)属性指定文本的水平与垂直对齐方式:

<h1 style="text-align:center;">居中对齐的标题</h1>

<p>这是一个段落。</p>

LICENSED UNDER CC BY-NC-SA 4.0