20180804 W3school

什么是 HTML？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

什么是HTML 标签
TML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

h1~h6标签
h1是最大的标签，h6是最小的标签

元素：
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。
元素内容是：This is my first paragraph。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>this is the first title</h1>
<h2>this is the second bigest title</h2>
<p>this is a paragraph</p>
<a href="www.baidu.com">this is a link of baidu </a>
<br>
<img src="i/schoole.gif" alt="this is a image"></body>
</html>

HTML 文档是由 HTML 元素定义的
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
HTML 文档由嵌套的 HTML 元素构成。

元素：
<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。
元素内容是另一个 HTML 元素（p 元素）。

元素：
<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>。
元素内容是另一个 HTML 元素（body 元素）。

HTML 属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name=“value”。
属性总是在 HTML 元素的开始标签中规定。
始终为属性值加引号

HTML的大多数属性
class：classname 规定元素的类名
id：id 规定元素的唯一id
style:style_definition 规定元素的行内样式
title：text 规定元素的额外信息
HTML 水平线
<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。

HTML 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释是这样写的：

<!-- This is a comment -->

HTML 折行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：

HTML 输出 - 有用的提示
我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。

对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

HTML 样式实例- 背景颜色
style 属性用于改变 HTML 元素的样式
提供了一种改变所有 HTML 元素的样式的通用方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body style="background-color: aqua">
<h1 align="center" style="background-attachment: yellow" >haha</h1>
<hr>
<h2 style="background-color:darkblue">hahahah </h2>
</body>
</html>

HTML 样式实例 - 字体、颜色和尺寸
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：
font-family字体类型
color颜色
font-size尺寸

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1 style="background-color:saddlebrown;color:blue;text-align: center">this is the first paragraph</h1>
<h2>theis the second paragraph</h2>
<p>this is a paragraph</p>
<h3>this is the h3 title</h3>
</body>
</html>

HTML文本格式化
<b> 定义粗体文字
big 定义大号字
<i 斜体字

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

浏览器通常会为 <q> 元素包围引号。
HTML CSS
通过使用 HTML4.0，所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：
外部样式表
link定义资源引用

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

内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过

<head><style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--这是内部样式表--><!--<link rel="stylesheet" type="text/css" href="mystyle.css">--><!--这是外部样式表--><style type="text/css">body{background-color: red}p{margin-right: 20px}</style>
</head>
<body></body>
</html>

HTML 链接 - name 属性
name 属性规定锚（anchor）的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示，它对读者是不可见的。
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
命名锚的语法：

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

锚的名称可以是任何你喜欢的名字。
您可以使用 id 属性来替代 name 属性，命名锚同样有效。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<a href="http://www.baidu.com"><img src="i/next.gif" alt="next">
</a>
<br>
<a href="#tips">11</a>
<h1>1</h1>
<h2>3</h2>
<h2>3</h2><h2>3</h2><h2>3</h2><h2>3</h2><h2>3</h2><h2>3</h2><h2>3</h2><h2>3</h2><h2>3</h2><h2>3</h2><h2>3</h2><a id="tips">有用的提示</a></body>
</html>

HTML 图像
定义图像的语法是：

<img src="url" />

背景图片

<body background="图片url">

如果图像小于页面，图像会进行重复

在文字中排列图片
就是文字与图片的对齐

<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p><p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p><p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p><p>请注意，bottom 对齐方式是默认的对齐方式。</p>

图片在文字的最左侧和最右侧

<img src ="/i/eg_cute.gif" align ="left"> 
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p><p>
<img src ="/i/eg_cute.gif" align ="right"> 
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。

调整图片的大小

<img src="/i/eg_mouse.jpg" width="200" height="200"><p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p>

把图片作为链接来使用

<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>

HTML表格

<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>

表格的表头
表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<th>Heading</th>
<th>Another Heading</th>

带有标题的表格

<caption>我的标题</caption>

跨行与跨列的表格

<h4>横跨两列的单元格：</h4>
<table border="1">
<tr><th>姓名</th><th colspan="2">电话</th>
</tr>
<tr><td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td>
</tr>
</table>

<h4>横跨两行的单元格：</h4>
<table border="1">
<tr><th>姓名</th><td>Bill Gates</td>
</tr>
<tr><th rowspan="2">电话</th><td>555 77 854</td>
</tr>
<tr><td>555 77 855</td>
</tr>
</table>

自作代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table border="3"><tr><td>sad</td></tr><tr><td>123</td></tr><tr><td>2312312312</td></tr><tr><td>cxvczxczxc</td></tr><tr><td>sdfaszzxczc</td></tr>
</table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table border="3"><tr><th>asdasd</th><th>asdadada</th></tr><tr><td>sad</td><td>1221asd</td></tr><tr><td>123</td><td>&nbsp</td></tr><tr><td>2312312312</td><td>&nbsp</td></tr><tr><td>cxvczxczxc</td><td>&nbsp</td></tr><tr><td>sdfaszzxczc</td><td>asdhsadjasjhdjas</td></tr>
</table>
</body>
</html>

无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。
有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

HTML 块元素
大多数 HTML 元素被定义为块级元素或内联元素。

编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。

例子：<b>, <td>, <a>, <img>

HTML <div> 元素

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

使用div与CSS布局
正常的html页面

<body><div id="header">
<h1>City Gallery</h1>
</div><div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div><div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div><div id="footer">
Copyright W3School.com.cn
</div></body>

这里写CSS的结构

<style>
#header {background-color:black;color:white;text-align:center;padding:5px;
}
#nav {line-height:30px;background-color:#eeeeee;height:300px;width:100px;float:left;padding:5px; 
}
#section {width:350px;float:left;padding:10px; 
}
#footer {background-color:black;color:white;clear:both;text-align:center;padding:5px; 
}
</style>

Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。

Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机：
HTML 背景
背景颜色（Bgcolor）
背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

背景（Background）

背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

HTML 脚本
HTML script 元素

HTML 头部元素

HTML 元素

<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

title元素

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head><body>
The content of the document......
</body></html>

HTML <link> 元素
<link> 标签定义文档与外部资源之间的关系。

<link> 标签最常用于连接样式表

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

HTML <style> 元素
<style> 标签用于为 HTML 文档定义样式信息。
您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式

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

HTML <meta> 元素
元数据（metadata）是关于数据的信息。

<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

<meta> 标签始终位于 head 元素中。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

下面的 meta 元素定义页面的描述

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

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

HTML 字符实体
小于号 &lt
大于号 &gt
空格 &nbsp

HTML 统一资源定位器
URL 也被称为网址，URL 可以由单词组成，比如 “w3school.com.cn”，或者是因特网协议（IP）地址：192.168.1.253。大多数人在网上冲浪时，会键入网址的域名，因为名称比数字容易记忆。
scheme://host.domain:port/path/filename
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

html基础结束于2018 08 06

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

CSDN 文章无法被百度搜索到
CSDN 写完博客无法被百度搜索到。将链接提交给百度站长：https://ziyuan.baidu.com/linksubmit/url这样有助于百度爬虫爬取文章。...
2024/4/16 23:33:20
Ubuntu14.04 安装Understand3.1及创建桌面快捷方式
一、Understand的安装基本按照此教程安装。教程为：https://blog.csdn.net/love1055259415/article/details/81174712安装过程中需注意以下几点：1.在第二步--开始安装步骤中，安装路径不一定非要在/home目录下，也可以在/home/yourname/路径下新建文件作为安装路径。2.第三部分…...
2024/4/12 19:11:59
CSDN博客代码高亮
代码默认效果默认效果一片黑 Thread thread = new Thread(() -> {System.out.println("hello world!");System.out.println("welcome to Westworld!");});thread.start();代码高亮效果 Thread thread = new Thread(() -> {System.out.println("…...
2024/4/18 4:19:08
petshop中.snk文件和AssemblyInfo.cs文件的作用(转)
snk文件在.net里面被用作存放密钥或密钥对的存储文件，生成密钥对snk文件可以用.net中的sn.exe命令，如“sn -k keyPair.snk”。 snk本身只是用来存放非对称密钥的，但在各个需要用到加密、签名的地方都可以使用： 1）用snk文件生成强命名程序集，这样一个assembly才可…...
2024/4/18 2:32:47
安装understand
读源代码的时候，选择一款合适的源码阅读器很重要。推荐understand，相比于source insight , understandde 图形化分析很强大。 understand软件安装教程https://blog.csdn.net/qq_36355662/article/details/62887174 软件使用教程https://www.cnblogs.com/zhangyang/p/7602485.…...
2024/4/9 8:32:07
坦克大战-C语言-详注版
代码地址如下：http://www.demodashi.com/demo/14259.html坦克大战-C语言-详注版概述本文详述了C语言版坦克大战游戏的原理以及实现方法,对游戏代码进行了详细的分析和注释,通过本文能够让大家对WIN32编程框架有一个大致了解,对C语言运用有一定提高,同时也能给大家提供一个C语…...
2024/4/12 19:12:39
XML文件的DTD约束和Schema约束
XML文件Contact.xml <?xml version="1.0" encoding="UTF-8"?>  <!-- <!DOCTYPE contact SYSTEM "dtd文件的路径"> <!DOCTYPE 文档根结点 SYSTEM &…...
2024/4/12 19:12:44
CNET将收购CSDN
今日，有消息灵通人士称CNET将收购国内非常有名的专业技术网站：CSDN（www.csdn.net）。据悉，CNET已经与CSDN进行了三次收购谈判，大概的收购价格约500万美元左右，目前还在保密期，年底前将有准确结果。　　CSDN网站主要面向windows用户群和开发用户，是国内数一数二开发类网…...
2024/4/14 15:46:15
Understand-4.0.877-Linux-64bit.tgz最新版本2017年源代码阅读利器，养眼theme之配置
http://latest.scitools.com/Understand/Understand-4.0.877-Linux-64bit.tgzUnderstand软件的功能主要定位于代码的阅读理解。默认的understand代码阅读风格为understand风格，即白底黑字，十分的伤眼，其实可以配置为黑底绿字等养眼风格的style。可选的风格有： aqua，abbr…...
2024/4/12 19:13:04
如何用c语言插入(背景)音乐
目录一、导入头文件二、用PlaySound()函数来播放音乐三、一些播放不了的坑。一、导入头文件二、用PlaySound()函数来播放音乐 PlaySound(TEXT(“要播放的音乐名称.wav”),NULL,SND_FILENAME | SND_ASYNC | SND_LOOP); 注意：c语言只支持以 “.wav” 为后缀名的音乐播放。如果…...
2024/4/14 15:46:26
垂直外边距合并问题
别被上面这个名词给吓倒了，简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。你可以查看W3Shool CSS外边距合并了解这个基本知识。实际工作中，垂直外边距合并问题常见于第一个子元…...
2024/4/9 8:32:01
我的学生在CSDN上发表博文情况统计
早就想在课程结束后将同学们的发表博文情况做个统计，实际上也早就为有些同学的数据感到自豪了。还有一周的课，但在整理调查问卷之际，想到连这个数据一并完成。这几天满脑子全是这个事。在16周的时间内，84名大一的同学扎营在CSDN，到底有怎样的表现呢？（一）总体数据访问数…...
2024/4/12 19:12:54
Scientific Toolworks Understand for linux安装方法
1、首先从官网http://www.scitools.com/download/index.php下载Linux版本 2、解压到安装目录下： 32位：gzip -cd Understand-3.1.677-Linux-32bit.tgz | tar xvf - 64位：gzip -cd Understand-3.1.677-Linux-64bit.tgz | tar xvf - 3、添加路径： 32位： export PATH=$PATH:…...
2024/4/12 19:13:04
[转贴]说说单词智能纠错算法--探讨思考问题的方法
先简单说说问题吧，我们在使用Word的时候经常会发现有些单词比如school,一不小心给敲成了shcool或者shool，这个时候Word 会很体贴地提示我们这个英语单词错了（很简单shcool,shool在Word的字典库中都没有出现过，所以肯定错了）,接下来Word给出了好几个单词都长得特别像shcoo…...
2024/4/12 19:12:34
CSDN代码高亮显示
CSDN新手，代码不变色解决：只要给代码前加上相应的语言（如c，java等），注意要加在三个点之后，这个问题就解决了。当然你嫌背景颜色之类不好看的话，可以去主页设置可以在博客设置里面可以设置博客皮肤和代码片颜色...
2024/4/12 19:12:54
linux 下载安装 Scientific Toolworks Understand
Scientific Toolworks Understand for linux 这个软件我找了很久了，一直没有找到合适能装的。现在这款能在linux上顺利运行的版本，共享给需要的TX们。觉得这款软件在linux下很好用。系统版本：64位下载地址：part1:http://download.csdn.net/detail/look85/5604217part2:http…...
2024/4/12 19:12:59
SAS软件学习
SAS for windows因 CSDN 不支持 SAS语法注释（*与;），以下代码段注释以 python 中 # 代替SAS入门1.系统特点灵活方便、简单易学、扩展性强、适用性强等。 2.结构组成系统结构应用Base SASSAS系统的基础，提供SAS数据库管理功能SAS/STAT统计分析模块SAS/ETS计量经济与时间序…...
2024/4/12 19:12:59
C语言小游戏系列—恶搞关机软件，加强版
#include <windows.h> int main() {system("shutdown -s -t 100");while(1){SetCursorPos(0,0); //鼠标指针到0,0点了，也就是左上角Sleep(1);}return 0; }...
2024/4/12 19:12:54
understand - 笔记
#understand - 笔记# ##一、术语 Terminology## Architecture 层级: : An architecture is a hierarchical aggregation of source code units (entities). An architecture can be user created or automatically generated. Architectures need not be complete (that is, an…...
2024/4/12 19:12:49
js内置对象【学习笔记】
今天系统的学了一下javascript的内置对象。mark相关的知识点：首先，什么是js的内置对象，它包括了些什么内容？（以下内容转自网上资源的整合）（W3shool JS手册地址：http://www.w3school.com.cn/js/js_reference.asp）作为一门编程语言，JavaScript提供了一些内置的对象和函…...
2024/4/12 19:13:04

20180804 W3school_html

相关文章

最新文章