zoukankan      html  css  js  c++  java
  • HTML基础入门

    一、HTML5 基本结构 (新建一个html文件时默认有那些代码)

    <!doctype html>              命名文档类型
    <html>                       说明我们写的是标记语言
    <head>			     文件头部
    <meta charset="utf-8"/>	     编码格式
    <title>html5</title>	     文件标题(显示在状态栏上的内容)
    </head>
    <body>
    文件主体(所有要写的内容)
    </body>
    </html>
    1、文件命名规则:用英文,不用中文
    名称全部用小写英文字母、数字、下划线的组合,其中不得包含汉字、空格和特殊字符;必须以英文字母开头。
    二、 HTML基本语法
    1、<常规标记>
          <标记  属性=“属性值”   属性=“属性值”></标记>
    2.空标记
          <标记 属性=“属性值”  />
    说明:
    1.写在<>中的第一个单词叫做标记,标签,元素。
    2.标记和属性用空格隔开,属性和属性值用等号连接,属性值必须放在“”号内。
    3.一个标记可以没有属性也可以有多个属性,属性和属性之间不分先后顺序。
    4.空标记没有结束标签,用“/”代替。
     
    三、 XHTML常用标记
    1)文本标题(h1-h6)
    <h1>一级标题</h1>(header1~header6 )
    <h2>二级标题</h2>
    ...
    <h6>六级标题</h6>
    四、正文有两种形式(段落文本和文字列表)
    2) 段落(p)(paragraph)
    <p>段落文本内容</p>
    标识一个段落(段落与段落之间有段间距)
    3)空格 ( )
     (所占位置没有一个确定的值,这与当前字体字号都有关系.
    4)加粗
    加粗有两个标记
    1.<b>加粗内容</b>
    2.<strong>加粗内容</strong>
    5)倾斜
    倾斜标记
    1.<em></em>(emphasized )
    2,<i></i>( italic )
    6) 换行(br) (break)
    <br />
    换行是一个空标记(强制换行)
    7)水平线
    <hr />空标记(horizontal   rule)
     
    8)列表(ul,ol,dl)
    HTML中有三种列表,分别是:无序列表,有序列表,自定义列表
    *无序列表
    无序列表组成:
    <ul>(unordered   list)
         <li></li>
    ......
    </ul>
    *有序列表
    有序列表组成:
    <ol>(ordered   list)
    <li></li>
    <li></li>
    <li></li>
    ......
    </ol>
    扩展内容
    有序列表的属性
    type:规定列表中的列表项目的项目符号的类型
    语法:<ol type="a"></ol>
    1 数字顺序的有序列表(默认值)(1, 2, 3, 4)。
    a 字母顺序的有序列表,小写(a, b, c, d)。
    A 字母顺序的有序列表,大写(A,B,C,D)
    i 罗马数字,小写(i, ii, iii, iv)。
    I 罗马数字,大写(i, ii, iii, iv)。
    start 属性规定有序列表的开始点。
    语法:<ol start="5"></ol>
    *自定义列表
    <dl> (definition   list)
         <dt>名词</dt>
         <dd>解释</dd> (definition   description 定义描述)
    ......
    </dl>
     
     
    9)插入图片
    <img   src="目标文件路径及全称"     alt="图片替换文本"     title="图片标题" />
    注:所要插入的的图片必须放在站点下
    *相对路径的写法:
    1)当当前文件与目标文件在同一目录下,直接书写目标文件文件名+扩展名;
    2)当当前文件与目标文件所处的文件夹在同一目录下,写法如下:
    文件夹名/目标文件全称+扩展名;
    3)当当前文件所处的文件夹和目标文件所处的文件夹在同一目录下,写法如下:
    ../目标文件所处文件夹名/目标文件文件名+扩展名
    title的作用: 在你鼠标悬停在该图片上时显示一个小提示,鼠标离开就没有了,HTML的绝大多数标签都支持title属性,title属性就是专门做提示信息的.
    alt的作用:alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息,它会直接输出在原本加载图片的地方。
     
     
    10)超链接的应用
    语法:
    <a   href="目标文件路径及全称/连接地址">链接文本/图片</a>
    <a href="#"></a>空链接
    属性:target:页面打开方式,默认属性值_self。
    属性值:_blank 新窗口打开
    <a href="#" target="_blank">新窗口打开</a>
     
    11) 数据表格的作用及组成
             作用:显示数据
             表格的组成:
    <table >
    <tr>
         <td></td>
        <td></td>
    </tr>
    </table>
    注:一个tr表示一行;一个td表示一列(一个单元格)
    *数据表格的相关属性
    1)width="表格的宽度"
    2)height="表格的高度"
    3)border="表格的边框"
    4)bgcolor="表格的背景色"
    5)cellspacing="单元格与单元格之间的间距"
    6)cellpadding="单元格与内容之间的空隙"
    7)水平对齐方式:align="left/center/right";
    8)合并单元格属性:
    colspan="所要合并的单元格的列数"合并列;
    一行
    一行 一行
    rowspan="所要合并单元格的行数"合并行;
    一行 一行
    一行
     
    12) 表单的应用
    表单的作用:用来收集用户的信息的;
    表单的组成:
    表单域<form name="" method="" action=""></form>
    表单控件<input type="text" value=""/>
    提示信息
     
    1、表单框
    <form name="表单名称" method="post/get"  action="">
    </form>
     
    1)文本框
    <input type="text" value="默认值"/>
    2)密码框
    <input type="password" />
    3)提交按钮
    <input type="submit" value="按钮内容" />
    4)重置按钮
    <input type="reset" value="按钮内容" />
    5)单选框/单选按钮
    <input type="radio" name="ral"/>
    <input type="radio" name="ral" />
    单选按钮里的name属性必须写,同一组单选按钮的name属性值必须一样。
    checked="checked"(默认选中;)
    disabled="disabled"禁用
    6)复选框
    <input type="checkbox" name="like" />
    <input type="checkbox" name="like" disabled="disabled" />
    (disabled="disabled" :禁用)
    (checked="checked" :默认选中)
    7)下拉菜单
    <select   name="">
             <option>菜单内容</option>
    </select>
     
    8)多行文本框(文本域)
    <textarea name="textareal" cols="字符宽度" rows="行数">
    </textarea>
    9)按钮
    <input   name="'"   type="button" value=“按钮内容” />
    (他和submit的区别是 ,submit是提交按钮 起到提交信息的作用,button只起到跳转的作用,不进行提交。)
     
     
    10)表单字段集
    <fieldset></fieldset>
    功能:相当于一个方框,在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套,在其内部可以在设置多个fieldset对象。
    11)字段级标题
    <legend></legend>
    功能:legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的第一个元素。
     
     
    12)提示信息标签
    <label for="绑定控件id名"></label>
    功能:label元素用来定义标签,为页面上的其他元素指定提示信息。要将label元素绑定到其他的控件上,可以将label元素的for属性设置为与该控件的id属性值相同。
    13)表单元素
    1)上传文件框
    文件域:<input type="file" />
    2)图像域
    <input type="image" src="" width="100" height="100" alt="上传图片" />
    扩展知识点:post和get的区别
    1. get是从服务器上获取数据,post是向服务器传送数据。
    2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,在URL中可以看到。post是通过HTTP post机制,用户看不到这个过程 。
    3. get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。
    4. get安全性非常低,post安全性较高。但是执行效率却比Post方法好。
     
     
    13)div的用法
    <div id="id名"/class="class名"></div>
    文档区域,文档布局对象
    14) span的用法
    <span></span>文本结点(某一小段文本,或是某一个字)

    
    
    
    
    
    
    
    
    
    
    
    
    
    

  • 相关阅读:
    将博客搬至CSDN
    defender 月考总结
    生日祝福@陈俊翰
    个性签名
    你这是virus吧?
    (CPSCA's)CPOJC+VIJOS
    Sentence by defender
    工作制一览
    最长上升子序列
    mysql约束
  • 原文地址:https://www.cnblogs.com/chengzp/p/7757857.html
Copyright © 2011-2022 走看看