h5列表控件(html自定义列表标签)-昊阳知识网

什么是HTML?

HTML: ( Hypertext Markup Language )超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

所谓超文本,有两层含义:

1.它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)。2.它还可以从一个文件跳转到另一个文件 ,与世界各地主机的文件连接(超级链接文本)。

特点

超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，其主要特点如下：

1.简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。2.可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。3.平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上。4.通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

网页的结构

根据w3c标准,一个网页主要三部分组成:结构,表现,还有行为。

??结构:HTML,用于描述页面的结构.??表现:CSS用户控制页面中元素的样式.??行为:JavaScript 用于响应用户的操作.

而HTML它负责网页的三个要素之中的结构,HTML使用标签的的形式来标识网页中的不同组成部分。所谓超文本指的是超链接,使用超链接可以让我们从一个页面跳转到另一个页面。

HTML的基本结构

一个HTML文档结构基本由以下四部分组成:

1.文档声明，标志是：<!DOCTYPE HTML> ，声明这是一个HTML文档。2.html标签对，标志是：<html></html> ，标签的作用相当于程序在告诉网页浏览器，整个网页是从<html>这里开始的，然后到</html>结束3.head标签对，标志是：<head></head>，head标签是页面的头部。4.body标签对，标志是：<body></body>，body标签是页面的身体，一般网页绝大多数的标签代码都是在这里进行编写。

完整代码如下:

<!– 文档声明,告诉浏览器当前网页的版本,<!DOCTYPE html> 为html5的声明–><!DOCTYPE html><!– lang 语言种类 –><html lang=”en”> <!– head是网页的头部,head中的内容不会在网页中直接出现,只要是用来帮助浏览器和搜索引擎来解析网页 –><head> <!– 设置网页编码 –> <meta charset=”UTF-8″> <!– meta标签用来设置网页的元数据常用属性: charset表示字符集 name 指定数据的名称 content指定数据的内容 –> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <!– keywords表示网站的关键字,可以指定多个关键字,多个用英文逗号隔开 –> <meta name=”keywords” content=”前端,html5,css”> <!– description 用于指定网站的描述网站的描述会显示在搜索引擎的搜索结果中–> <meta name=”description” content=”京东JD.COM-专业的综合网上购物商城”/> <!– 网页的标题 –> <title>Document</title></head> <!– body是html的子元素,表示网页的主题,网页如中所有的可见内容都应该写在body中 –><body></body></html>基本语法概述:

HTML标签是HTML语言中最基本的单位，标签一般是成对出现,但是页存在一些自结束标签，HTML标签的大小写无关的，例如“主体”< body>跟< BODY>表示的意思是一样的，但推荐使用小写。HTML 标签是由尖括号包围的关键词，例如 < html>。HTML 标签通常是成对出现的，例如 < html> 和 < /html> ，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。有些特殊的标签必须是单个标签，例如 < br />，我们称为单标签。

标签特点

1.由尖括号包围的关键词，比如 <html>2.通常是成对出现的，比如 <div> 和 </div>3.标签对中的第一个标签是开始标签，第二个标签是结束标签；4.开始和结束标签也被称为开放标签和闭合标签。5.也有单独呈现的标签，如：< img src=”百度百科.jpg” />等。6.一般成对出现的标签，其内容在两个标签中间。单独呈现的标签，则在标签属性中赋值。如< h1>标题</h1>和 <input type=”text” value=”按钮” />。7.网页的内容需在<html>标签中，标题、字符格式、语言、兼容性、关键字、描述等信息显示在<head>标签中，而网页需展示的内容需嵌套在<body>标签中。某些时候不按标准书写代码虽然可以正常显示，但是作为职业素养，还是应该养成正规编写习惯。

标签关系:

双标签关系可以分为两类：包含关系和并列关系。

包含关系:<head> <title></title></head>并列关系:<head></head><body></body>标签中的属性:

在标签中(开始标签或自结束标签),还可以设置属性,属性是一个名值对(x=y),属性和标签名或其他属性应该使用空格隔开,有的属性拥有属性值,有些没有,如果有属性值的话,属性值应该使用引号引起来.

例如:

<!– 拥有属性值的标签 –><meta charset=”UTF-8″>语义标签:

标题标签< h1> ~ < h6>

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题，即< h1> ~ < h6>，代码如下:

<!–单词 head 的缩写，意为头部、标题。标签语义：作为标题使用，并且依据重要性递减。–><h1> 我是一级标题 </h1><h2> 我是二级标题 </h2><h3> 我是三级标题 </h3><h4> 我是四级标题 </h4><h5> 我是五级标题 </h5><h6> 我是六级标题 </h6>

特点：

1.加了标题的文字会变的加粗，字号也会依次变大。2.一个标题独占一行。

段落

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，< p>标签用于定义段落，它可以将整个网页分为若干个段落。

<!–单词 paragraph [??p??r??gr??f] 的缩写，意为段落。标签语义：可以把 HTML 文档分割为若干段落。–><p> 我是一个段落标签 </p>

特点：

1.文本在一个段落中会根据浏览器窗口的大小自动换行。2.段落和段落之间保有空隙。

换行标签:

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签 < br />。

<!–单词 break 的缩写，意为打断、换行。标签语义：强制换行。–><br />

特点：

1.<br/> 是个单标签。2.<br/> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

文本格式化标签:

在网页中，有时需要为文字设置粗体、斜体、或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示，以便突出重要性, 比普通文字更重要。

补充标签描述<article>定义文章。<aside>定义页面内容以外的内容。<details>定义用户能够查看或隐藏的额外细节。<figcaption>定义 <figure> 元素的标题。<figure>规定自包含内容，比如图示、图表、照片、代码清单等。<footer>定义文档或节的页脚。<header>规定文档或节的页眉。<main>规定文档的主内容。<mark>定义重要的或强调的文本。<nav>定义导航链接。<section>定义文档中的节。<summary>定义 <details> 元素的可见标题。<time>定义日期/时间。HTML 常用标签<div> 和<span>标签

<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。

<div> 这是div标签 </div><span> 这是span标签 </span>

div 是 division 的缩写，表示分割、分区。span 意为跨度、跨距。

特点：

1.<div> 标签用来布局，但是现在一行只能放一个<div>。2.<span> 标签用来布局，一行上可以多个 <span>。

图像标签

在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。

img 是单词 image 的缩写，意为图像。src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。

代码示例:

其中,<img> 标签必需的属性:

属性值描述alttext规定图像的替代文本。srcURL规定显示图像的 URL。

相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级、下一级和同一级就是图片相对于 HTML 页面的位置。

<!– 相对路径写法 –><!– ./ 表示当前文件所在目录，即G:/images/ –><!– ./可省略不写 –><img src = “logo.png”/><img src = “./logo.png”/><!– ../ 表示当前文件所在目录的上级目录，即G:/ –><img src = “../images/logo.png”/><!– /表示根路径，即G:/ –><img src = “/images/logo.png”/>

<img> 可选属性:

属性值描述aligntopbottommiddleleftright不推荐使用。规定如何根据周围的文本来排列图像。borderpixels不推荐使用。定义图像周围的边框。heightpixels**%定义图像的高度。hspacepixels不推荐使用。定义图像左侧和右侧的空白。ismapURL将图像定义为服务器端图像映射。longdescURL指向包含长的图像描述文档的 URL。usemapURL将图像定义为客户器端图像映射。vspacepixels不推荐使用。定义图像顶部和底部的空白。widthpixels**%设置图像的宽度。超链接

超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置.

超链接的语法格式:<a href=”跳转目标” target=”目标窗口的弹出方式”> 文本或图像 </a>

a为单词 anchor [??????k??(r)] 的缩写，意为：锚。

可选属性:属性值描述downloadfilename规定被下载的超链接目标。hrefURL规定链接指向的页面的 URL。hreflanglanguage_code规定被链接文档的语言。mediamedia_query规定被链接文档是为何种媒介/设备优化的。reltext规定当前文档与被链接文档之间的关系。target_blank_parent_self_topframename规定在何处打开链接文档。typeMIME type规定被链接文档的的 MIME 类型。链接分类:

外部链接: 例如 < a href=”http://www.baidu.com”> 百度</a >。

内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href=”index.html”> 首页 </a >。

空链接: 如果当时没有确定链接目标时，<a href=”#”> 首页 </a > 。

网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.

??在链接文本的 href 属性中，设置属性值为 #名字的形式，如< a href=”#two”> 第2集 </a>??找到目标位置标签，里面添加一个 id 属性 = 刚才的名字，如：</h3 id=”two”>第2集介绍</h3>

代码示例:

表格是网页制作中使用最多的工具之一，在制作网页时，使用表格可以更清晰地排列数据。

表格的基本语法<!– <table> </table> 是用于定义表格的标签。–> <table> <!– <tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。–> <tr> <!– <td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。字母 td 指表格数据（table data），即数据单元格的内容。 –> <td>单元格内的文字</td> </tr></table>表头单元格标签

定义表格内的表头单元格，一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示. <th> 标签表示 HTML 表格的表头部分(table head 的缩写)

<table> <tr> <th>姓名</th> … </tr>…</table>表格结构标签

因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分. 在表格标签中，分别用：<thead>标签表格的头部区域、<tbody>标签表格的主体区域. <tfoot>用来存放表格脚注,这样可以更好的分清表格结构。

代码示例:

<table width=”800″><thead> <tr> <td>head</td> </tr></thead><tbody> <tr> <td>body</td> </tr> <tr> <td> </td> </tr></tbody><tfoot> <tr> <td>foot</td> </tr></tfoot></table>合并单元格

跨行合并：此属性可以实现跨行单元格合并效果。rowspan是一个合成词:row(行) span(跨度)。属性值是数字，表示跨几个列合并单元格——rowspan=”合并单元格的个数”

跨列合并：colspan属性:此属性可以实现横向跨列单元格合并效果。colspan是一个合成词:column(列) span(跨度)。属性值是数字，表示跨几个列合并单元格——colspan=”合并单元格的个数”

代码示例:

效果图:

列表标签

列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

无序列表

<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义。

无序列表的基本语法格式如下：

注意事项:

1.无序列表的各个列表项之间没有顺序级别之分，是并列的。2.<ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。3.<li> 与 </li> 之间相当于一个容器，可以容纳所有元素。4.无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。

效果图:

有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。在 HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项。

有序列表的基本语法格式如下：

注意事项:

1.<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。2.<li> 与 </li>之间相当于一个容器，可以容纳所有元素。3.有序列表会带有自己样式属性，但在实际使用时，我们会使用 CSS 来设置。

自定义列表

在 HTML 标签中，<dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用。

其基本语法如下：

注意事项:

1.<dl></dl> 里面只能包含 <dt> 和 <dd>。2.<dt> 和 <dd>个数没有限制，经常是一个<dt> 对应多个<dd>。

表单标签

在 HTML 中，HTML 表单常用于收集用户输入，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

表单域

表单域是一个包含表单元素的区域。在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。<form> 会把它范围内的表单元素信息提交给服务器.

form属性:

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。接下来我们一起来学习:

1.input输入表单元素2.select下拉表单元素3.textarea 文本域元素

<input> 表单元素

在英文单词中，input 是输入的意思，而在表单元素中 <input> 标签用于收集用户信息。<input> 标签包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

代码示例:

注意事项:

??<input /> 标签为单标签??type 属性设置不同的属性值用来指定不同的控件类型

type 属性的属性值及其描述如下：

除 type 属性外，<input>标签还有其他很多属性，其常用属性如下：

值属性值描述name用户自定义定义input元素的名称value用户自定义规定input元素的值checkedchecked规定此input元素首次加载时应当会选中maxlength正整数规定输入字段中字符的最大长度

注意事项:

1.name 和value 是每个表单元素都有的属性值,主要给后台人员使用.2.name 表单元素的名字, 要求单选按钮和复选框要有相同的name值.3.checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.4.maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.

代码示例:

<!– 使用placeholder来定义提示文本,该提示会在输入字段为空时显示，并会在字段获得焦点时消失。–>用户名: <input type=”text” placeholder=”请输入用户名”/><!– 使用value规定 input 元素的默认值。–>用户名: <input type=”text” placeholder=”请输入用户名” value=”张三”/><!– 使用name的来用于区别不同的表单。–>用户名: <input type=”text” placeholder=”请输入用户名” value=”张三” name=”username” /><!– radio (或者checkbox）如果是一组，我们可以给他们命名相同的名字 –><input type=”radio” name=”sex” />男<input type=”radio” name=”sex” />女<!– 使用checked 属性：表示默认选中状态。用于单选按钮和复选按钮。–><input type=”radio” name=”sex” value=”男” checked=”checked” />男<input type=”radio” name=”sex” value=”女” />女<label>标签

代码示例:

效果图:

<select>表单元素

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。

语法：

注意事项:

1.<select> 中至少包含一对<option> 。2.在<option> 中定义 selected =“ selected ” 时，当前项即为默认选中项。

属性:

属性值描述autofocusautofocus规定在页面加载后文本区域自动获得焦点。disableddisabled规定禁用该下拉列表。formform_id规定文本区域所属的一个或多个表单。multiplemultiple规定可选择多个选项。namename规定下拉列表的名称。requiredrequired规定文本区域是必填的。sizenumber规定下拉列表中可见选项的数目。<textarea> 表单元素

<textarea> 标签定义多行的文本输入控件。

文本区中可容纳无限数量的文本，该控件常见于留言板，评论。其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

语法:

属性:

属性值描述autofocusautofocus规定当页面加载时，文本区域自动获得焦点。colsnumber规定文本区域内可见的宽度。disableddisabled规定禁用文本区域。formform_id定义文本区域所属的一个或多个表单。maxlengthnumber规定文本区域允许的最大字符数。nametext规定文本区域的名称。placeholdertext规定一个简短的提示，描述文本区域期望的输入值。readonlyreadonly规定文本区域为只读。requiredrequired规定文本区域是必需的/必填的。rowsnumber规定文本区域内可见的行数。wraphard soft规定当提交表单时，文本区域中的文本应该怎样换行。

h5列表控件(html自定义列表标签)

相关推荐

发表评论