码迷,mamicode.com
首页 > Web开发 > 详细

html基础知识二

时间:2016-06-20 21:59:10      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:

1.文件结构:
    HTML文件的固定结构:
    <html>
        <head>...</head>
        <body>...</body>
    </html>
    html是根标签
    head定义文档头部,包含: title, script, style, link, meta
    body是网页主要内容,包含:h1,h2-h6, p, a, img

    html标签建议使用小写。
    空标签加斜杠是更长远的保障,如<br />。
    语义化,标签的使用要遵循语义化。

2.文档头部
<head>
    <meta charset="utf-8">           文档字符解码格式,防止乱码
    <meta name="keywords" content="关键词">      提供给搜索引擎使用
    <meta name="description" content="描述">     提供给搜索引擎使用
    <meta name="viewport" content="width=device-width,initial-scale=1.0">     移动端浏览器的宽度与缩放
    <title>...</title>  文档标题
    <base href="" target="">   定义页面中所有链接默认的目标地址
    <link rel="" href="">  引入样式表css文件、favicon文件
    <style></style>      样式
    <script></script>    js代码
    <noscript></noscript>    不支持js代码时候执行
</head>

3.html属性
    html元素可以设置属性。
    属性位于开始标签。
    属性可以为元素添加附加信息。
    属性总是以名称/值对的形式出现,属性值用双引号括起来,值中有双引号的用单引号。如href="www.love.com"。
    如class,id,style,title

4.body部分
<!DOCTYPE html>       文档声明
<html>
<html>
<head>...</head>
<body>
    <h1>这是一个标题</h1>    最重要的标题,后面以此类推。
    <h2>这是一个标题</h2>
    <h3>这是一个标题</h3>
    <h4>这是一个标题</h4>
    <h5>这是一个标题</h5>
    <h6>这是一个标题</h6>
    <p>这是段落</p>
    <a href="链接地址" target="定义链接的文档在何处显示">这是链接,可以是文本,也可以是图片</a>target可以取值_blank,_self
    <img src="" alt="图片无法加载时候的替代文本" width="" height="" />   图片
    <map></map>图像地图,可以设置图片哪里可以点击哪里不能点击,使用<area shape="" coords="" alt="" href="">
    <hr />  水平线
    <!--这是注释-->    注释可以提高代码可读性,使代码更容易被理解,浏览器会忽视注释。
    <br />    折行

    html文本标签
    <b></b>  粗体文字
    <i></i>   斜体文字
    <em></em>   着重,表现为斜体
    <strong></strong>  强调,表现为粗体
    <small></small>  小号字
    <sub></sub>   定义下标字
    <sup></sup>   定义上标字
    <ins></ins>      定义插入字
    <del></del>      定义删除字

    计算机输出标签
    <code></code>   计算机代码
    <kbd></kbd>        地址
    <samp></samp>    计算机代码样本
    <var></var>     变量
    <pre></pre>     预格式文本,这个很重要。可以保存空格等全部格式

    html引文,引用,标签定义
    <abbr></abbr>                定义缩写
    <address></address>         定义地址
    <bdo></bdo>                    定义文字方向
    <q></q>                        短引用
    <blockquote></blockquote>    长引用
    <cite></cite>                定义引用、引证等
    <dfn></dfn>                 定义一个定义
    
    表格
    <table border="1">                        表格
        <caption></caption>        表格标题
        <colgroup>                定义表格列的组
            <col span="2" style="background-color:red">  定义表格列的属性
            <col style="background-color:yellow">
          </colgroup>
        <thead>                    表格页眉
            <tr>                    表格里的行
                <th></th>            表格表头的单元格,粗体居中
                <th></th>
            </tr>
        </thead>    
        <tbody>                    表格主体
            <tr>
                <td></td>            表格里的单元格
                <td></td>
            </tr>
        </tbody>
        <tfoot>                    表格页脚
            <tr>
                <td></td>            表格里的单元格
                <td></td>
            </tr>
        </tfoot>
    </table>>             

    列表
    有序列表
    <ol>
        <li></li>
        <li></li>
    </ol>
    无序列表
    <ul>
        <li></li>
        <li></li>
    </ul>
    自定义列表
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dd></dd>
    </dl>

    <div></div>     定义一块区域,块级元素
    <span></span>    需要添加样式时候使用,内联元素

    表单
    <form>          定义表单, input定义输入域,form有method和action属性
        <input type="txet" name="" value="">    文本框
        <input type="password" name="">          密码框
        <input type="radio" name="" value="">   单选按钮,属于同一组的单选按钮name相同
        <input type="checkbox" name="" value="">      复选框,同一组按钮的name相同
        <input type="submit" value="">             提交按钮
        <input type="reset" name="">          
        <textarea rows="" cols=""></textarea>    文本域
        <select name="">                         下拉列表
            <option value=""></option>            下拉列表的选项
            <option value=""></option>
            <option value="" selected></option>  selected表示默认选中
        </select>
    </form>
   multiple 属性规定输入字段可选择多个值
<label></label> label标签为 input 元素定义标注(标记),可以和input一起使用 <button type="button"></button> 定义按钮,在 <button> 元素内部,可以放置文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。始终为 <button> 元素规定 type 属性。不同的浏览器对 <button> 元素的 type 属性使用不同的默认值。    框架 <iframe src="" width="" height=""></iframe> html颜色,由红绿蓝混合而成。 颜色名 red blue white black green gray 颜色十六进制 #FFFFFF 0到F 颜色RGB rgb(255,255,255) 0到255 字符实体(不要忘记分号!!!) 实体名称 显示效果 描述 实体编号 &nbsp; 空格 &#160; &lt; < 小于号 &#60; &gt; > 大于号 &#62; &amp; & 和号 &#38; &quot; " 引号 &#34; &copy; 版权 &#169; &trade; 商标 &#8482; &reg; 注册商标 &#174; &times; 乘号 &#215; &divide; 除号 &#247; &yen; 日元 &#165; </body> </html> <html> <head>...</head> <body>...</body> </html>

 

html基础知识二

标签:

原文地址:http://www.cnblogs.com/leeyunfan/p/5601716.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!