Html基础（1）

Day02 Html基础知识

一、开发网页的三种技术

Html 负责网页的结构

Css 站在美学的角度进行美化

JavaScript 站在用户体验的角度设计网页的交互效果

注：还有Node.js能够前后端通吃

二、Html

2.1 html是什么？

超文本标记语言(HyperText Markup Language)
文本：txt 文本  
超文本 ：文本 、图片、链接、音乐、程序

标记：标签 <html> 单标签和双标签  <meta>  <html></html>

html当中，不存在编程语言的语法，而是充斥着各式各样的标签。

html运行环境：浏览器 
浏览器是用来打开网页的。

在浏览器中我们见到的所有的网页本质上都是一个文本，而这文本又
称之为 html。

html 不是一门编程语言，只是一门标记语言，类似于工具一样的东西。

htm  -->  比较老的教科书里面 文件的后缀htm
html -->  html

htm文件不完整的支持html5的语法

2.2 html5文档结构说明

<!DOCTYPE html> html5文档声明头 ，想要完整的使用html5语法，必须
使用文档声明头，声明当前文件是html5文件

<html></html> 双标签 定义html文档内容的结构 所有的html文档的内容
都需要写在这对标签内部。

<head></head> 头部 通常情况下，里面写的内容是对于当前网页的一些
预定义信息设置。

<body></body> 身体 网页 里面要显示给用户看的内容，全部写在body里面

2.3 网页预定义信息

<meta charset="UTF-8">  设定当前网页的编码格式 

meta标签是一个单标签，通过charset 属性，将其属性值设置为需要
的编码，即可为当前的网页设置编码格式。
举例：<meta name="author" content="Itssyuu">
<meta name="keywords" 
content="Good Good Study Day Day Up">

name和content属性在优化时起到至关重要的作用

<title>网页标题</title>
通常情况下， tilte要放在meta字符集设置的下面，防止出现乱码

<link rel="stylesheet" href="style.css"> 引入外部的css文件

<style>
	/*css代码*/
</style>

<script src="01.js"></script> 引入外部的js脚本文件，
<script>
	// js代码
</script>

需要注意的是两个script标签中间不能存在任何内容换行都不可以

2.4 常用标签

<hr>换行分割线
<br>换行
<h1>-<h6>多级标题
<!---->注释  快捷：ctrl+/
<em>斜体表强调
<strong>更强的黑体表强调
<b>以粗体标记要强调的文本。

注：上www.w3cschool.cn查询相关标签含义
点击进入w3c

装了sublime插件之后直接打br然后按tab键即可。在html中，一些语义不是太明显的标签我们可以用来做挂件。

2.5 列表标签

列表的表示主要有有序列表和无序列表，有序列表<ol>与<li>列表实现；无序列表靠<ul>与<li>列表实现：

<!-- 无序列表 -->
<ul>
	<li>今日阳光明媚</li>
	<li>昨天多云转晴</li>
	<li>你猜明天几度</li>
</ul>

<!-- 有序列表 -->
广场舞音乐排行榜
<ol>
	<li>最炫民族风</li>
	<li>小苹果</li>
	<li>自由飞翔</li>
</ol>

<dd> 标签与 <dl> （定义一个描述列表）和

（定义项目/名字）一起使用。
在 <dd> 标签内，您能放置段落、换行、图片、链接、列表等等。

<dl>
	<dt>北京</dt>
	<dd>听说早几年北京的王府井非常出名</dd>
	<dd>北京的房价很便宜</dd>

	<dt>上海</dt>
	<dd>我在上海呆了四年</dd>

	<dt>湖北</dt>
	<dd>我在湖北呆了3年</dd>
</dl>

2.6 利用a标签进行网页跳转

a标签定义及使用说明：

<a> 标签定义超链接，用于从一个页面链接到另一个页面。
<a> 元素最重要的属性是 href 属性，它指定链接的目标。
1. 在所有浏览器中，链接的默认外观如下：
2. 未被访问的链接带有下划线而且是蓝色的
3. 已被访问的链接带有下划线而且是紫色的活动链接带有下划线而且是红色的

利用a标签进行网页跳转，主要是利用锚点进行跳转，在网页的某个位置利用id或name属性设置锚点，当点击这个链接时，网页就会跳转到对锚点所在的位置，从而完成网页的跳转。

	<a href="#test">点击跳转到网页的底部</a>
	<div style="height: 2000px"></div>
	<!-- <em name="test">这里是网页的底部</em> -->
	<!-- 如果a标签的href属性值为空，那么这个a标签就会变成一个隐藏的锚点，看似href属性什么都没有，但是点击之后会跳转到网页的顶部 -->
	<a href="##" name="test">这里是网页的底部</a>

注：如果一个网页中存在过多的隐藏锚点(href值为空的a标签)，会严重的影响网页的加载效率

2.7 图片映射

<map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。
<map> 中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向添加 id 和 name 属性。
area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射。

<!-- 图像映射 -->
<!-- alt 当图片加载失败的时候，会出现alt属性值 -->
<img src="Koala.jpg" alt="考拉" width="300" height="300" usemap="#test-demo">

<map name="test-demo" id="test-demo">
<!-- shape 形状   coords 坐标  href 链接  -->
	<area shape="rect" coords="0,0,100,100" href="http://www.baidu.com" alt="">
	<area shape="circle" coords="200,200,100" href="http://www.baidu.com" alt="">
	<!-- <area shape="poly" coords="200,200,100" href="http://www.baidu.com" alt=""> -->
</map>

<!-- <a href="http://www.baidu.com">
	<img src="Koala.jpg" alt="">
</a> -->

2.8 表格标签

<table> 标签定义 HTML 表格。
一个 HTML 表格包括 <table> 元素，一个或多个 <tr>、<th> 以及 <td> 元素。
<tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。
更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。

<table border="1" frame="void">
<!-- 行使用tr标签来表示 -->
	<thead>
		<tr>
		<!-- 单元格使用td来表示 -->
		<th>Name:</th>
		<th>Age:</th>
	</tr>
	</thead>

	<tbody>
		<tr>
		<td>政委同志</td>
		<td>99</td>
	</tr>
	<tr>
		<td>政委同志</td>
		<td>99</td>
	</tr>
	<tfoot>
		<tr>
		<td>政委同志</td>
		<td>99</td>
	</tr>
	</tfoot>
</table>