1,基本格式

<!DOCTYPE html>    //声明为 HTML5 文档
<html>
<head>
<meta charset="utf-8"> //编码方式,否则会乱码,charset="gbk"也是可以的
<title>大晴测试</title> //元素描述了文档的标题,将会显示在浏览器的标签头上
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>

html页面包含元素和属性:类似于<body>这样的是元素,元素里的是属性,比如:<body bgcolor="yellow">

HTML全局属性表:

参考:http://www.w3school.com.cn/tags/html_ref_standardattributes.asp

属性 描述
accesskey 带有指定快捷键的超链接。
class 规定元素的一个或多个类名(引用样式表中的类)。
contenteditable
contenteditable="true"表示段落可以编辑
contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-* 用于存储页面或应用程序的私有定制数据。
dir 规定元素中内容的文本方向。
draggable 规定元素是否可拖动。
dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden 规定元素仍未或不再相关。
id 规定元素的唯一 id。
lang 规定元素内容的语言。
spellcheck 规定是否对元素进行拼写和语法检查。
style 规定元素的行内 CSS 样式。
tabindex 规定元素的 tab 键次序。
title 规定有关元素的额外信息。
translate 规定是否应该翻译元素内容。

2,html标题

  <h1>~<h6>对应的是不同等级的标题

  align="center" align属性表示排版方式,适用于标题或者段落:<h1 align="center">This is heading 1</h1>

  段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小,将改变段落中的行数。<p></p>表明段落

  <hr/>表示加一条水平线,它不算是属性,在段落之间:

  注释:<!--内容。-->

3,html段落

  段落是通过 <p> 标签定义的,用<br />在段落<p>里折行,

4,html样式

  在style标签里一个一个地设定,叫做内联样式,比如,

<body style="background-color:yellow">    //背景颜色
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>    //style属性中,分别对应的是字体系列、颜色和字体尺寸
<h1 style="text-align:center">This is a heading</h1>    //对应字体对其方式

  但是html同样支持预设样式,

<html>

<head>
<style type="text/css"> //这是预设样式的代码,是内部样式表
h1 {color: red}
p {color: blue}
</style>
</head> <body>
<h1>header 1</h1> //其下所有的h1和p元素都会使用提前定义好了的默认样式
<p>A paragraph.</p>
</body> </html>

  外部样式表也是支持的:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"> //这个样式表目前不知道是什么原理,估计是css的
</head>

样式相关的元素:

标签 描述
<style> 定义样式定义。
<link> 定义资源引用。
<div> 定义文档中的节或区域(块级)。
<span> 定义文档中的行内的小块或区域。

5,文本格式化

文本格式化标签:

  <b>内容</b>,表示bold,加粗;除此以外,还有<strong>,<big>,<em>,<i>,<small>等

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

计算机输出标签:

  预格式:<pre>内容</pre>,它会保留内容中的空格和换行,

标签 描述
<code> 定义计算机代码。
<kbd> 定义键盘码。
<samp> 定义计算机代码样本。
<tt> 定义打字机代码。
<var> 定义变量。
<pre> 定义预格式文本。

引用,引用和术语定义

标签 描述
<abbr> 定义缩写。

<abbr title="World Health Organization">WHO</abbr>
<acronym> 定义首字母缩写。
<address> 定义地址。
<bdo> 定义文字方向。
<blockquote> 定义长的引用。
<q> 定义短的引用语。
<cite> 定义引用、引证。cite 元素定义著作的标题。浏览器通常会以斜体显示 cite 元素
<dfn> 定义一个定义项目,<dfn> 标签可标记那些对特殊术语或短语的定义。显示器通常用斜体显示,常写为:<dfn title="World Health Organization">WHO</dfn>

6 引用

  HTML <q> 元素定义短的引用。

<p>WWF 的目标是:<q>构建人与自然和谐共存的世界。</q></p>    //浏览器往往会显示:WWF 的目标是 ”构建人与自然和谐相处的世界。“

  HTML <blockquote> 元素定义被引用的节。浏览器通常会对 <blockquote> 元素进行缩进处理。

<blockquote cite="http://www.worldwildlife.org/who/index.html">    //有一个cite属性
五十年来,WWF 一直致力于保护自然界的未来。
世界领先的环保组织,WWF 工作于 100 个国家,
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>

7,链接

  创建超链接:

<p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。
</p>

  图像文件:和普通文本一样,可以放在段落中,也可以架上超链接。

<body>

<img src="/i/eg_w3school.gif" width="300" height="120" border="4" />    //src是文件来源,witdth宽,height高,border是边框像素

</body>

  创建一个电子邮件的链接:

<p>
这是邮件链接:
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
</p>
//注意,%20在电子邮件中表示空格

  

  在“hehe”上创建超链接:

<body>
<a href="/dir_test">hehe</a> //点击hehe的话,href中的网址会在当前网址的基础上打开
</body>

  如果想在新的窗口打开超链接,那就把target设置成"_blank":<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

  如果想链接到本页面的不同位置:

<p>
<a href="#C4">查看 Chapter 4。</a> //#加C4
</p>
...
<h2><a name="C4">Chapter 4</a></h2> //下文中必须同样用<a name=“” >定义了C4

  如果想跳出本页面,跳到另一个页面,就设定target="_top" :<a href="/daqing_test.php" target="_top">请点击这里!</a>

  <a name="label">锚(显示在页面上的文本)</a>

8,图像

  <p><img src="/i/eg_w3school.gif" width="300" height="120" border="4" /> </p>    //src是文件来源,witdth宽,height高,border是边框像素,替换文本属性:alt="Big Boat"也可以加上,替换文本属性是当图加载不出来的时候替代图的文本。另外,有一个图片对齐属性已经即将弃用:align="bottom"

  拓展:

  <body background="/i/eg_background.jpg">添加背景图

  <p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>    //h5中即将弃用

  <p> <img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落,图片浮动在这个文本的左边。</p>    //css属性,重点看style=“float:left”

  <a href="http://www.runoob.com/html/html-tutorial.html">  <img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>    //图像上架超链接,进阶是图像的不同部位有超链接,用map实现。

9,表格

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。比如:

<table border="1">    //边框是1
<tr> //这一行下面有两个单元格
<td>row 1, cell 1</td> //单元格1,table data
<td>row 1, cell 2</td> //区别于表格头,th,table head
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

形成:

拓展:

没有边框的表格:

  不设置<table>的border属性就可以了

  具有合并单元格作用的表格:

<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th> //意思是,这个telephone单元格相当于合并了两个单元格
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

10 列表

无序列表使用 <ul> 标签,unordered list

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表<ol>标签,ordered list

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

学到了css和区块:http://www.runoob.com/html/html-css.html

  

html超文本标记语言基础一的更多相关文章

  1. HTML超文本标记语言-基础标签整理

    第一章 <META>标签: <meta http-equiv="Content-Type" Content="text/html;charset=gb2 ...

  2. Html就是超文本标记语言的简写,是最基础的网页语言

    Html就是超文本标记语言的简写,是最基础的网页语言. Html是通过标签来定义的语言,代码都是由标签所组成. Html代码不用区分大小写. Html代码由<html>开始</htm ...

  3. 超文本标记语言(HTML)

    超文本标记语言(HyperText MarkUp Language,HTML) HTML是用来制作网页的标记语言,HTML不需要编译,直接由浏览器解析: HTML文件是一个文本文件,包含了一些HTML ...

  4. html超文本标记语言的由来

    万维网上的一个超媒体文档称为一个页面:page,作为一个组织或者个人在万维网上放置开始点的页面称为主页:homepage或者首页,主页中通常有指向其他相关页面或者其他节点的指针,就是通常所说的超链接, ...

  5. html 超文本标记语言

    1.html超文本标记语言 2.在html中存在着大量的标签,我们用html中存在的标签将要显示在网页的内容包含起来. 3.css 控制网页显示内容的效果. 4.html+css 只能是静态网页. 5 ...

  6. HTML——超文本标记语言

    HTML: 网站(站点) - 网页 1.HTML作为文件后缀名,可以把文件变为网页 2.HTML是一门编程语言的名字:超文本标记语言 3.超越了文字的范畴,除了文字还可以有图片.视频.音频.动画特效等 ...

  7. HTML:Hyper Text Markup Language 超文本标记语言

    1.HTML是什么? *Hyper Text Markup Language 超文本标记语言 *Hyper Text:超链接.把不同空间的资源,整合在一起,形成逻辑上的网状结构. *Markup La ...

  8. 超文本标记语言HTML

    介绍html文档的基本结构,html常用标签的使用,理解html语言制作网页基本原理. html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母 ...

  9. html(HyperText Markup Language)--超文本标记语言

    1.html的简介? * 什么是html? ** HyperText Markup Language:超文本标记语言,网页语言 ** 超文本:超出文本的范畴,使用html可以轻松实现这样操作: ** ...

随机推荐

  1. POJ-1077 HDU 1043 HDU 3567 Eight (BFS预处理+康拓展开)

    思路: 这三个题是一个比一个令人纠结呀. POJ-1077 爆搜可以过,94ms,注意不能用map就是了. #include<iostream> #include<stack> ...

  2. Circular view path xxx would dispatch back to the current handler URL,Check your ViewResolver setup

    Circular view path xxx would dispatch back to the current handler URL 通过原因分析,造成问题有两个因素:1). 缺省转发, 2). ...

  3. 使用Microsoft Toolkit 2.5 激活windows server 2012 R2与office

    本人亲测可以激活windows server 2012 R2版 关于此软件介绍如下: 这是一款可以用来管理或者配置 Microsoft Office 和 Windows 的许可证(密钥)的工具,也用来 ...

  4. 【清北学堂2018-刷题冲刺】Contest 6

    Task 1:子集 [问题描述]  若一个集合S中任意两个元素x和y,都满足x⊕y<min⁡(x, y) ,则称集合S是"好的".其中⊕为按位异或运算符.现在给定一个大小为n ...

  5. node(基础三)_模块系统基础

      一.前言                                                                                         这篇文章主 ...

  6. qml: 自定义滚动条;

    注:  该博文为原创博文,转载请注明,摘用请随意: qml自带的滚动条不太好用: 首先,利用canvas绘制滚动条两端的箭头: import QtQuick 2.0 Canvas { width: 2 ...

  7. window下Nexus私服高级搭建

    环境是:nexus-2.1.1.maven-3.0.4.jdk-1.6.0_32 一.用admin用户登陆nexus nexus的下载和安装都很简单 1.下载 http://www.sonatype. ...

  8. 01--STL算法(算法基础)

    一:算法概述 算法部分主要由头文件<algorithm>,<numeric>和<functional>组成. <algorithm>是所有STL头文件中 ...

  9. 14.命令模式(Command Pattern)

    耦合与变化:    耦合是软件不能抵御变化灾难的根本性原因.不仅实体对象与实体对象之间存在耦合关系,实体对象与行为操作之间也存在耦合关系.                                ...

  10. angular学习—组件

    组件: vue组件:xxx.vue react组件:xxx.js+xxx.css angular组件:xxx.ts+xxx.css+xxx.html angular的装饰器: @ngModule:an ...