web学习第一步:html学习(第二天,2小时+)

感想:这几天都在倒腾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>(开始插的眼在此)

</html>
1.png

2.png

3.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,525评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,203评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,862评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,728评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,743评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,590评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,330评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,244评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,693评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,885评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,001评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,723评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,343评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,919评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,042评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,191评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,955评论 2 355

推荐阅读更多精彩内容

  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,120评论 0 0
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,243评论 1 41
  • 工作 1.把教案写好 2.复习工作 每天一张试卷 学习 1.每天睡前看十页书 2.喜马拉雅上每星期读一篇文章 生活...
    浓咖啡淡茶阅读 53评论 0 0
  • 随着时间悄然的流逝,年龄也在奋力向前奔跑,唯恐落后一步。 不知不觉一年过去了,而我却记不清昨年过年时的场景,努力回...
    陳書瓊阅读 334评论 0 0
  • 唉,又快到五一了,愁死我了!一旅游,就感觉缺一架飞机,一出门,就感觉自己少辆车,一看时间,就感觉自己少块表,一拿起...
    夕柏玟阅读 10,305评论 1 6