zoukankan      html  css  js  c++  java
  • HTML 基础回顾

     1 # 前端学习
     2 # html 决定架构 css 决定显示样式 js 决定交互、
     3 # 前端,网站前台部分,
     4 # HTML 超文本标记语言,是网页制作必备语言
     5 # 1,HTML页面结构
     6 '''
     7 超文本标记语言的机构包括
     8 头部 head 主体 body
     9 <html lang="zh-CN">
    10    <head>
    11    </head>
    12       <body>
    13       </body>
    14 </html>
    15 meta 在头部中是用来声明编码格式的
    16 title 页面标题
    17 '''
    18 <h1~h6> 标题标签,共6级,数值越大字符越小
    19 <p> 段落标签
    20 &bsp 空格
    21 <div> 块级元素 会独占一行 
    22 <span> 会计 行内快元素,与div不同点是不会换行
    23 <i> 倾斜
    24 <b> 加粗
    25 <strong> 加粗
    26 <img src='address' alt='没显示出来㲏的话替代显示的文本'>
    27 <ul> 无序列表 
    28 <li> 列表项
    29 <ol> 有序列表
    30 tr>td*5 
    31 td*5  按tab自动生成,偷懒方式
    32 <th> 表头
    33 <td> 单元格
    34 <tr> 定义表格行
    35 <table> th td tr 都需要在table大标签内
    36 <form action="定义表单提交地址" method="采用get请求/post请求方式提交数据到后台">
    37     <input type="submit" value="按钮提示文本"> 提交
    38     <input type="radio" value="按钮提示文本"> 单选框
    39     <input type="file" value="按钮提示文本"> 上传文件
    40     <input type="submit" value="按钮提示文本"> 提交数据
    41 </form>  表单
    42 <!--    下拉框-->
    43     生日<select name="test" id="">
    44     <option value="1">1</option>
    45     <option value="2">2</option>
    46     <option value="3">3</option>
    47     <option value="4">4</option>
    48     <option value="5">5</option>
    49     </select>
    50     <input type="submit" value="提交">
    51     <textarea name="大型输入框" id="" cols="30" rows="10"></textarea>
    52 <!--    隐藏表单-->
    53     <input type="hidden" name="token" value="1233123">
    54     <input type="reset" name="重置按钮" value="1233123">
    55     <input type="button" name="普通按钮" value="1233123">
    56     <input type="image" name="吧一个图片当做按钮" value="1233123">
    57     <iframe src="" frameborder="0"></iframe>  内嵌页面

     块元素,内联元素,内联块元素

    1,块元素,也叫做行元素,布局中常用的标签 如 div p ul li h1-h6 dl dt dd 都是块元素
      在布局中的行为
      支持全部的样式,如果没有设置宽度,默认宽度为父级宽度100%
      盒子占据一行,即是设置了宽度
    2,内联元素
    内联元素,也可称为是行内元素,布局中常用的标签如  a,span em b strong i 等等都是内联元素,

      在布局中的行为支持部分样式
      不支持 宽高 margin 上下 padding上下
      宽高由内容决定
      盒子并在一行
      代码换行,盒子之间会产生间距
      子元素是内联元素,父元素可以使用text-align属性设置子元素对其方式
    3,内联块元素
    内联块元素,也叫做行内块元素,是新增的元素类型,现有元素没有归于此类别的,img和input元素的行为类似这种元素但是也归类于内联元素,可以用display属性将快元素或者内联元素转化为这类元素,
      在布局中表现的行为
      支持全部样式
      如果没有设置宽高,宽高由内容决定
      盒子并在一起
      子元素是内联块元素,父元素可以用text-align属性设置子元素水平对齐方式
    这三种元素,可以通过display属性来相互转化,实际开发中,块元素使用较多,所以经常吧内联元素转化为块元素,少量转化为内联块,而要是用内联元素时,直接使用内联元素,而不用块元素了。

    display属性
      display属性是用来设置元素的类型及隐藏的,常用的属性有
      none 元素隐藏且不占位置
      block 元素以块元素显示
      inline 元素以内联元素显示
      inline-block 元素以内联块元素显示

    css 的引入方法
    1,外链式
    通过link标签,连接到外部样式表到页面中
    <link rel = "stylesheet" type='text/css' href='css/main.css'>
    2,嵌入式
    通过style标签,在网页上创建嵌入的样式表
    <style type = "text/css">
    div{
    }
    </style>
    3,内联式 标签的style方式
    <div style="height:100px;background-color: chartreuse"> 测试菜单栏</div>

     

  • 相关阅读:
    BA 的职责
    How to grow up as a BA
    打开struts-config.xml 报错 解决方法Could not open the editor
    eclipse中svn插件的工程不能与svn资源库同步的解决方法
    三种常用的MySQL建表语句(转)
    MySQL中CURRENT_TIMESTAMP(转)
    JavaWeb之CSS详解
    如何在Mac OSX系统下安装Tomcat
    JavaWeb之XML详解
    JavaWeb之HTML入门及常用标签
  • 原文地址:https://www.cnblogs.com/addicated/p/13193925.html
Copyright © 2011-2022 走看看