HTML学习总结

作者: EldonZhao | 来源:发表于2017-08-23 22:09 被阅读26次

    HTML 指的是超文本标记语言 (Hyper Text Markup Language) 所谓的超文本就是指页面内可以包含图片、链接、甚至音乐,等非文字元素。

    html示例:

    <html>
      <head>
        <title>html example</title>
        <script src="bower_components/jquery/dist/jquery.js"></script>
      </head>
      <body>
        <h1>html body</h1>
        <p>html paragraph</p>
      </body>
    </html>
    

    html标签:

    • 标签定义:标签就是上面这些< head>、< body>、< table> 等被尖括号“<”和“>”包起来的对象,绝大部分的标签都是成对出现的,如< table>< /talbe>、< form>< /form>。
    • <h1>~<h6>:标题heading;
    • <p>:段落paragraph;
    • <a>:链接;
    • <img>:图片image;
    • ...

    html元素:

    • 元素定义:HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
    • 元素语法:<p>eldonzhao</p>
    • 元素嵌套:<body><p>eldonzhao</p></body>
    • 空元素:<a></a>
    <br/> vs <p></p>:
     <br/>为换行标签,相当于回车;
     <p></p>为段落标志,段落后空一行,相当于两个回车;
    

    html属性:

    • align:相对位置,居左、居中、居右等;
    • bgcolor:背景颜色;
    • ...

    html文本格式化:

    • <b>:粗体bold;
    • <big>:大号字体;
    • <em>:强调emphasized;
    • <i>:斜体italic;
    • <small>:小号字体;
    • <strong>:强壮字体;
    • <pre>:块格式;
    • ...

    html样式:

    <body style="background-color:powderblue"></body>
    

    style 提供了一种改变所有 HTML 元素的样式的通用方法。这里可以将,背景颜色,字体样式,字体尺寸,字体颜色,对齐方式一并定义好。

    html链接:

    • 给文字加链接:<a href="www.shiyanlou.com">shiyanlou</a>
    • 给图片加链接:<a href="www.taobao.com">![](tabao.png)</a>
    • 链接的打开方式:<a href="www.baidu.com" target="_blank">百度</a>_blank表示在新窗口打开链接,_self(默认)表示覆盖当前窗口;
    • 链接添加提示文字:<a href="www.baidu.com" title="百度官网">百度</a>

    html表格:

    • table:表标签;
    • tr:行标签;
    • td:格标签;
    • th:表头标签;
    • caption:标题标签;
    • cellpadding:单元格边距属性;
    • bgcolor:背景颜色属性;
    • background:背景图片属性;
    • colspan:单元所占列数;
    • rowspan:单元所占行数;
    • border:边框粗细;

    html图像:

    • 设置网页背景图:<body background="./coluslife.png"></body>
    • 插入图片:![](./coluslife.png)
    • 设置图片属性:![](./coluslife.png)
    • 调整图片尺寸:![](./coluslife.png)
    • 创建图像映射:
    ![](./julizi.png)
    <map name="lizi">
      <area shape="rect" coords="50,10,100,60" href="img.html" target="_blank"
    </map>
    

    html列表:

    • 有序列表:
    <ol type="1">
      <li>shiyanlou</li>
    <ol>
    
    • 无序列表:
    <ul>
      <li>shiyanlou</li>
    </ul>
    
    • 定义性列表:
    <dl>
      <dt>baidu</dt>
      <dd>www.baidu.com</dd>
    </dl>
    

    html块:

    <div></div>
    <span></span>
    

    相关文章

      网友评论

        本文标题:HTML学习总结

        本文链接:https://www.haomeiwen.com/subject/wwwybttx.html