HTML-----(跟着w3school学,只记录一部分)

    xiaoxiao2023-10-30  155

    Html

    一、 简介二、 HTML水平线三、样式四、图像五、块六、布局七、HTML 响应式 Web 设计七、框架八、HTML 脚本九、HTML 头部元素十、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

    最新回复(0)