基本结构
<!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>
输入空格
输入换行回车 都没有效果
如果要真正显示空格
如果要真正显示换行<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>
html整理1
猜你喜欢
转载自blog.csdn.net/weixin_42321963/article/details/81264873
今日推荐
周排行