您的位置：首页 > Web前端 > HTML

HTML——基础教程 w3cschool（一）

2016-10-10 10:43 375 查看

HTML——基础教程 w3cschool（一）

Html标签HTML HyperTextMaekupLanguage 超文本标签语言HTML 网页的“源码”浏览器：”解释和执行” HTML源码的工具HTML版本HTML4.1.0HTML5： 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>

表单元素

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航