zoukankan      html  css  js  c++  java
  • html 基础

    最近一直在用perl 写CGI,自己写的表达样式很丑, 决心好好看下前端的一些基本知识,先从html开始

    1)标题:

    h1, h2, h3, h4, h5, h5

    标题为快级元素,自己独占一行,其后面的元素会另起一行

    2) 段落

    p

    段落为块级元素,

    3) 强调:

    em:  默认斜体

    strong : 默认加粗

    span   : 为元素单独添加样式

    这三个元素都是内联元素

    4)图片:

    img:

      src:   图片地址

      title: 鼠标滑过图片时显示的文本

      alt: 当图片加载失败时显示的文本

    图片为内联元素, 图片格式可以为png, gig, jpeg

    5) 超连接:

    a :

      href:   目标网址

      title : 鼠标滑过链接时显示的文本

      target: 新连接的打开方式,默认在本窗口打开,当值设置为_blank时,会在新窗口打开链接

      mailto: 一种特殊的超链接,当点击该连接,会自动调用本地的默认邮件软件,进行邮件的发送:

        href:mailto:example@qq.com?subject=design&body=

        subject: 设置邮件主题

        body : 设置邮件内容 

    超连接为内联元素,默认超链接内的文字为蓝色,点击过的超链接为紫色

    6) 列表:

    无序列表:

    ul

    无序列表默认每一个列表项一行,而且每个列表项前面有一个圆点

    有序列表:

    ol

    li: 列表项

    有序列表默认每一个列表项一行,而且每个列表项前面有从1开始的序号

    列表为块级元素

    7) 表格:

    table:表格

      summary: 设置表格的摘要内容

    tbody:不加这个标签,表格内容加载一行显示一行,加上这个标签后, 当表格内容加载完后,再显示

    caption: 设置表格的标题

    tr: 表格的每一行

    th:  表头, 默认文字加粗,居中

    td: 单元格

    表格为块级元素

    8) 表单

    form : 

      action : 指定处理表的服务器端程序,

      method : 提交的方法,post 和 get 

    label: label 的作用为当鼠标单击label 时,自动跳转到for 指定的id 元素,

    textarea : 多行文本输入框, 内联元素

        cols: 设置列数

        rows: 设置行数

        这两个属性可以用css 的width 和height  属性来代替

    input 接受用户的输入, 为了方便后端服务器程序接收收入的值, 每个input 需要设置name 属性, value 属性会设置默认值,有提示作用

    input :

      type="text"       : 文本框, 内联元素

      type="password" : 密码输入框, 内联元素 

      type="radio"  : 单选框, 每个单选框的name 属性的值必须一致, 内联元素, checked="checked"设置默认选中的选项

      type="checkbox" : 多选框, 内联元素, checked="checked" 设置默认选中的选项

      type="submit"  : 提交按钮, 内联元素, value 设置提交按钮的内容

      type="reset"  : 重置表单按钮, 内联元素 , value 设置提交按钮的内容

    表单为块级元素

    9) 下拉列表

    select:  下拉菜单默认为单选, multiple=“multiple", 将下拉菜单设置为多选

    option: 设置每个下拉列表中的选项
      value : 设置提交到服务器的值

      selected="selected" 设置默认选中的下拉选项

    下拉列表为内联元素

    10) 其他:

    换行: br

    水平横线: hr,块级元素

    短引用:q,自动在引用的内容两端添加双引号,内联元素

    长引用: blockquote 块级元素, 自动在引用的内容两端添加双引号,而且会自动缩进内容

    地址: address  块级元素

    代码: code  : 内联元素

    大段代码:pre : 块级元素

    div : 控制排版, 块级元素

    强调: em : 内联元素,默认斜体

       strong: 内联元素, 默认粗体

    html 是忽略空白和换行符的,所以想要显示空白必须使用  

    html 文件的基本结构

    <html>

        <head>

        </head>

        <body>

        </body>

    </html>

    html 的注释为<!-- 注释-->

  • 相关阅读:
    正则表达式
    查看当前文件大小
    logging日志快速上手
    kafka消息队列的使用
    修改文件权限给指定的用户
    使用Dockerfile构建镜像
    k8s 常用命令总结
    k8s pod.yaml配置文件参数
    Linux安装依赖包
    Freeswitch配置SIP网关拨打外部
  • 原文地址:https://www.cnblogs.com/xudongliang/p/5045533.html
Copyright © 2011-2022 走看看