zoukankan      html  css  js  c++  java
  • 前端网页学习01

    网页的组成:结构、表现、行为

    结构  HTML   搭建页面结构    主要针对  标题、段落、图片、超链接等

    表现 CSS    用于控制页面中元素的样式     主要针对   字体大小、颜色、背景等

    行为 JavaScript   用于相应用户的操作

    网页定义格式如下:

    <!doctype  html>  声明html5版本

    <html>

    <head>

         <meta charset ="utf-8"/>

         <title>网页标题</title>

    </head>

    <body>

          <h1>网页正文</h1>

    </body>Ι

    </html>

    元素:将一个完整的标签称为元素。

    <h1>一级标题</h1>     

    <p>我是一个<em>段落</em></p>     p也是一个标签,em是p的子元素,p是em的父元素

    <!-- --> 注释标签

    <p></p>  段落标签

    <br/>  换行

    <hr/> 水平线

    实体(转义字符)

      语法:&实体名字

               如:<   &lt

                      >    &gt

                     空格  &nbsp

                     版权符号    &copy

    编码与解码  都需要字符集,字符集就是编码和解码所采用的规则   ASCⅡ   ISO-8859-1     GBk   GB2312   utf-8

    img标签来向网页中引入一个外部图片  img是一个自结束标签

    属性值:src:设置一个外部图片的路径

                   alt:设置在图片不能显示时对图片的描述,搜索引擎可以通过alt属性来识别不同的图片

                          如果不写alt属性,则搜索引擎不会对img中的图片进行收录

               width:修改图片的宽度,px做单位

             height:修改图片的高度,px做单位

                           宽高两个属性若设置一个,另一个会等比例调整大小,若同时设置,则按指定值调整

                 <img  src="1.gif"   alt="这是一只狗"  width=“200px”   height="100px"/>

    meta标签还可以用来设置页面的关键字、指定页面进行描述

    如:<meta name="keywords" content="HTML5,Java"/>

    如:<meta name="description"  content="发布h5,js等前端相关的信息">

          搜索引擎在检索页面的时候,会同时检索页面中的关键词和描述,但是这两个值不会影响页面在搜索引擎中的排名

    使用meta标签还可以用来做请求的重定向

    如:<meta http-equiv="refresh" content ="5";url="http://www.baidu.com"/>

    使用iframe创建一个内联框架 

    <iframe src="demo2.html"></iframe>

    使用a标签来创建一个超链接

    属性值:href:指向链接跳转的目标地址,可以写一个完整的地址

    <a href="#">李连杰</a>

    如果将链接地址设置为#,则点击链接之后会自动跳转到当前页面的顶部。

            html中有一个属性,每一个元素都可以设置,该属性可以作为标签的唯一标识,这个属性就是id  

     id属性在同一个页面中只能有一个,不能重复。

      href="#id属性值"   如:href=“#bottom”

    列表(相当于购物清单)

    在html中可创建列表,有无序列表、有序列表、定义列表三种

    <!--无序列表>使用ul标签创建一个无序列表

                          使用li在ul中创建一个列表项,一个li就是一个列表项

                          通过type属性可以修改无序列表的项目符号

                          可选值:disc  默认值

                                        square

                                        circle

                          注:默认的项目符号一般不用,如果需要设置项目符号,则可以采用li设置背景图片的方式来设置

                                另外ulli都是块元素

    <!--有序列表> 与无序列表类似,用ol代替ul,ol也是块元素

                           列表之间可以相互嵌套,可在无序中放个有序列表,也可在有序列表中放个无序

    <!--定义列表>用来对一些词汇或者内容进行定义,使用dl来创建一个定义列表

                          dl中有两个子标签:dt:被定义的内容

                                                         dd:对内容的描述

                                   同样 dl  ul  ol  之间是可以相互嵌套的

  • 相关阅读:
    学会企业分析
    股票暴跌,收益会更高
    富人?中产?
    学会看财务报表
    财务自由三大核心工具
    理财工具分类
    webpack构建速度和体积极限优化
    将搜索时间设置为23:59:59
    省市区县街道四级联动下拉菜单
    用原生JS实现多张图片上传及预览功能(兼容IE8)
  • 原文地址:https://www.cnblogs.com/Java-125/p/8670792.html
Copyright © 2011-2022 走看看