HTML——基础教程 w3cschool（一）

来源：互联网发布：快递打印单软件编辑：程序博客网时间：2024/06/06 20:03

HTML——基础教程 w3cschool（一）

Html标签

HTML HyperTextMaekupLanguage 超文本标签语言

HTML 网页的“源码”

浏览器：”解释和执行” HTML源码的工具

HTML版本

HTML4.1.0

HTML5： HTML的最新版本，是HTML、XHTML以及HtmlDom的新标准。

Html 标签是最基本的单位和重要组成。

使用< > < > 括起来；

标签都是闭合的。

属性是标签的一部分,用于包含额外信息

可以有多个属性

属性和属性值成对出现

语法

注释

HTML文档结构

<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
            <P>
                  Title
            </P>
</body>
</html>

使用<link>标签连接CSS文件

使用<meta>标签 1描述文档类型和字符编码

2描述搜索关键字和描述

标签的分类

块级标签，显示为块，前后隔一行；

行级标签，按行逐一显示

标题<h1>......<h6>

<hr/>水平线
<p></p>段落

<br>为换行

<img src="http://www.w3school.com.cn/i/eg_smile.gif" alt="路径不对"/>

<span style="font-size: 50px;color: #fa111e">部分字加特技</span></p>
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 空格
<iframe src="http://baidu.com" width="100%"></iframe> 添加网址

<ul type="none" >    <li style="width:10%;float:left;margin-top: 3px" >首&nbsp;&nbsp;&nbsp;页</li>    <li style="width:12.5%;float:left;margin-top: 3px">家用电器</li>    <li style="width:12.5%;float:left;margin-top: 3px">手机数码</li>    <li style="width:12.5%;float:left;margin-top: 3px">日用百货</li>    <li style="width:12.5%;float:left;margin-top: 3px">书&nbsp;&nbsp;&nbsp;籍</li>    <li style="width:12.5%;float:left;margin-top: 3px">帮助中心</li>    <li style="width:12.5%;float:left;margin-top: 3px">免费开店</li>    <li style="width:12.5%;float:left;margin-top: 3px">全球咨询</li></ul>

用于布局的块级标签——列表

无序列表

有序列表

定义描述列表

</p><h1>今天是十月一</h1><h2>今天是十月一</h2><h3>今天是十月一</h3><h4>今天是十月一</h4><h5>今天是十月一</h5><h6>今天是十月一</h6><!--有序列表--><h3>有序列表</h3><ol>    <li>填写信息</li>    <li>收到邮件</li>    <li>注册成功</li>    <li>哈哈哈</li></ol><h3>无序列表</h3><ul>    <li>填写信息</li>    <li>收到邮件</li>    <li>注册成功</li>    <li>哈哈哈</li></ul><dl>    <dt><h3>自定义描述标签标题</h3></dt>    <dd>描述1</dd>    <dd>描述2</dd></dl><dl>    <dt><img src="../img/b.jpg" height="100" width="100"/></dt>    <dd>自定义列表图文混编描述1</dd>    <dd>描述2</dd></dl>

         音频+视频<!--<audio src="../music/姜文生%20-%20平凡之路+归.mp3"autoplay  controls="controls"></audio>--><!--播放音频--><!--<audio controls autoplay>-->    <!--<source  src="../music/姜文生%20-%20平凡之路+归.mp3"  type="audio/mpeg">-->    <!--<source  src="../music/姜文生%20-%20平凡之路+归.mp3" type="audio/ogg">-->    <!--<embed height="50" width="100" src="../music/姜文生%20-%20平凡之路+归.mp3" ></embed>--><!--</audio>--><video width="320" height="240" controls>    <source src="../mp4/完整版.mp4" type="video/mp4">    <source src="../mp4/完整版.mp4" type="video/ogg">    <source src="../mp4/完整版.mp4" type="video/webm">    <object data="../mp4/完整版.mp4" width="320" height="240">        <embed src="movie.swf" width="320" height="240">    </object></video>

表格

<table border="1px" style="width: 600px;height: 400px;border: 5px solid red"cellpadding="20dp"><tr>        <th>标题</td>        <th>回复/阅读</th>        <th>发表</th>        <th>最后回复</th>    </tr>    <tr >        <td rowspan="2">公告：我为圣诞狂</td>        <td>99/100</td>        <td>火车王</td>        <td>我为圣诞狂</td>    </tr>    <tr>        <td>99/100</td>        <td colspan="2">火车王</td>    </tr></table>

表单元素

[html] view plain copy
 
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
</head>  
<body>  
<iframe src="http://baidu.com" width="100%"></iframe>  
  
<fieldset>  
    <legend> 标题</legend>  
    <form action="" method="post">  
        <div style="width: 1000px;height: 500px;background-color: #0c63ff ;overflow: auto">  
            <table border="2px" style="width: 1000px;height:800px;border-spacing: 0px">  
                <tr>  
                    <td>登录名：</td>  
                    <td><input type="text" id="text" name="text">（可包含a-z，0-9和下划线）</td>  
                    <td><b>阅读贵美网服务协议</b></td>  
                </tr>  
                <tr>  
                    <td>密码</td>  
                    <td><input type="password" id="text1" name="text">（至少包含6个字符）</td>  
                    <td rowspan="8" ><textarea rows="50" cols="30" onfocus="this.value=''">欢迎阅读服务条款协议.......</textarea></td>  
                </tr>  
                <tr>  
                    <td>再次输入密码：</td>  
                    <td><input type="password" id="text2" name="text"></td>  
                </tr>  
                <tr>  
                    <td>电子邮箱：</td>  
                    <td><input type="text" id="text4" name="text">（必须包含@字符）</td>  
               </tr>  
                <tr>  
                    <td>性别：</td>  
                    <td><input type="radio" id="r1" name="r1" value="男">男  
                        <input type="radio" id="r2" name="r1" value="女">女  
                    </td>  
                </tr>  
                <tr>  
                    <td>头像：</td>  
                    <td><input type="file" name="file"></td>  
                </tr>  
                <tr>  
                    <td>爱好：</td>  
                    <td>  
                        <input type="checkbox" name="chb" value="运动">运动  
                        <input type="checkbox" name="chb" value="聊天">聊天  
                        <input type="checkbox" name="chb" value="玩游戏">玩游戏  
                    </td>  
                </tr>  
                <tr>  
                    <td>喜欢城市</td>  
                    <td><select>  
                        <option>【请选择】</option>  
                        <option>烟台2</option>  
                        <option>烟台3</option>  
                    </select></td>  
                </tr>  
                <tr>  
                    <td></td>  
                    <td><input type="button" value="同意右侧服务条款，提交注册信息" disabled>  
                        <input type="button" value="重填" >  
                    </td>  
                </tr>  
  
            </table>  
            </div>  
        </form>  
    </fieldset>  
</body>  
</html>

盒模型

[html] view plain copy
 
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <style>  
        .d1{  
            background-color: #fa111e;  
            width: 300px;  
            height: 500px;  
            float: left;  
        }  
        .d2{  
            background-color: #55fa37;  
            width: 300px;  
            height: 500px;  
            float: left;  
        }  
        .d3{  
            background-color: #5d71fa;  
            width: 300px;  
            height: 500px;  
            float: left;  
        }  
        .d4{  
            background-color: #251c3b;  
            width: 300px;  
            height: 500px;  
            clear: left;  
            float: left;  
        }  
        .d5{  
            background-color: #9b256b;  
            width: 300px;  
            height: 500px;  
            float: left;  
            position: relative;  
            top: 20px;  
            left: 20px;  
        }  
        .d6{  
              background-color: #8d7ab5;  
              width: 300px;  
              height: 500px;  
              clear: left;  
            position: relative;  
          }  
        .d7{  
            background-color: #3db54e;  
            width: 130px;  
            height: 150px;  
            position: absolute;  
            top: 30px;  
        }  
    </style>  
</head>  
<body>  
<div class="d1"></div>  
<div class="d2"></div>  
<div class="d3"></div>  
<div class="d4"></div>  
<div class="d5"></div>  
<div class="d6">  
    <div class="d7"></div>  
</div>  
</body>  
</html>

弹性盒模型

[html] view plain copy
 
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>弹性盒模型</title>  
    <style>  
        #main{  
            display: flex;  
            width: 90%;  
            height: 100px;  
            margin: auto;  
            border: 2px solid red;  
        }  
        #main div{  
            flex: 1;  
        }  
    </style>  
</head>  
<body>  
  
<div id="main">  
    <div style="background-color: #9b256b"></div>  
    <div style="background-color: #18279b"></div>  
    <div style="background-color: #faf915"></div>  
    <div style="background-color: #fa111e"></div>  
</div>  
  
</body>  
</html>  
盒模型

[html] view plain copy
 
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>盒模型</title>  
    <style>  
        body{  
            border: 5px solid blue;  
            /*padding: 20px;*/  
  
        }  
        .div{  
            border: 5px solid red;  
            background-color: #faf915;  
            padding: 20px;  
            margin: 20px;  
            width: 80px;  
            height: 150px;  
        }  
    </style>  
</head>  
<body>  
<div class="div">  
    我是火车王  
</div>  
</body>  
</html>

0 0