网站设计素材免费下载,企业管理软件代理,做网站类的网站,噼里啪啦免费观看高清C语言中文网 http://c.biancheng.net/
2) class
与 id 属性类似#xff0c;class 属性也可以为标签定义名称#xff08;标识符#xff09;#xff0c;不同的是 class 属性在整个 HTML 文档中不必是唯一的#xff0c;我们可以为多个标签定义相同的 class 属性值。另外class 属性也可以为标签定义名称标识符不同的是 class 属性在整个 HTML 文档中不必是唯一的我们可以为多个标签定义相同的 class 属性值。另外还可以为一个 HTML 标签定义多个 class 属性值如下所示 C语言中文网
http://c.biancheng.net/ 当使用 CSS 或者 JavaScript 来操作 HTML 标签时同样可以使用 class 属性来找到对应的 HTML 标签。由于 class 属性不是唯一的所以通过 CSS 或 JavaScript 对 HTML 标签的操作会应用于所有具有同名 class 属性的标签中。
3) title
title 属性用来对标签内容进行描述说明当鼠标移动到该标签上方时会显示出 title 属性的值如下例所示
演示文档
HTML教程
运行结果如下图所示 图2HTML title 属性演示
将鼠标在链接处悬停片刻才能看到提示框。
4) style
使用 style 属性我们可以在 HTML 标签内部为标签定义 CSS 样式例如设置文本的颜色、字体等如下例所示
演示文档
http://c.biancheng.net/html/ C语言中文网 运行结果如下图所示 图3HTML style 属性演示
除了上述的属性外HTML 中的属性还有许多许多这里简单了解一下即可后面我们会详细介绍。
HTML标题标签
到 HTML 中提供了从h1到h6六个级别的标题标签h1标签的级别最高h6标签的级别最低通过这些标签可以定义网页中的标题与 word 中的标题类似合理使用标题可以使网页的层次结构更加清晰。
提示HTML 中的标题可帮助搜索引擎理解网页的结构和内容。
默认情况下浏览器会以比普通文本更大和更粗的字体显示标题中的内容使用h1标签定义的标题字体最大而使用h6标签定义的标题字体最小如下例所示
HTML标题标签演示
h1 标题
h2 标题
h3 标题
h4 标题
h5 标题
h6 标题
运行结果如下图所示 图1HTML 标题标签演示
注意在网页上使用标题标签时浏览器内置的样式会在每个标题的上下添加一定的空白区域外边距您可以使用 CSS margin 属性来调整空白区域的大小。
关于标题标签的使用有以下几点需要注意
HTML 标题标签只能用来定义标题不可以使用标题标签来对文本进行加粗设计由于搜索引擎例如百度是使用标题来索引网页结构和内容的因此使用标题标签有利于搜索引擎的抓取标题标签并不是随意使用的要根据具体的使用环境按照级别由高到低的使用标题标签。提示应该使用h1标签来标记最重要的标题该标题通常位于页面顶部而且一个 HTML 文档中通常应该有且仅有一个h1标题至于较低级别的标题标签例如h2、h3、h4等的使用则可以不加限制。
HTML段落标签
HTML 中可以使用段落标签 p来将文档中的内容分割为若干个段落语法格式如下
段落中的内容。
段落标签由开始标签p和结束标签/p组成开始和结束标签之间的内容会被视为一个段落。段落标签是一个非常基本的标签我们在网页上发布文章时就会用到它如下例所示
HTML段落标签演示
C语言中文网一个在线学习编程的网站网址http://www.biancheng.net/
C语言中文网目前已经发布了将近 50 套教程包括 HTML、CSS、JavaScript 等您可以猛击这里查看所有教程。
我们的 Slogan千锤百炼只为大作精益求精句句斟酌这种教程看一眼就倾心。
运行结果如下图所示 图1HTML 段落标签演示
注意浏览器内置的样式会在段落的上下自动添加一定的空白区域外边距您可以使用 CSS margin 属性来设置空白区域的大小。
在 HTML4 以及更早的版本中可以省略段落标签的结束标签浏览器会自动补全缺失的结束标签如下所示
C语言中文网
HTML教程
http://www.biancheng.net/html/
段落中的空白符
默认情况下段落标签会对文本中的空白符进行合并将多个连续的空白符显示为一个空格的效果具体表现为
如果段落中出现多个连续的空格浏览器会忽略这些空格只保留一个如果段落中出现多个连续的换行浏览器会将这些换行转换成一个空格。下面通过一个示例来演示段落中的空白符
HTML段落中的空白符
C语言中文网
http: //c.biancheng.net/html/ HTML 教 程
运行结果如下图所示 图2演示 HTML 段落中的空白符
如果想要在段落中换行需要使用专门的换行标签br /br /标签属于自闭和标签因此不需要对应的结束标签/br如下例所示
使用br标签换行
C语言中文网http://c.biancheng.net/html/HTML教程
运行结果如下图所示 图3换行标签的使用
HTML文本格式化
一些 HTML 标签除了具有一定的语义含义外还有默认的样式例如b加粗、em倾斜等通过这些标签我们无需借助 CSS 就可以为网页中的内容定义样式。在这些具有语义和默认样式的标签中有许多是针对文本的通过这些标签我们可以格式化文本为文本添加样式例如使文本加粗、倾斜或者添加下划线等。
HTML 中有许多用来格式化文本的标签如下表所示
标签描述…加粗标签中的字体…强调标签中的内容并使标签中的字体倾斜…定义标签中的字体为斜体…定义标签中的字体为小号字体…强调标签中的内容并将字体加粗…定义下标文本…定义上标文本…定义文档的其余部分之外的插入文本…在文本内容上添加删除线…定义一段代码…用来表示文本是通过键盘输入的…定义程序的样本…定义变量
…
| 定义预格式化的文本被该标签包裹的文本会保留所有的空格和换行符字体也会呈现为等宽字体 | | … | 用来表示标签中的内容为缩写形式 | | … | 用来定义文档作者的联系信息被该标签包裹的文本通常会以斜体呈现并在文本前面换行 | | … | 定义标签中的文字方向 | | … | 定义一段引用的文本例如名人名言文本会换行输出并在左右两边进行缩进 | | … | 定义一段短的引用浏览器会将引用的内容使用双引号包裹起来 | | … | 表示对某个文献的引用例如书籍或杂志的名称文本会以斜体显示 | | … | 用来定义一个术语标签中的文本会以斜体呈现 |
按照作用的不同可以将这些用来格式化文本的标签分为两类
物理标签这类标签用来为设置文本的外观逻辑标签这类标签用来赋予文本一些逻辑或语义值。通过上表可以看出有些标签的呈现效果虽然相同但语义却不同例如strong和b标签、em和i标签下面就来详细介绍一下。
和标签之间的区别****
默认情况下strong和b标签都可以使文本以粗体展示标签中的文本但是strong标签的语义是标签中的内容具有很高的重要性而b标签的语义仅仅是加粗文本以引起读者的注意并没有特殊的意思。
示例代码如下所示
strong和b标签演示
当您决定使用C语言中文网您已经超越了 90% 的程序员请记住网址 http://c.biancheng.net/。
此处给90%添加 标签是为了强调C语言中文网的重要性以及它带来的震撼效果而给网址添加 标签仅仅是为了视觉上的加粗效果这样能引起读者的注意。
运行结果如下图所示 图1 和 标签示例
和标记之间的区别**
同样em和i标签默认情况下均以斜体显示标签中的文本但是em标签具有强调的语义用来表示标签中的内容很重要而i标签仅仅用于定义斜体文本。
示例代码如下
em和i标签演示
当您决定使用C语言中文网您已经超越了 90% 的程序员请记住网址 http://c.biancheng.net/。
同上例一样给90%添加 标签是为了强调C语言中文网带来的震撼效果而给网址添加 标签仅仅是为了引起读者的注意。
运行结果如下图所示 图2 和 标签示例
根据 HTML5 的规范标题应该用h1~h6标签定义被强调的文本应该用em标签定义重要的文本应该用strong标签定义被标记的或者高亮显示的文本应该用mark标签定义等等类似这样的规范还有很多后面我们会一一为大家介绍。
HTML超链接标签
在 HTML 中我们使用 标签来表示超链接。
超链接Hyperlink通常简称为链接Link是指从一个网页指向另一个目标的连接关系这个目标可以是另一个网页也可以是当前网页中的其它位置还可以是图片、文件、应用程序等。链接的两端分别称为源锚点和目标锚点通过点击源锚点即可以跳转到目标锚点。
超链接是网页中最常见的元素之一整个互联网都是基于超链接而构建的。网站由众多网页构成超链接使得网页之间不再独立它就像一根线把网页连接在一起形成一个网状结构。互联网之所以能够称之为“网”就是因为有超链接的存在。
标签的语法格式如下
链接文本
其中href 属性用来指明要跳转到的 urltarget 属性用来指明新页面的打开方式链接文本需要写在 和 之间。
例如链接到C语言中文网首页并在浏览器新窗口中打开
C语言中文网
链接到 HTML 教程的第一篇文章并在当前窗口中打开
网站到底是什么
href 属性
href 属性指定链接的目标也就是要跳转到什么位置。href 可以有多种形式例如
href 可以指向一个网页.html、.php、.jsp、.asp 等格式这也是最常见的形式例如 href“http://c.biancheng.net/view/1719.html”href 可以指向图片.jpg、.gif、.png 等格式、音频.mp3、.wav等格式、视频.mp4、.mkv格式等媒体文件例如 href“/uploads/allimg/181221/134I32557-0.jpg”href 可以指向压缩文件.zip、.rar 等格式、可执行程序.exe等一些下载网站的链接就可以写成这种形式例如 href“./…/uploads/data_package/ComputerFoundation.zip”href 甚至还可以指向本机的文件只是很少这样使用例如 href“D:/Program Files/360/360safe/360Safe.exe”。你看href 本质上就是指向一个文件这个文件几乎可以是任意格式的。如果浏览器支持这种格式那么它就可以在浏览器上显示比如常见的图片、音频、视频等如果浏览器不支持这种格式那么就提示用户下载。
另外href 使用的路径可以是绝对路径也可以是相对路径。绝对路径往往以域名为起点例如 http://c.biancheng.net/view/1719.html相对路径往往以当前文件或者当前域名为起点例如 ./…/uploads/data_package/ComputerFoundation.zip。对 URL 结构不了解的读者请转到《绝对路径与相对路径》进行学习。
target 属性
target 是可选属性用来指明新页面的打开方式。默认情况下新页面在当前浏览器窗口中打开我们可以使用 target 属性来改变新页面的打开方式。常见的打开方式如下表所示
属性值说明_self默认在现有窗口中打开新页面原窗口将被覆盖。_blank在新窗口中打开新页面原窗口将被保留。_parent在当前框架的上一层打开新页面。_top在顶层框架中打开新页面。
绝大部分情况下target 属性要么不写保持默认的 _self要么将它的值设置为 _blank在新窗口中打开页面。例如
HTML教程新窗口打开 CSS教程当前窗口打开
标签的默认样式
浏览器会为 标签设置一些默认样式。
1) 鼠标样式
当鼠标移入链接区域时会变成一只小手当鼠标移出链接区域时会变回箭头形状。
2) 颜色及下划线
超链接被点击之前为蓝色超链接被点击之后变成紫色。超链接默认带有下划线下划线颜色和文本颜色保持一致。
浏览器根据历史记录来判断超链接是否被点击过如果 href 属性和历史记录中的某条 URL 重合那么说明该链接被点击了。清空浏览器的历史记录会让超链接的颜色再次变回蓝色。
【示例】HTML 超链接的多种形式
HTML a标签演示 HTML教程新窗口打开 CSS教程当前窗口打开 JS教程被点击过
运行效果 图1HTML 超链接演示
HTML插入图片标签
一图胜千言图片比文字更具表现力恰当地使用图片可以让网页更加精美。
HTML 使用 标签插入图片img 是 image 的简称。 是自闭和标签只包含属性没有结束标签。 标签的语法格式如下 对属性的说明
src 是必选属性它是 source 的简称用来指明图片的地址或者路径。src 支持多种图片格式比如 jpg、png、gif 等。src 可以使用相对路径也可以使用绝对路径。alt 是可选属性用来定义图片的文字描述信息。当由于某些原因例如图片路径错误、网络连接失败导致图片无法加载时就会显示 alt 属性中的信息。【示例】使用 标签插入图片
HTML插入图片 显示效果 图1HTML 插入图片示例
可以看到图片 html5.png 不存在加载失败此时显示出 alt 属性中的文本信息。
设置图片的宽度和高度
在 标签中可以使用 width 和 height 属性来指定图片的宽度和高度。默认情况下这些属性的值都是以像素为单位的。 除此之外您也可以使用 style 属性指定图片的宽度和高度如下所示 注意width 和 height 属性只是临时修改图片的尺寸并不会改变图片原始文件的大小。
关于 width 和 height 属性的两点建议
一般建议为图片设置 width 和 height 属性以便浏览器可以在加载图片之前为其分配足够的空间否则图片加载过程中可能会导致您的网站布局失真或闪烁。如果您的页面使用响应式布局自适应布局建议在上传图片之前裁剪好尺寸而不要设置 width 和 height 属性这样图片能够跟随屏幕宽度自动改变尺寸从而不会变形或者超出屏幕宽度。### HTML5 中的图片属性
有时我们需要按照比例来放大或缩小图片的尺寸以适应不同的设备避免图片过大超出屏幕的范围为此 HTML5 中增加了picture标签该标签允许您针对不同类型的设备定义多个版本的图片。
在 标签中包含零个或多个 标签通过 标签中的 media 属性可以设定匹配条件允许哪个版本的图片显示通过 srcset 属性可以定义图片的路径。另外在 标签的最后还需要定义一个 标签。如下例所示 浏览器将评估每个 标签并在其中选择最合适的 标签如果未找到匹配项则使用 标签所定义的图片。另外 必须是 标签的最后一个子元素。
图像映射
图像映射允许您在一个图片中定义超链接实现思想就是在图像中划分一些区域并在这些区域中定义超链接。例如我们可以按照地图的划分为每个国家或城市所在的区域定义超链接。
下面通过示例来演示一下
HTML图片映射 标签的 name 属性对应的是 标签的 usemap 属性标签用于定义图片的可点击区域您可以在图像中定义任意数量的可点击区域。
注意图片映射不能应用于网站导航因为它对搜索引擎并不友好。图像映射经常与地图一起使用有许多工具都可以创建图像映射例如 Adobe Dreamweaver 就可轻松创建图像地图。
shape 和 coords 属性
在 标签中可以通过 shape 属性来定义可点击区域的形状并通过 coords 属性来定义形状所对应的坐标。其中 shape 属性的可选值有三个分别是 rect矩形、circle圆形和 poly多边形coords 属性中坐标的值则取决于可点击区域的形状。
假如定义一个矩形的可点击区域示例代码如下
其中 x1、y1 代表矩形的左上角坐标x2、y2 代表矩形的右下角坐标。
假如定义一个圆形的可点击区域示例代码如下
其中 x、y 代表圆心的坐标而 radius 则是圆的半径。
假如定义一个多边形的可点击区域示例代码如下
其中每对 x 和 y 的值都代表一个多边形的顶点坐标。
注意所有坐标都是相对于图片的左上角来计算的。
HTML 标签表格
在 HTML 中我们使用
标签来定义表格。HTML 中的表格和 Excel 中的表格是类似的都包括行、列、单元格、表头等元素。但是 HTML 表格在功能方面远没有 Excel 表格强大HTML 表格不支持排序、求和、方差等数学计算它一般用来展示数据。
在学习表格之前我们不妨先来看一段简单的 HTML 代码
名称官网性质C语言中文网http://c.biancheng.net/教育百度http://www.baidu.com/搜索当当http://www.dangdang.com/图书
运行效果如下图 图1普通 table 表格
这是一个 4 行 3 列的表格。第一行为表头其余三行为内容。
在上述代码中我们使用了
、、
及四个标签
表示表格表格的所有内容需要写在
和
之间。
是 table row 的简称表示表格的行。表格中有多少个 标签就表示有多少行数据。是 table datacell 的简称表示表格的单元格这才是真正存放表格数据的标签。单元格的数据可以是文本、图片、列表、段落、表单、水平线、表格等多种形式。是 table heading 的简称表示表格的表头。 其实是 单元格的一种变体本质上还是一种单元格。 一般位于第一行充当每一列的标题。大多数的浏览器会把表头显示为粗体居中的文本。默认情况下表格是没有边框的。但是我们可以使用
标签中的 border 属性来设置表格的边框宽度单位是像素px。本例中我们将表格的边框宽度设置为 1px。注意px 是默认的单位不用显式指明。
1. 表格的边框合并
细心的读者可能已经发现了网页中常见的表格样式大多为单层边框上例中展示的表格为双层边框。为了避免这种情况我们可以利用 CSS 中的 border-collapse 属性来设置表格的边框。border-collapse 是“边框塌陷”的意思当属性值为 collapse 时可以使表格的双边框变为单边框。
示例代码如下
名称官网性质C语言中文网http://c.biancheng.net/教育百度http://www.baidu.com/搜索当当http://www.dangdang.com/图书
运行效果如下图所示 图2合并边框后的表格
2. 表格的标题
HTML 允许使用 标签来为表格设置标题标题用来描述表格的内容。
我们常见的表格一般都有标题表格的标题使用 标签来表示。默认情况下表格的标题位于整个表格的第一行并且居中显示。一个表格只能有一个标题也就是说
标签中只能有一个
标签。
请看下面的例子
这是表格的标题 名称官网性质C语言中文网http://c.biancheng.net/教育http://www.baidu.com/搜索当当http://www.dangdang.com/图书
浏览器运行结果如图 图3带标题的表格
3. 单元格的合并
和 Excel 类似HTML 也支持单元格的合并包括跨行合并和跨列合并两种。
rowspan表示跨行合并。在 HTML 代码中允许我们使用 rowspan 特性来表明单元格所要跨越的行数。colspan表示跨列合并。同样的在 HTML 中允许我们使用 colspan 特性来表明单元格所要跨越的列数。具体格式如下
单元格内容 单元格内容 n 是一个整数表示要合并的行数或者列数。
此处需注意不论是 rowspan 还是 colspan 都是 标签的属性。
下面的例子中我们将表格第 1 列的第 3、4 行单元格合并跨行合并将第 4 行的第 2、3 列合并跨列合并。具体代码如下
名称官网性质C语言中文网http://c.biancheng.net/教育百度http://www.baidu.com/搜索http://www.dangdang.com/
运行效果如图 图4合并单元格后的表格
通过运行结果可以发现
rowspan 属性表示向下合并单元格colspan 属性表示向右合并单元格。每次合并 n 个单元格都要少写 n-1 个标签。提示即使一个单元格中没有任何内容我们仍需使用 或 元素来表示一个空单元格的存在建议在 或 中加入 空格否则低版本的 IE 可能无法显示出这个单元格的边框。
HTML列表标签 HTML 列表List可以将若干条相关的内容整理起来让内容看起来更加有条理。在列表内您可以放置文本、图像、链接等也可以在一个列表中定义另一个列表列表嵌套。
HTML 为我们提供了三种不同形式的列表
有序列表使用 标签无序列表使用 标签定义列表使用 标签### 1. 有序列表
在 HTML 中
标签用来表示有序列表。有序列表之间的内容有先后顺序之分例如菜谱中的一系列步骤这些步骤需要按顺序完成这时就可以使用有序列表。 我们来看一个简单的实例
HTML有序列表
煮米饭的步骤
将水煮沸加入一勺米搅拌均匀继续煮10分钟
在浏览器中运行效果如图所示 图1HTML 有序列表演示
有序列表需要使用
和标签 是 order list 的简称表示有序列表它可以为列表的每一项进行编号默认从数字 1 开始。 是 list item 的简称表示列表的每一项 中有多少个 就表示有多少条内容。列表项中可以包含文本、图片、链接等甚至还可以是另外一个列表。注意 一般和 配合使用不会单独出现而且不建议在 中直接使用除 之外的其他标签。
2. 无序列表
HTML 使用
标签来表示无序列表。无序列表和有序列表类似都是使用标签来表示列表的每一项但是无序列表之间的内容没有顺序。例如早饭的种类不需要表明顺序这时就可以使用无序列表。 我们来看一个简单的例子
HTML无序列表
早餐的种类
鸡蛋牛奶面包生菜
浏览器运行结果如图所示 图2HTML 无序列表演示
无序列表需要使用
和标签 是 unordered list 的简称表示无序列表。 和
中的一样都表示列表中的每一项。默认情况下无序列表的每一项都使用●符号表示。注意
一般和配合使用不会单独出现而且不建议在
中直接使用除之外的其他标签。
3. 定义列表
在 HTML 中
标签用于创建定义列表。定义列表由标题术语和描述两部分组成描述是对标题的解释和说明标题是对描述的总结和提炼。
定义列表具体语法格式如下
标题1
描述文本2
标题2
描述文本2
标题3
描述文本3
定义列表需要使用
、
和
标签
是 definition list 的简称表示定义列表。是 definition term 的简称表示定义术语也就是我们说的标题。是 definition description 的简称表示定义描述 。可以认为
定义了一个概念术语
用来对概念术语进行解释。
注意
和
是同级标签它们都是
的子标签。一般情况下每个
搭配一个
一个
可以包含多对
和
。
我们来看一个简单的例子
HTML定义列表 HTML HTML 是一种专门用来开发网页的标记语言您可以转到《 HTML教程》了解更多。 CSS CSS 层叠样式表可以控制 HTML 文档的显示样式用来美化网页您可以转到《 CSS教程》了解更多。 JavaScript JavaScript 简称 JS是一种用来开发网站包括前端和后台的脚本编程语言您可以转到《 JS教程》了解更多。 浏览器运行效果如下图 图3HTML 定义列表演示
和
虽然是同级标签但是它们的默认样式不同
带有一段缩进而
顶格显示这样层次更加分明。
4. 列表的默认样式
浏览器会对列表设置一些默认样式包括外边距、内边距和列表项标记我们可以通过 CSS 样式表的 margin、padding 和 list-style 属性来修改它们请看下面的例子
修改HTML列表的默认样式
煮米饭的步骤
将水煮沸加入一勺米搅拌均匀继续煮10分钟
早餐的种类
鸡蛋牛奶面包生菜 HTML HTML 是一种专门用来开发网页的标记语言。 CSS CSS 层叠样式表可以控制 HTML 文档的显示样式用来美化网页。 JavaScript JavaScript 简称 JS是一种用来开发网站包括前端和后台的脚本编程语言。 对 CSS 样式的说明
margin:0px auto;将上下外边距设置为 0 像素将左右外边距设置为自动。margin-bottom:0px;将下方外边距设置为 0 像素。margin:auto auto 10px 0px;将上方和右侧外边距设置为自动将下方外边距设置为 10 像素将左侧外边距设置为 0 像素。padding-left:20px;将左侧内边距设置为 20 像素。list-style:upper-latin;将列表项标记设置为大写拉丁字母。list-style:square;将列表项标记设置为实心方块。上述代码在浏览器中的运行效果 图4修改 HTML 列表的默认样式
5. 总结
列表分类说明有序列表
表示有序列表表示列表中的每一项默认使用阿拉伯数字编号。 | | 无序列表 |
表示无序列表表示列表中的每一项默认使用●符号作为作为每一项的标记。 | | 定义列表 | 表示定义列表
表示定义术语、
表示定义描述。一般情况下每个
搭配一个
一个
可以包含多对
和
。
|
HTML表单标签
当您想要通过网页来收集一些用户的信息例如用户名、电话、邮箱地址等时就需要用到 HTML 表单。表单可以接收用户输入的信息然后将其发送到后端应用程序例如 PHP、Java、Python 等后端应用程序将根据定义好的业务逻辑对表单传递来的数据进行处理。
表单属于 HTML 文档的一部分其中包含了如输入框、复选框、单选按钮、提交按钮等不同的表单控件用户通过修改表单中的元素例如输入文本选择某个选项等来完成表单通过表单中的提交按钮将表单数据提交给后端程序。
在 HTML 中创建表单需要用到form标签具体语法如下所示
表单中的其它标签 对属性的说明
action 属性用来指明将表单提交到哪个页面method 属性表示使用哪个方式提交数据包括 GET 和 POST 两种方式它们两者的区别如下
GET用户点击提交按钮后提交的信息会被显示在页面的地址栏中。一般情况下GET 提交方式中不建议包含密码因为密码被提交到地址栏不安全。POST如果表单包含密码这种敏感信息建议使用 POST 方式进行提交这样数据会传送到后台不显示在地址栏中相对安全。### 表单属性
HTML 为form标签提供了一些专用的属性如下表所示
属性可选值描述acceptMIME_typeHTML5 中不再支持设置服务器要接收的文件类型accept-charsetcharacter_set设置表单数据的字符集默认为 HTML 文档字符集actionURL设置要将表单提交到何处默认为当前页面autocompleteon、off设置是否启用表单的自动完成功能默认开启enctypeapplication/x-www-form-urlencoded、 multipart/form-data、 text/plain设置在提交表单数据之前如何对数据进行编码适用于 method“post” 的情况methodget、post设置使用哪种 HTTP 方法来提交表单数据默认为 getnametext设置表单的名称novalidatenovalidate如果使用该属性则提交表单时不进行验证target_blank、_self、_parent、_top设置在何处打开 action 属性设定的链接默认为 _self
action 和 method 是最常用的两个属性。
表单控件
表单用来收集用户数据这些数据需要填写在各种控件中。HTML 控件也通过标签来实现只是它们会呈现一些特殊的外观并具有一些交互功能。
HTML 表单中可以包含如下表所示的控件
控件/标签描述定义输入框定义文本域一个可以输入多行文本的控件为表单中的各个控件定义标题定义一组相关的表单元素并使用边框包裹起来定义 元素的标题定义下拉列表定义选项组定义下拉列表中的选项定义一个可以点击的按钮指定一个预先定义的输入控件选项列表定义表单的密钥对生成器字段定义一个计算结果
这里我们不再一一列举各种控件的用法请读者点击链接跳转到对应页面学习下面我们通过一个完整的示例来演示一下
HTML form表单演示 用户名 密 码 性 别 男 女 未知 爱 好 听音乐 看电影 打游戏 学 历 小学 中学 本科 硕士 博士 运行结果如下图所示 图1HTML form 表单演示
填写好用户数据点击“提交”按钮即可使用 POST 方式将数据提交到当前目录下的 userinfo.php 页面在服务器端通过 PHP 代码可以接收提交的数据。
HTML注释的写法附带示例
HTML 注释主要用来对文档中的代码进行解释说明注释也是代码的一部分但浏览器会自动忽略注释的内容所以用户在网页中是看不到注释的。
我们在编写代码时应该善用注释因为一个完整的 HTML 文档往往由成百上千行代码组成当我们想要修改其中的某个部分时可能需要花费很长的时间才能找到想要修改的地方。有了注释就不一样了我们可以根据功能或者其它条件将程序划分为若干个部分并通过注释进行标记这样可以帮助您和他人阅读您的代码提高代码的可读性。
单行注释
在 HTML 中您可以使用!-- --在代码中添加注释!--和--之间的所有内容都会被视为注释。示例代码如下 HTML注释的写法 欢迎来到C语言中文网学习HTML教程请记住地址http://c.biancheng.net/html/ 运行结果如下所示 图1HTML 注释的写法
注释可以出现在 HTML 文档的任意位置包括文档开头、文档末尾、文档中间、标签外部、标签内容中等。
多行注释
前面我们主要演示的是单行注释在 HTML 中同样支持多行注释。多行注释与单行注释的区别并不大我们只需要保证注释的内容在!--和--之间即可如下所示
使用注释除了可以对代码进行说明外还可以用来注释程序中的代码例如当不希望某段代码执行时就可以先将它们注释掉这样浏览器就不会执行这段代码了。
IE 条件注释
条件注释仅对 Windows 系统上的 Internet ExplorerIE浏览器中有效其他的浏览器会忽略它们。从 IE5 开始支持条件注释您可以使用条件注释为使用 IE 浏览器的用户提供一些说明。如下所示
IE浏览器条件注释
根据不同的 IE 版本显示不同的内容 在 IE8 下的运行效果 图2条件注释在 IE8 下的运行效果
在 Chrome 浏览器下的运行效果 图3条件注释在 Chrome 下的运行效果
条件注释可以检测当前浏览器是否是 IE以及 IE 版本开发人员可以根据不同的 IE 浏览器加载不同的样式表或者 JS 脚本。
比较 IE 版本将会用到如下关键字
ltless than 的简写也就是小于的意思。lteless than or equal to 的简写也就是小于或等于的意思。gtgreater than 的简写也就是大于的意思。gtegreater than or equal to 简写也就是大于或等于的意思。!不等于IE 浏览器对 HTML5 支持不太友好低版本的行为更是怪异IE 已经逐渐退出市场各大互联网巨头也不再兼容 IE大家在开发过程中也不用重点考虑 IE。
HTML嵌入CSS样式四种方法
HTML 仅能呈现一些信息表现能力非常有限需要结合 CSS 一起使用以使页面更加精美。
CSS 样式既可以作为单独的文件.css类型的文件引入到 HTML 文档中也可以直接写在 HTML 文档中大致分为如下四种方法
行内样式使用 HTML 标签的 style 属性定义 CSS 样式内嵌样式使用第1种和第2种方法都是将 CSS 样式写到当前 HTML 文档中第3种和第4种方法都是将 CSS 样式放在外部文件中然后再导入到当前 HTML 文档中。
1. 行内样式内联样式
行内样式就是把 CSS 样式直接放在代码行内的标签中一般都是放入标签的style属性中由于行内样式直接插入标签中故是最直接的一种方式同时也是修改最不方便的样式。
【示例1】针对段落、
标签、 标签、标签以及
标签分别应用 CSS 行内样式。
!doctype html
行内样式
行内元素控制段落-1
行内元素h2 标题元素
行内元素控制段落-2
行内元素strong 比 em 效果要强
行内元素div 块级元素 行内元素em 强调
页面演示效果如下图所示 图1行内样式的应用
在上面示例中行内样式由 HTML 元素的 style 属性嵌入即将 CSS 代码放入style引号内即可多个 CSS 属性值则通过分号;间隔。例如示例中的
标签
行内元素div 块级元素
段落
标签设置背景色为褐色background-color: #999900标题
标签设置背景色为红色background-color: #FF6633。
标签设置字体为 30 像素font-size:30px;
标签设置高度和行高为 30 像素以及进行背景色、颜色的设置background-color:#66CC99; color:#993300; height:30px; line-height:30px; 标签设置字体大小为相对单位font-size: 2em;。
两个段落
标签虽内容不同但使用一样的背景色设置却添加两次 CSS 行内属性设置背景色 background-color: #999900。
行内元素虽然编写简单但通过示例可以发现存在以下缺陷 每一个标签要设置样式都需要添加 style 属性。 与过去网页制作者将 HTML 的标签和样式糅杂在一起的效果不同的是现在是通过 CSS 编写行内样式过去釆用的是 HTML 标签属性实现的样式效果。虽方式不同但导致的后果是一样的后期维护成本高即当修改页面时需要逐个打开网站每个页面一一修改根本看不到 CSS 所起到的作用。 添加如此多的行内样式页面体积大门户网站若釆用这种方式编写那将浪费服务器带宽和流量。网络上有些网页通过查看源文件可以看到这种编写方式虽然一个网页只有一部分是如此做的 但需要分情况 若网页制作者编写这样的行内样式可以快速更改当前样式不必考虑以前编写的样式冲突问题 网页中若存在这种情况则是后台编辑时通过编辑器生成的样式或后台未开发完整需为编辑人员开发可选择样式的选项而非通过编辑器直接改变颜色、粗细、背景色、倾斜等效果。### 2. 内嵌样式
内嵌样式通过将 CSS 写在网页源文件的头部即在 和 之间通过使用 HTML 标签中的
【示例2】为段落设置内嵌式样式书写方法减少代码量。
!doctype html
内嵌式
“百度”这一公司名称便来自宋词“众里寻他千百度”。百度公司会议室名为青玉案即是这首词的词牌。而“熊掌”图标的想法来源于“猎人巡迹熊爪”的刺激与李博士的“分析搜索技术”非常相似从而构成百度的搜索概念也最终成为了百度的图标形象。在这之后由于在搜索引擎中大都有动物形象来形象如 SOHU 的狐如 GOOGLE 的狗而百度也便顺理成章称作了熊。百度熊也便成了百度公司的形象物。
在百度那次更换 LOGO 的计划中百度给出的 3 个新 LOGO 设计方案在网民的投票下全部被否决更多的网民将选票投给了原有的熊掌标志。
此次更换 LOGO 的行动共进行了 3 轮投票直到第 2 轮投票结束新的笑脸 LOGO 都占据了绝对优势。但到最后一轮投票时原有的熊掌标志却戏剧性地获得了最多的网民选票从而把 3 个新 LOGO 方案彻底否决。
页面演示效果如下图所示 图2内嵌样式的应用
在上面示例中段落进行如下设置文本左对齐、字体为 14 号、行高 25 像素、宽度 500 像素、下边距 20 像素、浏览器下居中、首行缩进两个文字大小空间。首行缩进使用相对单位此设置的作用是当字体大小改变时如font-size: 18px;依然能够实现缩进两个文字大小空间。
行内样式带来了样式修改的不方便例如上个示例中两个段落都使用同样的样式但需要编写两遍而使用内嵌式样式后就可以将所有的段落样式放在一起。
style 不仅可定义 CSS 样式还可以定义 JavaScript 脚本故使用 style 时需要注意。当 style 的 type 值为text/css时内部编写 CSS 样式若 style 的 type 值为text/javascript时内部编写 JavaScript 脚本。
style 标签的 title 属性
style 中有一个比较特殊的属性 title使用 title 可以为不同的样式设置一个标题浏览者就可以根据标题选择不同的样式达到浏览器中切换的效果但 IE 浏览器不支持Firefox 浏览器支持此效果。
【示例3】分别为火狐浏览器设置两种字体大小样式通过火狐“查看”菜单进行修改。
!doctype html
“百度”这一公司名称便来自宋词“众里寻他千百度”。百度公司会议室名为青玉案即是这首词的词牌。而“熊掌”图标的想法来源于“猎人巡迹熊爪”的刺激与李博士的“分析搜索技术”非常相似从而构成百度的搜索概念也最终成为了百度的图标形象。
页面演示效果如下图所示。 图3火狐浏览器内嵌式更换样式
在上面不例中通过style typetext/css title名称定义了两种字体大小通过火狐浏览器“查看”菜单下的“页面样式”子菜单中有两个选项字体14号、字体18号默认情况下显示的是第一次书写的style typetext/css title名称通过菜单可以改变该页面样式。
3. 链接式
链接式通过 HTML 的 标签将外部样式表文件链接到 HTML 文档中这也是网络上网站应用最多的方式同时也是最实用的方式。这种方法将 HTML 文档和 CSS 文件完全分离实现结构层和表示层的彻底分离增强网页结构的扩展性和 CSS 样式的可维护性。
【示例4】使用链接式为 HTML 代码应用样式书写、更改方便。
!doctype html 我是被 lianjie-2.css 文件控制的楼下的你呢
楼上的lianjie.css 文件给我穿的花衣服。
页面演示效果如下图所示 图4链接式的应用
在上面示例中通过 link 链接两个 CSS 文件且都有效这也是网站制作者将公共部分放入一个 CSS 文件当前页面样式编写新的样式文件。
lianjie.css 文件代码
h3{ font-weight: normal; /*取消标题默认加粗效果*/ background-color: #66CC99; /* 设置背景色 */ height: 50px; /*设置标签的高度*/ line-height:50px; /* 设置标签的行高 */ } span{ color: #FFOOOO; /* 字体颜色 */ font-weight:bold; /* 字体加粗 */ }
lianjie-2.css 文件代码
p{ color: #FF3333; /*字体颜色设置*/ font-weight: bold; /* 字体加粗 */ border-bottom: 3px dashed #009933; /* 设置下边框线 */ line-height: 30px; /* 设置行高 */ }
链接式样式使 CSS 代码和 HTML 代码完全分离达到结构与样式的分开使 HTML 代码专门构建页面结构而美化工作由 CSS 完成。
链接式导入 CSS 样式的好处
CSS 文件可以放在不同的 HTML 文件中使网站所有页面样式统一再者将 CSS 代码放入一个 CSS 文件中便于管理、减少代码以及维护时间当修改 CSS 文件时所有应用此 CSS 文件的 HTML 文件都将更新而不必从服务器上将所有的页面取回再修改完毕后上传。### 4. 导入样式
导入样式使用 import 命令导入外部样式表。导入样式有 6 种书写方式
import daoru.css; import ‘daomxss’; import “daoru.css”; import url(daoru.css); import url(‘daoru.css’); import url(“daoru.css”);
【示例5】导入样式表 lianjie.css 和 daoru.css 以及书写 标签的背景色注意导入样式表和 标签样式的前后不可颠倒。 我是被 lianjie-2.css 文件控制的楼下的你呢 褛上的lianjie.css文件给我穿的花衣服。 页面演示效果如下图所示。 图5导入样式应用
在上面示例中必须是import url(lianjie-2.css); p{text-indent: 3em;}而不能是p{text-indent:3em;} import url(lianjie-2.css);否则将导入效果无效。在 CSS 文件中也需要将 import 放在前面后面加入 CSS 样式否则也是无效。
lianjie.css 文件代码同上一个示例即链接式。
daoru.css 文件代码
import url(“lianjie-2.css”);p { text-indent: 3em; }
HTML块级元素和内联元素行内元素
HTML 标签元素可以分为两个类别分别是块级元素和内联元素也叫行内元素。
块级元素
块级元素最主要的特点是它们自己独占一行块级元素中最具代表性的就是div此外还有p、nav、aside、header、footer、section、article、ul、address、h1~h6等。
块级元素一般都具有特定的语义可以使代码的可读性更强。
块级元素的主要特征如下所示
不管是否使用换行标签br块级元素总是在新行上开始块级元素的宽度、高度以及外边距和内边距等都可以控制如果省略块级元素的宽度那么它的宽度默认为当前浏览器窗口的宽度块级元素中可以包含其它的内联元素和块级元素。### 内联元素
内联元素也可以称为行内元素行内元素中最常用的是span此外还有b、i、u、em、strong、sup、sub、big、small、li、ins、del、code、cite、dfn、kbd和var等。
内联元素往往带有某种特殊的显示效果可以代替部分 CSS 样式非常实用例如 b和i标签可以修饰字体 sub和sup两个标签分别用来定义下标文本和上标文本。行内元素的主要特征如下所示 行内元素和其他元素会在同一行上显示 行内元素的宽、高以及外边距和内边距都不可以改变 行内元素的宽度就是其中内容的宽度且不可以改变 内联元素中只能容纳文本或者其他内联元素。对于行内元素的使用需要注意如下几点 设置宽度 width 无效 设置高度 height 无效但可以通过 line-height 来设置行高 可以设置 margin 外边距但只对左右外边距有效上下无效 设置 padding 内边距时只有左右 padding 有效上下则无效需要注意的是元素范围是增大了但是对元素周围的内容是没影响的 可以通过 display 属性将元素在行内元素和块级元素之间进行切换。### 重点说明两个标签
和 分别是最常用的块级元素和内联元素我们有必要重点说明一下。
1)
标签
是非常重要的块级标记在网页布局Layout方面发挥着重要的作用使用
我们可以定义页面的各个部分通过与 CSS 相结合可以实现各种各样的效果下面通过一个示例演示
标签的使用。
div标签演示
C语言中文网的《HTML教程》是我们花费了数月时间倾力打造的它通俗易懂并且贴近实用。 HTML教程目录部分 网站到底是什么HTML是什么HTML标签的语法格式HTML属性的概念和使用 运行效果如下图所示 图1HTML
标签演示
标签及其包围的内容可以看做网页的一个板块
标签本身并没有什么特殊的显示效果需要借助 CSS 样式对外边距、内边距、背景、边框等进行设置从而达到对板块布局的目的。
2) 标签
HTML 中的span标签是一个内联元素可以对 HTML 文档中的内容进行修饰此标签不会为文档内容提供任何视觉效果但可以与 CSS 结合使用来美化网页。下面通过一个示例来演示span标签的使用
span标签演示
C语言中文网简介 C语言中文网一个在线学习编程的网站目前已经发布了将近 50① 套教程包括 C语言、C、Java、Python 等请猛击这里查看所有教程。 注①C语言中文网会持续更新优质教程教程数量将远远超过 50 套。 运行结果如下图所示 图2HTML 标签演示
标签本身并没有什么特殊效果通常需要借助 CSS 来改变内容的样式比如字体、颜色、大小、边框、背景等。
那些不被推荐的 HTML 内联标签比如 、、 等建议使用 CSS 样式来代替但是那么具有明确语义的内联标签比如 、、、*、*、 ~~等还是应该坚持使用这些标签比 更加具有语义更有助于搜索引擎理解页面内容。~~******
元素的嵌套
大部分 HTML 元素都可以相互嵌套并且嵌套深度也没有明确限制这包括
块级元素可以嵌套块级元素块级元素可以嵌套内联元素内联元素可以嵌套内联元素内联元素可以嵌套块级元素。值得注意的是一般不建议在内联元素中嵌套块级元素这样不仅不符合开发规范还会导致内联元素被撑开独自占据一行。但是有时候又不得不这样做比如C语言中文网首页的教程列表一个板块链接到一套教程为了让读者点击板块的任何一个地方都能跳转到教程页面我们就在 标签中嵌套了
、
和
标签代码如下 HTML教程 HTML是一种专门开发网页的标记语言由浏览器解析。 总之这是一条建议不是强制规定。
块级元素和内联元素的转换
标签的很多默认行为都可以借助 CSS 改变显示类型也不例外我们可以通过 CSS display 属性将块级元素修改为内联元素或者将内联元素修改为块级元素或者兼具两者优点将标签设置为行内块级元素。
CSS 虽然可以改变标签的显示类型但是不能改变标签的语义读者还是应该根据语义去使用标签例如
标签用来布局而不用来显示文本标签用来显示文本而不用来布局标签用来强调文本加粗只是附带效果标签用来从视觉上加粗文本引起读者注意。## HTML布局附带示例
网页布局是创建一个网站时一个必不可少的过程通过布局可以改变网页中内容的排列方式让网页看起来更加合理、美观。在布局的过程中您还可以使用 CSS 来修改 HTML 标签的样式或者使用 JavaScript 来为网页添加一些特殊效果。
前面在介绍《HTML块级元素和内联元素》时提到过
标签它是一个专门用来布局的标签HTML4 主要依赖
标签进行布局。但是
是一个包罗万象的标签不具有明确的语义不能指明当前板块的作用也不利于搜索引擎理解页面内容。
为了改进传统布局模式HTML5 提出了多个专门用于布局的标签它们用来定义网页的不同部分语义更加明确。HTML5 布局标签如下
标签说明用于定义网页的头部头部中一般包含一些介绍性的内容例如网站名称、logo 或者作者的信息。用于定义网页中的导航栏。用于在网页中定义一个单独的部分其中可以包含文本、图像、表格等等。
代表 HTML 文档中的“节”或“段”“段”可以理解为一篇文章里按照主题的分段“节”则可以理解为一个页面里的分组。其主要作用就是对页面的内容进行分块或者对文章的内容进行分段。 | | | 用于定义文章或者其它独立的信息代表一个页面中自成一体的内容例如论坛的帖子、博客上的文章、一篇用户的评论等。 | | | 用于定义网页内容以外的部分例如网页的侧边栏。 | | | 用于定义网页的底部例如作者、版权等信息。 | | | 用于定义一些详细信息并且可以根据需要隐藏或显示这些详细信息。 | | | 用于为标签定义标题。 |
各个标签适用的板块如下图所示 图1HTML 布局标签演示
自我介绍一下小编13年上海交大毕业曾经在小公司待过也去过华为、OPPO等大厂18年进入阿里一直到现在。
深知大多数Go语言工程师想要提升技能往往是自己摸索成长或者是报班学习但对于培训机构动则几千的学费着实压力不小。自己不成体系的自学效果低效又漫长而且极易碰到天花板技术停滞不前
因此收集整理了一份《2024年Go语言全套学习资料》初衷也很简单就是希望能够帮助到想自学提升又不知道该从何学起的朋友同时减轻大家的负担。
既有适合小白学习的零基础资料也有适合3年以上经验的小伙伴深入学习提升的进阶课程基本涵盖了95%以上Golang知识点真正体系化
由于文件比较大这里只是将部分目录大纲截图出来每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频并且后续会持续更新
如果你觉得这些内容对你有帮助可以添加V获取vip1024b 备注Go
一个人可以走的很快但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人都欢迎扫码加入我们的的圈子技术交流、学习资源、职场吐槽、大厂内推、面试辅导让我们一起学习成长
“desc”
HTML教程
HTML是一种专门开发网页的标记语言由浏览器解析。
总之这是一条建议不是强制规定。
块级元素和内联元素的转换
标签的很多默认行为都可以借助 CSS 改变显示类型也不例外我们可以通过 CSS display 属性将块级元素修改为内联元素或者将内联元素修改为块级元素或者兼具两者优点将标签设置为行内块级元素。
CSS 虽然可以改变标签的显示类型但是不能改变标签的语义读者还是应该根据语义去使用标签例如
标签用来布局而不用来显示文本标签用来显示文本而不用来布局标签用来强调文本加粗只是附带效果标签用来从视觉上加粗文本引起读者注意。## HTML布局附带示例
网页布局是创建一个网站时一个必不可少的过程通过布局可以改变网页中内容的排列方式让网页看起来更加合理、美观。在布局的过程中您还可以使用 CSS 来修改 HTML 标签的样式或者使用 JavaScript 来为网页添加一些特殊效果。
前面在介绍《HTML块级元素和内联元素》时提到过
标签它是一个专门用来布局的标签HTML4 主要依赖
标签进行布局。但是
是一个包罗万象的标签不具有明确的语义不能指明当前板块的作用也不利于搜索引擎理解页面内容。
为了改进传统布局模式HTML5 提出了多个专门用于布局的标签它们用来定义网页的不同部分语义更加明确。HTML5 布局标签如下
标签说明用于定义网页的头部头部中一般包含一些介绍性的内容例如网站名称、logo 或者作者的信息。用于定义网页中的导航栏。用于在网页中定义一个单独的部分其中可以包含文本、图像、表格等等。
代表 HTML 文档中的“节”或“段”“段”可以理解为一篇文章里按照主题的分段“节”则可以理解为一个页面里的分组。其主要作用就是对页面的内容进行分块或者对文章的内容进行分段。 | | | 用于定义文章或者其它独立的信息代表一个页面中自成一体的内容例如论坛的帖子、博客上的文章、一篇用户的评论等。 | | | 用于定义网页内容以外的部分例如网页的侧边栏。 | | | 用于定义网页的底部例如作者、版权等信息。 | | | 用于定义一些详细信息并且可以根据需要隐藏或显示这些详细信息。 | | | 用于为标签定义标题。 |
各个标签适用的板块如下图所示 图1HTML 布局标签演示
自我介绍一下小编13年上海交大毕业曾经在小公司待过也去过华为、OPPO等大厂18年进入阿里一直到现在。
深知大多数Go语言工程师想要提升技能往往是自己摸索成长或者是报班学习但对于培训机构动则几千的学费着实压力不小。自己不成体系的自学效果低效又漫长而且极易碰到天花板技术停滞不前
因此收集整理了一份《2024年Go语言全套学习资料》初衷也很简单就是希望能够帮助到想自学提升又不知道该从何学起的朋友同时减轻大家的负担。 [外链图片转存中…(img-XR36j0kD-1712877507080)] [外链图片转存中…(img-ynleqDJE-1712877507081)] [外链图片转存中…(img-BiLfgTUh-1712877507081)] [外链图片转存中…(img-SwbkhLJT-1712877507082)] [外链图片转存中…(img-5oMBLAzq-1712877507082)]
既有适合小白学习的零基础资料也有适合3年以上经验的小伙伴深入学习提升的进阶课程基本涵盖了95%以上Golang知识点真正体系化
由于文件比较大这里只是将部分目录大纲截图出来每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频并且后续会持续更新
如果你觉得这些内容对你有帮助可以添加V获取vip1024b 备注Go [外链图片转存中…(img-dSXszERd-1712877507083)]
一个人可以走的很快但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人都欢迎扫码加入我们的的圈子技术交流、学习资源、职场吐槽、大厂内推、面试辅导让我们一起学习成长
