菜鸟学前端之遍寻名师
<abbr>:缩写,与title连用
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
<b>:字体加粗
<big>:大号
<small>:小号
<i>:斜体
<tt>:等宽
<bdi>:允许您设置一段文本,使其脱离其父元素的文本方向设置。在发布用户评论或其他您无法完全控制的内容时,该标签很有用。与dir一同使用
也就是说与dir的文本设置方向可以相反,进行单独处理
<bdo>:bdo 元素可覆盖默认的文本方向,与dir属性一同使用
<blockquote> :<blockquote>与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。与cite=“URL”属性使用,指明来源
以下元素都是短语元素。虽然这些标签定义的文本大多会呈现出特殊的样式,但实际上,这些标签都拥有确切的语义。
我们并不反对使用它们,但是如果您只是为了达到某种视觉效果而使用这些标签的话,我们建议您使用样式表,那么做会达到更加丰富的效果。
<em> | 把文本定义为强调的内容。 |
<strong> | 把文本定义为语气更强的强调的内容。 |
<dfn> | 定义一个定义项目。 |
<code> | 定义计算机代码文本。 |
<samp> | 定义样本文本。 |
<kbd> | 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。 |
<var> | 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。 |
<cite> | 定义引用。可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。 |
<del>:定义删除文本,一般显示为划线,可与cite属性(链接说明为什么删除)和datatime属性(说明何时删除)
<ins>:定义新插入文本,一般显示为下划线,其余同上
<mark>:突出显示文本,与上述不同,一般显示为阴影填充
<meter>:
<meter value="3" min="0" max="10">十分之三</meter><meter value="0.6">60%</meter>
<pre>: pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
pre 元素中允许的文本可以包括物理样式和基于内容的样式变化,还有链接、图像和水平分隔线。当把其他标签(比如 <a> 标签)放到 <pre> 块中时,就像放在 HTML/XHTML 文档的其他部分中一样即可。请看下面的例子:
<pre>
<html><head><script type="text/javascript" src="loadxmldoc.js">
</script>
</head><body><script type="text/javascript">xmlDoc=<a href="dom_loadxmldoc.asp">loadXMLDoc</a>("books.xml");document.write("xmlDoc is loaded, ready for use");</script></body></html>
</pre>
在上面的代码中,<pre> 标签中的特殊符号被转换为符号实体,比如 "<" 代表 "<",">" 代表 ">"。另外,请注意蓝色的代码,我们在 <pre> 标签中使用了链接,也就是 <a> 标签。上面这段代码的显示效果如下:
<html><head><script type="text/javascript" src="loadxmldoc.js">
</script>
</head><body><script type="text/javascript">xmlDoc=loadXMLDoc("books.xml");document.write("xmlDoc is loaded, ready for use");</script></body></html>
<input>:看名字就知道与客户输入有关,当然你看了<form>标签
<form>:创建表单,表单就是表,可以这么理解
<form action="form_action.asp" method="get">First name: <input type="text" name="fname" />Last name: <input type="text" name="lname" /><input type="submit" value="Submit" />
</form>
当然,网页一定有客户输入,所以其属性还蛮多的:
属性 | 值 | 描述 |
---|---|---|
accept | mime_type | 规定通过文件上传来提交的文件的类型。 |
align |
|
不赞成使用。规定图像输入的对齐方式。 |
alt | text | 定义图像输入的替代文本。 |
autocomplete |
|
规定是否使用输入字段的自动完成功能。 |
autofocus | autofocus |
规定输入字段在页面加载时是否获得焦点。 (不适用于 type="hidden") |
checked | checked | 规定此 input 元素首次加载时应当被选中。 |
disabled | disabled | 当 input 元素加载时禁用此元素。 |
form | formname | 规定输入字段所属的一个或多个表单。 |
formaction | URL |
覆盖表单的 action 属性。 (适用于 type="submit" 和 type="image") |
formenctype | 见注释 |
覆盖表单的 enctype 属性。 (适用于 type="submit" 和 type="image") |
formmethod |
|
覆盖表单的 method 属性。 (适用于 type="submit" 和 type="image") |
formnovalidate | formnovalidate |
覆盖表单的 novalidate 属性。 如果使用该属性,则提交表单时不进行验证。 |
formtarget |
|
覆盖表单的 target 属性。 (适用于 type="submit" 和 type="image") |
height |
|
定义 input 字段的高度。(适用于 type="image") |
list | datalist-id | 引用包含输入字段的预定义选项的 datalist 。 |
max |
|
规定输入字段的最大值。 请与 "min" 属性配合使用,来创建合法值的范围。 |
maxlength | number | 规定输入字段中的字符的最大长度。 |
min |
|
规定输入字段的最小值。 请与 "max" 属性配合使用,来创建合法值的范围。 |
multiple | multiple | 如果使用该属性,则允许一个以上的值。 |
name | field_name | 定义 input 元素的名称。 |
pattern | regexp_pattern |
规定输入字段的值的模式或格式。 例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。 |
placeholder | text | 规定帮助用户填写输入字段的提示。 |
readonly | readonly | 规定输入字段为只读。 |
required | required | 指示输入字段的值是必需的。 |
size | number_of_char | 定义输入字段的宽度。 |
src | URL | 定义以提交按钮形式显示的图像的 URL。 |
step | number | 规定输入字的的合法数字间隔。 |
type |
|
规定 input 元素的类型。 |
value | value | 规定 input 元素的值。 |
width |
|
定义 input 字段的宽度。(适用于 type="image") |
<form>的属性:
属性 | 值 | 描述 |
---|---|---|
accept | MIME_type | HTML 5 中不支持。 |
accept-charset | charset_list | 规定服务器可处理的表单数据字符集。 |
action | URL | 规定当提交表单时向何处发送表单数据。 |
autocomplete |
|
规定是否启用表单的自动完成功能。 |
enctype | 见说明 | 规定在发送表单数据之前如何对其进行编码。 |
method |
|
规定用于发送 form-data 的 HTTP 方法。 |
name | form_name | 规定表单的名称。 |
novalidate | novalidate | 如果使用该属性,则提交表单时不进行验证。 |
target |
|
规定在何处打开 action URL。 |
<button>:定义一个按钮,你可能说,我用<input>的type=button,不一样的嘛。<button>标签内可以定义好多东西,图像也可以,比<input>强大
<button type="button">Click Me!</button>
属性 | 值 | 描述 |
---|---|---|
autofocus | autofocus | 规定当页面加载时按钮应当自动地获得焦点。 |
disabled | disabled | 规定应该禁用该按钮。 |
form | form_name | 规定按钮属于一个或多个表单。 |
formaction | url |
覆盖 form 元素的 action 属性。 注释:该属性与 type="submit" 配合使用。 |
formenctype | 见注释 |
覆盖 form 元素的 enctype 属性。 注释:该属性与 type="submit" 配合使用。 |
formmethod |
|
覆盖 form 元素的 method 属性。 注释:该属性与 type="submit" 配合使用。 |
formnovalidate | formnovalidate |
覆盖 form 元素的 novalidate 属性。 注释:该属性与 type="submit" 配合使用。 |
formtarget |
|
覆盖 form 元素的 target 属性。 注释:该属性与 type="submit" 配合使用。 |
name | button_name | 规定按钮的名称。 |
type |
|
规定按钮的类型。 |
value | text | 规定按钮的初始值。可由脚本进行修改。 |
<selet>:创建多选项
<select><option value ="volvo">Volvo</option><option value ="saab">Saab</option><option value="opel">Opel</option><option value="audi">Audi</option>
</select>
属性 | 值 | 描述 |
---|---|---|
autofocus | autofocus | 规定在页面加载后文本区域自动获得焦点。 |
disabled | disabled | 规定禁用该下拉列表。 |
form | form_id | 规定文本区域所属的一个或多个表单。 |
multiple | multiple | 规定可选择多个选项。 |
name | name | 规定下拉列表的名称。 |
required | required | 规定文本区域是必填的。 |
size | number | 规定下拉列表中可见选项的数目。 |
<option>:定义刚才下拉列表的一个选项的
disabled | disabled | 规定此选项应在首次加载时被禁用。 |
label | text | 定义当使用 <optgroup> 时所使用的标注。 |
selected | selected | 规定选项(在首次显示在列表中时)表现为选中状态。 |
value | text | 定义送往服务器的选项值。 |
<optgroup>:看名字就知道,是把<option>分类显示
<select><optgroup label="Swedish Cars"><option value ="volvo">Volvo</option><option value ="saab">Saab</option></optgroup><optgroup label="German Cars"><option value ="mercedes">Mercedes</option><option value ="audi">Audi</option></optgroup>
</select>
必需的属性
属性 | 值 | 描述 |
---|---|---|
label | text | 为选项组规定描述。 |
可选的属性
属性 | 值 | 描述 |
---|---|---|
disabled | disabled | 规定禁用该选项组。 |
<label>:为<input>服务,相当给出一个标记,如果触发就怎样怎样
<form><label for="male">Male</label><input type="radio" name="sex" id="male" /><br /><label for="female">Female</label><input type="radio" name="sex" id="female" />
</form>
属性 | 值 | 描述 |
---|---|---|
for | id | 规定 label 绑定到哪个表单元素。 |
form | formid | 规定 label 字段所属的一个或多个表单。 |
<fieldset>:就是对<input>进行一个区域划分
<form><fieldset><legend>health information</legend>height: <input type="text" />weight: <input type="text" /></fieldset>
</form>
属性 | 值 | 描述 |
---|---|---|
disabled | disabled | 规定应该禁用 fieldset。 |
form | form_id | 规定 fieldset 所属的一个或多个表单。 |
name | value | 规定 fieldset 的名称。 |
<legend>:就是<fieldset>的名字标签
菜鸟学前端之遍寻名师相关推荐
- 菜鸟学前端之遍寻名师之混乱的笔记
写在前面:本系列文章仅用于作者记笔记方便回顾,其中绝大部分内容来自w3cschool,想要学习的可以直接去. 在学习标签之前,将那几个标准属性(全局属性)谈一下,要不然对标签功能理解会有障碍. acc ...
- 菜鸟学前端--javascript基础
在学习过css相关的知识,有了前端工程师的一些基础知识.但要较好的掌握前端,必须要学习好javascript的知识. 下面将从基本语法.变量.关键字.保留字.语句.函数.BOM等角度阐释. 一.基本语 ...
- 菜鸟学前端之初入江湖
网页存储在服务器端,客户用着客户端,网页通过浏览器显示出来,其中一种标签语言很重要:HTML(HyperTextMarkupLanguage),超文本标记语言. HTML通过标记标签来显示网页,标签就 ...
- 登录页面html代码菜鸟,CSS+html登录界面(菜鸟学前端)
html> 龙首观景苑-登录 body { background:url(image/8.gif ); background-size:1900px 1000px; background-rep ...
- 从零开始学前端:if判断,for循环,,switch判断 --- 今天你学习了吗?(JS:Day4)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:中括号代替点操作,获取对象,自定义标签属性 - 今天你学习了吗?(JS:Day3) 文章目录 从零开始学前端 ...
- 从零开始学前端:过渡和动画 --- 今天你学习了吗?(CSS:Day20)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:flex布局 - 今天你学习了吗?(CSS:Day19) 文章目录 从零开始学前端:程序猿小白也可以完全掌 ...
- 从零开始学前端:CSS复合选择器 --- 今天你学习了吗?(CSS:Day10)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS背景颜色 - 今天你学习了吗?(CSS:Day09) 文章目录 从零开始学前端:程序猿小白也可以完全 ...
- 零基础转行Web前端开发自学靠谱吗?菜鸟学习前端的方法分享
Web 前端开发行业长期处于供不应求的状态,薪资待遇也随之水涨船高,因此吸引了不少零基础转业者.那么,可能会有人问了:零基础转行Web 前端开发自学靠谱吗?这个问题没有确切的答案,毕竟每个人的情况都不 ...
- 菜鸟学Linux 第093篇笔记 keepalived
菜鸟学Linux 第093篇笔记 keepalived 内容总览 keepalived介绍 配置keepalived的ipvs功能 keepalived的几个问题解决方法 keepalived 它可以 ...
最新文章
- 祝贺黑龙江馆正式入驻波特城暨龙商龙企龙品走向全球化启动仪式圆满成功
- java编写代码时易出错_JAVA中易出错的小问题(一)
- MySql Workbench 安全模式(safe mode)
- 职中心得体会300字高一计算机,职业高中毕业的自我鉴定范文300字
- Vue2.0项目安装Mint-UI - cmd篇
- MyMathLib系列(行列式计算2)
- 我的游戏学习日志17——游戏元素的解析(1)
- 汇编笔记1:debug
- 质量评估指标:PSNR(Peak signal-to-noise ratio 峰值信噪比)
- Excel中无法查找和替换
- 服务器IP变更后如果更新openfire 服务IP
- [转载]一位也许是真正的hack说的话
- 诺贝尔奖得主纳什夫妇因车祸去世
- 火影七代目的青鸟誓言
- css、HTML制作小米商城网页(二)
- python fft ifft
- Tomcat多实例与负载均衡
- Protocol handler start failed
- 如何获取京东微信小程序页面路径
- 公众号排版|点击图片播放音乐你不会还不会吧
热门文章
- linux删除之前的文件在哪里,Linux下,如何将最后修改时间在某个时间之前的文件删除去?...
- java log4j logback jcl_知识总结-Java日志框架Log4j、Log4j2、logback、slf4j、简介
- 苹果原壁纸高清_苹果壁纸 | 高清图片全面屏壁纸
- ML之Clustering之普聚类算法:普聚类算法的相关论文、主要思路、关键步骤、代码实现等相关配图之详细攻略
- DL之FasterR-CNN:Faster R-CNN算法的简介(论文介绍)、架构详解、案例应用等配图集合之详细攻略
- Py之PyMySQL:Python库之PyMySQL的简介、安装、使用方法之详细攻略
- Appium录制脚本520-2
- LeetCode第19题;删除链表的倒数第N个节点
- Bootstrp--一个导航面板切换的实用例子
- Django路由分发