php 移动网站开发,怎样查询网站建设时间,在线支付网站制作,如何设计网站步骤推荐学习使用网站 w3school 在线教程 认识HTML
HTML#xff08;HyperText Markup Language#xff09;是超文本标记语言#xff0c;它是一个用于创建网页和网页应用程序的标准标记语言。HTML文档由一系列的元素#xff08;elements#xff09;组成#xff0c;这些元素通…推荐学习使用网站 w3school 在线教程 认识HTML
HTMLHyperText Markup Language是超文本标记语言它是一个用于创建网页和网页应用程序的标准标记语言。HTML文档由一系列的元素elements组成这些元素通过标签tags来定义。这些标签告诉浏览器如何呈现内容比如文本、图片、链接、列表、表格等。
HTML文档的结构通常包括以下几个部分 !DOCTYPE html 声明这不是一个HTML标签它是一个指示告诉浏览器文档使用哪个HTML版本进行编写。 html 元素这是HTML文档的根元素它包含了文档的所有其他元素。 head 元素包含了文档的元数据metadata如文档的标题title、字符集声明meta charsetutf-8、链接到样式表link relstylesheet hrefstyle.css和脚本文件script srcscript.js/script等。 body 元素包含了可见的页面内容如文本、图片、链接、表格、列表等。
下面是一个简单的HTML文档示例
!DOCTYPE html
html
head meta charsetutf-8 title我的第一个HTML页面/title
/head
body h1欢迎来到我的网页/h1 p这是一个段落。/p
/body
/html HTML使用实例 根据 w3school 网站进行的基础学习总结更深入的学习大家可以到网站上面去练练手。 HTML 标签是由尖括号包围的关键词比如 html HTML 标签通常是成对出现的比如 b 和 /b 标签对中的第一个标签是开始标签第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签 元素
元素就是开始标签结束标签之间的所有代码
属性
属性为 HTML 元素提供附加信息。HTML 标签可以拥有属且属性总是在HTML元素的开始标签中进行规定。如
HTML 链接由 a 标签定义。链接的地址在 href 属性中指定。
a href链接名字/a
HTML标题由p标签定义。 标题的属性在align中就可以进行指定。h1 aligncenter 拥有关于对齐方式的附加信息。
html
body
h1 aligncenterThis is heading 1/h1
p上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。/p
/body
/html标题 h1到h6
html
body
h1标题采用的关键词是h/h1
h2一共有六个等级/h2
h3h1到h6/h3
h4标题效果会进行加粗/h4
h5h1最大h6最小/h5
h6注意事项/h6
p段落请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。/p
/body
/html
段落p
html
body
p这是段落。/p
p实现分行。/p
p段落元素由 p 标签定义。/p
/body
/html换行br/
html
body
p
To breakbr /linesbr /in abr /paragraph,br /use the br tag.
br / 元素是一个空的 HTML 元素。由于关闭标签没有任何意义因此它没有结束标签。
/p
/body
/html链接
a href链接名字/a
href 属性规定链接的目标。
开始标签和结束标签之间的文字被作为超级链接来显示。
有两种使用 a 标签的方式
通过使用 href 属性 - 创建指向另一个文档的链接通过使用 name 属性 - 创建文档内的书签
html
body
a hrefhttps://www.csdn.net/
This is a link/a
p这个This is a link是对链接取的名字/p
/body
/html将图像作为链接
!DOCTYPE html
html
head !-- 这里可以添加页面的标题、引入的CSS文件等 -- title图像链接示例/title
/head
body p !-- 注释说明以下代码段展示了如何使用图像作为链接 -- 您也可以使用图像来作链接 a href/example/html/lastpage.html !-- 注释这是一个链接当用户点击这个链接时会跳转到/example/html/lastpage.html页面 -- !-- 注释以下是一个图像标签用于显示链接的图像 -- img border0 src/i/eg_buttonnext.gif alt下一个 / !-- 注释border0属性用于移除图像周围的边框虽然在现代浏览器中图像默认没有边框 -- !-- 注释src属性指定图像的来源路径 -- !-- 注释alt属性为图像提供替代文本用于图像无法显示时如加载失败或屏幕阅读器 -- /a /p /body
/html
target属性
html
body
a hrefhttp://www.w3school.com.cn/ target_blankVisit W3School!/a
p如果把链接的 target 属性设置为 _blank该链接会在新窗口中打开。/p
/body
/html 图像
注意插入动图与插入普通图像并没有语法上面的区别。
html
body
img src/i/eg_w3school.gif width300 height120 /
psrc里面填写的是图片的地址width和height指宽高/p
/body
/html样式
style 属性用于改变 HTML 元素的样式。可以在 CSS 教程中学习关于样式和 CSS 的所有知识。
!DOCTYPE html
!-- 声明文档类型和HTML版本但此例中未直接包含通常在HTML5中可省略 --
html
head !-- 通常在这里会包含CSS样式表链接或style标签定义内联样式但此例中直接在元素中使用了内联样式 --
/head
body stylebackground-color:PowderBlue;!-- 设置页面的背景颜色为PowderBlue -- h1Look! Styles and colors/h1 !-- 第一段文本设置字体为Verdana颜色为红色 -- p stylefont-family:verdana;color:red This text is in Verdana and red /p !-- 第二段文本设置字体为Times颜色为绿色 -- p stylefont-family:times;color:green This text is in Times and green /p !-- 第三段文本设置字体大小为30像素 -- p stylefont-size:30pxThis text is 30 pixels high/p /body
/html
格式化
html
body
b定义粗体文本/b
br /
strong定义加重语气/strong
br /
big大号字体/big
br /
em着重文字/em
br /
iThis text is italic/i
br /
small小号字体/small
br /
This text contains
sub下标字/sub
br /
This text contains
sup上标字/sup
/body
/html
文本格式化标签
标签描述b定义粗体文本。big定义大号字。em定义着重文字。i定义斜体字。small定义小号字。strong定义加重语气。sub定义下标字。sup定义上标字。ins定义插入字。del定义删除字。s不赞成使用。使用 del 代替。strike不赞成使用。使用 del 代替。u不赞成使用。使用样式style代替。
“计算机输出”标签
html
body
pre
这是
预格式文本。
它保留了 空格
和换行。
/pre
ppre 标签很适合显示计算机代码/p
pre
for i 1 to 10print i
next i
/pre
/body
/htmlhtml
body
code计算机代码/code
br /
kbd键盘码/kbd
br /
tt打字机代码/tt
br /
samp计算机样本/samp
br /
var定义变量/var
br /
p
b注释/b这些标签常用于显示计算机/编程代码。
/p
/body
/html标签描述code定义计算机代码。kbd定义键盘码。samp定义计算机代码样本。tt定义打字机代码。var定义变量。pre定义预格式文本。listing不赞成使用。使用 pre 代替。plaintext不赞成使用。使用 pre 代替。xmp不赞成使用。使用 pre 代替。 引用、引用和术语定义
标签描述abbr定义缩写。acronym定义首字母缩写。address定义地址。bdo定义文字方向。blockquote定义长的引用。q定义短的引用语。cite定义引用、引证。dfn定义一个定义项目。
下面会展示就不在这里写了。
引用
!DOCTYPE html
html
body
p浏览器通常会在 q 元素周围包围引号。/p
pq元素是用来q表示引号/q/p
/body
/html!DOCTYPE html
html
body !-- 这是一个段落标签用于展示文本信息。这里解释了浏览器如何对blockquote元素进行样式处理缩进。 --
p浏览器通常会对 blockquote 元素进行缩进处理。/p !-- 这是一个blockquote元素用于引用外部来源的文本或长段落的引用。 cite属性用于指定引用的来源链接但请注意并非所有浏览器都会以特殊方式显示这个链接。 在这个例子中它引用了世界自然基金会WWF的简介。
--
blockquote citehttp://www.worldwildlife.org/who/index.html
五十年来WWF 一直致力于保护自然界的未来。
WWF 工作于 100 个国家并得到美国一百二十万会员及全球近五百万会员的支持。
/blockquote /body
/html
!DOCTYPE html
html
bodypabbr titleWorld Health OrganizationWHO/abbr 成立于 1948 年。/pp对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。/p/body
/html
!DOCTYPE html
html
bodypThe dfn titleWorld Health OrganizationWHO/dfn was founded in 1948./pp对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。/p/body
/html
!DOCTYPE html
html
bodypThe
dfnWHO/dfn World Health Organization was founded in 1948.
/pp对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。/p/body
/html表格
表格由 table 标签来定义。每个表格均有若干行由 tr 标签定义每行被分割为若干单元格由 td 标签定义。字母 td 指表格数据table data即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
!DOCTYPE html
html
head title表格示例/title
/head
body !-- 表格基础说明 --
p每个表格由 table 标签开始。/p
p每个表格行由 tr 标签开始。/p
p每个表格数据由 td 标签开始。/p !-- 一列表格 --
h4一列/h4
table border1 tr td100/td /tr
/table !-- 一行三列表格 --
h4一行三列/h4
table border1 tr td100/td td200/td td300/td /tr
/table !-- 两行三列表格 --
h4两行三列/h4
table border1 tr td100/td td200/td td300/td /tr tr td400/td td500/td td600/td /tr
/table /body
/html
列表
无序
列表建立用ul,列表项建立用li。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
html
body
h4一个无序列表/h4
ulli咖啡/lili茶/lili牛奶/li
/ul
p只是单纯的列出来没有排序/p
/body
/html有序
列表建立用ol,列表项建立用li。
!DOCTYPE html
html
body !-- 第一个有序列表从默认的序号1开始 --
ol li咖啡/li !-- 列表项1咖啡 -- li牛奶/li !-- 列表项2牛奶 -- li茶/li !-- 列表项3茶 --
/ol !-- 第二个有序列表使用start属性从序号50开始 --
ol start50 li咖啡/li !-- 列表项50咖啡 -- li牛奶/li !-- 列表项51牛奶 -- li茶/li !-- 列表项52茶 --
/ol /body
/html 内联框架
用于在网页内显示网页。
删除边框:frameborder 属性规定是否显示 iframe 周围的边框。设置属性值为 0 就可以移除边框iframe src网页链接 frameborder0/iframe
!DOCTYPE html
html
body !-- 嵌入一个外部页面到当前页面中使用iframe元素。这里的src属性指定了要嵌入的页面的URL。 宽度和高度分别通过width和height属性设置。属性值的默认单位是像素但也可以用百分比来设定比如 80%。 --
iframe srchttps://www.csdn.net/ width600 height400/iframe !-- 说明某些老式的浏览器可能不支持内联框架iframe的功能。 --
p某些老式的浏览器不支持内联框架。/p !-- 如果浏览器不支持iframe则iframe元素在页面上将不会显示任何内容也不会占据空间除非设置了CSS样式来改变其行为。 --
p如果不支持则 iframe 是不可见的。/p /body
/html
!DOCTYPE html
html
body !-- 定义一个iframe元素其src属性尝试加载/example/html/demo_iframe.html页面。 同时该iframe被赋予了一个name属性值为iframe_a这个名称将在后续链接的target属性中使用。 --
iframe src/example/html/demo_iframe.html nameiframe_a/iframe !-- 定义一个段落其中包含一个超链接。该链接的href属性指向http://www.w3school.com.cn。 重要的是链接的target属性被设置为iframe_a这与上面iframe的name属性值相匹配。 这意味着当点击这个链接时链接指向的页面将不会在新窗口或标签页中打开 而是会在名为iframe_a的iframe中加载和显示。 --
pa hrefhttp://www.w3school.com.cn targetiframe_aW3School.com.cn/a/p !-- 这是一个简单的注释用于解释上述链接和iframe之间的关系。 它指出由于链接的target属性与iframe的name属性相匹配因此链接将在iframe中打开。 --
pb注释/b由于链接的目标匹配 iframe 的名称所以链接会在 iframe 中打开。/p /body
/html
续集
Javaweb学习之HTML二-CSDN博客
