网页开发的三种技术
- html:负责网页的结构
- css:站在美学的角度进行美化
javascript:站在用户体验的角度设计网页的交互效果
html
html是什么?
定义:超文本标记语言(HyperText Markup Language)
超文本:文本、图片,链接、音乐、程序等
标记:标签,分为: 单标签和双标签
在html中,不存在编程语言的语法,而是充斥着各式各样的标签。
html运行环境是,在浏览器中我们见到的所有的网页本质上都是一个文本,这个文本称之为html。
html不是一门编程语言,只是一门标记语言,类似于一种工具。
sublime插件的安装
ctrl+shift+p 输入 install 选择 install package,在新的输入框中输入emmet,回车。
安装后,打出!后按tab键即可生成html5基本结构。
html5文档结构说明
<!DOCTYPE html>
html5文档声明头,想要完整的使用html5语法,必须要使用文档声明头,声明当前文件是html5文件。
<html></html>
双标签,定义html文档内容的结构,所有的html文档的内容都需要写在这对标签内部。
<head></head>
头部,通常情况下,里面写的内容是对于当前网页的一些预定义信息设置。
<body></body>
身体,网页里面要显示给用户看的内容,全部写在body里面。
网页预定义信息
<meta charset="UTF-8">
设定当前网页的编码格式。meta标签是一个单标签,通过charset属性,将其属性值设置为需要的编码,即可为当前的网页设置编码格式。
<meta name="author" content="作者">
设置网页的作者名。
<meta name="keywords" content="html5">
设置网页关键字列表,用","分隔,用于搜索引擎。
<meta name="description" content="网页描述">
设置页面的描述。搜索引擎会把这个描述显示在搜索结果中。
<meta name="application-name" content="">
规定页面所代表的应用程序的名称。
<meta name="generator" content="Frontpage 4.0">
规定用于生成文档的一个软件包(不用于手写页面)。
<meta http-equiv="content type" content="text/html";charset="UTF-8">
规定文档的字符编码。
<meta http-equiv="default-style" content="the document's preferred stylesheet">
规定要使用的预定义样式表。
注释:上面content属性的值必须匹配同一文档当中的一个link元素上的title属性的值,或者必须匹配同一文档中的一个style元素上的title属性的值。
<meta http-equiv="refresh" content="300">
定义文档自动刷新的时间间隔。
<title>网页标题</title>
设置网页的标题。通常情况下,title要放在字符集设置的下面,防止出现乱码。
引入外部的css文件
<link rel="stylesheet" href="style.css">
<style>
/*css代码*/
</style>
引入外部的js脚本文件
seo优化
百度会对收录的所有的网站有一个评分系统,评分越高,位置越靠前。
常用基础标签
<hr>
换行分割线
<br>
换行
<h1>-<h6></h1>-</h6>
多级标题
<!--注释内容-->
注释
带有语义的标签
<em></em>
表示强调,斜体
<strong></strong>
表示强调,加粗
<abbr></abbr>
定义缩写,与title属性互相搭配使用
The <abbr title="People's Republic of China">PRC</abbr>was founded in 1948.
<address></address>
标签定义文档作者/所有者的联系信息。
如果 <address>
元素位于<body>
元素内部,则它表示该文档作者/所有者的联系信息。
如果 <address>
元素位于 <article>
元素内部,则它表示该文章作者/所有者的联系信息。<address>
元素的文本通常呈现为斜体。大多数浏览器会在该元素的前后添加换行。
<blockquote></blockquote>
定义块引用,通常情况下会产生缩进,引用大段内容。
<cite></cite>
通常情况下,某段话引于某本书,可以使用cite进行说明,引用小段内容。
<ins></ins>
定义被插入文本。
<del></del>
定义被删除文本。
带有一定样式的标签[此类标签同时也带有语义]
<b></b>
定义粗体文本
<i></i>
定义斜体文本
<big></big>
定义大号字体文本
<small></small>
定义小号字体文本
<sup></sup>
定义上标文本
<sub></sub>
定义下标文本
<bdo dir=ltr or rtl></bdo>
定义文本显示方向,属性dir,值ltr,rtl
输出类标签
<pre>
代码中样式原样输出
<code>
定义计算机代码文本
<kbd>
定义键盘文本
<var>
定义变量
功能类标签
a标签
作用:1.定义超链接实现页面跳转 2.定义锚点实现书签功能
<a href="http://www.baidu.com">百度一下,你就知道</a>
跳转到网页
<a href="03.html">点击跳转到03.html</a>
跳转到本地文件
<a href="#bottom">点击跳转到网页的底部</a>
<div style="height: 2000px;"></div>
<a href="" name="bottom">这里是底部</a>
跳转到文本的某个部分,根据name属性决定
列表
<ul><li>...</li></ul>
无序列表
<ol><li>...</li></ol>
有序列表
<style>
ul,ol {
list-style: none;
}
</style>
此部分在head标签中,可以去掉列表前的序号。
页面嵌套
在当前页面嵌套一个网页,frameborder属性决定有无边框
项目列表描述
<dl>
<dt>北京</dt>
<dd>听说早几年北京的八大胡同非常出名</dd>
<dd>北京的房价很便宜</dd>
<dt>上海</dt>
<dd>我在上海呆了四年</dd>
<dt>湖北</dt>
<dd>我在湖北呆了3年</dd>
</dl>
常用属性
alt:图像未能成功加载时的代替文本
width,height:图像的宽和高
ismap:定义图像映射的一张图像
通过img实现图像映射
map标签:定义图像映射
area:定义图像映射内部的区域
链接跳转的图像
将图片嵌套在a标签中
<img src="Koala.jpg" alt="考拉" width="300" height="300" usemap="#test-demo">
<br>
<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> -->
表格
<table>
表格
<caption></caption>
表格标题
<th></th>
表格眉页
<tr></tr>
表格的行
<td></td>
表格的单元格
<thead></thead>
表格的头部
<tbody></tbody>
表格的主干
<tfoot></tfoot>
表格的尾部
<table border="1" frame="void">
<!-- 行使用tr标签来表示 -->
<!--border属性值为1或""-->
<thead>
<tr>
<!-- 单元格使用td来表示 -->
<th>Name:</th>
<th>Age:</th>
<th>Sex:</th>
<th>Hobby:</th>
</tr>
</thead>
<tbody>
<tr>
<td>政委同志</td>
<td>99</td>
<td>???</td>
<td>吃喝嫖赌</td>
</tr>
<tr>
<td>政委同志</td>
<td>99</td>
<td>???</td>
<td>吃喝嫖赌</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>政委同志</td>
<td>99</td>
<td>???</td>
<td>吃喝嫖赌</td>
</tr>
</tfoot>
</table>
</body>