Elementos que uma página da web deve conter
1. O título será exibido na barra de guias da página da Web.
2. Cabeçalho Por exemplo: utf-8 é um formato de texto e alguns estilos podem ser personalizados nele
. 3. O corpo contém o conteúdo de exibição da página da Web, etc.
<!DOCTYPE HTML>
<html>
<head>
<title>Bluesky</title>
<meta charset="utf-8" /> <!--meta是一个虚元素可以用/>自闭起来-->
</head>
<body>
<!--巴拉巴拉-->
</body>
</html>
Algum estilo de conteúdo de
estilo escrito na cabeça em gotas
<!--class设置元素类别,便于应用CSS样式,可以给属性值提供多个用空格分隔的类名,将一个元素归入多个类别-->
<style type="text/css">
.class2 {
background-color:grey;
color:white;
padding:5px;
margin:2px;
}
.class1 {
font-size:x-large;
}
</style>
O formato da declaração de comentário
<!--这是一个注释-->
Alguns nomes de entidades chave
< > & € £ § © ® ™
Quer escrever blocos de código?
<code>
<!--somecode-->
</code>
Quando você descobrir que é inútil digitar uma nova linha diretamente, você precisará do seguinte código
</br><!--这是一个换行-->
Quando você quer uma linha divisória longa e longa
<hr/><!--这是表示分割线的-->
Vamos começar a aprender alguns atributos globais
1. Defina as teclas de atalho
<form>
Name:
<input type="text" title="这里有个快捷键Alt-n" name="name" accesskey="n" tabindex="1"/>
<!--Title在这里可以给元素提供额外信息,为浏览器作工具提示-->
<!-- accesskey设置快捷键Alt-n -->
<!--tabindex设置通过按Tab键切换从1开始,-1表示不能被选中-->
</form>
2. Configure um hiperlink
<a href="http://baidu.com" >my test</a>
<!--a href可以使其变成超链接-->
<!--点击 my test就可跳转到百度网页-->
3. Quer algum tipo de código
<srcipt type="text/javascript">
var elems = document.getElementsByClassName("otherclass");
for(i=0;i<elems.length;++i) {
var x = elems[i];
x.style.boarder = "thin solid black";
x.style.backgroundColor = "white";
x.style.color = "black";
}
</srcipt>
4. Existem algumas pequenas coisas diversas
<p contenteditable="true">It is raining right now.</p>
<!--contenteditable设定为true表示允许用户修改其内容,false则禁止编辑,如果不设定其值,则从父元素继承该值-->
<p dir="rtl">It is right-to-left.</p>
<p dir="ltr">It is left-to-right.</p>
<!--dir规定元素中文字的方向,rtl右到左,ltr左到右-->
<p lang="en">Hello, how are you?</p>
<p lang="fr">Bonjour, comment êtes-vous?</p>
<p lang="es">Hola, ¿cómo estás?</p>
<!--lang说明元素内容所使用的语言,可以改变语言呈现的形式和朗读正确的发音,属性为ISO语言代码-->
<textarea spellcheck="true">
This is some mispelled text.
</textarea>
<!--spellcheck表明浏览器是否应该对元素内容进行拼写检查
只用于用户可以编辑的元素上时才有意义
检查方式依赖于浏览器,通常忽略lang属性,而依据OS的语言设置
错误会有红波浪线-->
<a href="/a.html" style="backgroud-color:grey; color:white">Click me</a>
<!--style内置定义CSS样式-->
<!--contextmenu设置快捷菜单,目前还没有浏览器支持-->
<!--draggable和dropzone表示元素是否可被拖放-->
<!--id给元素分配一个唯一的标识符,用域选择元素,作用样式或者片段导航-->
<!--hidden就是被隐藏,布尔属性,表示元素是否需要关注-->