html整理1

基本结构
	<!doctype html>
	<html lang="zh-CN"
	<head>
		<meta charset="utf-8">
		<title>文档标题</title>
		<meta name="keyworks" content="关键字">
		<meta name="description" content="描述">
		<meta name="author" content="xzt">
	</head>
	<body>
		<! --网页正文内容 -->
	</body>
	</html>

文本标签
	<font face="隶书" size="7" color="red">文本效果</font> 废除了
	p 段落标签 会自动换行
		<p align="center">
			段落文字
		</p>

	输入空格
	输入换行回车 都没有效果
	如果要真正显示空格 &nbsp;
	如果要真正显示换行<br>换行标签单标签
	水平线标签<hr> <hr size="10" color="red" width="300">
	文档标题标签<title>文档标签</title>

	正文内容标题标签
		文字内容，会自动加粗，可以left center right 对象，独占一行
		h1 <h1 align="center">公司简介</h1>
		h2 <h2 align="center" style="color:blue;">
		h3 
		h4
		h5
		h6
	span 标签
	mark 标记标签 html5 新增
	<p>中华人民共和国<span style="color:red;background-color:yellow;font-weight:bold">河南省</span>郑州市<mark>东风</mark>路</p>


	三种列表标签：
	1.无序列表
	<ul type="circle">
		<li>aaa</li>
		<li>aaa</li>
	</ul>

	<ul type="disc">
		<li>aaa</li>
		<li>aaa</li>
	</ul>

	2.有序列表
	<! --有序列表 -->
	<ol start="3" type="I">
		<li>aaa</li>
		<li>aaa</li>
		<li>aaa</li>
		<li>aaa</li>
		<li>aaa</li>
	</ol>

	<ol start="3" type="a">
		<li>aaa</li>
		<li>aaa</li>
		<li>aaa</li>
		<li>aaa</li>
		<li>aaa</li>
	</ol>

	3.自定义列表
	<!-- 自定义列表 -->
	<d1>
		<dt>郑州</dt>
		<dd>金水区</dd>
		<dd>惠济区</dd>
		<dd>金水区</dd>
		<dd>aaa</dd>
		<dt>北京</dt>
		<dd>aaaa</dd>
		<dd>bbbb</dd>
		<dd>cccc</dd>
		<dd>eeee</dd>
	</d1>

	图像标签
	<img src="" alt="" title="">
		src是指要显示的图像的路径，一般使用相对路径
		width 宽度
		height 高度不加单位
		alt 文字描述，当图像报错显不出来，开始显示此信息，此信息还作为seo搜索信息 
		title 文字描述 鼠标经过时会显示信息

	<img src="images/gg.jpg" height="702" width="468">

	磁盘路径绝对路径，不推荐使用
	<img src="d:/user/images/gg.jpg" height="702" width="468">

	<!-- 相对路径 -->
	<img src="images/gg.jpg" height="702" width="468"><br>
	<!-- 绝对路径(项目根目录下开始的绝对路径) -->
	<img src="/web/html/images/gg.jgp" height="702" width="468">


	图像文件格式：
	1）位图 点阵 像素 栅格
	 	gif
	 		颜色不能超过256种颜色，不是真彩 、
	 		画布支持透明，还支持多帧动画，是图像中唯一支持动画

	 	JPG 
	 		真彩无损压缩格式，清晰高，压缩比高，适合网络传输。
	 		不支持画布透明

	 	png
	 		画布透明，高清真彩，压缩比高，适合网络传输
	 		此文件格式一般情况下 ，是设计师设计输出的格式。

	 	webp 格式（未来可能会流行此格式）
	 		画布透明
	 		目前 ie还不支持

	 2）矢量图
	 	html5 支持 SVG 矢量

使用photoshop cc 2018 看这几种格式特点：
base64 格式在网页中应用：

	超链接标签
	a 标签
		href="" 链接的目标
		href="http://www.baidu.com"
		href="#"
		href="javascript:void(0)"无效果链接
		href="soft.zip"  soft.rar 下载 下载链接时有一个属性
		download属性是html5新增的属性

		target=""
			-new 只新开一个窗口 
			-parent 父框架
			-self 当前窗口
			-top 顶部框架
			可以直接填写一个框架的名称

		<a href="http://www.baidu.com" target="aaa">百度网</a>
		<hr>
		<iframe src="" name="aaa" frameborder="0" width="100%" height="300">

		<a href="连接网址地址网页" title="" alt="">
		文字内容也可以是图像内容</a>
		<a href="http://www.baidu.com">百度网</a>

	锚点标签，用来实现页面内部链接
		相当于书签
		<a name="menu"></a>
		<a href="#menu">目录</a>
猜你喜欢
