HTML+CSS——初学笔记(一)

   Web前端开发基础技术需要掌握HTML,CSS,JavaScript语言。

一,HTML,CSS,JavaScript简单介绍

      HTML 是网页内容的载体。内容就是网页制作者放在页面上想让用户浏览的信息,可以包含文字,图片,视频等。

      CSS 样式是表现。 比如,标题字体,颜色变化或者为标题添加背景图片,边框等。所有这些用来改变内容外观的称之为表现。

      JavaScript 是用来是先网页上的特效效果。如 鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,

有动画的,有交互的一般是用javaScript来实现的。


二,初步认识html标签

  1,标签一般成对出现,分为开始标签和结束标签,结束标签比开始标签多 ‘/’,<>  </>.

  2,  标签与标签之间可以嵌套使用,但需要注意先后顺序应一致,如:div 标签包裹 p标签 那在 结束位置 必须 </dip>在</p>后面。

  3,  html标签不区分大小写,但是建议小写。

    <h1></h1> 标题标签

    <p></p> 段落标签

    <img src="1.png"> 设置图片

三,html基本结构。

    <html>

   <head>.......</head>

   <body>.......</body>

   </html>

  1,html标签称为根标签,所有的网页标签都在html标签中

  2,head标签用于定义文档的头部,它是所有头部元素的容器。头部元素有 <title> <script> <style>等

  3,在body标签之间的内容是网页的主要内容,如 h1, p , a , img 等网页内容标签,在这里的标签的内容会在浏览器中显示。

        <head> 文档的头部描述了文档的各种属性和信息,但大多数包含的数据不会真正作为内容显示给读者。

             <head>

                 <title>...... </title> :网页标题信息,会出现在网页的标题栏中

                <meta>

                <link>

                <style>.......</style>

                <script>......</script>

            </head>

四,html的代码注释

  <!-- 注释文字 -->


五,开始学习标签

    <hx> 标题文本</hx>(x为1-6)h1为最高级。

   加强调语气,使用<strong></strong> : 粗体

                             <em></em> : 斜体   (一般strong用的多)

                            <span></span> 为文字设置单独样式
例:        
    <style>
            span{
              color:blue;
                 }
    </style>
    使用:<span>需要设置样式文字<span>

                             <q>引用文本</q> 短文本引用

     注意:使用<q>标签后,文本内容不需要添加双引号。

                             <blockquote>引用文本</blockquote> 长文本引用

    注:浏览器对<blockquote>标签的解析是缩进样式

                              <br> 分行显示文本 (相当于回车键)

    使用:在需要回车的文本后 <br/>

                              &nbsp;  为文章添加空格

                              <address>联系地址信息</address>  在网页中显示为斜体

                             <code>代码语言</code> 加入单行代码 (多行使用 <pre>)

                            <ul><li>信息</li> <ul> 无序信息列表(默认样式前面带个圆点)

                          <ol><li>信息</li> <ol> 有序序信息列表(默认样式前面带序号 1 2 3)

                            <div>…</div> 用div标签为网页划分独立的版块,逻辑部分的容器

                           <div  id="版块名称">…</div> 给div命名,使逻辑更加清晰

                           <table>...</table>
    创建表格的四个元素: table、tbody、tr、th、td
       1,以table开始至结束
       2,tbody 当表格内容多时,会让表格内容都下载完后显示(可不设置)
       3,tr  表格的一行,有多少对,表格就有多少行
       4,td 一个单元格,每个tr中有多少个td就有多少列
       5,th 表格头部的一个单元格,表格表头。

                          <caption>标题文本</caption>  为表格添加标题和摘要











  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值