HTML——基础教程 w3cschool

来源：互联网发布：淘宝手机端图片分辨率编辑：程序博客网时间：2024/06/15 10:44

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>;       空格<iframe src="http://baidu.com" width="100%"></iframe> 添加网址<ul type="none" >    <li style="width:10%;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">日用百货</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">全球咨询</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>

表单元素

    <!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>

  
盒模型   <span style="font-size:18px;"> <!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>  </span>



弹性盒模型
  <span style="font-size:14px;">  <!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>  </span>
盒模型
   <span style="font-size:14px;"> <!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>  </span>

0 0