前端学习(二) 语法(html)

时间:2022-01-07 22:08:07

基本语法:

<h1>我是标题</h1>,对应为:

开始标签   内容主体  结束标签,这三部分组成了一个元素。

但,并不是所有元素都有结束标签,如:

<img src="demo.jpg" alt=demo>,除去<img>外,还有以下标签没有结束标签:

<input>,<meta>,<link>,<area>,<hr>,<br>,<col>,<base>,<embed>,<param>,<source>,<tarck>,<wbr>

另外,元素具有属性,如:<a href=demo.html>跳转</a>,通过属性可以控制元素的行为,表示方式为:属性名=属性值,示例中,href为属性名,demo.html为属性值(注意:如果属性值包含了:空格‘’'=<>等特殊符号,属性值就必须用“”-双引号或‘’-单引号包裹起来,例如<a href="demo=css.html">跳转</a>)。

还有,有部分属性,如<button disabled></button>,其中disabled这个属性的值是空的,那么就可以省略不写,另外该种方式常见于布尔属性,如果出现表示值为true,不出现则表示false,如果一定要写则属性值等于属性名,如<button disabled=disabled></button>。

元素可以嵌套,如:<p>链接是:<a href=demo.html>跳转</a></p>。

html注释方式:<!--内容-->,一定要写注释,方便维护。

全局属性

id属性:<div id="name"></div>,唯一性,整个html文档只能出现一次;

class属性:<div class="name"></div>,可多次出现,定义了一个类名,可定义该元素的属性;

style:<div style="display:none"></div>,通过style定义了元素的样式,但是不建议这么做,不容易维护;

tittle:<div tittle="收藏"></div>,定义了元素的额外信息,当鼠标移动到该元素上时,可出现这个额外的提示信息;

实体字符

表示方式1:&entity_name;

&nbsp;空格)就是一个实体字符

表示方式2:&#entitu_name;

&#160(空格)也是一个实体字符

常用的实体字符有:空格(&nbsp;),“”(&quot;),>(&gt;),<(&lt;),版权 ©(&copy;),&(&amp;)。

举个例子:<input value="这是一个&quot;引号&quot;">

例2:<div>这是一个空格&amp;nbsp;</div>,这样才可以正确的显示空格表示的实体字符