欢迎大家来到IT世界,在知识的湖畔探索吧!
前端学习第四天 2016.12.03
HTML 列表
HTML 支持有序、无序和定义列表:
HTML 列表
| 有序列表1. The first list item2. The second list item3. The third list item | 无序列表· List item· List item· List item |
HTML无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <li> 标签
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
浏览器显示如下：
· Coffee
· Milk
HTML 有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项项使用数字来标记。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
浏览器中显示如下：
1. Coffee
2. Milk
HTML 自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
浏览器显示如下：
Coffee
– black hot drink
Milk
– white cold drink
注意事项 – 有用提示
提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
Html列表标签
Html区块
HTML <div> 和<span>
HTML 可以通过 <div> 和 <span>将元素组合起来。
HTML 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>
HTML <div> 元素
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
HTML <span> 与元素
HTML <span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
HTML 分组标签
| 标签 | 描述 |
| <div> | 定义了文档的区域，块级 (block-level) |
| <span> | 用来组合文档中的行内元素， 内联元素(inline) |
Html布局
网页布局对改善网站的外观非常重要。
请慎重设计您的网页布局。
网站布局
大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。
大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
﹡虽然可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 – 表格不是布局工具！
HTML 布局 – 使用<div> 元素
div 元素是用于分组 HTML 元素的块级元素。
下面的例子使用五个 div 元素来创建多列布局：
实例
<!DOCTYPE html>
<html>
<body>
<div id=”container” style=”width:500px”>
<div id=”header” style=”background-color:#FFA500;”>
<h1 style=”margin-bottom:0;”>Main Title of Web Page</h1></div>
<div id=”menu” style=”background-color:#FFD700;height:200px;width:100px;float:left;”>
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id=”content” style=”background-color:#EEEEEE;height:200px;width:400px;float:left;”>
Content goes here</div>
<div id=”footer” style=”background-color:#FFA500;clear:both;text-align:center;”>
Copyright © W3Cschools.com</div>
</div>
</body>
</html>
运行结果是
HTML 布局 – 使用表格
使用 HTML <table> 标签是创建布局的一种简单的方式。
大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
下面的例子使用三行两列的表格 – 第一和最后一行使用 colspan 属性来横跨两列：
实例
<!DOCTYPE html>
<html>
<body>
<table width=”500″ border=”0″>
<tr>
<td colspan=”2″ style=”background-color:#FFA500;”>
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr>
<td style=”background-color:#FFD700;width:100px;”>
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style=”background-color:#EEEEEE;height:200px;width:400px;”>
Content goes here</td>
</tr>
<tr>
<td colspan=”2″ style=”background-color:#FFA500;text-align:center;”>
Copyright © W3Cschools.com</td>
</tr>
</table>
</body>
</html>
这组代码运行结果是
HTML 布局 – 有用的提示
Tip: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。
Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。
HTML 布局标签
| 标签 | 描述 |
| <div> | 定义文档区块，块级(block-level) |
| <span> | 定义 span，用来组合文档中的行内元素。 |
其实这些主要让我们看到网站的本质，我感觉日后直接在网路上找一些优秀的版面再进行优化，那样能节省很多的时间。
Html表单
HTML 表单和输入
HTML 表单用于搜集不同类型的用户输入。
HTML 表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:
<form>
.
input elements
.
</form>
HTML 表单 – 输入元素
多数情况下被用到的表单标签是输入标签（<input>）。
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
文本域（Text Fields）
文本域通过<input type=”text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<form>
First name: <input type=”text” name=”firstname”><br>
Last name: <input type=”text” name=”lastname”>
</form>
浏览器显示如下：
First name:
Last name:
注意:表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。
密码字段
密码字段通过标签<input type=”password”> 来定义:
<form>
Password: <input type=”password” name=”pwd”>
</form>
浏览器显示效果如下:
Password:
注意:密码字段字符不会明文显示，而是以星号或圆点替代。
单选按钮（Radio Buttons）
<input type=”radio”> 标签定义了表单单选框选项
<form>
<input type=”radio” name=”sex” value=”male”>Male<br>
<input type=”radio” name=”sex” value=”female”>Female
</form>
浏览器显示效果如下:
Male
Female
复选框（Checkboxes）
<input type=”checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<form>
<input type=”checkbox” name=”vehicle” value=”Bike”>I have a bike<br>
<input type=”checkbox” name=”vehicle” value=”Car”>I have a car
</form>
浏览器显示效果如下:
I have a bike
I have a car
提交按钮(Submit Button)
<input type=”submit”> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:
<form name=”input” action=”html_form_action.php” method=”get”>
Username: <input type=”text” name=”user”>
<input type=”submit” value=”Submit”>
</form>
浏览器显示截图效果如下:
假如您文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 “html_form_action.php” 的页面。该页面将显示出输入的结果。
Html框架
通过使用框架，可以在同一个浏览器窗口显示不止一个页面
iframe语法:
<iframe src=”URL”></iframe>
该URL指向不同的网页。
Iframe – 设置高度与宽度
height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如：”80%”).
实例
<iframe src=”demo_iframe.htm” width=”200″ height=”200″></iframe>
Iframe – 移除边框
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 “0” 移除iframe的边框:
实例
<iframe src=”demo_iframe.htm” frameborder=”0″></iframe>
使用iframe来显示目录链接页面
iframe可以显示一个目标链接的页面
目标链接的属性必须使用iframe的属性，如下实例:
实例
<iframe src=”demo_iframe.htm” name=”iframe_a”></iframe>
<p><a href=”” target=”iframe_a”>RUNOOB.COM</a></p>
HTML 颜色
HTML 颜色采用的是RGB颜色，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色。
Color Values
HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
HTML 脚本
JavaScript 使 HTML 页面具有更强的动态和交互性。
HTML <script> 标签
<script> 标签用于定义客户端脚本，比如 JavaScript。
<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出”Hello World!”：
实例
<script>
document.write(“Hello World!”)
</script>
HTML<noscript> 标签
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：
实例
<script>
document.write(“Hello World!”)
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
Javascript需要多多练习，其内容丰富，各位可以去搜一些它的教程。
周末的原因，今天学的多了一些，自学这几天，我感觉html属于标签类，只要把标签的意义记住，用法明白，html就算是入门了。当然这么多标签，肯定不是都常用，我们去了解一下记住常用的，不会用太多精力的，好了今天就学到这了。
欢迎大家留言讨论，本人也是从小白开始学习，有错误的地方恳请路过的大神一定要指出，我好纠正不能因为我而误导别人。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/35426.html
