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  白乾涛  阅读(1007)  评论(0)  编辑  收藏  举报