HTML基础知识整理
来源:互联网 发布:飞思卡尔单片机与pic 编辑:程序博客网 时间:2024/06/18 09:56
空HTML元素的关闭:
从< br >到< /br >
HTML对标签大小写不敏感,但是一般推荐小写
HTML属性:
属性例子 1:
< h1 align=”center”> 拥有关于对齐方式的附加信息。
属性例子 2:
< body bgcolor=”yellow”> 拥有关于背景颜色的附加信息。
属性例子 3:
< table border=”1”> 拥有关于表格边框的附加信息。
始终为属性值加引号:
属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:
name=’Bill “HelloWorld” Gates’
< hr />用于创建水平线
HTML 注释
可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。
注释是这样写的:
<!-- This is a comment -->
预格式文本:
< pre>< /pre>标签可以保证内容中的空格保留
缩写和首字母缩写:
<abbr title="etcetera">etc.</abbr><br /><acronym title="World Wide Web">WWW</acronym>
块引用:
长引用是< blockquote>< /blockquote>
短引用是< q>< /q>
删除字和引用字效果:
分别是< del>和< ins>
用于联系信息的 HTML < address>
HTML < address> 元素定义文档或文章的联系信息(作者/拥有者)。
此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。
条件注释
<!--[if IE 8]> .... some HTML here ....<![endif]-->
条件注释定义只有 Internet Explorer 执行的 HTML 标签。
样式使用三种方法:
外部样式表(通过link引入)
内部样式表(head标签里写style)
内联样式表(直接对元素写style=”“)
如何链接到一个页面的不同位置:
<html><body><p><a href="#C4">查看 Chapter 4。</a></p><h2>Chapter 1</h2><p>This chapter explains ba bla bla</p><h2>Chapter 2</h2><p>This chapter explains ba bla bla</p><h2>Chapter 3</h2><p>This chapter explains ba bla bla</p><h2><a name="C4">Chapter 4</a></h2><p>This chapter explains ba bla bla</p><h2>Chapter 5</h2><p>This chapter explains ba bla bla</p><h2>Chapter 6</h2><p>This chapter explains ba bla bla</p><h2>Chapter 7</h2><p>This chapter explains ba bla bla</p><h2>Chapter 8</h2><p>This chapter explains ba bla bla</p><h2>Chapter 9</h2><p>This chapter explains ba bla bla</p><h2>Chapter 10</h2><p>This chapter explains ba bla bla</p></body></html>
图像的alt属性以及title属性
alt属性的内容是当图片不可见时显示,title属性是鼠标移到图标上时显示
表格:
<h4>两行三列:</h4><table border="1"><tr> <td>100</td> <td>200</td> <td>300</td></tr><tr> <td>400</td> <td>500</td> <td>600</td></tr></table>
表格的表头:
<tr><th>Heading</th><th>Another Heading</th></tr>
表格中的空单元格:
<td> </td>
可以保证这个空单元格不显示,如果没有占位符 &n bsp;
那么这个单元格就会显示
表格标题:
<caption>我的标题</caption>
横跨两列的单元格:
<tr> <th rowspan="2">电话</th> <td>555 77 854</td></tr>
单元格边距:
<table border="1" cellpadding="10"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table>
单元格间距:
<table border="1" cellspacing="10"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table>
在表格单元中排列内容:
<table width="400" border="1"> <tr> <th align="left">消费项目....</th> <th align="right">一月</th> <th align="right">二月</th> </tr> <tr> <td align="left">衣服</td> <td align="right">$241.10</td> <td align="right">$50.20</td> </tr> <tr> <td align="left">化妆品</td> <td align="right">$30.00</td> <td align="right">$44.45</td> </tr> <tr> <td align="left">食物</td> <td align="right">$730.40</td> <td align="right">$650.00</td> </tr> <tr> <th align="left">总计</th> <th align="right">$1001.50</th> <th align="right">$744.65</th> </tr></table>
无序列表:ul->li
有序列表:ol->li
使用 HTML5 的网站布局:
HTML5 提供的新语义元素定义了网页的不同部分:
HTML5 语义元素
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容(比如侧栏)
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题
框架frame
垂直框架
<frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"></frameset>
水平框架
<frameset rows="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"></frameset>
使用 iframe 作为链接的目标
iframe 可用作链接的目标(target)。
链接的 target 属性必须引用 iframe 的 name 属性:
<body><iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe><p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p><p><b>注释:</b>由于链接的目标匹配 iframe 的名称,所以链接会在 iframe 中打开。</p></body>
HTML的js脚本文件问题
如果浏览器压根没法识别 < script> 标签,那么 < script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生,你应该将脚本隐藏在注释标签当中。那些老的浏览器(无法识别 < script> 标签的浏览器)将忽略这些注释,所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们,即使代码被嵌套在注释标签内。
<script type="text/javascript"><!--document.write("Hello World!")//--></script>
HTML头部元素
所有链接一个目标
使用 base 标签使页面中的所有标签在新窗口中打开。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Content-Language" content="zh-cn" /><base target="_blank" /></head><body><p><a href="http://www.w3school.com.cn" target="_blank">这个连接</a> 将在新窗口中加载,因为 target 属性被设置为 "_blank"。</p><p><a href="http://www.w3school.com.cn">这个连接</a> 也将在新窗口中加载,即使没有 target 属性。</p></body></html>
重定向用户
把用户重定向到新的网址。
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /></head><body><p>对不起。我们已经搬家了。您的 URL 是 <a href="http://www.w3school.com.cn">http://www.w3school.com.cn</a></p><p>您将在 5 秒内被重定向到新的地址。</p><p>如果超过 5 秒后您仍然看到本消息,请点击上面的链接。</p></body></html>
HTML < meta> 元素
针对搜索引擎的关键词
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
下面的 meta 元素定义页面的描述:
meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
下面的 meta 元素定义页面的关键词:
<meta name="keywords" content="HTML, CSS, XML" />
name 和 content 属性的作用是描述页面的内容。
HTML表单元素:
method为get时,表单提交时数据会暴露
method为post时,表单提交时链接数据隐藏
Name 属性
如果要正确地被提交,每个输入字段必须设置一个 name 属性。
本例只会提交 “Last name” 输入字段:
<form action="action_page.php">First name:<br><input type="text" value="Mickey"><br>Last name:<br><input type="text" name="lastname" value="Mouse"><br><br><input type="submit" value="Submit"></form>
HTML表单输入类型:
text、password、submit、radio、checkbox、button、number、date、color、month、week、time、datetime、email、search、tel、url
HTML表单属性:
accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。
action 规定向何处提交表单的地址(URL)(提交页面)。
autocomplete 规定浏览器应该自动完成表单(默认:开启)。
enctype 规定被提交数据的编码(默认:url-encoded)。
method 规定在提交表单时所用的 HTTP 方法(默认:GET)。
name 规定识别表单的名称(对于 DOM 使用:document.forms.name)。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标(默认:_self)。
HTML表单输入限制:
disabled 规定输入字段应该被禁用。
max 规定输入字段的最大值。
maxlength 规定输入字段的最大字符数。
min 规定输入字段的最小值。
pattern 规定通过其检查输入值的正则表达式。
readonly 规定输入字段为只读(无法修改)。
required 规定输入字段是必需的(必需填写)。
size 规定输入字段的宽度(以字符计)。
step 规定输入字段的合法数字间隔。
value 规定输入字段的默认值。
- HTML基础知识整理
- HTML基础知识整理
- html基础知识整理
- HTML基础知识整理
- HTML基础知识整理
- html和xhtml基础知识整理
- HTML+CSS基础知识整理总结2015.3.9
- HTML+CSS基础知识整理总结2015.3.10
- HTML+CSS基础知识整理总结2015.3.11
- HTML基础知识初次整理(1)
- HTML+CSS基础知识整理总结2015.3.11二
- 基础知识整理
- 基础知识整理
- 基础知识整理
- 基础知识整理
- 整理基础知识
- 基础知识整理
- 基础知识整理
- Linux中chown和chmod使用注意及区别
- CentOS6.5系统安装及LAMP环境安装(yum方式)配置详解(四)
- Jackson 框架,轻易转换JSON
- Codeforces 710 C. Magic Odd Square(构造)——Educational Codeforces Round 16
- c# 连接sqlserver
- HTML基础知识整理
- UVA 11401
- spring学习总结(二)
- Spring MVC @SessionAttributes注解
- CNTK学习笔记 -- Computation Network part 1 -- Forward and Backward Algorithm
- EasyUI学习第四篇:Layout布局
- window 下 nginx php 环境搭建
- linux下svn的安装与配置
- 用js(jQuery)获取table中对应的td中的值!