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>