html自定义slider前端 HTML基本2

3.粗体标签<strong>

4.<span>标签

被用来组合文档中的行内元素。
利用 <span> 来组合行内元素，以便通过样式来格式化它们。

html自定义slider前端 HTML基本2 Node.js

<span> 在CSS定义中属于一个行内元素,在行内定义一个区域，也便是一行内可以被 <span>划分成好几个区域，从而实现某种特定效果。
<span>本身没有任何属性。
<div>在CSS定义中属于一个块级元素<div>可以包含段落、标题、表格乃至其它部分。
这使DIV便于建立不同集成的类，如章节、择要或备注。
在页面效果上，利用<div> 会自动换行，利用<span> 就会保持同行。

例如：

这样，<span>标签包含的文本就变成了蓝色的字体。

5.<q>标签

浸染：段文本引用

例如：

<p>最初知道庄子，是从一首诗<q>庄生晓梦迷蝴蝶。
望帝春心托杜鹃。
</q>开始的。
虽然当时不知道是什么意思，只是以为诗句挺特殊。
后来才明白这个典故出自是庄子的《逍遥游》，《逍遥游》代表了庄子思想的最高境界，是对世俗社会的功名利禄及自己的舍弃。
</p>在上面的例子中，“庄生晓梦迷蝴蝶。
望帝春心托杜鹃。
” 这是一句诗歌，出自晚唐墨客李商隐的《锦瑟》。
由于不是作者自己的笔墨，以是须要利用<q></q>实现引用。
把稳要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。
这里用<q>标签的真正关键点不是它的默认样式双引号（如果这样我们不如自己在键盘上输入双引号就行了），而是它的语义：引用别人的话。
补充知识：语义化网页构造有助于搜索引擎的收录。
同一个效果可以用很多钟办法实现，但这只方便了浏览者，而搜索引擎不知道这里到底是什么内容，这里如果你利用标签，那么就见告浏览器这里是引用的话。
而且在手持设备或移动设备不能很好支持css的根本上，浏览器会利用默认的效果，因而供应较好可读性。

6.<blockquote>标签

浸染：长文本引用

例如：

<blockquote>明月出天山，苍茫云海间。
长风几万里，吹度玉门关。
汉下白登道，胡窥青海湾。
由来征战地，不见有人还。
戍客望边色，思归多苦颜。
高楼当此夜，嗟叹未应闲。
</blockquote>

把稳：浏览器对<blockquote>标签的解析是缩进样式

7.<br>标签

怎么可以让每一句诗词后面加入一个折行呢？那就可以用到<br />标签了，在须要加回车换行的地方加入<br />，<br />标签浸染相称于word文档中的回车。

语法：

xhtml1.0写法：

<br/>

html4.01写法：

<br>

现在一样平常利用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。

与以前我们学过的标签不一样，<br />标签是一个空标签，没有HTML内容的标签便是空标签，空标签只须要写一个开始标签，这样的标签有<br />、<hr />和<img />。

讲到这里，你是不是有个疑问，想折行还不好说嘛，就像在 word 文件档或记事本中，在想要折行的前面输入回车不就行了吗？不好意思，在 html 中是忽略回车和空格的，你输入的再多回车和空格也是显示不出来的。

8.<hr>标签

在信息展示时，有时会须要加一些用于分隔的横线，这样会使文章看起来整洁些。

语法：

html4.01版本

<hr>

xhtml1.0版本

<hr/>

把稳：

<hr />标签和<br />标签一样也是一个空标签，以是只有一个开始标签，没有结束标签。
<hr />标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人以为这种样式不雅观观，没有关系，这些外在样式在我们往后学习了css样式表之后，都可以对其修正。
大家把稳，现在一样平常利用 xhtml1.0 的版本（其它标签也是），这种版本比较规范。

9.<address>标签

一样平常网页中会有一些网站的联系地址信息须要在网页中展示出来，这些联系地址信息如公司的地址就可以<address>标签。
也可以定义一个地址（比如电子邮件地址）、署名或者文档的作者身份。

语法：

<address>联系地址信息</address>

如：

<address>文档编写：lilian 北京市西城区德外大街10号</address>

10.<code>标签

在先容措辞技能的网站中，避免不了在网页中显示一些打算机专业的编程代码，当代码为一行代码时，你就可以利用<code>标签了，如下面例子：

把稳：在文章中一样平常如果要插入多行代码时不能利用<code>标签了。

语法：

注：如果是多行代码，可以利用<pre>标签。

11.<pre>标签

紧张浸染:预格式化的文本。
被包围在 pre 元素中的文本常日会保留空格和换行符。

语法：

<pre>措辞代码段</pre>

如下代码：

<pre> var message=\"大众欢迎\公众; for(var i=1;i<=10;i++) { alert(message); } </pre>

效果如下：

把稳：<pre> 标签不但是为显示打算机的源代码时用的，在你须要在网页中预显示格式时都可以利用它，只是<pre>标签的一个常见运用便是用来展示打算机的源代码。

12.<ul>标签

ul-li是没有前后顺序的信息列表。

这样是空心圆，

ul{ list-style:circle; }这个便是去除前面的点

ul{ list-style:none }语法：

<ul> <li>信息</li> <li>信息</li> ...... </ul>举例：

<ul> <li>精彩少年</li> <li>俏丽溘然涌现</li> <li>触动心灵的旋律</li> </ul>ul-li在网页中显示的默认样式一样平常为：每项li前都自带一个圆点

13.<ol>标签

ol-li是有前后顺序的信息列表

语法：

<ol> <li>信息</li> <li>信息</li> ...... </ol>举例：

<ol> <li>前端开拓口试心法 </li> <li>零根本学习html</li> <li>JavaScript全攻略</li> </ol>

<ol>在网页中显示的默认样式一样平常为：每项<li>前都自带一个序号，序号默认从1开始。

14.<div>标签

<div> 可定义文档中的分区或节（division/section）。
<div>标签可以把文档分割为独立的、不同的部分。
它可以用作严格的组织工具，并且不该用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的浸染会变得更加有效。
<div>是一个块级元素。
这意味着它的内容自动地开始一个新行。
实际上，换行是 <div>固有的唯一格式表现。
可以通过<div> 的 class 或 id 运用额外的样式。
不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div>元素运用 class 或 id 属性，但是更常见的情形是只运用个中一种。
这两者的紧张差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而id 用于标识单独的唯一的元素。

15.<table>标签

常用属性

1）属性：border

浸染：规定表格边框的宽度

2）属性：cellpadding

浸染：单元格中的文本与单元格边框的间距

3）属性：cellspacing

浸染：单元格之间的间距

创建表格的四个元素：

table、tbody、tr、th、td

1、<table>…</table>：全体表格以<table>标记开始、</table>标记结束。

2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。
如右侧代码编辑器中的代码。

3、<tr>…</tr>：表格的一行，以是有几对tr 表格就有几行。

4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，解释一行中就有几列。

- 常用属性： colspan：规定单元格可横跨的列数，值为数字 rowspan：规定单元格可横跨的行数，值为数字

5、<th>…</th>：表格的头部的一个单元格，表格表头。

6、表格中列的个数，取决于一行中数据单元格的个数。

总结：

1、表头，也便是th标签中的文本默认为粗体并且居中显示2、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的3、用css样式，为表格加入边框Table 表格在没有添加 css 样式之前，是没有边框的。

16.<caption>标签

表格还是须要添加一些标签进行优化，可以添加标题和择要。

择要

择要的内容是不会在浏览器中显示出来的。
它的浸染是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助分外用户读取表格内容。
语法：

<table summary=\"大众表格简介文本\"大众>标题

用以描述表格内容，标题的显示位置：表格上方。
语法：

17.<a>标签

_blank --在新窗口中打开链接_parent --在父窗体中打开链接_self --在当前窗体打开链接,此为默认值_top --在当前窗体打开链接，并更换当前的全体窗体(框架页)一个对应的框架页的名称 -在对应框架页中打开href：Hypertext Reference的缩写。
意思是超文本引用。
利用<a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。
语法：

<a href=\"大众目标网址\"大众 title=\"大众鼠标滑过显示的文本\"大众>链接显示的文本</a>

例如：

<a href=\公众http://www.imooc.com\"大众 title=\"大众点击进入慕课网\"大众>click here!</a>

上面例子浸染是单击click here!笔墨，网页链接跳转到http://www.imooc.com这个网页。

<a>标签在默认情形下，链接的网页是在当前浏览器窗口中打开，有时我们须要在新的浏览器窗口中打开。
如下代码：

<a href=\"大众目标网址\公众 target=\公众_blank\"大众>click here!</a>title属性的浸染，鼠标滑过链接笔墨时会显示这个属性的文本内容。
这个属性在实际网页开拓中浸染很大，紧张方便搜索引擎理解链接地址的内容（语义化更友好）。
把稳：还有一个有趣的征象不知道小伙伴们创造了没有，只要为文本加入a标签后，笔墨的颜色就会自动变为蓝色（被点击过的文本质彩为紫色），颜色很丢脸吧，不过没有关系后面我们学习了css样子就可以设置过来（a{color:#000}),下面会详细讲解。
利用mailto在网页中链接Email地址

<a>标签还有一个浸染是可以链接Email地址，利用mailto能让访问者便捷向网站管理者发送电子邮件。

把稳：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
引号只有一对！

例子：<a href=\"大众mailto:yy@qq.com? cc=xx@qq.com & bcc=aa@qq.com & subject=邮件主题 & body=邮件内容\"大众>如果：A 发送邮件给B1、B2、B3，抄送给C1、C2、C3，密送给D1、D2、D3。

那么：1）A知道自己发送邮件给了B1、B2、B3，并且抄送给了C1、C2、C3，密送给了D1、D2、D3。
2）B1知道这封是A发送给B1、B2、B3的邮件，并且抄送给了C1、C2、C3，但不知道密送给了D1、D2、D3。
3）C1知道这封是A发送给B1、B2、B3的邮件，并且抄送给了C1、C2、C3，但不知道密送给了D1、D2、D3。
4）D1知道这封是A发送给B1、B2、B3的邮件，并且抄送给了C1、C2、C3，而且密送给了自己，但不知道密送给了D2、D3。
5）邮箱地址 mailto: <a href=\公众mailto:qiujie@staff.weibo.com\公众>发送</a>6）抄送地址cc: <a href=\公众mailto:qiujie@staff.weibo.com?cc=zz@sina.com\"大众>发送</a>7）密件抄送地址用分号分隔: <a href=\公众mailto:qiujie@staff.weibo.com?bcc=zz@sina.com\"大众>发送</a>8）多个收件人、抄送人、密送人 ;bcc: <a href=\"大众mailto:qiujie@staff.weibo.com;zz@sina.com\"大众>发送</a>9）邮件主题subject: <a href=\公众mailto:qiujie@staff.weibo.com？subject=邮件主题\"大众>发送</a>10）邮件内容body: <a href=\"大众mailto:qiujie@staff.weibo.com？body=邮件正文\"大众>发送</a>例子：<a href=\"大众mailto:yy@imooc.com;10001@qq.com?cc=10002@qq.com&bbc=madanteng@qqhelp.com&subject=不雅观了不起的盖茨比有感。
&body=你好，对此评论有些想法。
\公众>对此影评有何感想，发送邮件给我</a>

18.<img>标签

在网页的制作中为使网页炫丽都雅，肯定是短缺不了图片，可以利用

标签来插入图片。

语法：

[站外图片上传中……(2)] <img src = \"大众myimage.gif\"大众 alt = \"大众My Image\公众 title = \"大众My Image\"大众 />讲解：

src：标识图像的位置；alt：指定图像的描述性文本，当图像不可见时（下载不堪利时），可看到该属性指定的文本；title：供应在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；图像可以是GIF，PNG，JPEG格式的图像文件。
路径有两种填写办法：绝对路径、相对路径相对路径：相对付我们当前 html 文件的位置来写路径即可！
./表示当前目录，../表示上一级目录

19.<form>标签

把稳:

1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在<form></form>标签之间（否则用户输入的信息可提交不到做事器上哦！
）。

2、method:post/get的差异这一部分内容属于后端程序员考虑的问题。

网站若何与用户进行交互？答案是利用HTML表单(form)。
表单是可以把浏览者输入的数据传送到做事器端，这样做事器端程序就可以处理表单传过来的数据。

语法：

<form method=\"大众传送办法\"大众 action=\"大众做事器文件\"大众>讲解：

<form> ：<form>标签是成对涌现的，以<form>开始，以</form>结束。
action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
method ：数据传送的办法（get/post）。
<form method=\公众post\"大众 action=\"大众save.php\"大众> <label for=\公众username\"大众>用户名:</label> <input type=\"大众text\"大众 name=\"大众username\"大众 /> <label for=\公众pass\"大众>密码:</label> <input type=\公众password\公众 name=\"大众pass\"大众 /> </form>

20.<input>标签

当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。
文本框也可以转化为密码输入框。

语法：

<form> <input type=\"大众text/password\"大众 name=\"大众名称\公众 value=\"大众文本\"大众 /> </form>属性：

举例： <form> 姓名： <input type=\"大众text\"大众 name=\"大众myName\"大众/><br/> 密码： <input type=\公众password\"大众 name=\公众pass\"大众/> </form> value=\公众xxx\"大众更换为 placeholder=\公众xxx\"大众的体验更好一些，placeholder属性为 HTML 5 的新属性。
placeholder 属性供应可描述输入字段预期值的提示信息（hint）。
该提示会在输入字段为空时显示，并会在字段得到焦点时消逝。

语法：

<input placeholder=\"大众text\"大众/>注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。

把稳:同一组的单选按钮，name 取值一定要同等，比如上同一个名称“gender”，这样同一组的单选按钮才可以起到单选的浸染！

type：

当type=\"大众text\"大众时，输入框为文本输入框;当type=\"大众password\"大众时, 输入框为密码输入框。
hidden 定义隐蔽输入字段image 定义图像作为提交按钮number 定义带有 spinner 控件的数字字段password 定义密码字段。
字段中的字符会被遮蔽radio 定义单选按钮checkbox 定义复选框按钮range 定义带有 slider 控件的数字字段reset 定义重置按钮。
重置按钮会将所有表单字段重置为初始值search 定义用于搜索的文本字段submit 定义提交按钮。
提交按钮向做事器发送数据text 默认。
定义单行输入字段，用户可在个中输入文本。
默认是 20 个字符url 定义用于 URL 的文本字段

name：为文本框命名，以备后台程序ASP 、PHP利用。

value：为文本输入框设置默认值。
(一样平常起到提示浸染)

21.<textarea>标签

当用户须要在表单中输入大段笔墨时，须要用到文本输入域。

语法：

<textarea rows=\"大众行数\"大众 cols=\"大众列数\"大众>文本</textarea><textarea>标签是成对涌现的，以<textarea>开始，以</textarea>结束。
cols ：多行输入域的列数。
rows ：多行输入域的行数。
在<textarea></textarea>标签之间可以输入默认值。

举例：

<form method=\"大众post\"大众 action=\"大众save.php\"大众> <label>联系我们</label> <textarea cols=\"大众50\公众 rows=\公众10\"大众 >在这里输入内容...</textarea> </form>

22.<select>标签

利用下拉列表框，节省空间。
下拉列表在网页中也常会用到，它可以有效的节省网页空间。
既可以单选、又可以多选。

语法：

<select> <option value=\"大众提交的值\"大众>显示的值</option> ... </select> 设置selected=\公众selected\"大众属性，则该选项就被默认选中。
selected=\"大众selected\"大众若想实现多选

<select multiple=\"大众multiple\公众> 然后选择时候按ctrl点鼠标选中若想让某个选项不可选

<option disabled=\"大众disabled\"大众>optgroup 标签

把干系的选项组合在一起

属性 label：给选项组命名

属性 disabled：禁用该选项组

23.<label>标签

label标签不会向用户呈现任何分外效果，它的浸染是为鼠标用户改进了可用性。
如果你在 label 标签内点击文本，就会触发此控件。
便是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签干系的表单控件上（就自动选中和该label标签干系连的表单控件上）。
语法：

把稳：标签的 for 属性中的值应该与干系控件的 id 属性值一定要相同。

例子：

<form> <label for=\"大众male\公众>男</label> <input type=\"大众radio\"大众 name=\"大众gender\公众 id=\"大众male\"大众 /> <br /> <label for=\"大众female\"大众>女</label> <input type=\"大众radio\公众 name=\"大众gender\"大众 id=\公众female\"大众 /> <label for=\"大众email\"大众>输入你的邮箱地址</label> <input type=\"大众email\"大众 id=\公众email\"大众 placeholder=\"大众Enter email\公众> </form>

24.<map>标签

利用 map 标签可以给图片某块区域加超链接

利用方法：

1）为 map 标签首先加上 id 属性用来为 map 标签定义一个唯一的名称

2）为了担保兼容性再加上 name 属性，属性值与 id 的值相同

3）为 map 标签所浸染的图片加上 usemap 属性，属性值为 #id 名称

4）在 map 标签内嵌套 area 标签来实现给指定区域加链接

<area shape=\"大众\"大众 coords=\公众\公众 href =\"大众\"大众 alt=\公众\公众 /> shape 属性：定义链接区域的形状，常用值 rect、circle coords 属性：确定区域的精确位置。
填写坐标即可，以父元素左上角为原点，可借助qq截图来得到想要的坐标 href 属性：填写链接地址即可 alt 属性：给链接加一些解释信息

例子：

把稳：

第一个coords的四个参数中，前两个参数为矩形的靠近原点的顶角的坐标，后两个参数为对角的坐标。
第二个coords的三个参数中，前两个为圆心坐标，第三个参数为圆的半径。

25.<iframe>标签

创建包含其余一个文档的内联框架（即行内框架）

属性：

frameborder

值：1、0

浸染：规定是否显示框架周围的边框。

width值：以像素计的宽度值、以包含元素百分比计的宽度值

浸染：定义 iframe 的宽度

height

浸染：定义高度

name

浸染：给 iframe 命名

scrolling

值：yes、no、auto

浸染：规定是否在 iframe 中显示滚动条

src

浸染：规定在 iframe 中显示的文档的 URL

可以是本地的 html 文件，也可以是远程的 html 文件

标签写法与嵌套的谈论

标签写法

元素标记的省略（在 html5 里面有的标记是可以省略不写的）

1）不许可写结束标签的元素

area,base,br,col,command,embed,hr,img,input,keygen,link,meta,paran,source,track,wbr。
这些标签都是单标签例如：br 标签，不可以这样<br></br>，只能<br />这样来关闭标签。

2）可以省略结束标记的元素有：

li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td,th。

3）可以省略全部标记的元素有

html,head,body,colgroup,tbody具有 boolean 值得属性

例如：disabled,readonly，checked 等只写属性而不写属性值得时候当做 ture 不写属性表示 false属性值的引号可以省略

哀求：属性值不包含空字符串，<，>，=， ‘

标签嵌套磋商

1.html 规定我们必须要嵌套着写的标签

例如：页面头部是嵌套在 head 标签里面的，主体内容都是嵌套在 body 标签里面的表单的内容是嵌套在 form 标签里面的，dt、dd 是嵌套在 dl 标签里面的，li 是嵌套到ul 标签里面的，等等...

2.块级元素可以嵌套内联元素，但是内联元素不能包含块元素

<div> <span>我是一个 span 元素</span> </div> —— 对 <span> <div>div 元素</div></span> —— 错

3.内联元素可以嵌套内联元素

<a href=\公众#\公众> <span></span></a> —— 对

4.块级元素与块级元素嵌套把稳点

div 块级元素是一个容器，险些可以存放任何常用标签，包括自己，我们为什么要利用 div 来嵌套标签？这个问题可以用用我们国家的省份划分来阐明，国家须要划分不同的省份来利于管理，那么我们 html 页面也是的，全体 html 文档元素太多，我们须要利用 div 标签将页面划分身分歧的块，这样可以对每块进行分开管理，学完 css 我们就知道怎么进行管理了。
块级元素不能放在 p 标签里面

<p><ol><li></li></ol></p> —— 错 <p><div></div></p> —— 错li 内可以包含 div 标签，li 和 div 标签都是装载内容的容器，地位平等，没有级别之分（例如：h1、h2 这样森严的等级制度），要知道 li 标签连它的父级 ul 或者是 ol 都可以容纳的

喜好前真个小伙伴们可以在评论区留言，探求和小冯童鞋一样热爱前真个朋侪，让我们一起玩转前真个天下！