HTML基础总理

107 阅读5分钟

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

1 预格式文本: < 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<

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

< 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> & nbsp; < /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</t d>

< td>Row</t d>

< r> </ 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">

使用 iframe 作为链接的目标

iframe 可用作链接的目标(target)。 链接的 target 属性必须引用 iframe 的 name 属性:

body>

iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe

p>W3School.com.cn</p

p>注释:由于链接的目标匹配 iframe 的名称,所以链接会在 iframe 中打开。

/body>

HTML的js脚本文件问题 如果浏览器压根没法识别 < script> 标签,那么 < script> 标签所包含的内容将以文本方式显示在页面上。 为了避免这种情况发生,你应该将脚本隐藏在注释标签当中。 那些老的浏览器(无法识别 < script> 标签的浏览器)将忽略这些注释,所以不会将标签的内容显示到页面上。 而那些新的浏览器将读懂这些脚本并执行它们,即使代码被嵌套在注释标签内。

script type="text/javascript" !--

document.write("Hello World!")

//-->

</script

HTML头部元素 所有链接一个目标 使用 base 标签使页面中的所有标签在新窗口中打开。

!DOCTYPE html>

html>

meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

meta http-equiv="Content-Language" content="zh-cn" />

base target="_blank" / /head body

a href="http://www.w3school.com.cn" target="_blank">这个连接/a 将在新窗口中加载, target 属性被设置为 "_blank"。 /p p>

a href="www.w3school.com.cn">这个连接 也将在新窗口中加载, 即使没有 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=www.w3school.com.cn" /

/head>

对不起。我们已经搬家了。您的 URL 是 a href="http://www.w3school.com.cn">http://www.w3school.com.cn

您将在 5 秒内被重定向到新的地址。

如果超过 5 秒后您仍然看到本消息,请点击上面的链接。

/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” 输入字段:

First name:

<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 规定输入字段