HTML5基础一——元素、属性、格式化、样式、链接、表格、列表、块、布局

开始学习html5,自己记录学习笔记,基本上是代码
开发工具:Intellij IDEA或者HBuilder
首先学习的自然是html标签语言,其实w3cschool中都有,我上传W3Cschool电子版可以下载看更全面。
第一天,基本标签使用:

<!DOCTYPE html>
<html>
<head lang="en">
    <Meta charset="UTF-8">
    <title>元素、属性、格式化、样式、链接、表格、列表、块、布局</title>
    <!--本地样式链接-->
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <link rel="stylesheet" type="text/css" href="div.css">
    <!--段落的样式-->
    <style type="text/css"> p{ color: aqua; } </style>
    <!--id为span的样式-->
    <style type="text/css"> span{ color: blueviolet; } </style>
</head>
<body background="">
    <h1 align="right">标题</h1>
    <p >第一段</p>
    <p style="color: bisque"><b>第二</b><br/><i>二段</i><strong>二段</strong><sub>e</sub>二段<ins>二段</ins><del>二段</del></p>
    <!--超链接-->
    <a href="http://www.ctrip.com/?allianceid=1328&sid=1643&ouid=000401app-&utm_medium=&utm_campaign=&utm_source=&isctrip=" target="_blank">旅游</a>
    <a href="http://www.ctrip.com/?allianceid=1328&sid=1643&ouid=000401app-&utm_medium=&utm_campaign=&utm_source=&isctrip=" target="_blank">
     <img src="img/129.jpg" width="200px" height="200px" alt="html5logo">
    </a>
<!--表格-->
    <table border="1" cellpadding="20px" cellspacing="10xp" background="img/129.jpg">
        <caption>表格</caption>
         <tr>
            <th>表头1</th> <th>表头2</th>
         </tr>
         <tr>
            <td></td><td>单元格2</td>
         </tr>
        <tr>
            <td>单元格1</td><td>单元格2</td>
        </tr>
    </table>
<!--表格嵌套-->
<table border="1">
    <caption>表格</caption>
    <tr>
        <th>表头1</th> <th>表头2</th>
    </tr>
    <tr>
        <td>
            <ul>
                <li>1</li><li>2</li><li>3</li>
            </ul>
        </td>
        <td>
            <ol>
                <li>1</li><li>2</li><li>3</li>
            </ol>
        </td>
    </tr>
</table>
<!--无序列表-->
<ul type="circle">
    <li>a</li>
    <ul> <li>aj fa</li><li>aghlkaj</li></ul>
    <li>b</li>
    <ul> <li>aj fa</li><li>aghlkaj</li></ul>
    <li>c</li>
</ul>
<!--有序列表-->
<ol type="circle">
    <li>a</li>
    <ul> <li>aj fa</li><li>aghlkaj</li></ul>
    <li>b</li>
    <ul> <li>aj fa</li><li>aghlkaj</li></ul>
    <li>c</li>
</ol>
<!--其他列表-->
<dl>
    <dt>helloworld</dt>
    <dd>每个语言都要答</dd>
    <dt>helloworld</dt>
    <dd>每个语言都要答</dd>
    <dt>helloworld</dt>
    <dd>每个语言都要答</dd>
</dl>

<!--快-->
<p>大家好</p>
<h1>加好</h1>
<div id="divid">
    <a>大家好div样式</a>
</div>
<div id="p">
  <p>这是个什么测绘<span>hahhahhah</span></p>
</div>
</body>
</html>

样式文件:mystytle.css

h1{ color:red; }

样式文件:div.css

#divid{ color:yellow; }

这里先学习了怎么用,更多css样式后面学习。

更多交流可加技术讨论群:71262831
扫一扫,一起坐看风云变幻。扫描下方二维码关注it达人(也可微信搜索:it达人)。
为您推送最新开发资源、分享it牛人职业发展经验:

这里写图片描述

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码