为了账号安全,请及时绑定邮箱和手机立即绑定

html学习20180927

标签:
Html/CSS Html5

        今天在慕课网找了个基础的教程,在这之前是我是大致看过菜鸟教程上面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>换行,&nbsp加空格。

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的表单。

今天收到了一个虚拟机,完成了一台电脑两个虚拟机的搭建,一个用来学习,一个用于工作,以后学习工作都好干活了。

每天叫醒自己的不是闹钟,是梦想!!!


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消