html概述和基本结构
1. html的定义
HTML 的全称为：HyperText Mark-up Language, 指的是超文本标记语言。
标记：就是标签, <标签名称> </标签名称>, 比如: <html></html>、<h1></h1> 等，标签大多数都是成对出现的。
所谓超文本，有两层含义:
- 因为网页中还可以图片、视频、音频等内容(超越文本限制)
- 它还可以在网页中跳转到另一个网页，与世界各地主机的网页链接(超链接文本)
2. html的作用
html是用来开发网页的，它是开发网页的语言。
3.HTML基本结构
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网页标题</title> </head> <body> 网页显示内容 </body> </html> |
- 第一行
<!DOCTYPE html>是文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。 - “<html>”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是'lang="zh-CN"',不定义也没什么影响，它一般作为分析统计用。
<html>...</html>标签是开发人员在告诉浏览器，整个网页是从<html>这里开始的，到<html>结束,也就是html文档的开始和结束标签。<head>...</head>标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件的。<body>...</body>标签是编写网页上显示的内容。
3.1浏览网页文件
网页文件的后缀是.html或者.htm, 一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页。
3.2 HTML文档类型
目前常用的两种文档类型是xhtml 1.0和html5
xhtml 1.0xhtml 1.0 是html5之前的一个常用的版本，目前许多网站仍然使用此版本。 |
html5pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title> xhtml 1.0 文档类型 </title> </head> <body> </body> </html> |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> html5文档类型 </title> </head> <body> </body> </html> |
两种文档的区别：
1、文档声明和编码声明
2、html5新增了标签元素以及元素属性
3.3 html注释：
html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：
<!-- 这是一段注释 --> |
4.HTML标签
4.1 常用的 html 标签
<!-- 1、成对出现的标签：--> <h1>h1标题</h1> <div>这是一个div标签</div> <p>这个一个段落标签</p> <!-- 2、单个出现的标签： --> <br> <img src="images/pic.jpg" alt="图片"> <hr> <!-- 3、带属性的标签，如src、alt 和 href等都是属性 --> <img src="images/pic.jpg" alt="图片"> <a href="http://www.baidu.com">百度网</a> <!-- 4、标签的嵌套 --> <div> <img src="images/pic.jpg" alt="图片"> <a href="http://www.baidu.com">百度网</a> </div> |
提示:
- 标签不区分大小写，但是推荐使用小写。
- 根据标签的书写形式，标签分为双标签(闭合标签)和单标签(空标签)
2.1 双标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内容，比如: div标签
2.2 单标签是一个标签组成，没有标签内容， 比如: img标签
4.2 html标题标签通过 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,标签可以在网页上定义6种级别的标题。 6种级别的标题表示文档的6级目录层级关系 |
<h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> |
|||
4.3 html段落标签、换行标签与字符实体html段落标签：<p>标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开 html换行标签：代码中成段的文字，直接在代码中回车换行，在渲染成网页时候不认这种换行， 如果真想换行，可以在代码的段落中插入<br />来强制换行 html字符实体：类似转义字符 |
|
|||
4.4html块标签、含样式的标签 |
html块标签 1、<div> 标签 块元素，表示一块内容，没有具体的语义。 含样式和语义的标签 1、<em> 标签 行内元素，表示语气中的强调词 语义化的标签 语义化的标签，就是在布局的时候多使用有语义的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。 比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。 |
|||
4.5html图像标签、绝对路径和相对路径 |
html图像标签 <img>标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：
<img src="images/pic.jpg" alt="产品图片" /> 绝对路径和相对路径 像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等 引用地址分为绝对地址和相对地址：
<!-- 相对路径方式1 --> <img src="./images/logo.png"> <!-- 相对路径方式2 --> <img src="images/logo.png"> <!-- 绝对路径 --> <img src="/Users/apple/Desktop/demo/hello/images/logo.png"> <img src="C:demoimages 01.jpg"> 提示: 一般都会使用相对路径，绝对路径的操作在其它电脑上打开会有可能出现资源文件找不到的问题 相对路径的定义技巧：
|
|||
4.6 html链接标签<a>标签可以在网页上定义一个链接地址，它的常用属性有：
|
<a href="#"></a> <!-- # 表示链接到页面顶部 --> <a href="http://www.itcast.cn/" title="跳转的传智播客网站">传智播客</a> <a href="2.html" target="_blank">测试页面2</a> 鼠标悬停时的文字框示例： |
|||
4.7html列表有序列表: 有编号的内容列表可以用<ol>、<li>配合使用来实现 无序列表: 无编号的内容列表可以用<ul>、<li>配合使用来实现 定义列表: 定义列表通常用于术语的定义: <dl>标签表示列表的整体 <dt>标签定义术语的题目 <dd>标签是术语的解释 一个<dl>中可以有多个题目和解释 |
有序列表：
<ol> <li>列表文字一</li> <li>列表文字二</li> <li>列表文字三</li> </ol> 在网页上生成的列表，每条项目上会按1、2、3编号，有序列表在实际开发中较少使用 无序列表： <ul> <li><a href="#">新闻标题一</a></li> <li><a href="#">新闻标题二</a></li> <li><a href="#">新闻标题三</a></li> </ul> 在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标， 如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表 实际应用实例：
定义列表： <h3>前端三大块</h3> <dl> <dt>html</dt> <dd>负责页面的结构</dd> <dt>css</dt> <dd>负责页面的表现</dd> <dt>javascript</dt> <dd>负责页面的行为</dd> </dl> |
4.8html表单表单用于搜集不同类型的用户输入(用户输入的数据)，然后可以把用户数据提交到web服务器 1、<form>标签 定义整体的表单区域
2、<label>标签 为表单元素定义文字标注 3、<input>标签 定义通用的表单元素
4、<textarea>标签 定义多行文本输入框 5、<select>标签 定义下拉表单元素 6、<option>标签 与<select>标签配合，定义下拉表单元素中的选项 小结
|
注册表单实例： <form action="http://www..." method="get"> <p> <label>姓名：</label><input type="text" name="username" /> </p> <p> <label>密码：</label><input type="password" name="password" /> </p> <p> <label>性别：</label> <input type="radio" name="gender" value="0" /> 男 <input type="radio" name="gender" value="1" /> 女 </p> <p> <label>爱好：</label> <input type="checkbox" name="like" value="sing" /> 唱歌 <input type="checkbox" name="like" value="run" /> 跑步 <input type="checkbox" name="like" value="swiming" /> 游泳 </p> <p> <label>照片：</label> <input type="file" name="person_pic"> </p> <p> <label>个人描述：</label> <textarea name="about"></textarea> </p> <p> <label>籍贯：</label> <select name="site"> <option value="0">北京</option> <option value="1">上海</option> <option value="2">广州</option> <option value="3">深圳</option> </select> </p> <p> <input type="submit" name="" value="提交"> <!-- input类型为submit定义提交按钮 还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如： <input type="image" src="xxx.gif"> --> <input type="reset" name="" value="重置"> </p> </form> |
4.9html表格1、<table>标签：声明一个表格，它的常用属性如下：
2、<tr>标签：定义表格中的一行 3、<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下：
|
表格制作练习：
|
5.页面布局
5.1 概述
布局也可以叫做排版，它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上，布局的方式分为两种：
1、table布局：通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，隐藏表格的边框，从而实现布局。这种布局方式也叫传统布局，目前主要使用在EDM(广告邮件中的页面)中，主流的布局方式不用这种。
2、HTML+CSS布局(DIV+CSS)：主要通过CSS样式设置来布局文字或图片等元素，需要用到CSS盒子模型、盒子类型、CSS浮动、CSS定位、CSS背景图定位等知识来布局，它比传统布局要复杂，目前是主流的布局方式。
5.2 table布局及实例
table来做整体页面的布局，布局的技巧归纳为如下几点：
1、按照设计图的尺寸设置表格的宽高以及单元格的宽高。
2、将表格border、cellpadding、cellspacing全部设置为0，表格的边框和间距就不占有页面空间，它只起到划分空间的作用。
3、针对局部复杂的布局，可以在单元格里面再嵌套表格，嵌套表格划分局部的空间。
4、单元格中的元素或者嵌套的表格用align和valign设置对齐方式
5、通过属性或者css样式设置单元格中元素的样式
table布局实例（个人简历页面布局实例）：
 |