前段内容Day01

前端内容介绍    
    Html—用来勾勒出网页的结构和内容--骨架
    css—用来美化网页-皮肤
    javaScript—让网页呈现出动态的数据和效果
    jQuery—是js的框架,提高了javaScript开发效率

    
    1.客户端(浏览器)发送http请求,请求到达服务器
    2.服务端接收这个请求,解析并处理请求,返回响应数据
    3.客户端接收响应数据,解析之后显示页面

    http协议,超文本传输协议,超文本http
    http天生就是为了发送html而设计的
    注意:
    1.html存储在哪?——服务器
    2.html运在哪?——客户端浏览器
    
HTML超文本标记语言
XML可扩展的标记语言
    xml标签名不固定,可扩展
    xml属性名不固定,可扩展
    把HTML看作标签名,属性名,嵌套关系相对固定的xml语言
    
HTML的最基本结构
        <!DOCTYPE HTML>
        <html>
            <head></head>
            <body></body>
        </html>

 

 

HTML的常用标签    

    1.文本标签
        1.1标题 h1 h2 h3 h4 h5 h6
        在hn标签上可以使用align=“center”属性
        效果是使标签居中
        开发中使用css进行格式化(居中,颜色,大小)
        
    2.列表
    2.1无序列表
    
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
    2.2有序列表
    
            <ol>
                <li></li>
                <li></li>
                <li></li>
            </ol>
    
    2.3列表嵌套
    
    2.4项目中下拉菜单的列表
    
    
      分区
      1.div    
          div 看不到,不是为了有显示效果,为了逻辑分区存在。
          <body>
              <nav>
              
              </nav>
              <div></div>
              
              <footer></footer>
          </body>
    div是块级分区,这个区域独占一行,效果跟前后带来回车一样
    
    行内分区
    <p>北京大钟寺<span style="color:red">中鼎</span>大厦7层</p>
    
    总结:初学者对div和span分不清
    若果不加样式,你看不出来
    若果只是一行文字内部区域进行设置,使用行类分区
    span行内分区后续不会行行,会和其他文字混合在题行
    
    
    
    
    元素显示方式
      div hn p li ul ol
    行内元素,不会换行,可以和其他行内元素位于同一行
    
    span
    
    行内元素空格折叠现象
    写代码时,不管写多少空格,都显示一个空格,
    回车也显示一个空格
    
    实体引用
    &nbsp
    &lt;<
    &gt;>
    &amp;&
    
    
    图片标签
    绝对路径
    在一个页面中显示其他网站中对图片,经常使用绝对路径
    在行业中,称提供图片对网站为图床
    好处是占用对子云是图床网站对资源
    缺点是,图床网站更改路径,图片就显示不出来了
    
    相对路径
    在同一个网站内部,利用文件路径对相对关系
    找到图片位置
    在同一个网站中,很少使用绝对路径
    
    <img alt="图片显示失败时显示文本" src="../img/02.png"  title="图片表述文本" 
    width="256px" height="256px">
    宽和高,一般写在css样式里,不通过属性直接去写。
    防止失真
    图片对宽和高一般只设置一个,另外一个将会自适应
    
    img标签支持对图片格式
    .png支持透明色
    .jpg不支持透明色
    .gif支持动图 256色
    
    超链接
    <a></a>
    可以链接到网页,图片,文本,下载
    <a href="http://doc.tedu.cn/w3/tags/index.html">跳转到百度</a>
    <a href="../img/06.png">跳转到图片</a>
    <a href="jianli.html">跳转到简历</a>
    
    href中也分绝对路径和相对路径
    引用其他网站资源使用绝对路径
    引用自己网站资源使用相对路径
    
    其他属性
        target=“_blank”在新的空白窗口打开
        target=“_self”在本窗口打开
        
        
    超链接锚点的用法
    两张页面只见的跳转是超链接
    一个页面内部的位置跳转是锚点
    锚点语法:
        1.h5
            <标签 id="id">
            <a href="#id"></a>
        2.h4写法
            <a name="name"></a>
            <a href="#name"></a>
            
            
    网页中的表格标签
            1.边框 border="2"  
            2.宽  width="300px" 
            3.高  height="100px"
            4.表格居中 align="center"
            5.边框与内容之间的内容 cellpadding="20px" 
            6.边框之间的距离 cellspacing="20px"
            

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值