Html知识回顾

最新推荐文章于 2025-07-16 09:03:08 发布

hc_xyz

最新推荐文章于 2025-07-16 09:03:08 发布

阅读量264

点赞数

CC 4.0 BY-SA版权

分类专栏：工作总结 HTML基础文章标签：工作总结 HTML基础

本文链接：https://blog.youkuaiyun.com/hccc1/article/details/80418162

HTML基础同时被 2 个专栏收录

1 篇文章

订阅专栏

工作总结

0 篇文章

订阅专栏

Html知识回顾

Basics
h1—-head
p—段落
a—链接
img—图片 alt=”当读入的图像无法显示时，替换的文字”
hr—水平线
table—-th(表头)——-tr(列)—td 表格属性(格)
无序列表—-ul(unorderlist)

Coffee
Milk

这里写图片描述
有序列表—–ol(orderedlist)

2. 块元素
会启用新的行
这里写图片描述

div输入块元素
3. 内联元素
span输入内联元素，可以作为文本的容器
不会以新行开始
这里写图片描述

4. 框架
frameset 和 frame
这里写图片描述

iframe 用来内嵌网页

meta元素

这里写图片描述
6. 常用的实体名称

这里写图片描述
float: left/ right

<html>
<head>
<style type="text/css">
img 
{
float:left
}
</style>
</head>

<body>
<p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
<p>
<img src="/i/eg_cute.gif" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>

</html>

这里写图片描述
7. 速查手册
W3cSchool Html速查手册

HTML 5 新增类型

这里写图片描述
9. 输入限制

这里写图片描述
10. CSS基础
- 选择器的应用
CSS3 选择器

这里写图片描述
11. JQuery 选择器
常用JQuery选择器
- 属性选择器
- CSS选择器
- 元素选择器

常用HTML功能

鼠标悬停
- 简单的办法，使用title属性，缺点是不好控制，会自动消失
- 复杂的办法，使用onmousemove 和 onmouseout进行对数据操作

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css"> 
body
{
font-size:70%;
font-family:verdana,helvetica,arial,sans-serif;
}
</style>

<script type="text/javascript"> 
function cnvs_getCoordinates(e)
{
x=e.clientX;
y=e.clientY;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}

function cnvs_clearCoordinates()
{
document.getElementById("xycoordinates").innerHTML="";
}
</script>
</head>

<body style="margin:0px;">

<p>把鼠标悬停在下面的矩形上可以看到坐标：</p>

<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
<br />
<br />
<br />
<div id="xycoordinates"></div>

</body>
</html>