zoukankan      html  css  js  c++  java
  • 前端html的简单认识

    一.html

      超文本标记语言 hypertext markup language

    二.html的结构

    三.html标签格式

    1.标签由<>把关键字括起来

    2.标签通常是成对出现的 , eg <div></div>  第一个开始标识,第二个有/的是结束标识

      <标签名 属性1="值1" 属性2="值2">内容部分</标签名>

    3.标签也有单独出现的, eg <br/>,<hr/>

      <标签名 属性1="值1" 属性2="值2"/>

    四.html的属性

    1.id    定义标签的唯一id

    2.class    为html元素定义一个或者多个类名

    3.style   规定行内的样式

    五.body中的常用标签

    1.标签的嵌套

      通常块级标签可以包含内联标签,但是内联标签不能包含块级标签,p标签比较特殊,不能包含p标签也不能包含块级标签

    2.行内标签

    内联
    <b>加粗</b> 
    
    <i>斜体</i>
    
    <u>下划线</u>
    
    <s>删除</s>
    标签

    3.块级标签

    <p>段落</p>
    
    <h1>一级标题</h1>
    <h2>二级标题</h2>  # 共有6级标题
    块级标签

    4.特殊字符

    空格        &nbsp
    <           &lt    
    >            &gt
    &            &amp
    版权符     &copy
    注册符      &reg
    几个特殊字符

    5.div标签

      div标签用来定义一个块级标签,通过css来修改样式

    6.span标签

      span标签用来定义一个内联标签,通过css来修饰样式

    7.img标签

      img标签是用来定义图片的

    <img scr="图片的路径" alt="图片未加载出来时的提示" title="鼠标停留时显示的信息" width="宽度" height="高度">

    8.a标签

      a标签是定义超链接的

    <a href="url(或锚)" target="_blank">
    点我
    </a>        
    锚 指向页面中的锚(href="#top") 跳转 top是标签的id
    target属性     _blank 在空白页打开
                       _self 在当前页面打开,默认的     

    9.ul标签

      ul是一个无序的列表

    <ul type="disc">
        <li>第一项</li>
        <li>第二项</li>
    <ul/>
    type属性: disc    实心圆(默认)    circle   空心圆
                   square   实心方块        none 什么都没有 

    10.ol标签

      ol是一个有序列表

    <ol type="1" start="2">
        <li>第一项</li>
        <li>第二项</li>
    </ol>
    type属性
        1 数字列表(默认)  A 大写字母  a 小写字母    I 大写罗马数字    i 小写罗马数字

    11.dl标签

      dl是标题列表

    <dl>
         <dt>标题</dt>  
         <dd>内容</dd>
    </dl>

    12.table标签

      table表格标签

    <table border="1">
        <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>hobby</th>
        </tr>
        </thead>
    
        <tbody>
        <tr>
            <td>1</td>
            <td>alex</td>
            <td>chi</td>
        </tr>
        </tbody>
    table标签格式

      table属性

        border    表格边框

        cell padding  内边距

        cell spacing  外边距

        width     宽度

      td属性

        rowspan    合并行(上下合并)  

        colspan    合并列(左右合并)

    13.input标签

    <input type="text">
    

      type属性

      其他属性

        name:表单提交时的键

        value:表单提交时对应的值

          type="button" "reset" "submit"  为按钮上显示的文本内容

          type="text" "password" "hidden"  为输入框的输入的值

          type="checkbox" "radio" "file"   为输入相关联的值

    14.select标签

    <select name="" id="">
        <option value="1">选项1</option>
        <option value="2">选项2</option>
    </select>
    

      属性

      multiple:设置为多选

      disabled:禁用

      selected:默认

      value:定义提交时的选项值

    15.label标签

      和其他标签进行绑定,点击label标签也能触发点击其他标签的效果

    <label for="username">用户名:</label>
    <input type="text" id="username">
    <label for="pwd">密码:</label>    //for绑定
    <input type="text" id="pwd">

    16.textarea标签

    <textarea name="memo" id="memo" cols="30" rows="10">
        默认内容
    </textarea>
    属性
        name: 名称    rows: 行数    cols: 列数    disabled: 禁用

    16.form标签

       用于向服务器传输数据,从而实现用户与web服务器的交互

      包含 input  select  label  textarea

    属性

  • 相关阅读:
    HTML DOM 06 节点关系
    HTML DOM 05 事件(三)
    HTML DOM 05 事件(二)
    HTML DOM 05 事件(一)
    html DOM 04 样式
    html DOM 03 节点的属性
    html DOM 02 获取节点
    html DOM 01 节点概念
    JavaScript 29 计时器
    JavaScript 28 弹出框
  • 原文地址:https://www.cnblogs.com/q767498226/p/10312103.html
Copyright © 2011-2022 走看看