HTML学习总结

最新推荐文章于 2023-07-05 11:18:20 发布

写博客的探索者

最新推荐文章于 2023-07-05 11:18:20 发布

阅读量160

点赞数

分类专栏：学习总结

本文链接：https://blog.youkuaiyun.com/weixin_42487874/article/details/104223996

版权

学习总结专栏收录该内容

10 篇文章

订阅专栏

本文总结了HTML的学习要点，包括注意的细节，如大小写的规范和空格处理；头部标签的使用，如标题、链接和Meta信息；文本标签的介绍，如链接和样式CSS的应用；图像的处理，如alt属性和尺寸设置；表格、列表和区块的构建；以及布局、表单和URL的格式说明。此外，还涵盖了HTML5的新特性，如Canvas绘图和拖放功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意

<!doctype html> 开头
大小写不敏感、推荐小写
多个空格和空行被认为是一个空格
属性（name=“value”）双引号、单引号都可以

头部标签

标题：

<title>标题</title>

默认链接：

<base href="www.xxx.xxx" target="">

Meta：

<meta name="keywords" content="关键字1,关键字2">
<meta name="description" content="描述">
<meta name="author" content="网页作者">
<meta http-equiv="refresh" content="30"> <!-- 30s刷新一次 -->

文本标签

标签	作用
< b></ b> < strong></ strong>	粗体
< i>< em>	斜体
< big>< small>	放大、缩小
< sub>< sup>	下标字、上标字
< ins>	插入字
< del>	删除字
< kbd>	键盘码
< address>	地址
< h1></ h1>	标题
< p></ p>	段落
< br/>	回车
< hr/>	水平线
< !-- 内容 -->	注释
< p>< br>< br></ p>	拆行

链接

<a href="网址、#id、网址#id" target="链接的文档在何处显示"></a>

样式CSS

内联样式：

<p style="background-color:green;">这是一个段落。</p>

内部样式：

<style type="text/css">
	div{ background-color:red; }
</style>

外部样式表

<head >
	<link ref="stylesheet" type="text/css" href="mystyle.css" >
</head >

图像

图像是空标签
alt：定义可替换文本，如果图像无法加载就会显示这段文本。
width、height：定义宽高。

<img src="url" alt="some_text" width="100" height="100">

表格

<table border="1">
	<caption>title</caption>
	<tr>
		<th>header 1</th>
		<th>header 2</th>
	</tr>
	<tr>
		<td>row 1 col 1</td>
		<td>row 1 col 2</td>
	</tr>
	<tr>
		<td>row 2 col 1</td>
		<td>row 2 col 2</td>
	</tr>
</table>

跨行、列

<tr>
	<th colspan="2">跨两列</th>
</tr>
<tr>
	<th rowspan="2">跨两行</th>
</tr>

单元格边距：

<table cellpadding="10"></table >

单元格间距：

<table cellspacing="10"></table >

列表

无序列表：

<ul>
	<li>Coffee</li>
	<li>Milk</li>
</ul>

有序列表：

<ol>
	<li>Coffee</li>
	<li>Milk</li>
</ol>

自定义列表：

<dl>
	<dt>列表项1</dt>
	<dd>描述1</dd>
	<dt>列表项2</dt>
	<dd>描述2</dd>
</dl>

区块

块级元素：显示时通常会以新行来开始和结束。

<h1>、<p>、<ul>、<table>、<div>

内联元素：显示时不会以新行开始。< b>、< td>、< a>、< img>、< span>

<b>、<td>、<a>、<img>、<span>

布局

<div id="header" style="background-color:#FFA500;">顶部</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">左边</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">右边</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">底部</div>

表单

<from action="demo-form.php" method="post">
	<input type="text" name="name1" />
	<input type="password" name="name2" />
	<input type="radio" name="name3" value="value" /> <!--单选框-->
	<input type="checkbox" name="name4" value="value" /> <!--复选框-->
	<textarea rows="10" cols="30">文本域</textarea> <!--文本域-->
	<select name="cars"><!--下拉框-->
		<option value="volvo">Volvo</option>
		<option value="saab">Saab</option>
	</select>
	<input type="reset" value="重置">
	<input type="button" value="Hello world!"><!--按钮-->
	<input type="submit" value="value" /> <!--提交按钮-->
</from>

URL

格式：
scheme://host.domain:port/path/filename


scheme	类型
host	主机
domain	域名
:post	端口号（http 的默认端口号是 80）
path	路径（如果省略，则文档必须位于网站的根目录中）
filename	文件名称

scheme：

Scheme	访问	作用
http	超文本传输协议	以 http:// 开头的普通网页。不加密。
https	安全超文本传输协议	安全网页，加密所有信息交换。
ftp	文件传输协议	用于将文件下载或上传至网站。
file		您计算机上的文件。

URL字符编码
- URL只能使用ASCii字符集
- 不能有空格，使用+来代替空格
- 如果有范围外的字符，URL使用%加两位十六进制数替换

Canvas(HTML5)

<canvas id="myCanvas" width="100" height="100" ></canvas>
<script>
	var c = document.getElementById("myCanvas");
	var ctx = c.getContext("2d");
	ctx.fillStyle = "#FF0000";
	ctx.fillRect(0,0,150,75);
</script>

坐标：左上角为原点。
路径：

<script>
	ctx.moveTo(0, 0);//起始
	ctx.lineTo(200, 200);//结束
	ctx.stroke();//绘制
</script>

文本：

<script>
	ctx.font = "30px Arial";
	ctx.lineTo(200, 200);
	ctx.fillText('hello world', 10, 50);//绘制
</script>

图像：

<script>
	var img = new Image();
	img.src = "xxx.jpg";
	image.onload = function(){
		ctx.drawImage(img, 10, 50);//绘制
	}
</script>

拖放

<div ondrop='drop(event)' ondragover='allowDrop(event)' ></div>
<div draggable='true' ondragstart='drag(event)' ></div>
<script>
	function allowDrop(ev){
	    ev.preventDefault();
	}
	function drag(ev){
	    ev.dataTransfer.setData("Text",ev.target.id);
	}
	function drop(ev){
	    ev.preventDefault();
	    var data = ev.dataTransfer.getData("Text");
	    ev.target.appendChild(document.getElementById(data));
	}
</script>