感想:这几天都在倒腾mac os和ubuntu,进度被耽搁了,主要是度盘速度不敢恭维(穷哭/(ㄒoㄒ)/~~),其次是都靠摸索吧。今天学习html来总结一番,不对,先总结一下mac和Ubuntu的感受:
- 刚上手的小白,勿喷。
- ubuntu对命令行依赖极大,连移动个文件都要用mv,虽然很帅,但还不习惯。
- mac os我装的是下载失败的10.14.1的cdr文件,居然成功了,不过后面安装后升级到10.14.6,没问题,
mac的cmd键等同于win键,这样什么都靠win键对我的小手(,,ԾㅂԾ,,)很友好啊,总之还不错,但流畅度很罕见的会有点影响。
正题
- 笔记:
<!Doctype html> (已说)
<html>(已说)
<head>(已说)
<title>(已说)
额
</title>
<meta charset="utf-8">(已说)
</head>
<h1>这是一个标题</h1>(已说)
<a id="page"></a>(已说,就是插个眼的功能,感觉有趣,这次又写上了,看来没有忘)
<p>
<a href="#self">描述一下自己,让我们更了解你!</a>(跟上面这个是一样的只是这是回城点,点击即可回城)
<img src="girl.png" alt="girl" width="12" height="21" usemap="#girlplace">(图片引用属性,完善上次的,usemap属性是在图片中创建多个链接,点击不同形状,不同区域的图片响应不同链接,貌似可以用来感谢不可描述的事?喝!别忘了,后跟map双标签)
<map name="girlplace">
<area shape="rect" coords="0,0,65,81" href="wwww.baidu.com" alt="place1">(area单标签,用于确定链接形状及链接,shape:响应形状后跟形状描述词,coords确定中心坐标,href 确定网址,注意一般需再加上https://形式,alt略)
<area shape="circle" coords="0.1.54.841" href="wwww.zhihu.com" alt="place2">
<area shape="poly" coords="x1,y1,x2,y2……" href="www.greatytc.com" alt="[place3">
</map>
<center><b>江湖</b></center>(已说,居中,加粗)
<table border="1" cellpadding="10" cellspacing="10">(table双标签,制订表格,border为0不显示边框,cellpadding为单元格边距,后者为间距)
<caption><b>江湖</b></caption>(caption制订表格标题,自动加粗居中)
<tr>(tr双标签,学过线代的就明白r是row,即行,每出现一个tr标签即有几行,此为第一行)
<th colspan="4">酒</th>(h即head,即表的第一行,colspan使其占据4个单元格,col也是列的缩写)
</tr>
<tr>(此为第二行,内容由td填充,每一个tr对应的一个td对应一列,d对应列单词太长)
<td>陈十一</td>
<td>李二</td>
<td>宁姚</td>
<td>宋长镜</td>
</tr>
<tr>
<th rowspan="2">诗</th>(rowspan属性使其占据两行单元格)
</tr>
<tr>
<td>宋集薪</td>
<td>稚圭</td>
<td>阿良</td>
<td>齐静春</td>
</tr>
<tr>
<td>
<ul>(ul双标签,可用un记忆,自建无序列表,list即列表)
<li>5</li>(列表第一行)
<li>5</li>(列表第二行)
</ul>
</td>
</tr>
</table>(table双标签结束)
</p>
<p>
<ul>
<li>木大</li>
<li>木大</li>
<li>木大</li>
</ul>
<ol>(ol双标签,自建有序列表)
<li>木大</li>
<li>木大
</li>
<li>木大</li>
</ol>
</p>
wow,you can really<mark>dance</mark>!(mark双标签,为包含内容填充背景色,以示强调)
<ol type="1">(规定排序方法为自然数排数)
<li>王大锤</li>(显示:1.王大锤)
<li>寒冰</li>(显示:2.寒冰)
<li>澈澈</li>(显示:3.澈澈)
</ol>
<ul style="list-style-type:circle ;">(类似上方排序,只是换成了自然数换成了小圆圈)
<li>北笙</li>
<li>孤影</li>
<li>张大仙</li>
</ul>
<ol type="1">(此ol标签嵌套了ul标签,更显美观高级)
<li>王大锤</li>
<ul style="list-style-type:circle ;">
<li>北笙</li>
<li>孤影</li>
<li>张大仙</li>
</ul>
<li>寒冰</li>
<li>澈澈</li>
</ol>
<dl>(dl双标签,自建列表形式,类似ol,ul)
<dt>(dt双标签,建立第一个项目)
虎牙
</dt>(建立第一个项目内容)
<dd>-狗贼</dd>
<dd>-太乙</dd>
<dd>-寂然</dd>
<dt>企鹅</dt>(建立第二个项目)
<dd>-北笙</dd>
<dd>-北葵</dd>
<dd>-北不五</dd>
</dl>
<div style="color: #FF0000;">(div功能太多,还不会,此处是使包含内容变成红色字体(#FF0000对应红色),注意div属于块类型,所包含的内容是要单独成段的)
hello,world!
</div>
<span style="color: green">青山</span>不改,<span style="color:aquamarine">绿水</span>长流。(span双标签,此处功能与div相同,不过对颜色只需单词,而且span属于内联,所包含内容不须单独成段)
<p>
<form action="">(form双标签,形成表单,供用户输入)
请输入姓名;<input type="text">
(input提供输入,为txt时输入文本,可用size确定长度,可见)
请输入年龄:<input type="text">
请输入密码;<input type="password">
(passward时,输入的数据是看不见的,通通以小圆圈代替(熟悉不?))
</form>
</p>这道题你会吗?
<form action="">(form制作表单,此处用来制作选择表单)
<input type="radio" name="me" value="dalao">必须的,我是大佬
(radio是单选,必须保持选项的是同一个)
<input type="radio" name="me" value="cainao">抱歉,菜鸟一枚。
<input type="reset" value="再试一次">(重置填写内容)
<input type="submit" value="确认并提交">(提交填写内容,action为提交的目的地,此时未填写,故无法提交)
</form>
<form action="">请问哪个是你老婆?
(checkbox为多选,name必须一致,当然答案肯定是我都要!)
<input type="checkbox" name="girl" value="1">稚名真白
<input type="checkbox" name="girl" value="2">五十玲
<input type="checkbox" name="girl" value="3">竹川萤
<input type="checkbox" name="girl" value="4">炮姐
</form>
<form action="">
<select name="zones">(select双标签用于form中制作可折叠的选项)
<option value="1">北京</option>(option制作选项,增加selected表示默认选项)
<option value="2">纽约</option>
<option value="3">东京</option>
<option value="4">汉城</option>
<option value="5" selected>翡冷翠</option>
</select>
</form>
描述一下自己吧?
(textarea双标签用来形成文本域,可设置行列控制字数)
<textarea name="自我介绍" id="self" cols="30" rows="10">我有话要说!!!</textarea>
<form action="">
<input type="button" value="Go!">(形成按键,value表示按键上的内容,action指向)
</form>
<form action="">
<fieldset>(在表格中创建表单)
<legend>宅男的自我简介</legend>(表单题目)
姓名:<input type="text" size="15">
地址:<input type="text" size="15">
生日:<input type="text" size="10">
</fieldset>
</form>
<form action="www.baidu.com" method="GET">(指定表单提交对象,设定提交方式为get,还有一种是post)
Name: <input type="text" size="10">
Address: <input type="text" size="15">
<input type="submit" value="提交">
</form>
<form action="MAILTO:someone@example" method="POST">(设定表单发邮件,mailto必须大写才有效,发送给someone@example.com)
发送邮件到:someone@example.com
姓名:<input type="text">
邮箱:<input type="text">
内容:<textarea name="con" id="con" cols="30" rows="10">邮箱内容_</textarea>
(以文本域的形式书写邮件内容,但貌似会以码的形式呈现)
<input type="submit" value="发送">
<input type="reset" value="让我再酝酿酝酿">
</form>
<iframe src="https://www.baidu.com" frameborder="0" width="800" height="500" scrolling="no"></iframe>
(这貌似是今天学的最好玩的了,frame即框架,iframe是创建网页内框架,即在网页内再开一个小网页,这才是网页广告的真正形式!src指定网页路径,注意必须加上https://,然后设置宽和高,scrolling设置是否能鼠标滚动,auto,no,yes,默认是yes,iframe双标签有非常多的用途,以后会学到的。)
<a href="#page">返回首页</a>(开始插的眼在此)