今天在慕课网找了个基础的教程,在这之前是我是大致看过菜鸟教程上面html的教程的,最大的区别就是慕课网这个教程要比菜鸟教程上更加基础的多,更加适合我这零基础的人学习。
工欲善其事,必先利其器,我的学习工具是notepad++。
首先看一下
html文件的结构
<html>
<head>..</head>
<body>..</body>
</html>
head是所有头部元素的容器,头部元素有<title>,<script>,<meta>,<link>,<style>等等标签吧,body中间显示的是网页的主要内容。
p标签是段落,如果两个段落要用两个p标签圈起来。
em使文字倾斜,strong加粗,span可以一段内的几个字进行渲染,单独加格式
span也可以卸载head的style里面,写法如上,效果是一样的。
span有两种style格式<span style=""></span>或者把style写到head里面,然后在里面对span渲染。
hx标签从1到6主键字体变小,h1,h2,h3,h4,h5,h6。
q标签会把中间的字自动加上双引号,语义是引用别人的话,这里是一句话。
一大段话的时候要用blockquote标签,这个标签对两侧进行缩进,并且在上行和下行自动加换行。<br>换行, 加空格。
address是专门展示地址的标签,展示的字体是斜体,和em是相同的,但是语义不同,
一行代码用code标签来展示,大段代码的话用pre标签会把一段代码或者话中的格式全都展示出来,包括换行和空格。
hr标签加横线。
ul,ol,li列表信息标签。
<ul>
<li>我的第一个信息列表</li>
<li>我的第二个信息列表</li>
</ul>
<ol>
<li>我的第一个信息列表</li>
<li>我的第二个信息列表</li>
</ol>
table,tr,th,td是表格标签,summary是对表格的描述,不会在前台显示的,主要是为了告诉编写表格的人,caption标签是表格的标题,thead是表头,tbody是表格的主体,用tbody的作用是可以在一个table中连续不断的写好几个表格,tfoot表格底部,
<table summary="这里不会在界面上显示,只是为了更好的理解table的大致内容">
<caption>这是表格的标题</caption>
<thead>
<tr>
<th>month</th>
<th>saving</th>
</tr>
</thead>
<tbody>
<tr>
<td>january</td>
<td>100</td>
</tr>
<tr>
<td>febrary</td>
<td>80</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>sum</th>
<td>180</td>
</tr>
</tfoot>
</table>
a标签是超链接标签,不仅可以指向网站,还可以指向邮件,加上target可以定义在新界面或者最高层显示要打开的界面。
<a href="www.baidu.com" title="这相当于delphi的hint,也就是鼠标移到连接上显示的内容" target="_blank">这里是显示的内容</a><br>
<!--mailto是发送人,cc是抄送人,bcc是密送人,subject是主题,body是发送内容-->
<a href="mailto:收件人?cc=抄送人&bcc=密送人&subject=这是我给你们发的主题&body=内容是瞎写的,不用看" target="_top">发送邮件!</a><br>
img标签是图片标签。
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="C:\Users\Administrator\Desktop\常用sql以及文件\html+css+js\图片\first.jpg" alt="地址错误,清检查是否有图片" title="我的图片">
想起来菜鸟教程上a标签还可以链接到本界面上某个位置,利用a标签的id属性,格式如下
先写一个a标签在界面上展示,<a id="tips">是啊</a>,<a href="#tips">点我到是啊</a>,点这个链接到id是tips的地方。
今天html就学到这了,明天开始学html的表单。
今天收到了一个虚拟机,完成了一台电脑两个虚拟机的搭建,一个用来学习,一个用于工作,以后学习工作都好干活了。
每天叫醒自己的不是闹钟,是梦想!!!
共同学习,写下你的评论
评论加载中...
作者其他优质文章