html之入门初体验

一个网页必须要包含的元素

1.title 会显示在网页的标签栏中
2.head 例如：utf-8是文字格式，还可以在里面自定一些style
3.body 里包含网页的显示内容等

<!DOCTYPE HTML>
<html>
    <head>
        <title>Bluesky</title>
        <meta charset="utf-8" /> <!--meta是一个虚元素可以用/>自闭起来-->
	</head>
    <body>
        <!--巴拉巴拉-->
    </body>
</html>

style的一些内容
style 写在 head 里滴

<!--class设置元素类别，便于应用CSS样式，可以给属性值提供多个用空格分隔的类名，将一个元素归入多个类别-->
<style type="text/css">
       .class2 {
     
     
           	background-color:grey;
            color:white;
            padding:5px;
            margin:2px;
       }
       .class1 {
     
     
            font-size:x-large;
       }
</style>

注释语句的格式

 <!--这是一个注释-->

一些关键符的实体名称

&lt; &gt; &amp; &euro; &pound; &sect; &copy; &reg; &trade;

想写代码块？

<code>
    <!--somecode-->
</code>

当你发现直接敲换行是没有用的时候，你需要一下代码

</br><!--这是一个换行-->

当你想要一根长长长的分割线

<hr/><!--这是表示分割线的-->

下面开始学习一些全局属性

1.设置快捷键

<form>
    Name:
    <input type="text" title="这里有个快捷键Alt-n" name="name" accesskey="n" tabindex="1"/>
    <!--Title在这里可以给元素提供额外信息，为浏览器作工具提示-->
    <!-- accesskey设置快捷键Alt-n -->
    <!--tabindex设置通过按Tab键切换从1开始，-1表示不能被选中-->
</form>

2.设置超链接

<a href="http://baidu.com" >my test</a>
<!--a href可以使其变成超链接-->
<!--点击 my test就可跳转到百度网页-->

3.想要某种代码

 <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.还有一些小小的杂七杂八的东西

<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就是被隐藏，布尔属性，表示元素是否需要关注-->

猜你喜欢