donghanyang
/
Dbqb_Study
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

10.29日学习笔记提交

wuguanghui
WuGuanghui 4 weeks ago
parent
0138917fe0
commit
5885cf9c20
5 changed files with 401 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      吴光慧学习笔记/10.28/10.28学习总结-吴光慧.docx
  2. 229
      吴光慧学习笔记/10.29/study1.html
  3. 85
      吴光慧学习笔记/10.29/study2.html
  4. 46
      吴光慧学习笔记/10.29/study3.html
  5. 41
      吴光慧学习笔记/10.29/study4.html

BIN
吴光慧学习笔记/10.28/10.28学习总结-吴光慧.docx
View File

229
吴光慧学习笔记/10.29/study1.html
View File

@ -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>&nbsp;</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>

85
吴光慧学习笔记/10.29/study2.html
View File

@ -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">&#128512;</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>

46
吴光慧学习笔记/10.29/study3.html
View File

@ -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>

41
吴光慧学习笔记/10.29/study4.html
View File

@ -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