HTML-----（跟着w3school学,只记录一部分）

最新推荐文章于 2024-06-04 00:24:43 发布
最新推荐文章于 2024-06-04 00:24:43 发布
阅读量468 收藏
点赞数
分类专栏： HTML 文章标签： HTML

Html

一、 简介

1.什么是 HTML？

HTML 是用来描述网页的一种语言。

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

2.HTML 文档 = 网页

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

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容

二、 HTML水平线

使用水平线 (< hr> 标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。

三、样式

注意：
在这里插入图片描述

四、图像

创建图像映射
本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。

<html>
<body>

<p>请点击图像上的星球，把它们放大。</p>

<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />

</map>

<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

</body>
</html>

五、块

在这里插入图片描述在这里插入图片描述

六、布局

在这里插入图片描述

七、HTML 响应式 Web 设计

什么是响应式 Web 设计？

RWD 指的是响应式 Web 设计（Responsive Web Design）
RWD 能够以可变尺寸传递网页
RWD 对于平板和移动设备是必需的

使用 Bootstrap

另一个创建响应式设计的方法，是使用现成的 CSS 框架。

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

Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" 
  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>

<div class="container">
<div class="jumbotron">
  <h1>W3School Demo</h1> 
  <p>Resize this responsive page!</p> 
</div>
</div>

<div class="container">
<div class="row">
  <div class="col-md-4">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
  </div>
  <div class="col-md-4">
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
  </div>
  <div class="col-md-4">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</div>
</div>

</body>
</html>

七、框架

http://www.w3school.com.cn/html/html_frames.asp#more_examples
7.1 框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

框架结构标签（frameset）

    框架结构标签（<frameset>）定义如何将窗口分割为框架
    每个 frameset 定义了一系列行或列
    rows/columns 的值规定了每行或每列占据屏幕的面积

7.2 HTML Iframe
iframe 用于在网页内显示网页。

1.添加 iframe 的语法

<iframe src="URL"></iframe>

URL 指向隔离页面的位置。

2.Iframe - 设置高度和宽度

height 和 width 属性用于规定 iframe 的高度和宽度。

属性值的默认单位是像素，但也可以用百分比来设定（比如 “80%”）。
实例

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

3.Iframe - 删除边框

frameborder 属性规定是否显示 iframe 周围的边框。

设置属性值为 “0” 就可以移除边框：

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

4.使用 iframe 作为链接的目标

iframe 可用作链接的目标（target）。

链接的 target 属性必须引用 iframe 的 name 属性：

<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

八、HTML 脚本

HTML script 元素

<script>标签用于定义客户端脚本，比如 JavaScript。

script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。

必需的 type 属性规定脚本的 MIME 类型。

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

下面的脚本会向浏览器输出“Hello World!”：

<script type="text/javascript">
document.write("Hello World!")
</script>

<noscript>标签

标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：

<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

九、HTML 头部元素

1.HTML<head>元素

<head>元素是所有头部元素的容器。<head>内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。

以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script>以及<style>。

2.HTML<title>元素

<title>标签定义文档的标题。

title 元素在所有 HTML/XHTML 文档中都是必需的。

title 元素能够：

定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题

一个简化的 HTML 文档：

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

3.HTML <base>元素

<base>标签为页面上的所有链接规定默认地址或默认目标（target）：

<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>

4.HTML<link>元素

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

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

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

5.HTML<style>元素

<style>标签用于为 HTML 文档定义样式信息。

您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：

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

6.HTML<meta>元素

元数据（metadata）是关于数据的信息。

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

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

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<meta name="author"
content="w3school.com.cn">

<meta name="revised"
content="David Yang,8/1/07">
 
<meta name="generator"
content="Dreamweaver 8.0en">

</head>

<body>
<p>本文档的 meta 属性标识了创作者和编辑软件。</p>
</body>

</html>

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

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

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
</head>

<body>
<p>
对不起。我们已经搬家了。您的 URL 是 <a href="http://www.w3school.com.cn">http://www.w3school.com.cn</a>
</p>

<p>您将在 5 秒内被重定向到新的地址。</p>

<p>如果超过 5 秒后您仍然看到本消息，请点击上面的链接。</p>

</body>
</html>

一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

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

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

下面的 meta 元素定义页面的关键词：

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

name 和 content 属性的作用是描述页面的内容。
7.HTML <script>元素

<script>标签用于定义客户端脚本，比如 JavaScript。

十、HTML字符实体

在这里插入图片描述

十一、HTML统一资源定位器

URL - Uniform Resource Locator

当您点击 HTML 页面中的某个链接时，对应的 标签指向万维网上的一个地址。

统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。

网址，比如 http://www.w3school.com.cn/html/index.asp，遵守以下的语法规则：

scheme://host.domain:port/path/filename

解释：

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

编者注：URL 的英文全称是 Uniform Resource Locator，中文也译为“统一资源定位符”。

十二、HTML文档类型

<!DOCTYPE>声明

Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。

HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。

<!DOCTYPE>不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。
带有 HTML5 DOCTYPE 的 HTML 文档：

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

十三、表单

http://www.w3school.com.cn/html/html_forms.asp

林不羁
关注
专栏目录
HTML——基础教程 w3cschool（一）
栀未央的博客
10-10 1637
HTML——基础教程 w3cschool（一） Html标签   HTML  HyperTextMaekupLanguage  超文本标签语言 HTML  网页的“源码”   浏览器：”解释和执行” HTML源码的工具   HTML版本 HTML4.1.0 HTML5：   HTML的最新版本，是HTML、XH
前端开发基础HTML基础知识详解------表格（二）
吾之历程
05-06 1170
HTML1.表格 table(会使用)表格 table(会使用)1. 创建表格2. 表格属性3. 表头单元格标签th4. 表格标题caption5. 合并单元格(难点)5.1 合并单元格2种方式5.2 合并单元格顺序5.3 合并单元格三步曲6. 总结表格7. 拓展阅读@表格划分结构（了解）2. 列表标签（重点）学习目标2.1 无序列表 ul （重点）2.2 有序列表 ol （了解）2.3 自定义...
HTML_School
beyondkim
06-12 492
HTML span 红色*号 <span>*</span> table get方法, 将数据放在Url中 <form id=""> </form> enctype 域标签 field, 没有属性 定义域和域标题 <form> <fileeset> <legen align="left|right|bottom|top">标题内容</legen> form element
HTML做一个学校网站（纯html代码）
最新发布
爱敲代码的卡拉米的博客
06-04 654
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
w3school HTML基础教程
weixin_30644369的博客
07-11 111
<addr>元素通常被呈现为斜体，且大多数浏览器会在该元素前后添加换行符； <base>标签可以减少很多输入量，但必须位于head元素内部； <blockquote>标签会为内容插入换行和外边距，而<q>元素不会有任何特殊的呈现； <code>元素用于表示计算机源码或者其他机器可以阅读的文本内容； <col>和&l...
web前端：利用html，css仿写学校网站
2301_76862126的博客
04-24 317
2.使用动画完成过渡+变换效果。1.完成学校官方网站页面制作。
2022最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)
m0_54849806的博客
08-01 6200
JS是单线程模型，只能通过这种多进程的方式提高性能）使用ParallelUglifyPlugin开启多进程压缩JS文件（使用UglifyJS插件压缩JS代码时，需要先将代码解析成Object表示的AST（抽象语法树），再去应用各种规则去分析和处理AST，所以这个过程计算量大耗时较多。ParallelUglifyPlugin可以开启多个子进程，每个子进程使用UglifyJS压缩代码，可以并行执行，能显著缩短压缩时间）...
php网站制作(6)-php 学习摘记
weishuxiao1的专栏
06-28 2752
客户端的 JavaScript 不同的是，PHP 代码是运行在服务端的。如果在服务器上建立了如上例类似的代码，则在运行该脚本后，客户端就能接收到其结果，但他们无法得知其背后的代码是如何运作的。甚至可以将 web 服务器设置成让 PHP 来处理所有的 HTML 文件，这么一来，用户就无法得知服务端到底做了什么。     PHP 一个很有用的特点体现在它处理 PHP 表单的方式。您需要理解的非常
【2021-09-22 修订】【梳理】计算机网络：自顶向下方法 第二章 应用层（docx）
COFACTOR
10-17 8937
计算机网络 知 识 梳 理 （第一版） 建议先修课程：数据结构。 配套教材： Computer Networking - A Top Down Approach, 7th edition James F. Kurose, Keith W. Ross 参考书目： 1、计算机网络（第7版） 谢希仁 编著 高等教育出版社 链接：https://pan.baidu.com/s/1MeSnQtQi8PYlzjFv-8RLLA 提取码：0000 二 应用层 2.1 网络应用背后的原理 现代网络应用程序常用的
HTML+CSS实践项目一——摄影网站案例总结分享
qq_55002082的博客
08-01 1288
HTML+CSS实践项目一——摄影网站案例总结分享
w3school
09-27
2011年9月最新编译的w3school网站web开发教程，新增JSON、CSS高级选择器等内容。
w3school手册
09-29
在 w3school，你可以找到你所需要的所有的网站建设教程。从基础的 HTML 到 CSS，乃至进阶的XML、SQL、JS、PHP 和 ASP.NET。
最新w3school
06-09
最新w3school chm版。。。。。。。。。。。。。。。。。。。。。。。。。。。
html 标签 http://www.w3school.com.cn/html/
Forever_xudada的专栏
11-10 2961
This is head for test
HTML W3School 学习笔记
linyk3的专栏
08-11 837
本博客目的只是简单记录学习Html 过程中的知识点， 内容主要参考来源：W3School Html 教程
HTML5的学习网站有哪些？
qf2019的博客
03-05 1170
HTML5是现在前端开发中较为火热的语言，许多朋友想要从零基础开始通过学习来从事前端开发的行业，又或是已经工作的程序员想要找一些资料，在搜索引擎上搜索相关知识，是许多人获取知识的重要的途径，但是面对五花八门的搜索结果，应该选择呢？ 1、W3CSchool W3C School 是学习HTML5较好的资源之一，它拥有的教程都带有例子，几乎可以提供我们所需要的所有知识点。如果想从基础开始学习HTML5...
w3cschoolHTML1
qq_43368247的博客
12-25 692
HTML 更换文本的颜色 现在我们来改变一些文字的颜色。 我们可以通过修改 h2 元素的 style (样式)来做到这一点。 样式的属性有很多，其中color用来指定颜色。 以下是将你的 h2 元素的文本颜色设置为蓝色的示例： &lt;h2 style=“color: blue”&gt; CatPhotoApp &lt;/h2&gt; 使用CSS选择器定义标签 使用CSS，您可以使用数百种CSS属...
W3Cschool学习整理----HTML 介绍
weixin_41173557的博客
02-25 440
今天正式的开始入门式的学习HTML。 从这里开始我学习的过程，也许有小伙伴们也有和我一样正在尝试着web前端的入门，但是不知道怎么开始，可以和我一起开始先了解一下HTML吧！ 1、 HTML是什么呢？ HTML 是用来描述网页的一种语言。 HTML 不是一种编程语言，而是一种标记语言，它有一套标记标签 。 HTML 使用标记标签来描述网页。 2、 HTML文档 = Web页面 HTM...
CSS day12 移动端布局练习
qq_34620296的博客
09-13 810
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
飞龙整理：W3School HTML教程1.0 - 入门与基础知识详解
在W3School HTML教程1.0中，飞龙整理了关于HTML的基础知识，帮助学习者全面理解和掌握这个关键的网页制作工具。HTML（HyperText Markup Language）是用于创建、结构化和展示网页内容的核心语言。它并非一种编程语言...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值