2020.2.28 HTML

HTML:世界通用的超文本标记语言。标记语言是一套标记标签。HTML文档包括了HTML标签及文本内容。HTML文档也叫做web页面。
编辑规范:1.文件扩展名默认html/htm,而图片则基本上存为gif/jpg。2.浏览器默认忽视回车符。3.标记符用<></>,大多数标记符必须成对使用,用以说明起始和结束。4.必须使用半角字符。


HTML简介

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>我是第一个标题</h1>
<p>我是第一个段落。</p>
</body>
</html>
  • DOCTYPE声明了文档的类型,不区分大小写
  • <html>标签是 HTML 页面的根元素,该标签的结束标志为</html>
  • <head>标签包含了文档的元(meta)数据,如<meta charset="utf-8">定义网页编码格式为utf-8。
  • <title>标签定义文档的标题
  • <body>标签定义文档的主体,即网页可见的页面内容,该标签的结束标志为</body>
  • <h1>标签作为一个标题使用,该标签的结束标志为</h1>
  • <p>标签作为一个段落显示,该标签的结束标志为</p>

HTML基础
HTML标题

HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的。
h是英文header标题的缩写,标题无处不在,它的应用范围十分广泛:网站结构、写作文、PPT 等。
这里有六个标题元素标签 —— <h1><h2><h3><h4><h5><h6>,每个元素代表文档中不同级别的内容:
<h1> 表示主标题(the main heading),<h2> 表示二级子标题(subheadings),<h3>表示三级子标题(sub-subheadings),<h4><h5><h6>依次递减字体的大小。

HTML段落

HTML 段落是通过标签<p>来定义的,P是英文paragraph段落的缩写,经常被用来创建一个段落,就和你写作文一样。

HTML空格

无论你用了多少空格(包括空格字符,包括换行),当渲染这些代码的时候,HTML解释器会将连续出现的空格字符减少为一个单独的空格符。

HTML链接

HTML 链接是通过标签<a>来定义的。a标签,也叫anchor(锚点)元素,既可以用来链接到外部地址实现页面跳转功能,也可以链接到当前页面的某部分实现内部导航功能。

<a href="http://www.w3cschool.cn">这是一个链接</a>

HTML图片

HTML 图像是通过标签<img>来定义的。使用img元素来为你的网站添加图片,使用src 属性指向一个图片的具体地址。
请注意:img元素是自关闭元素,不需要结束标记。

<img src="logonew2.png" width="206" height="36">

HTML强调

在HTML中我们可以使用em(emphasis)元素来标记这样的情况,浏览器默认风格为斜体,在HTML中我们还可以使用<strong>(strong importance)元素来标记这样的请况,浏览器默认风格为粗体。

<p>I am <em>glad</em> you weren't <em>late</em>.</p>
<p>This liquid is <strong>highly toxic</strong>.</p>

HTML元素
HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

<p> 这是一个段落 </p>
<a href="default.htm"> 这是一个链接 </a>
< br>这是一个换行标签

HTML元素大小写不敏感,注意元素的开始和结束。


HTML属性

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现,比如:name="value"。
  • 属性/属性值对大小写不敏感。

HTML 属性常用引用属性值
属性值应该始终被包括在引号内。
双引号是最常用的,不过使用单引号也没有问题。
提示: 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='John "ShotGun" Nelson'

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


HTML标题
HTML标题

标题(Heading)是通过<h1> - <h6>标签进行定义的.

  • 浏览器会自动地在标题的前后添加空行。
  • 默认情况下,HTML 会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。
  • 请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

HTML水平线

< hr> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容,使用该元素产生的水平线可以在视觉上将文档分隔成各个部分。
HTML注释
< !--...-->

小结
<html> 定义 HTML 文档
<body> 定义文档的主体
<h1> - <h6>定义 HTML 标题
< hr>定义水平线
< !--...-->定义注释


HTML段落

段落是通过 <p> 标签定义的。

浏览器会自动地在段落的前后添加空行。(</p>是块级元素)
HTML 折行

在不产生一个新段落的情况下进行换行(新行),请使用 <br />标签。

在 HTML 语言中, <br />标签定义为一个换行符,它可以理解为简单的输入一个空行,而不是用来对内容进行分段。

小结:
<p>定义一个段落
< br>插入单个折行(换行)


HTML文本格式化

<b>定义粗体文本
<em>定义着重文字
<i>定义斜体字
<small>定义小号字
<strong> 定义加重语气
< sub>定义下标字
< sup>定义上标字
<ins>定义插入字
<del> 定义删除字


HTML链接
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
HTML使用标签<a>来设置超文本链接,是可以从一个页面指向另一个目的端的链接。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

<a href="//www.w3cschool.cn/">Visit W3Cschool</a>

当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手
在标签<a> 中使用了href属性来描述链接的地址。
默认情况下,链接将以以下形式出现在浏览器中:

  • 一个未访问过的链接显示为蓝色字体并带有下划线
  • 访问过的链接显示为紫色并带上下划线
  • 点击链接时,链接显示为红色并带上下划线
    注意:如果为这些超链接设置了CSS样式,展示样式会根据CSS的设定来显示.

HTML 空链接
指向链接后,鼠标变成手形,但单击后仍停留在当前页面。
临时加的空链接,主要为了能更好的看到最终的效果。

<a href="#">链接文字</a>

属性:

  • 使用 Target 属性,你可以定义被链接的文档在何处显示(在新的窗口打开,还是在原有的窗口中打开)。默认的被链接文档会在原有的窗口中打开的。如果将 target 属性设置为 "_blank" 则文档就会在新窗口打开。
  • id 属性可用于在一个 HTML 文档中创建书签标记。
    书签是不以任何特殊的方式显示,在HTML文档中是不显示的,所以对于读者来说是隐藏的。

HTML头部
<head>HTML 头部元素包含关于文档的概要信息,也被称为元信息(meta-information)。

<head>定义了文档的信息 。<head> 元素描述了文档的各种属性和信息,其中包括文档的标题、在 Web 中的位置以及和其他文档的关系等。

<title>定义了文档的标题。在 HTML/XHTML 文档中是必须的。

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

<base> 定义了页面链接标签的默认链接地址。<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接。在 HTML 中,<base> 标签没有结束标签;在 XHTML 中,<base> 标签必须被正确地关闭。

<head>       
<base href="//www.w3cschool.cn/images/" target="_blank">      
</head>

<link> 定义了一个文档和外部资源之间的关系。<link> 标签定义了文档与外部资源之间的关系。

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

<meta>定义了HTML文档中的元数据。元数据也不显示在页面上,但会被浏览器解析。META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。

为搜索引擎定义关键词:

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

为网页定义描述内容:

<meta name="description" content="Free Web tutorials on HTML and CSS">

定义网页作者:

<meta name="author" content="Hege Refsnes">

每30秒钟刷新当前页面:

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

<script>定义了客户端的脚本文件 。

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

<head>        
<style type="text/css">        
body {background-color:yellow}        
p {color:blue}        
</style>        
</head>

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,491评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,856评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,745评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,196评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,073评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,112评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,531评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,215评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,485评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,215评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,583评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2 335

推荐阅读更多精彩内容

  • HTML HTML简介 1、什么是HTML? HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言...
    小山居阅读 657评论 0 5
  • HTML 指超文本标记语言(HyperText Markup Language),是一种用于创建网页的标准标记语言...
    神齐阅读 1,929评论 0 3
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,084评论 0 0
  • HTML基础 本文包括 HTML基本知识与结构 HTML常见标签 标签写法与嵌套的讨论 HTML、CSS、java...
    廖少少阅读 2,072评论 2 21
  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 3,601评论 0 7