9-HTML入门标签（一）

2018-04-11 本文已影响0人格林姆大师

P元素-----

全称：Paragraph段落；<p>我是段落</p>默认的css属性为块级元素。

a标签----

全称：Anchor锚；<a> 元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。3个重要属性：target、href、download。

<a> 元素跳转时发起get请求

<a href="#属性">Description of Same-Page Links页面内</a>

<a href="http://www.baidu.com">External Link百度</a>

target属性：

<a href="http://qq.com" target="_blank">_blank qq</a>

<a href="http://qq.com" target="_self">_self qq</a>

<a href="http://qq.com" target="_parent">_parent qq</a>

<a href="http://qq.com" target="_top">_top qq</a>

target 还可以指向 iframe 标签的 name 属性，

<iframe name="xxx" src="https://im.qq.com" frameborder="0"></iframe>
<a href="https://cn.bing.com" target="xxx">qq_iframe</a>

download属性：

<a href="http://qq.com" download>下载</a> //点击时会执行下载动作

另一种会执行下载动作的情形：当响应的
Content-Type: application/octet-stream 时。
两种条件任意一种都会执行下载动作。

href属性：

<a href="//qq.com" target="_blank">_blank qq</a> 在不写协议的情况下（http），会默认为与当前文件的协议相同，结果为：file://qq.com/

href还有哪些值？？？

<a href="qq.com" >qq</a> //会链接到当前路径下的一个叫qq.com的文件，即为相对路径，结果为：file:///J:/web-project/test/qq.com

<a href="J:\web-project\test00.html">test</a>也可以是绝对路径，结果为：file:///J:/web-project/test/index3.html

<a href="?name=frank" >qq</a> //也可以是查询码，此时也会发起get请求，结果为：file:///J:/web-project/test/test.html?name=frank

href="#xxxx" //当是锚点时，不会发起get请求，#用于页面内的跳转，结果为：file:///J:/web-project/test/test.html#qqq

<a href="javascript: alert(1);">test2</a>

还可以如上是伪协议；或是href="javascript: ;"这样点击之后不会发起任何请求和变化；
href="javascript: ;"、href="#"、href=""三者的区别：
href="javascript: ;"点击之后不会发起任何请求,页面不会有变化；
href="#"点击之后不会发起任何请求,，但是页面会跳到最上面；
href=""点击之后会发起请求,，页面会刷新；

iframe标签----

全称Inline frame；iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。name 属性规定 iframe 的名称。iframe 元素的 name 属性用于在 JavaScript 中引用元素，或者作为a标签链接的目标。即点击a标签的链接会在iframe的框架中打开

<p>Your browser does not support iframes.</p>

</iframe>

<a href="http://www.w3school.com.cn"

target="iframe_a">W3School.com.cn</a>

form标签----

全称form；<form> 标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、

legend 和 label 元素。表单用于向服务器传输数据。

<p>First name: <input type="text" name="fname" /></p>

</form>

method默认为get，所以需要提交数据时需要改成post；action="form_action.asp" action即为数据提交到的地址；

如果form表单里无提交按钮则无法提交数据；

noscript标签----

noscript 标签中的元素中的内容只有在下列情况下才会显示出来：

浏览器不支持脚本
浏览器支持脚本，但脚本被禁用

符合上述任何一个条件，浏览器都会显示 noscript 中的内容。而在除此之外的其他情况下，浏览器不会呈现 noscript 中的内容。

img标签----

全称Image；向网页中嵌入一幅图像。

nav标签----

全称navigation；<nav></nav>描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表.。

<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav>

ul/ol标签----

全称unordered-list/ordered-list；<ul> 元素表示无需列表；<ol>表示有序列表。在使用时，必定会有子元素<li>一同出现。

<ul> <li>first item</li> <li>second item <ol> <li>second item first subitem</li> <li>second item second subitem</li> <li>second item third subitem</li> </ol> </li> <li>third item</li> </ul>

dl标签----

全称Definition List；<dl> 元素（或 HTML 描述列表元素）是一个包含术语定义以及描述的列表。

<dl>

<dd>Godzilla</dd>

</dl>

div标签----

全称Division；没有语义；默认的css属性为block元素，一般情况下自己在class添加需要识别的语义。

无语义

</div>

span标签----

全称span；没有语义；默认的css属性为inline-block元素，一般情况下自己在class添加需要识别的语义。

main标签----

全称main； Main元素(<main>)呈现了文档<body>或应用的主体部分。

<main>

<h1>Apples</h1>

<p>The apple is the pomaceous fruit of the apple tree.</p>

<h2>Red Delicious</h2>

<p>These bright red apples are the most common found in many

supermarkets.</p>

</article>

</main>

h1~h6标签----

全称head；标题的6种格式。

p标签----

全称Paragraph；文本段落。

<p>这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。 </p>

hr标签----

全称Horizontal Rule水平线；作为分割线使用。

br标签----

全称Break；强制换行。

<p>马上要换行了

已换行</p>