WuGuanghui
4 weeks ago
5 changed files with 401 additions and 0 deletions
-
BIN吴光慧学习笔记/10.28/10.28学习总结-吴光慧.docx
-
229吴光慧学习笔记/10.29/study1.html
-
85吴光慧学习笔记/10.29/study2.html
-
46吴光慧学习笔记/10.29/study3.html
-
41吴光慧学习笔记/10.29/study4.html
@ -0,0 +1,229 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"><!--定义字符集为UTF-8--> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<!--设置自适应视口以确保响应式设计--> |
||||
|
<title>HTML学习1</title> |
||||
|
|
||||
|
<!--外部样式表--> |
||||
|
<link rel="stylesheet" type="text/css" href="mystyle.css"> |
||||
|
<!--内部样式表--> |
||||
|
<style type="text/css"> |
||||
|
h1 {color: red} |
||||
|
p {color: blue} |
||||
|
|
||||
|
.cities { |
||||
|
background-color:black; |
||||
|
color:white; |
||||
|
margin:20px; |
||||
|
padding:20px; |
||||
|
} |
||||
|
|
||||
|
#myHeader { |
||||
|
background-color: lightblue; |
||||
|
color: black; |
||||
|
padding: 40px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
</head> |
||||
|
<body><!--<body> 元素定义了 HTML 文档的主体-->> |
||||
|
<!--标题 h1(大)到h6--> |
||||
|
<h1>学习笔记</h1> |
||||
|
<!--段落--> |
||||
|
<p>今天学习了很多新的知识，感觉收获颇丰。</p> |
||||
|
|
||||
|
<!--水平线--> |
||||
|
<hr/> |
||||
|
<!--插入空行/换行--> |
||||
|
<p>This is<br />a para<br />graph with line breaks</p> |
||||
|
<br /> |
||||
|
<p>今天学习了很多新的知识，感觉收获颇丰。</p> |
||||
|
|
||||
|
|
||||
|
<!--链接--> |
||||
|
<a href="http://www.w3school.com.cn">这是web学习网站</a> |
||||
|
<br /> |
||||
|
<a name="label" href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a> |
||||
|
<br /> |
||||
|
<a href="#label">在同一个文档中创建指向该锚的链接</a> |
||||
|
<br /> |
||||
|
<a href="http://www.w3school.com.cn/#label">在其他页面中创建指向该锚的链接</a> |
||||
|
|
||||
|
<br /> |
||||
|
|
||||
|
<!--图片--> |
||||
|
<img src="http://www.w3school.com.cn/images/boat.gif" alt="Big Boat" width="104" height="142"/> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<!--HTML元素：从开始标签（start tag）到结束标签（end tag）的所有代码--> |
||||
|
|
||||
|
<!--HTML属性：提供有关元素的附加信息 始终为属性值加引号 |
||||
|
class = "value"：为元素指定类名 |
||||
|
id="value"：为元素指定唯一的标识符 |
||||
|
style="property:value;"：为元素添加内联样式 |
||||
|
title="text"：为元素添加提示文本 |
||||
|
|
||||
|
<table border="1">：为表格添加边框 |
||||
|
--> |
||||
|
|
||||
|
<!--HTML样式--> |
||||
|
<h1 style="text-align:center;">水平居中对齐</h1> |
||||
|
<p style="font-family:arial; color:red; font-size:20px;">A paragraph.</p> |
||||
|
|
||||
|
<!--预格式文本，保留了空格和换行--> |
||||
|
<pre> |
||||
|
for i = 1 to 10 |
||||
|
print i |
||||
|
next i |
||||
|
</pre> |
||||
|
|
||||
|
<!--地址--> |
||||
|
<address> |
||||
|
Written by <a href="Wugh5200@163.com">Donald Duck</a>.<br> |
||||
|
Visit us at:<br> |
||||
|
Example.com<br> |
||||
|
Box 564, Disneyland<br> |
||||
|
USA |
||||
|
</address> |
||||
|
|
||||
|
<br /> |
||||
|
|
||||
|
<!--缩写和首字母缩写--> |
||||
|
<abbr title="etcetera">etc.</abbr> |
||||
|
<br /> |
||||
|
<acronym title="World Wide Web">WWW</acronym> |
||||
|
<p><dfn><abbr title="World Health Organization">WHO</abbr></dfn> 成立于 1948 年。</p> |
||||
|
|
||||
|
<br /> |
||||
|
<!--引用--> |
||||
|
<q>学习使我快乐。</q> |
||||
|
<br /> |
||||
|
<blockquote cite="http://www.w3school.com.cn"> |
||||
|
学习使我快乐。 |
||||
|
</blockquote> |
||||
|
|
||||
|
<!--表格 |
||||
|
<table>：定义表格 |
||||
|
<tr>：定义表格行 |
||||
|
<th>：定义表格头单元格 |
||||
|
<td>：定义表格数据单元格 |
||||
|
cellspacing：单元格间距 |
||||
|
cellpadding：单元格内边距 |
||||
|
--> |
||||
|
<table border="1" cellpadding="10" cellspacing="5" bgcolor="#FAEBD7"> |
||||
|
<caption>标题</caption> |
||||
|
|
||||
|
<tr> |
||||
|
<th colspan="2">Heading</th><!--横跨两列--> |
||||
|
<th rowspan="2">Another Heading</th><!--横跨两行--> |
||||
|
</tr> |
||||
|
|
||||
|
<tr> |
||||
|
<td>row 1, cell 1</td> |
||||
|
<td>row 1, cell 2</td> |
||||
|
</tr> |
||||
|
|
||||
|
<tr> |
||||
|
<td> </td> |
||||
|
<td>row 2, cell 2</td> |
||||
|
</tr> |
||||
|
|
||||
|
<tr> |
||||
|
<td>这个单元包含一个表格： |
||||
|
<table border="1"> |
||||
|
<tr> |
||||
|
<td align="left">A</td> |
||||
|
<td align="right">B</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>C</td> |
||||
|
<td>D</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
</td> |
||||
|
</tr> |
||||
|
|
||||
|
<tr> |
||||
|
<td>这个单元包含一个列表： |
||||
|
<ul> |
||||
|
<li>苹果</li> |
||||
|
<li>香蕉</li> |
||||
|
<li>菠萝</li> |
||||
|
</ul> |
||||
|
</td> |
||||
|
<td>HELLO</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
|
||||
|
<!--列表--> |
||||
|
<h2>无序列表</h2> |
||||
|
<!--type="disc" type="circle" type="square"--> |
||||
|
<ul type="disc"> |
||||
|
<li>Coffee</li> |
||||
|
<li>Milk</li> |
||||
|
</ul> |
||||
|
|
||||
|
<h2>有序列表</h2> |
||||
|
<ol type="A"> |
||||
|
<!--type="A" type="a" type="I" type="i"--> |
||||
|
<li>Coffee</li> |
||||
|
<li>Milk</li> |
||||
|
</ol> |
||||
|
|
||||
|
<h2>嵌套列表：</h2> |
||||
|
<ul> |
||||
|
<li>咖啡</li> |
||||
|
<li>茶 |
||||
|
<ul> |
||||
|
<li>红茶</li> |
||||
|
<li>绿茶</li> |
||||
|
</ul> |
||||
|
</li> |
||||
|
<li>牛奶</li> |
||||
|
</ul> |
||||
|
|
||||
|
<h2>定义列表：</h2> |
||||
|
<dl> <!--自定义列表以 <dl> 标签开始--> |
||||
|
<dt>计算机</dt> <!--每个自定义列表项以 <dt> 开始--> |
||||
|
<dd>用来计算的仪器 ... ...</dd> <!--每个自定义列表项的定义以 <dd> 开始--> |
||||
|
<dt>显示器</dt> |
||||
|
<dd>以视觉方式显示信息的装置 ... ...</dd> |
||||
|
</dl> |
||||
|
|
||||
|
<!--块级标签默认独占一行:<div>、<h1>-<h6>、<p>、<form>、<ul>、<dl>； |
||||
|
行内标签:<span>、<input>、<img>。--> |
||||
|
|
||||
|
|
||||
|
<!--同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用：--> |
||||
|
<!--类--> |
||||
|
<div class="cities"> |
||||
|
<h2>London</h2> |
||||
|
<p> |
||||
|
London is the capital city of England. |
||||
|
It is the most populous city in the United Kingdom, |
||||
|
with a metropolitan area of over 13 million inhabitants. |
||||
|
</p> |
||||
|
</div> |
||||
|
|
||||
|
<!--id--> |
||||
|
<h1 id="myHeader">My Header</h1> |
||||
|
|
||||
|
<!--通过 ID 和链接实现 HTML 书签--> |
||||
|
<h2 id="C4">第四章</h2> |
||||
|
<a href="#C4">跳转到第四章</a> |
||||
|
<!--或者，在另一张页面中，添加指向这个书签的链接（“跳转到第四章”）--> |
||||
|
<a href="html_demo.html#C4">Jump to Chapter 4</a> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,85 @@ |
|||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
||||
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
||||
|
|
||||
|
<html xmlns="http://www.w3.org/1999/xhtml"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>HTML学习2</title> |
||||
|
</head> |
||||
|
<body> |
||||
|
|
||||
|
<!--iframe--> |
||||
|
<iframe src="http://127.0.0.1:5500/%E5%90%B4%E5%85%89%E6%85%A7%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/10.29/study1.html" |
||||
|
name="iframe_a"width="500" height="500" frameborder="0">study1</iframe> |
||||
|
<!--使用 iframe 作为链接的目标--> |
||||
|
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p> |
||||
|
|
||||
|
<!--框架--> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<h1>我的第一个 Emoji</h1> |
||||
|
<p style="font-size:48px">😀</p> |
||||
|
|
||||
|
<!--URL--> |
||||
|
<!-- |
||||
|
http 超文本传输协议 以 http:// 开头的普通网页。不加密。 |
||||
|
https 安全超文本传输协议 以 https:// 开头的安全网页。加密。 |
||||
|
ftp 文件传输协议 以 ftp:// 用于将文件下载或上传至网站。 |
||||
|
ftps 安全文件传输协议 以 ftps:// 开头的安全文件传输协议。加密。 |
||||
|
file 本地文件 以 file:// 开头的本地文件。 |
||||
|
--> |
||||
|
|
||||
|
<!--表单--> |
||||
|
<!--form--> |
||||
|
<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8" |
||||
|
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate> |
||||
|
<fieldset><!--元素组合表单中的相关数据--> |
||||
|
<legend>Personal information:</legend><!--为 <fieldset> 元素定义标题--> |
||||
|
First name:<br> |
||||
|
<input type="text" name="firstname"> |
||||
|
<br> |
||||
|
Last name:<br> |
||||
|
<input type="text" name="lastname"> |
||||
|
<br><br> |
||||
|
<input type="submit" value="Submit"></fieldset> |
||||
|
</form> |
||||
|
|
||||
|
<!--单选按钮--> |
||||
|
<form> |
||||
|
<input type="radio" name="sex" value="male" checked>Male |
||||
|
<br> |
||||
|
<input type="radio" name="sex" value="female">Female |
||||
|
</form> |
||||
|
<!--复选框--> |
||||
|
<form> |
||||
|
<input type="checkbox" name="vehicle" value="Bike"> I have a bike |
||||
|
<br> |
||||
|
<input type="checkbox" name="vehicle" value="Car" checked> I have a car |
||||
|
</form> |
||||
|
|
||||
|
<!--Action--> |
||||
|
<form action="action_page.php" method="GET"></form> |
||||
|
<form action="action_page.php" method="POST"></form> |
||||
|
<!--POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的 |
||||
|
GET的URL 的长度受到限制（2048 个字符）--> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<!--target属性--> |
||||
|
<form action="/action_page.php" target="_blank"></form> |
||||
|
<!--_blank:新的 _self：当前 _parent：父框架 |
||||
|
_top：在窗口的整个 body 中 framename：在命名的 iframe 中--> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,46 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Document</title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<!--<select> <option>下拉列表--> |
||||
|
|
||||
|
<form action="/demo/demo_form.asp"> |
||||
|
<input list="browsers" name="browser"> |
||||
|
<datalist id="browsers"> |
||||
|
<option value="Internet Explorer"> |
||||
|
<option value="Firefox"> |
||||
|
<option value="Chrome"> |
||||
|
<option value="Opera"> |
||||
|
<option value="Safari"> |
||||
|
</datalist> |
||||
|
<input type="submit"> |
||||
|
</form> |
||||
|
|
||||
|
<!--<textarea>多行输入字段（文本域）--> |
||||
|
<textarea name="message" rows="10" cols="30"> |
||||
|
The cat was playing in the garden. |
||||
|
</textarea> |
||||
|
|
||||
|
<!--<button>按钮--> |
||||
|
<input type="button" onclick="alert('Hello World!')" value="Click Me!"> |
||||
|
|
||||
|
<!--输入类型 |
||||
|
color date datetime datetime-local email month number range search tel time url week--> |
||||
|
|
||||
|
<!--只读属性 readonly--> |
||||
|
<input type="text" name="firstname" value="Bill" readonly> |
||||
|
|
||||
|
<!--禁用属性 disabled--> |
||||
|
<input type="text" name="firstname" value="Bill" disabled> |
||||
|
|
||||
|
<!--pattern 属性规定用于检查 <input> 元素值的正则表达式--> |
||||
|
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"> |
||||
|
|
||||
|
|
||||
|
|
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,41 @@ |
|||||
|
<!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> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue