我爱编程

饥人谷作业 -- html标签

2018-05-23  本文已影响0人  xiaoznz

html标签汇总(目前实力有限,只能想到这么多)

html5的标记 --- <!DOCTAPE html>

接下来是一句:

<html lang="en">或者<html lang="zh-cn">(该项定义了元素的语言,en是英语,zh-cn是中文)

接下来就是一套定式了(当然你可以不写,因为浏览器会给你补全)

<html>

<head></head>(头标签)

<body></body>(主体)

</html>

好了,我们接下来逐个解释这些标签内可以放的标签

<head>中可以放的有<meta><base><link><script><style><title>.....

<meta charset="utf-8">或<meta http-equiv="content-Type";content="test/html";charset="utf-8">(这种主要是给比较菜的后端提供)-----编码声明,告诉浏览器用utf-8来编码

<base>指定一个文档包含所有url的基本url

<title>显示浏览器标题栏或标签页上,如图:

接下来介绍几个和css,js关联的标签:

css 与html的链接方式有四种:style 属性、style 标签、css link、css import

style属性用法很简单,就是直接镶嵌在html标签内:

<p style="color: red;">你好啊</p>

<style>标签用法:一般在<head>标签中使用:

<haed>

<style>这里写css代码</style>

</head>

css link: <style rel="stylesheet" href="style.css">

css import:<style type="text/css">@import"style.css";</style>

而对于js ,也有两种,都用script标签来实现

<script>里面写你要写的代码</script>和<script src="demo.js"></script>

这是head标签的,接下来谈谈body标签那些事,在body中,有如下一堆标签:

<p>,<pre>,<a>,<div>,<span>,<img>,<ul>,<ol>,<input><button>,<dd><dl><dt>,<form>,<table>,<iframe>,<section>,<main>,<article>,<nav>,<header>,<footer>,<canvas>,<b><strong>,<em><i>......

这里一一叙述肯定不可能,我挑几个重要的或者相互之间有关联的来讲:

 <a>可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。

链接到本页的某个部分:<a  href="#xxx">本页某某</a>

链接到外部文件:<a href="http://xxx.com/">外部链接</a>

创建一个可链接文件:<a href="xxx"><img src="xxx" alt="这是可点击图片" /></a>

<ul>和<ol>这是有序和无序列表,他们语法大致相同:

<ul>(<ol>)

<li></li><li></li>........

</ul>(</ol>)

<img>可以用来插入图片,一般写法为<img src="xxx" alt="xxx" />

<p>和<pre>都可以用来插入文本内容,不同的是<pre>是保持文本原样输出

<input>可以创建交互式控件,以便接受来自用户的数据,常用的有如下属性:

button:无缺省行为按钮。

radio:单选按钮。

checkbox: 复选框。

submit:用于提交表单的按钮。

text:单行字段;换行会将自动从输入的值中移除。

hidden:不显示在页面上的控件。

password:一个值被遮盖的单行文本字段。

接着用value和name这些属性给予这些选项或者输入框一定值,从而实现与用户的交互,如图:

<div>以及其他块级标签:

<div>是一个通用型的流内容容器,它在语义上不代表任何特定类型的内容,它可以被用来对其它元素进行分组,一般用于样式化相关的需求(使用 class 或 id 特性) 或者对具有相同特性的一组元素进行分组 (比如 lang),它应该在没有任何其它语义元素可用时才使用 (<header>,<footer>,<aside>,<article>,<nav>,<section>等等)

这里我列举一下我目前见到的块级标签以及用法:

<section>:表示文档中的一个区域(或节),比如,内容中的一个专题组,一般来说会有包含一个标题(heading)

<article>:元素嵌套使用时,则该元素代表与外层元素有关的文章(较section来说比较独立,与外层有关联,section可以加到article中)

<aside>:元素表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响

<main>:主体内容可放在其中

<header>:元素表示一组引导性的帮助,可能包含标题元素,也可以包含其他元素,像logo、分节头部、搜索表单等。

<footer>:表示最近一个章节内容或者根节点(sectioning root )元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

<nav>:描绘一个含有多个超链接的区域,这个区域包含转到其他页面,或者页面内部其他部分的链接列表.

最后,如果上述标签都没有符合的,那么<div>走起

<form>:表示了文档中的一个区域,这个区域包含有交互控制元件,用来向web服务器提交信息,一般配合input的submit属性使用,用于作post请求如图:

最后说一下table,这玩意可一度是用于网页布局的

<table>表示表格数据 — 即通过二维数据表表示的信息

如图,以上显示的就是他所含的元素以及其用法

上一篇 下一篇

猜你喜欢

热点阅读