前端基础笔记

130 阅读3分钟

标题标签

   标题标签有6个,从h1h6h1定义最大的标题,h6定义最小的标题。
        <h1>一级标题</h1>
        <h2>一级标题</h2>
        <h3>一级标题</h3>
        <h4>一级标题</h4>
        <h5>一级标题</h5>
        <h6>一级标题</h6>
        

段落标签

    p标签用于定义段落。
      <p>这是一个段落</p>

图片标签

     img用来定义图片。
     img的属性有 src:图片的位置。
                 alt:图片的代替文本。
                 title:鼠标悬浮于图片时的文本。
                 width:图片的宽度。
                 height:图片的高度。
            <img src="" alt="" width="" height="" />

超链接标签

   a标签用来定义超链接。
   具有属性 href:链接的地址
            target:打开目标网页的位置。常见的有_self,_blank.
        <a href="" target=""></a>
            

列表标签

 列表标签有三种:有序列表,无序列表,自定义列表。
  有序列表用ol定义
  <ol> 
     <li>有序列表</li>
  </ol>
  无序列表用ul定义
   <ul> 
     <li>有序列表</li>
  </ul>
  自定义列表用dl定义
  <dl>
     <dt>
        <dd>自定义列表</dd>
     </dt>
  </dl>
  

表格标签

 表格用table定义   有border,width,height,cellpadding,cellspacing属性
 表格标题用caption 定义
 行用tr 定义
单元格用td 定义    有colspan rowspan 属性
 定义列:colgroup:对列进行组合,方便格式化。
         col:为列添加属性。 width    
 <table border="" width="" height="" cellpadding="" cellspacing="">
  <caption>
    表格标题
  </caption>
  <tr>
    <td colspan="" rowspan=""></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

表单标签

<form action="" method="">         action:表单提交的位置  method:表单提交的方法
  <input type="text" />            单行文本框  
  <input type="password" />        密码框
  <input type="file" />            文件上传
  <input type="reset" />           重置表单
  <input type="submit" />          提交表单 
  <input type="radio" />           单选按钮     name     
  <input type="checkbox" />        多选按钮  
  <input type="button" />          按钮
  <input type="image" />           图片提交按钮
  <input type="hidden" />          隐藏的输入区域一般定义隐藏的参数
  
</form>
input中除了type 属性还有以下的属性:
             checked:设置单选框,复选框初始状态为选中,属性值只有checked,表示初始就被选中。
             disabled:设置首次加载禁用该元素,属性值只有disabled,表示该元素被禁用。
             maxlength:设置文本框中允许输入的最大字符数。
             readonly:设置文本的内容不允许用户直接修改。
             size:设置该元素的宽度。
             src=设置图像域所显示的图像的url.

表单标签2

 1.label标签:主要用于单击label元素生成的标签,浏览器会自动将焦点转移到与标签相关的表单控件上。 具有for 属性
   <label for=""><input type="text"></label>
  
  2.select 标签:用来创建下拉菜单或者列表框,必须配合option和optgroup元素使用。每个optgroup代表一个列表项组,每一个option代表一个列表项。
  select :具有size:指定该元素同时显示多少个列表项。
              multiple:指定select元素是否允许多选。
  optgroup:具有label属性。该属性必须设立。
  option:具有selected属性:用于指定该列表项初始状态为选中。属性值只能是selected
             values:用于指定该列表项对应的请求参数。
      <select szie=" 2" name="" id="">
    <optgroup label="北京"></optgroup>
    <option value="jianbing">煎饼</option>
    <option value="jianbing2">煎饼2</option>
  </select>  
  3.textarea:生成多行文本域。具有cols,rows,readonly属性。
      cols:指定文本域的宽度
      rows:指定文本域的高度。
      readonly:指定该文本域只读。
         
                



多媒体标签

 audio定义声音   有src:音频位置   controls 属性:设置是否播放控制。
     
 video定义视频   有src:视频位置   controls 属性:设置是否播放控制。

全局属性:

contenteditable:规定元素内容是否可编辑。如果该属性 设为True,浏览器将允许用户直接编辑该html元素。但是一旦刷新,页面会重新加载,修改的内容会丢失。
designMode:相当于一个全新的contenteditable属性。将属性值设置为on,该页面上支持contenteditable属性的元素都将变成可编辑状态。
hidden:h5的所有元素都具有hidden属性。属性值为true时显示,flase时隐藏。

spellcheck 属性。

h5inputtextarea 属性增加了spellcheck 属性。将属性值设置为true,浏览器将对用户输入的文本内容执行输入检查。如果输入不通过,浏览器会对拼错的单词进行提示。