<meta charset="utf-8">
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的框架中打开
<iframe src="http://www.baidu.com" name="iframe_a">
<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 元素。表单用于向服务器传输数据。
<form action="form_action.asp" method="post">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
method默认为get,所以需要提交数据时需要改成post;action="form_action.asp" action即为数据提交到的地址;
如果form表单里无提交按钮则无法提交数据;
noscript标签----
noscript 标签中的元素中的内容只有在下列情况下才会显示出来:
- 浏览器不支持脚本
- 浏览器支持脚本,但脚本被禁用
符合上述任何一个条件,浏览器都会显示 noscript 中的内容。而在除此之外的其他情况下,浏览器不会呈现 noscript 中的内容。
img标签----
全称Image;向网页中嵌入一幅图像。
<img src="mdn-logo-sm.png" alt="MDN">
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>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
</dl>
div标签----
全称Division;没有语义;默认的css属性为block元素,一般情况下自己在class添加需要识别的语义。
<div class="xxx">
无语义
</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>
<article>
<h2>Red Delicious</h2>
<p>These bright red apples are the most common found in many
supermarkets.</p>
<p>... </p>
<p>... </p>
</article>
</main>
h1~h6标签----
全称head;标题的6种格式。
<h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6>
p标签----
全称Paragraph;文本段落。
<p>这是第一个段落。这是第一个段落。 这是第一个段落。这是第一个段落。 </p>
hr标签----
全称Horizontal Rule水平线;作为分割线使用。
br标签----
全称Break;强制换行。
<p>马上要换行了
已换行</p>