HTML5前端基础知识

HTML5基础知识

什么是HTML

HTML指的是超文本标记语言（Hyper Text Markup Language），是一种使用标记标签来描述网页的语言。

超文本 : 文字+图片+音视+链接…
标记 : 浏览器根据已定义好的某一对标签来显示对应的内容
语言 ：一门计算机语言

最重要的三项技术：

HTML核心规范
CSS（层叠样式表）
JavaScript

HTML5新特性：

引入原生多媒体支持
映入可编程内容（例如：画图）
引入了语义Web

HTML页面的基本结构：

HTML 属性

属性是指某一个事物的特征。比如说一个人他的肤色是黑色。
在HTML里属性是指标签的样式。如font标签 face 属性是指被font标签所包含的文本字体类型

<标签 属性=“属性值”>内容</标签>

如： <font color=“red” size=“5” face=“微软雅黑”>你好世界！</font>
Tip:
1.每个html标签都可能有不同的属性。
2.同一个属性在不同含有这个属性的html标签里都是指同一个意思。如color属性无论在哪个html标签都是指内容的文本颜色

文本相关标签

h系列标签（h1 ~ h6 ）

从 h1 到h6 ，主要应用于文章的标题。效果为文本字体加粗和大小，其中h1字体最粗和字体尺寸最大

如： <h1>中华人民共和国成立68周年</h1>

p 标签

文本标签，常用于文章的一个段落，一个p标签会独占一行

如： <p>你好世界</p>

br标签

换行标签，一个br标签可以切换一行
br是个单标签， <br />  。也可以称为自关闭标签.

如： <font color=”red”>你好世界</font><br />

字体样式标签

加粗：<strong>…</strong>
斜体：<em>…</em>
粗体: <b>内容</b>	
斜体: <i>内容</i>	
下划线:<u>内容</u>	

img显示一张图片

img 标签为单标签  <img />
属性：
1 src：指定要显示图片的地址可以是网络图片（网络地址一般要有http:// 前缀），也可以是本地的图片。
2 地址分为绝对地址或者相对地址
  绝对地址：一般以http:// 或者ftp:// 或者系统盘符（c:）开头的地址
  相对地址：相对于当前目录而言其他文件所在的地址
  相对地址中上一级目录（../） ,下一级目录(/)
3 width: 宽度 
4 height: 高度

如： <img src=”../image/1.jpg” />
如： <img src=”http://www.baidu.com/1.jpg”  width=40 />

<img src="path" alt="text" title="text"  width="x"  height="y" />

eg:
<img src="image/hetao.jpg" width="160" height="160"  
     alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/>

超链接

使文本拥有跳转页面的功能。
属性：
href ：指定要跳转的页面的地址（网络地址一般要有http:// 前缀）

如： <a href=”http://www.baidu.com”>点我有惊喜</a>

图片标签
<a href="path" target="目标窗口位置">链接文本或图像</a>

eg:
<a  href="detail.html"  target="_blank">姑娘，欢迎降落在这残酷的世界</a>
<a  href="detail.html"  target="_blank">
    <img src="image/img1.png" alt="姑娘，欢迎降落在这残酷的世界"
           title="姑娘，欢迎降落在这残酷的世界" />
</a>

表格

HTML 布局方式
表格
div盒模型

<table></table>
和 tr td 标签配合使用
属性
Border :表格边框
Width : 表格宽度
Align ：对齐方式
Cellspacing: 单元格之间的距离
Cellspadding : 单元格边框和内容之间的距离


<table width=“” align=“” border=“”>
    <tr>
        <th width=“” align=“”>…</th>
        
        <th>…</th>…
    </tr>
    <tr>
        <td width=“” align=“” valign=“”>…</td>
        <td rowspan=“” colspan=“” bgcolor=“”>…</td>
        ……
    </tr>
</table>

表单

<form  method="post" action="result.html">
   <p>  名字：<input name="name" type="text" >  </p>
   <p>  密码：<input name="pass" type="password" >  </p>
   <p>
      <input type="submit" name="Button" value="提交"/>
      <input type="reset" name="Reset" value="重填“/> 
   </p>
</form>

规定如何发送表单数据常用值：get  | post
                                              
                                              
在实际网页开发中通常采用post方式提交表单数据 
                                 

文本框

<input  type="text"  name="userName" value="用户名" size="30" maxlength="20" />

密码框

<input  type="password "  name="pass"  size="20" />
单选按钮

<input name="gen" type="radio" value="男"  checked  />男
<input name="gen" type="radio" value="女" />女

列表框

<select name="列表名称" size="行数">
<option value="选项的值" selected="selected">…</option >
<option value="选项的值">…</option >
</select>

默认选中项：selected="selected"
选项：option

按钮

<input  type="reset" name="butReset" value="reset按钮">
<input  type="image"  src="images/login.gif" />
<input  type="button" name="butButton" value="button按钮"/>
重置按钮：reset
提交按钮：image
普通按钮：button

<input  type="reset" name="butReset" value="reset按钮">
<input  type="image"  src="images/login.gif" />
<input  type="button" name="butButton" value="button按钮"/>
重置按钮：reset
提交按钮：image
普通按钮：button