备案网站名称注意事项,全国设计大赛官网,出口外贸平台有哪些,个人可以做哪些网站以下内容转载和参考自#xff1a;w3school的HTML学习内容#xff0c;HTML 简介 。
一、概述 HTML不是一种编程语言#xff0c;它是超文本标记语言 (Hyper Text Markup Language)#xff0c;使用标记标签来描述网页内容。HTML标签是由尖括号包围的关键词#xff0c;标签通…以下内容转载和参考自w3school的HTML学习内容HTML 简介 。
一、概述 HTML不是一种编程语言它是超文本标记语言 (Hyper Text Markup Language)使用标记标签来描述网页内容。HTML标签是由尖括号包围的关键词标签通常是成对出现的标签对中的第一个标签是开始标签开放标签第二个标签是结束标签闭合标签。一个HTML文档就是由HTML标签和其中的文本组成的浏览器不会显示 HTML 标签而是使用标签来解释并展示文本内容。 开始标签到结束标签的所有内容又称为HTML 元素。HTML元素中的属性包含在标签头中属性值应该始终使用引号包围如果属性值里含有双引号那么必须使用单引号来包围属性值。 默认情况下HTML 会自动地在段落、标题这种块级元素前后添加一个额外的空行换行其它元素则不会。HTML 标签对大小写不敏感但推荐使用小写。搜索引擎使用标题为您的网页的结构和内容编制索引所以应该合理的使用h标签来设置标题。一些html元素和属性并不是所有浏览器都兼容的有些元素和属性对于老式浏览器也不兼容。
html !--html元素定义了整个 HTML 文档--
body bgcolorwhite !--body元素定义了HTML文档的主体bgcolor属性定义背景颜色--
!-- 也可以使用RGB颜色值
body bgcolor#FFFFFF
--h1这是一个标题/h1 !--h元素定义标题--
h2这是一个标题/ !--标签可以简化首尾但从下面的效果图来看该行并没有正常显示所以最好不要使用简化--
h3这是一个标题/h3 !--标题最小可以为h6--p这是一个段落。/p !--p定义段落--这是一个文本 q这里是引用内容/q !--q标签为双引号标签--hr / !--水平线--h1 aligncenter这是一个标题/h1 !--align属性定义对齐方式其它的值还有left、right、justify--pThis is a para graphbr /with line breaks/p !--可以在一个段落内使用br/来换行--!--a定义超链接链接地址通过href属性设置可以通过属性styletext-decoration:none来设置不显示下划线target属性可以设置在新标签页_blank而不是本标签页内_self打开超链接--
a href/index.html站内链接/a !----
pa hrefhttp://www.w3school.com.cn/ target_blank站外链接/a/p!--br定义换行它里面是一个没有内容的空元素因为上面的链接不像标题和段落这些会自动在后边生成换行
所以这里加一个换行防止与下面的图片一行--
br/!--img定义图片src属性设置图片地址如果图片地址的域名和当前域名相同的话也可以省略域名如src/i/eg_w3school.gifwidth、height属性可以设置显示大小, alt属性类似title是搜索引擎判断图片与文字是否相关的重要依据并且如果图片无法显示的话会显示alt设置的文本--
img srchttps://www.w3school.com.cn/i/eg_w3school.gif width300 height120 altdescribe text/!--条件注释如下的段落只在IE浏览器中执行显示--
!--[if IE 8] p这是一段普通的段落/p
![endif]--/body
/html 有的HTML首行是!DOCTYPE html这是一个声明它用来告知 Web 浏览器页面了HTML 5版本。 仅有 16 种颜色名被 HTML 4.0 标准支持如black、white、blue、gray、green、red、yellow。 应该通过标签或属性来改变样式输出如下所示的p段落中并不会根据源代码来显示段落源代码中的空行、换行和连续的空格都会被算作一个空格来显示。可以使用pre 标签来定义预格式文本这样就能保留文本中的空格、换行和空行 下面为一些文本格式化标签的使用 a元素还可以创建滚动到本页面指定位置的“锚”如下所示当我们点击“转到提示”文本后页面会滚动到“提示”文本处也可以使用a打开指定的超链接后滚动到该页面的锚处 对于子目录的URL应该将正斜杠添加到URL中比如href http://www.w3school.com.cn/html/假如这样书写链接href http://www.w3school.com.cn/html就会向服务器产生两次 HTTP 请求。 可以将a、img等元素放到p、h中来混合显示也可以将img放置a中来设置一个图片链接。图片与文本混合显示的时候图片默认是底部与文字对齐也可给img元素添加align属性来设置顶部对齐aligntop或中间对齐align middle如果将align设置成“left”或“right”的话图像就会在整个段落的最左或最右来显示 也可以设置图片为整个页面的背景通过设置body元素的background属性body background/i/eg_background.jpg。 创建图像映射usemap是img标签的一个属性用来指示使用的图像地图图像地图把一幅图像分成若干个区域点击不同的区域会进入不同的页面。如下所示的图片使用planetmap图像地图点击不同的星球会跳转指定的页面 可以在网页中嵌入另一个网页通过iframe元素 绝对路径img srchttps://www.w3school.com.cn/images/picture.jpg。 相对路径1img src/images/picture.jpg使用本网站根目录中images目录中的picture.jpg。 相对路径2img srcimages/picture.jpg使用当前目录中的image目录中的picture.jpg。
二、head head 元素是所有头部元素的容器以下标签都可以添加到 head 部分title、base、link、style、meta、script 。title用来设置标签栏的标题base可以为页面上的所有链接规定统一的跳转地址或目标link 标签常用于连接外部样式表style用来定义内部样式表meta 提供HTML 文档的元数据元数据metadata是关于数据的信息元数据不会显示在页面上它用于提供给浏览器比如用于设置页面的描述, 如使用的字符编码、关键词、文档作者、最后修改时间等一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面script 用于定义客户端脚本比如 JavaScript。 三、样式 style属性即样式它提供了一种改变所有 HTML 元素样式的通用方法有了它之后一些标签和属性就被弃用了如center和font标签以及align和bgcolor属性 span可以用来设置标签中部分元素的样式 单个标签内元素的样式可以使用span来定义对多个标签使用相同样式的话使用div。div可以将多个标签形成一个块块里边的元素可以使用相同的样式如下所示。div 是一个块级元素这意味着它的内容自动地开始一个新行。div中的align属性不赞成使用请使用样式取而代之。 div块中元素也可以有自己独特的样式而且div中部分样式只是针对这个div块而不是块中的元素如下所示的标题h1的背景颜色没有使用div中设置的div中设置的边框没有应用到标题h1和段落p只应用到了整个div块的显示 大多数 HTML 元素被定义为块级元素 block level element或内联元素inline element块级元素在浏览器显示时通常会以新行来开始和结束, 如h1, p, ul, table, div。内联元素在显示时通常不会以新行开始如b, td, a, img, span。div 元素可用于对大的内容块设置样式属性以及进行文档布局span 元素可用于为元素内部分文本设置样式属性。 使用样式改变网页外观有三种方法第一种就是上面所说的在在相关的标签中使用样式属性样式属性可以包含任何 css 属性这种方式属于内联样式。 第二种方法就是使用内部样式表internal css如下所示在html的head 部分通过 style 标签定义内部样式表这样这些样式就能够被本文件中所有的元素共用。下面的h1和p的文本如果都使用红色的话可以改成 h1, p{color:red} h1、p被称为CSS选择器如果选择器设为*的话通用选择器页面上的每个 HTML 元素都会使用该样式 内部样式也可以与class、id结合使用如下同时也标识了magin和padding的区别其它的还有magin-left:10px仅保留10像素的左边距、margin:10px 20px上下边距为10左右边距为20、padding:10px 20px 30px 40px上右下左外边距、margin:10px上右下左外边距。下面的 div.cities{}样式仅针对class被设置成cities的div如果把div去掉改成 .cities{}的话就能应用到所有class为cities的元素 需要注意的是使用padding的话会增加元素的大小如下所示的h1使用了50的padding所以h1的宽度变成了150而不是100 一个元素也可以使用多个class如
p classcenter large这个段落引用两个类。/p下面是按钮实现水平居中和水平垂直居中的实现 使用样式的第三种方法是使用外部样式表external css当样式需要被应用到很多页面的时候外部样式表将是理想的选择。使用外部样式表你就可以通过更改一个样式文件来改变整个站点的外观 如下为为上面使用的csstest.css样式文件 四、id与class 可以为 span 应用 id 或 class 属性这样便于对 span 应用外部样式。id、class、style属于HTML全局属性即除了span外可以在所有HTML 元素中使用的属性其它全局属性参见HTML 全局属性。class与id的主要差异是class 用于元素组类似的元素或者可以理解为某一类元素而 id 用于标识单独的唯一的元素一个 HTML文档中不能存在拥有相同 id 的元素。如下所示我们通过span为提示文本设置了单独的样式红色加粗显示其它地方文本也想设置这一样式的话同样使用span对其包围然后使用classtip属性即可 也可以用 id 或 class 来标记 div, 如下所示两个div块通过使用同一个div class使这两个块中的元素使用相同的外部样式 如下所示如果不对 span/div 应用样式那么span/div中元素会正常的默认显示但实际上span/div仍然增加了额外的结构它们指示了一些元素是属于一个块里的将这些元素进行了结构化 div/span 通过与 id、class 、role 属性配合提供了向html文档添加额外结构的机制如果这个结构是通用的话使用class属性如果这个结构是特定块使用的话使用id属性id 属性为一个元素或多个元素(div块)分配一个唯一的名字class属性则适合被多次使用的情况。id/class 的值必须以字母或者下划线开始不能以数字开始且大小写敏感值中不能出现空格最好也不要使用下划线 CSS2.0以及某些浏览器中的限制。 前面说过id、class、style属于全局属性所以除了div和span它们还可以应用到h和p等元素 如下所示的三个div分别标识了网页上的头部、导航栏、侧边栏三个块导航栏实际上是一个菜单所以将ul列表的id属性值设置为menu 五、html布局 div 元素常用作布局工具因为能够轻松地通过 CSS 对其进行定位。如下所示可以直接使用div块来实现一个色块这三个色块又在名为outside的div块中outside块通过内部样式表来设置样式每个色块又可以单独设置其样式通过内部样式表和style样式属性。可以看到outside块的高度会自动使用三个内部div块的高度和而outside的宽度在没有指定的时候会使用body的宽度 从上面可以看到我们可以通过样式表来设置一些通用的样式比如每个色块使用的inside来实现相同的大小同时还可以对每个元素设置单独的样式比如通过色块的style属性来设置色块的单独颜色。如下所示我们可以再增加一个标题h1可以看到div使用的样式表中的border样式并不会应用到div块中的所有元素色块和h1并没有红色的边框而是被本div块所使用: 从上面可以看到div块和标题h都会换行显示标题h还会存在默认的margin-top和margin-bottom如果我们想要这三个色块在同一行显示的话可以通过display属性将div设置为行内模式div默认是单行显示一个div一行两个div两行...这样这三个div块就会在一个行内而不是每个div都是一行如下所示 下面为将外边的div块设置行内模式的效果可以看到其宽度会自动使用内部div块的宽度而不是body的宽度 虽然使用display可以实现模块的一些布局但有时候会有一些问题比如上面三个水平的色块中会有一些空隙因为div中间存在的换行符我们可以将outside中添加font - size: 0px就可以消除这些空隙但是一般我们会使用下面的float来实现精准的布局。 float就是浮动的意思它可以使某一模块脱离外部的限制来成为一个新的块其值有left向左浮动、right、none(不浮动默认)、inherit从父元素继承。如下使用float使三个色块并排显示可以看到因为三个色块跳出了原来的div块所以原来的div块里就没了元素所以只留下了红色的边框 可以在outside中添加高度样式属性这样就能撑起外边的div块了 如下所示如果我们仅对第一个div块使用float:left的话那么第二个div块的起始位置会与第一个div块重合因为第一个div块浮动出来了 而如果第一个div块后面紧跟的不是div块而是一个p或者h等元素的话那么这个p会在div块的右边展示因为float的浮动是相对于div块来说的 如果我们想要上面的p元素在最左边展示那么可以使用clear属性如下所示。clear属性规定了元素的哪一侧不允许出现浮动元素值为left/right表示左边/右边不允许浮动元素both表示左边跟右边都不允许浮动元素inherit表示从父元素继承 clear 属性的值none表示允许浮动默认值。 下面的h1在一个div中默认div是单行模式所以h1会占一行而且h1没有设置长度所以其长度为整行去除margin 。第二个div和第三个idv因为使用了左浮动所以其靠左展示第四个div使用了clear并且设置了both值所以其会被放置nav和section的下边
!DOCTYPE html
htmlhead
body bgcolor#7fffd4style
#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 {background-color:#faebd7;width:350px;float:left;padding:10px;
}
#footer {background-color:black;color:white;clear:both;text-align:center;padding:5px;
}
/style
/headbodydiv idheader
h1City Gallery/h1
/divdiv idnav
Londonbr
Parisbr
Tokyobr
/divdiv idsection
h2London/h2
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
/divp测试数据/pdiv idfooter
Copyright ? W3Schools.com
/div/body
/html还可以使用header, nav, section, 以及 footer这些语义元素标签来进行布局下面的代码可以实现与上面相同的效果
header定义文档或节的页眉nav定义导航链接的容器section定义文档中的节article定义独立的自包含文章aside定义内容之外的内容比如侧栏footer定义文档或节的页脚details定义额外的细节summary定义 details 元素的标题
!DOCTYPE html
htmlhead
body bgcolor#7fffd4style
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 {background-color:#faebd7;width:350px;float:left;padding:10px;
}
footer {background-color:black;color:white;clear:both;text-align:center;padding:5px;
}
/style
/headbodyheader
h1City Gallery/h1
/headernav
Londonbr
Parisbr
Tokyobr
/navsection
h1London/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
/sectionp测试数据/pfooter
Copyright W3Schools.com
/footer/body
/html可以使用position来设置元素的位置如下所示将按钮的位置设置为在右下角指定位置显示。如果想要鼠标滚动的时候按钮也不跟着滚动还是固定在右下角现实的话使用fixed替换absolute比如一些网站会将一张宣传图片固定显示在top鼠标滚动的话该图片也不会移动这就是使用fixed的效果。其中的cursor:pointer设置按钮的鼠标光标形状为小手text-align:right设置按钮文本为右对齐显示 再谈display该属性规定是否和如何显示元素值为none表示隐藏元素visibility属性设置成hidden也可以隐藏元素, 但元素还会占用位置空间值为block表示为块级元素值为inline表示为行内内联元素。块级元素总是从新行开始并占据可用的全部宽度如h、p、div、form、header、footer、section。行内元素不从新行开始显示仅占用所需的宽度如span、a、img。如下演示了display的隐藏与visibility::hidden的区别点击删除按钮的话会像删除了box1一样(box2、box3左移)点击隐藏按钮会隐藏box2box1和box2位置不变点击重置所有会恢复到原来的样子
