HTML5基础

来源：互联网发布：microsoft office软件编辑：程序博客网时间：2024/06/05 18:44

- HTML文档的结构

基本结构

<!doctype html><html>  <head>    <meta name="author" content="wcy">    <title>My First HTML File</title>  </head>  <body>    <p>Hello World!</p>  </body></html>

这是一个简单的html文档，包括有doctype声明、head以及body，其中声明必须位于html文档的第一行，对于HTML5文档用的是，对于HTML 4.01和XHTML声明不一样，这里不一一注明了，毕竟现在h5比较通用。

结构详解

head
head标签里边包括有meta元信息，此处只写了author，标识该文档作者为wcy，其它的使用如下：

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />//第一个没整明白，保留。第二个是mime类型，主类型是text，子类型是html，浏览器按此格式来解析文件。第三个是编码格式。<meta http-equiv="Content-Language" content="zh-cn" />//语言，中文-中国。如果是美式英语的话后边改成en-US。用于文档的国际化处理。<meta name="revised" content="whw,26/7/2017">//标识修改者是whw，修改时间是2017.7.26<meta name="generator" content="editplus">//标识编辑软件是editplus<meta name="description" content="HTML examples">//对文档的描述<meta name="keywords" content="HTML, html5">//定义文档的关键词，主要利于搜索引擎的搜索。<meta http-equiv="Refresh" content="5;url=http://www.baidu.com" />//设置超过5s自动重定向到百度首页。一般用于页面搬家啥的。<base target="_blank" />//默认超链接的打开方式为新的页面。<!--最后，html注释应该是这样的，上边的写法只是我的个人习惯-->

head中另一个元素<title>里边的内容会显示在网页标题栏，但是不会显示在文档中。像这样：

网页的标题栏

body
body里边的内容便是html页面的主要呈现了，下边简要介绍一些html的常用元素。
1. 标题<h1>~<h6>。标题的使用最好是作为标题来用而不仅仅只是加粗字体，因为浏览器加载的话会优先加载标题元素。我们需要建立良好的语义化页面，写出更优雅的代码，增强代码的可读性同时也有利于SEO。关于web语义化深入了解的话这里有几篇文章可以看看：
  理解web语义化
  常见的h5语义化标签
  语义化标签
2. 加背景颜色：<body bgcolor="yellow"></body>
3. 加背景图片：<body background="1.jpg"></body>
  注：作为背景图片的时候如果图像小于页面，图像会重复出现用来覆盖整个页面。
4. 加背景音乐：<audio autoplay="autoplay" loop="loop" src="1.mp3">autoplay是让音乐自动播放，loop是添加音乐的循环。对于网页音乐这一块的具体学习可以参考这篇HTML5标签audio添加网页背景音乐代码，写的还是不错的，对audio的深入讲解还有浏览器对各种音频格式的支持情况之类的。
5. 居中排列用<p align="center"></p>，当然，用<center></center>也行，但是后者不推荐使用。貌似是已经废弃了。
6. 画水平线用单标签<hr />

小知识

资源引用
关于资源的引用问题，有点话想说。上述标签例子当中用的文件都是直接用1.jpg、1.mp3等，但其实真正使用的时候都会把这些资源文件放到指定的文件夹中，引用的时候有相对路径和绝对路径两种。下边简单介绍一下：
绝对路径指的是包括从根目录一直到该文件所在位置的一系列路径，比如说http://www.w3school.com.cn/i/w3school_logo_white.gif又或是F:\图片\头像\1.jpg。
但是一般不太推荐绝对路径，因为这样的话程序的可移植性太差，采用相对路径的话注意路径的正确书写：
- 在同级目录下：1.jpg
- 在本文件所在的下一级目录下：images/2.jpg
- 在本文件所在的上一级目录下：../3.jpg
- 在本文件所在的上一级目录的下一级目录下：../img/4.jpg
  关系如图：
web语义化常用标签：
- 文本的格式化
  1. <b></b> — bold
  2. <strong></strong> —- strong
  3. <big></big> —- big
  4. <em></em> —-emphasized 强调（斜体）
  5. <i></i> —- italic 斜体字
  6. <small></small> —- small
  7. <sup></sup> —- superscript 上标，标在上方的
  8. <sub></sub> —- subscript 下标
  9. <address></address> —- 定义地址或者是作者什么的信息，一般斜体表示
- 计算机代码的格式化
  1. <code></code> —- computer code
  2. <kbd></kbd> —- keyboard input 键盘输入
  3. <tt></tt> —- teletype text 电报类型的文本
  4. <samp></samp> —- sample text 示例文本
  5. <var></var> —- computer variable 计算机变量
- 其它
  1. <abbr title=""></abbr> —- 一般用于缩略语，鼠标悬浮在上边的话会显示title里边的全称
    <acronym></acronym> —- 同样是用于缩略语的，不过貌似已经不用了，语义化太繁琐
  2. <bdo dir="rtl"></bdo> —- bi-directional override 改变浏览器默认文本方向，right to left
  3. <q></q> —- 短文本引用，会给引用文本默认加上双引号
    <blockquote></blockquote> —- 长文本引用，会给引用文本默认加上段落缩进
  4. <del></del> —- delete 删除文本，给文本中间加上横杠
    <ins></ins> —- insert 插入文本，给文本下方加上横线

HTML常用元素的使用：

超链接标签

基本使用：<a href="#">这里是可以点超链接的区域</a>
如果要将图像作为超链接使用的话直接把图像放入那段文字区域即可。
超链接可以设置页内跳转，比如回到顶部啊到页面的某一个模块啊之类的，这种情况的话使用<a href="#name">点击跳转</a> 配合<a name="name">name</a>即可实现。
超链接标签直接用的话都是在当前页面进行跳转，那如果想新开一个网页打开新页面呢？在链接的属性里边设置target=”_blank”
跳出框架：<a href="/index.html" target="_top">点击这里跳出框架</a>说实话这一段不是很明白，貌似是本来你的页面被固定在一个框架中，只能在那一小块地方显示，然后把target属性值改为”_top”之后就可以不仅仅只是在这个框架中显示，可以回到框架所在的大页面。
创建电子邮件链接：
<a href="mailto:someone@microsoft.com?subject=Hello%20World">发送邮件</a>
“mailto：”和问号之间是收件人的邮箱，subject后边的是邮件标题，话说回来，忘记密码里边发送验证码貌似可以这样用。Hello World中间的“%20”是显示空格，唔，这个我试了一下反正win10自带的邮箱用着的话直接留空格也是可以正常显示的。w3school上边的解释是“应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。”不是很懂。
电子邮件复杂版（包括抄送人密送人以及邮件正文）：
<a href="mailto:someone@163.com?cc=someone2@163.com&bcc=someone3@163.com&subject=helloworld&body=I%20am%20a%20beautiful%20girl!">目测第一个连接符是问号其它都用“&”。

图像的使用

基本使用：<img src="1.jpg" width="" height="" alt="图像1">//src是图片路径，width和height用来固定图像显示时候的宽和高，alt是替代文本，当图像资源找不到的时候显示alt的值。
高级版：
（1）创建图像映射：创建带有可供点击区域的图像地图。不是很懂。保留。

    <img src="1.jpg" usemap="#planemap" alt="" />    <map name="planemap" id="planemap">        <area shape="circle" coords="180,139,14" href="1.html" target="_blank" />    </map>    //map是图像地图，里边包含有可点击区域area，shape是可点击区域的形状，可以有default、rect、circle、poly等，choords是可点击区域的坐标，href是要跳转的链接，target是跳转的方式，包括有_blank、_parent、_self、_top等。

（2）将图像转换为图像映射。可以在状态栏查看鼠标停留的地方的点坐标。但是具体功能还是没怎么弄明白。

<a href="#">    <img src="1.jpg" ismap /></a>

列表的使用

列表项用<li></li>
无序列表：<ul></ul>，修改列表符号用type，例如<ul type="circle"></ul>默认是disc实心圆，circle是空心圆，square是实心方块。
有序列表：<ol></ol>，修改符号同样是type，默认阿拉伯数字1234，需要以abcd为列表符号的话就用<ol type="a"></ol>，以此类推。
自定义列表：项目及其注释的组合。<dl></dl>
列表项用<dt></dt>
列表项的注释用<dd></dd>

表格的使用

基本使用：

<table>  <tr>//行 table row    <td></td>//列table data  </tr></table>

表格的美化：
a. table的border属性表示边框，默认是没有边框的。
b. 给表格加标题的话用<caption></caption>
c. th是 table heading 表头标记，用来对表格单元格的内容进行说明，一般加粗居中显示。
d. 表格的跨行用 rowspan ，跨列用colspan。
e. 表格内间距（单元格的内容与单元格的界线之间的间距）用cellpadding，外间距（与其它单元格之间的间距）用cellspacing。
升级使用：用frame来控制表格的边框。

<table frame="box">将表格内容控制在一个小盒子里，上下左右都有边界</table><table frame="above">上方有边界</table><table frame="below">下方有边界</table><table frame="hsides">上下方向有边界</table><table frame="vsides">左右方向有边界</table>

表单的使用

表单符号：<form></form>
文本域：
<input type="text" name="" value="" placeholder="">//type是指它是一个输入框，输入text类型的值，name是传值的时候使用的名字，value是显示在输入框内的内容，placeholder是显示在输入框内的虚内容，点击就会消失。
多行文本输入框textarea：
<textarea rows="" cols="">这是文本框里边的内容</textarea>//可修改大小的文本框。
密码域：<input type="password" name="">//输入时会自动将输入的数字显示为项目符号比如实心点。
复选框：<input type="checkbox" name="">
单选按钮：
<input type="radio" name="">//加checked或者是checked="checked"的话就会设置默认选中该按钮。

下拉框：

<select name="wcy">     <option value="naive">naive</option>     <option value="beautiful">beautiful</option></select>//设置预选值的话用selected或者是selected="selected"。

按钮：<input type="button" value="">
1. 提交按钮：<input type="submit">
2. 重置按钮：<input type="reset">
3. 隐藏按钮：<inout type="hidden">//不显示在屏幕上，可以用来传值，避免用户误操作。
带标题的边框：<fieldset><legend>表单标题</legend><input type="text"></fieldset>

框架的使用

简单版：

 <frameset>    <frame src="1.html">    <frame src="2.html">  </frameset>

frameset是指框架集，里边包含着几个frame，但是这样写的话只会显示1.html，如果要两个都显示的话，继续往下看。

 <frameset cols="50%,50%">    <frame src="1.html">    <frame src="2.html">  </frameset>

cols指的是columns，纵列，此时效果是将屏幕分为左右两部分显示。如果要上下分的话，将cols改为rows即可。
加起来也不一定非要是100%，系统会自动按每一部分所占的比例来为其分配空间。也可以直接写适配符*，自适应。
再来就是混合模式了，也挺简单，嵌套frameset就好了。比如说：

 <frameset rows="50%,50%">    <frame src="a.html">    <frameset cols="25%,75%">       <frame src="b.html" />       <frame src="c.html" />    </frameset></frameset>

事实上，现在这个时候，虽然你定义了框架的大小，但是在浏览器上还是可以手动调整的，如果不希望用户手动调节框架大小，可以使用noresize属性，加在frame标签里边，比如<frame src="1.html" noresize="noresize" />即可。
如果想要跳转到框架的指定位置的话直接改src里边的值即可，比如<frame src="1.html#part1">,然后再在你要跳转的位置加上属性name=”part1”。

复杂版：
(1)导航框架：

   index.html文件：   <html>     <body>        <frameset cols="120,*">           <frame src="content.html">           <frame src="1.html" name="showframe">        </frameset>     </body>   </html>   content.html文件:   <html>        <body>           <a href="1.html" target ="showframe">>frame1</a>           <a href="2.html" target ="showframe">>frame2</a>           <a href="3.html" target ="showframe">>frame3</a>        </body>   </html>

content.html是一个包含了几个html页面链接的页面，后边的一个框架用来显示其html页面。打开网页默认显示1.html，点击content.html里边的链接的话就会显示链接到的html页面。当然，content.html中超链接要写上target属性，属性值与frame标签里边name的属性值相同即可，不然会直接在content.html所在的框架里边显示超链接的页面。如果target值找不着的话会默认打开新的页面，应该是的。

(2)内联框架：

 `<iframe src=""></iframe>`作用是把一个网站的内容嵌入到另一个网站中，话说回来好像不推荐使用，不是很懂，也没有用到过。想要深入了解的可自行百度。这里放几个我搜来的资料。 [为什么要少用iframe](http://www.williamlong.info/archives/3136.html) [iframe使用总结](http://blog.csdn.net/cuew1987/article/details/11265153)

(3)无框架：
<noframes></noframes>这个标签，由于我的电脑上没有不支持框架的浏览器，所以还没看见实现的效果，不过据推算大概就是不支持框架的话就没法加载frameset里边的内容，直接加载noframes里边的，格式要注意一下，noframes标签里边需要有body标签。

为页面添加css的方法：

行内样式：<a href="1.html" style="text-decoration">没有下划线的链接</a>
内部样式表：<style type="text/css"> p {color:blue}</style>
外部样式表：

<link rel="stylesheet" type="text/css" href="1.css" >//rel是relationship的缩写，关联的意思，关联样式表。type设置的是MIME，主类型是text，子类型是css，浏览器按此格式来解析文件。href的值是样式表路径。

插入script脚本：

简单使用：

<script type="text/javascript">document.write("<h1>Hello World</h1>")</script>

如果浏览器不支持JavaScript的话:<noscript>浏览器不支持JavaScript会显示这里边的文本</noscript>

阅读全文

0 0