End

前端 web 基础知识 html 标签

本文地址


目录

前端 web 基础知识 html 标签

三层分离

现在的业界的标准,网页技术严格的三层分离:

  • html负责描述页面的语义
  • css负责描述页面的样式
  • js负责描述页面的动态效果

比如,面试的时候问你,h1标签有什么作用?

  • 正确答案:给文本增加主标题的语义
  • 错误答案:给文字加粗、加黑、变大

HTML骨架

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="网易是中国领先的互联网技术公司……" />
        <meta name="Keywords" content="网易,邮箱,游戏,新闻,体育" />
        <title>我是标题</title>
        <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
    </head>
    <body>
        <p>我是包青天</p>
        <script src="https://pub.idqqimg.com/pc/misc/sentry/raven.min.js"></script>
        <script language=javascript src="/js17/syf.js"></script>
        <script>
        </script>
    </body>
</html>
  • 第1行,是网页的声明头,文档类型定义DocType Defintion,简称DTD。用于告诉浏览器这是一个使用哪个标准的页面。通常就按示例写即可。
  • 第2行,html标签,所有的网页内容都要包裹在这个标签对里面。html标签中有两个属性:命名空间xmlns和语言xml:lang。一般html标签可能只有两个子标签:head标签 和 body标签。通常就按示例写即可。
  • 第3行,head标签,表示的是页面的配置
    • 第4行,页面使用的字符集,中文字符集有:UTF-8、gb2312或gbk
    • 第5行,页面描述,用于搜索引擎优化(SEO:Search Engine Optimization)
    • 第6行,页面的关键字,同样用于搜索引擎优化
    • 第7行,页面的标题,可以显示在浏览器的标签栏中。title也有助于SEO搜索引擎优化
    • 第8行,页面的图标
  • 第10行,body标签,就是网页的内容,用户能够看见的部分
    • 第11行,页面的内容
    • 第12/13行,引入外部的 Javascript 代码
    • 第14行,页面中定义的 Javascript 代码

HTML的基本语法特性

  • html页面的后缀名是html,也可以为htm,原因是:有一些系统不支持后缀名长度超过3个字符,比如dos系统
  • HTML只有一种单位:像素
  • HTML对空格、换行、tab不敏感,HTML的显示和换不换行无关,HTML只在乎标签的嵌套结构,和换行、tab无关
  • 空白折叠现象:HTML中所有的文字之间,如果有空格、换行、tab都将被折叠为一个空格显示
  • 标签要严格封闭,标签不封闭是灾难的
  • HTML的标签分为两种:容器级、文本级。容器级的标签里面可以放置任何东西;文本级的标签里面只能放置文字、图片、表单元素。
  • 注释格式:<!--注释的内容-->

标签

常见标签

  • 标题 h1/h2:h 是容器级的标签,但实际不要这么用。
  • 段落 p:p标签是一个文本级标签,p里面只能放文字、图片、表单元素,其他的一律不能放。
  • 图片 img:自封闭标签,<img src="baby.jpg" />
    • alt 属性:替代 alternate,表示当这个图片无法被显示的时候,出现的替代文字
    • 能用的图片类型:jpg/jpeg、gif、png、bmp
    • 使用相对路径 <img src="../../photo/1.png" />
  • 超链接 a:是一个文本级的标签, 超文本地址 href,hypertext reference,读作“喝瑞夫”
    • 使用方式 <a href="home.html" title="首页" target="_blank">点击进入我的首页</a>
    • title:悬停文本
    • target:是否在新窗口中打开,默认是在相同的标签页打开,按示例写后就是在新的空白标签页中打开。
    • 页面内的锚点
      • 锚 anchor,所谓锚点就是一个小标记,用户是不可察觉的
      • 锚点用name或者id属性来设置,一个a标签如果有name或者id属性,那么就是页面的一个锚点,例如<a id="wdzp">我的作品</a>
      • 如果有一个超级链接,指向页面中的锚点,那么就是:<a href="#wdzp">点击跳转</a>
  • 列表 ul、ol:无序列表/有序列表,ul和ol里面只能有li[list item]标签,而不能有别的。li是容器级标签。
  • 定义列表 dl,definition list
    • dl 里面只能有dt、dd,并且dt、dd只能在dl里面。dt、dd是容器级标签。
    • dt 表示 definition title 定义标题
    • dd 表示 definition description 定义表述词,dd是描述dt的,一个dt可以配很多dd

div 和 span

div和span是非常重要的标签,这两个东西是CSS中最最重要的“盒子”。
div,division,分割;span,范围、跨度。
div在浏览器中,默认是不会增加任何的效果的,div中的所有元素是一个小区域。
div标签是一个容器级标签,里面什么都能放,甚至可以放div自己

span也是表达“小区域、小跨度”的标签,但是是一个“文本级”的标签。
就是说,span里面只能放置文字、图片、表单元素。

span里面是放置小元素的,div里面放置大东西的

div标签是最最重要的布局标签,所以,我们亲切的称呼这种模式叫做“div+css”。
div标签负责布局,负责结构,负责分块;css负责样式。

表单 form

表单就是收集用户信息的,就是让用户填写的、选择的。

form是英语表单的意思。form标签里面有action属性和method属性,在《Ajax》课程上给大家讲解。
稍微说一下:action属性就是表示,表单将提交到哪里。 method属性表示用什么HTTP方法提交,有get、post两种。

文本框 input

这是一个自封闭标签(meta、img、input)
普通文本框 <input type="text" value="默认的值" />文本框后面的值
密码框 <input type="password" /> 密码框后面的值
单选按钮 <input type="radio" name="xingbie" checked="checked" />选项的值
复选框 <input type="checkbox" name="aihao"/> 选项的值

单选按钮天生是不能互斥的,如果想互斥,必须要有相同的name属性。
默认被选择,就应该书写checked=”checked”
复选框,最好也是有相同的name(虽然他不需要互斥,但是也要有相同的name)

按钮 input

按钮也是input标签,一共有三种按钮:

  • 普通按钮<input type="button" value="按钮上面显示的文字" />
  • 提交按钮<input type="submit" /> 这个按钮不需要写value自动就有“提交”文字。点击这个按钮,这个表单就会被提交到form标签的action属性中的那个页面中去。
  • 重置按钮<input type="reset" />

HTML5中,input的类型又增加了很多,比如date、color,但是都不兼容。

下拉列表 select

select标签和ul、ol、dl一样,都是组标签。

<select>
<option>北京</option>
<option>上海</option>
</select>

多行文本框 textarea

textarea标签,area就是“区域”
<textarea cols="30" rows="10">默认文字</textarea>

label 标签

对于上面提到的 <input type="radio" name="sex" /> 男
本质上讲,“男”这个汉字,和input元素没有关系(比如我们点击“男”这个汉字时,单选框并不会选中)。

label就是解决这个问题的
<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
input元素要有一个id,然后label标签就有一个for属性,和id相同,就表示绑定了,这个label和input就有绑定关系了。

绑定后,我们再点击“男”这个汉字时,单选框就会被选中。

什么表单元素都有label。

多媒体 audio

在 HTML 中播放音频并不容易!
您需要谙熟大量技巧,以确保您的音频文件在所有浏览器中和所有硬件上都能够播放。

可使用 标签来将插件添加到 HTML 页面。
这些标签定义资源(通常非 HTML 资源)的容器,根据类型,它们即会由浏览器显示,也会由外部插件显示。

1、使用 标签
下面的代码片段能够显示嵌入网页中的 MP3 文件

<embed height="100" width="300" src="song.mp3" />
<object height="100" width="300" data="song.mp3"></object>

问题:
是一个 HTML5 标签,在 HTML4 中是非法的,但是所有浏览器中都有效
不同的浏览器对音频格式的支持也不同,如果浏览器不支持该文件格式,没有插件的话就无法播放该音频
如果用户的计算机未安装插件,无法播放音频
如果把该文件转换为其他格式,仍然无法在所有浏览器中播放

2、使用

<audio> 元素是一个 HTML5 标签,在 HTML 4 中是非法的,但在所有浏览器中都有效。
<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>

上面的例子使用了一个 mp3 文件,这样它在 Internet Explorer、Chrome 以及 Safari 中是有效的。
为了使这段音频在 Firefox 和 Opera 中同样有效,添加了一个 ogg 类型的文件。如果失败,会显示错误消息。

废弃的标签

HTML现在只负责语义,而不负责样式。但是HTML一开始,连样式也包办了。这些样式的标签,都已经被废弃。
下面这些标签,有着浓厚的样式的作用,所以HTML抛弃了他们。
<font size="9" color="red" face=字体类型>字体</font>
<hr />水平线,color颜色、size粗细,width长短、noshade阴影、align对齐方式(left,right,center)
<br />换行,break,不另起一个段落进行换行
<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<del>删除线</del>
<em>强调</em>
<strong>强调(加粗)</strong>
<center>内容居中</center>
<pre>预定义格式标签,告诉浏览器不要忽略空格和空行</pre>
<sup>上标</sup>
<sub>下标</sub>
table 表格,tr行、td单元格、th表头、caption标题、thead、tbody、tfoot
frameset 框架的集合、frame框架、rows纵向分部框架、cols横向分部框架、

字符实体

显示 描述 实体名称 实体编号
空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
' 撇号 &apos; &#39;
&cent; &#162;
£&pound; &#163;
¥ 日圆 &yen; &#165;
欧元 &euro; &#8364;
§ 小节 &sect; &#167;
© 版权 &copy; &#169;
® 注册商标 &reg; &#174;
商标 &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

2016-06-20

posted @ 2016-06-20 20:37  白乾涛  阅读(1015)  评论(0编辑  收藏  举报