HTML
Hyper Text Markup Language 超文本标记语言
生成WWW网页文件的语言,用于生成超文本文档(可以加入任何元素的链接)
HTML 负责整体的框架以及内容部分,HTML5可以负责一部分的数据验证
CSS 负责美化网页,部分特效
JS 负责数据验证、数据交互 特效
基于标准通用标记语言SGML的应用
静态网页
网页文件中没有程序代码,只有HTML,后缀为.html .htm .shtml .xml
一旦生成,内容就不会变化
动态网页
内容是动态的,文件里包含程序代码,动态产生内容 .asp .aspx .cgi .php .perl .jsp
服务器 代码(HTML, JSP, JAVA, 数据库)
IP - 域名 baidu.com 网络服务商DNS服务器(把域名和IP地址一一对应)
静态网页基本结构
文档类型声明,必须放在文档的最顶部,告知浏览器HTML版本
网页文件格式,表示是HTML文档
文档头,可加入网页标题、作者信息、版本信息、js和css,文档头的信息不会出现在浏览器的内容区
文档标题
### HTML标签和格式
<p style = "color:blue;"></p>
空元素
<br />
<input type = "submit" />
<img />
HTML常用标签
注释
元数据标签
meta-->指定当前网页的字符集
字符集:字符的集合 常见字符集(GBK/UTF-8)
区别:
GBK(GB2312)存储的字符比较少,仅仅存储了汉字和一些常用外文,体积较小
UTF-8 存储世界上所有的文字,体积较大
HTML头部的辅助性标签,用于定义页面的说明,关键字,修改日期和其他数据
告知搜索引擎SEO你的网页的关键字
<meta name = "Keywords" content = "HTML入门" />
<meta name = "Dexcription" content = "HTML" />
移动端相关
<meta name = "viewport" content = "width=device-width.." />
2s之后跳转到url指定的页面
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com" />
指定双核浏览器的渲染方式
<meta name = "render" content="webkit" />
浏览器的四大内核(渲染引擎)
作用:相当于一个解释器,解释网页的语法并且显示出来
Trident
Gecko
Webkit
Blink
布局标签
div标签定义HTML文档中的一分隔区块或内容的一个区域部分
文本标签
<p> 段落标签
<h1>~<h6> 一级~六级标题(自动换行,单独占一行)
<b> <strong> 加粗 后者加强语气 语义化
<em> <i> 斜体 后者有强调作用
<u> 下划线
<s> <del> 删除线 后者语义化标签 表示删除
<br /> 换行 手动换行
<hr />
超链接标签
<a href = " " target = "_blank">这是一个超链接</a>
target属性:
_blank 在新窗口中打开被链接文档
_self 默认,在相同的框架中打开被链接文档
_parent 在父框架集中打开被链接文档
_top 在整个窗口中打开被链接文档
framename 在指定的框架中打开被链接文档
a标签的支持协议
http 浏览器
tencent QQ
magnet 磁力下载
服务器不能运行文件协议 file://
锚点 如:
<h2 id = "p1">我是p1</h2>
<a href = "#p1" >跳转到p1</a>
假链接
占位留至项目后期改为真链接
#:颜色会改变,自动跳转到页面最上方
Javascript:
多媒体标签
图片标签
<img src = "", alt = "", title = "", width ="", height = "">
alt:当图片不存在时的文字提示
title:当鼠标放置到图片上时出现的文字提示
width/height:高度和宽度,单位为px,默认值是auto(防止拉伸)
另有src = data:... -->
src属性不仅可以指定图片的路径,还可以指定图片的base64格式的字符串,一般用于小图片
(base64的图片可以减少页面请求次数,不依赖于外链)
绝对路径和相对路径
路径是计算出来额,不会随着环境变化而改变
绝对路径:指完整的网址
相对路径:指目标相对于当前文件的路径 如 ./img/pic.jpg
./ 指文件本身所在的目录(可省略)
../ 指文件所在的父级目录(可以叠加)
/ 指文件所在的根目录,无论哪个层级都可以使用/单斜杠直接访问根目录
小summary
相对路径的三种查找方式:
同级查找:直接写文件名称即可找到:例如src=”pic.jpg”
向下查找:写文件夹名称/文件名称:例如:sec=”img/pic.jpg”
向上查找:通过../表示向上一级,例如:src=”../pic.jpg”
相对路径的要求:
1.相对路径不能跨盘符查找;
2.相对路径的过程不能有中文;
序列号标签
有序列表
<ol><li>
无序列表
<ul><li>
定义列表
<dl><dt><dd>
表格标签
table tr td thead tbody tfoot
th --> 自动加粗
属性:
border 设置表格边框,0无边框,1有边框
cellspacing 表格单元格之间的间距
cellpadding 表格单元格内的内边距(文字和边框的距离)
tr 表示一行
th 表头的单元格(自带居中和加粗效果)
td 单元格
thead
tbody
tfoot
作用:针对大表格的分段显示 + 打印到多张纸
浏览器加载的过程中,会等所有代码加载完才会显示表格所有内容
制作细线表格
原理:设置两次背景颜色(并不是由border设置出来的,而是单元格之间露出来的背景颜色)
步骤:
1.设置table的背景颜色(边框颜色);bgcolor='red’
2.设置td的背景颜色,设置tr则整行变色;
|
3.设置cellspacing=”1”,作用是设置边框的粗细;
实现跨行跨列的单元格
栗子:占两列两行
<tr rowspan = "2"><td colspan = "2"></td></tr>
HTML框架
frameset框架
注意:frameset不能和body同时存在
<frameset>
<frame src = "http://www.baidu.com">
</frameset>
钓鱼网站惯用做法!!Response header 中加了数据后框架就不能嵌套某个网址
可以嵌套使用,cols的剩余页面可以用*号自动计算