12.18
重新整理复习了HTML的学习内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/> <!--必须放在title前面以及其他meta前面-->
<title>Hello </title> <!--JavaScript引入用script标签,css用link标签-->
</head>
<body>
<!--文本-->
<h3>出发</h3> <!--h1-6为标题标签,依次减少,h意为header-->
<p>岁月漫长,心怀热爱</br>携手共赴,星辰大海</p> </br> <!--</br>为换行标签,也可以用两个<p>标签换行-->
<strong>岁月漫长,心怀热爱</br>携手共赴,星辰大海 </strong></br> <!--strong 和b为粗体标签,因为strong比b更具语义性尽量用strong-->
<em>岁月漫长,心怀热爱</br>携手共赴,星辰大海</em></br> <!--em i cite三个都可以表示斜体,尽量用em,原因如上-->
<!--sup为上标,sub为下标-->
<em><s>岁月漫长,心怀热爱</s></br><u>携手共赴,星辰大海</u></em> </br> <!--s为删除线 ,u为下划线-->
<big>岁月漫长,心怀热爱</big></br> <!--big变大,small变小-->
<small>携手共赴,星辰大海</small>
<p>岁月漫长,心怀热爱</br>
<hr/> <!--水平线标签--> <!--div标签用来划分html的区域-->
携手共赴,星辰大海</p>
<!--列表-->
<ol type="A">
<li>当你想鸟一样</li> <!--ol为有序列表,type可以决定列表的序号,1为数字,a与A为字母,i与I为罗马数字-->
<li>飞往你的山</li>
</ol>
<ul type="square"> <!--ul为无序列表,type类型为disc为默认实心圆,circle为空心圆,square为正方体-->
<li>没有什么能阻止一株草对阳光的渴望</li>
<li>没有什么能够压抑一只鸟对天空的向往</li>
<li>对每一个怀抱坚定信念的生命而言</li>
<li>再大的风雨也不能凝固跳跃的心脏</li>
</ul>
<dl> <!--dl定义列表,dt名词,dd描述-->
<div id="名人语录">
<dt>周小平</dt>
<dd>江山不负英雄泪,且把利剑破长空</dd>
</dl>
<!--表格-->
<table> <!--<table>和</table>表示整个表格的开始和结束-->
<caption>学生成绩表</caption> <!--captain为标题标签,一个表格只能有一个标题-->
<thead>
<tr> <!--<tr>和</tr>表示行的开始和结束-->
<th>姓名</th> <!--th为表头单元格-->
<th>性别</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td> <!--<td>和</td>表示单元格的开始和结束-->
<td>男</td>
<td>250</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>520</td>
</tr>
</tbody> <!---thead和tbody与tfoot使表格更好的语义化-->
<tfoot>
<tr>
<td>平均分</td>
<td colspan="2">385</td> <!--rowspan合并行,colspan合并列-->
</tr>
</tfoot> <!--tfoot一般用于统计数据-->
</table>
<!--图片和超链接-->
<img src="c:\Users\YuXu\OneDrive\图片\Saved Pictures\R-C.jpg" alt="风景" title="view"/>
<!--src用于指定这个图片所在的路径,alt和title都是用于指定图片的提示文字,src和alt这两个是必选属性,而title是可选属性-->
<!--上述图片的相对路径为img src="R-C.jpg"/-->
<a href="http://www.lvyestudy.com/html/a-tag" target="_blank">lvyestudy</a>
<!--href表示你想要跳转到那个页面的路径,target属性来定义超链接打开窗口的方式,_blank在新窗口打开链接-->
<a href="#名人语录">跳转</a>
<!--#表示锚点链接,跳转到该页面内部某处-->
<!--表单-->
<form method="post"><!--表单名称name 提交方式method 提交地址action 打开方式target 编码方式enctype -->
爱好<input type="text" value="eating" size="8" maxlength="7">
<!--单行文本框type类型为text,设置文本框的默认值value 设置文本框的长度size 设置文本框中最多可以输入的字符数maxlength-->
生日<input type="password"><!--密码文本框-->
生日:
<input type="radio" name="birth" value="July checked" />七月
<input type="radio" name="birth" value="June" />六月<br>
<!--单选框,name属性表示单选按钮所在的组名,而value表示单选按钮的取值,checked默认选中-->
你喜欢的水果:<br/>
<input type="checkbox" name="fruit" value="苹果"/>苹果
<input type="checkbox" name="fruit" value="香蕉"/>香蕉
<input type="checkbox" name="fruit" value="西瓜"/>西瓜
<input type="checkbox" name="fruit" value="李子"/>李子<br>
<!--复选框-->
<input type="button" value="普通按钮"/><!--value为按钮上的字-->
<input type="submit" value="提交按钮"/>
<input type="reset" value="重置" /><!--重置按钮一般用来清除用户在表单中输入的内容,重置按钮只能清空它“所在form标签”内表单中的内容-->
<input type="file"/><br><!--文件上传按钮-->
自我介绍:<br>
<textarea rows="5" cols="3" value="10">你好</textarea>
<!--多行文本框textarea-->
<select multiple size="6">
<option>HTML</option>
<option>CSS</option>
<option selected>jQuery</option> <!--selected为是否选中,value为选项值-->
<option>JavaScript</option>
<option>Vue.js</option>
</select><!--下拉列表,设置下拉列表可以选择多项multiple 设置下拉列表显示几个列表项,取值为整数size -->
<!--内嵌框架-->
<iframe src="http://www.lvyestudy.com/html/iframe-tag" width="200" height="200"></iframe>
</form>
</body>
</html>