zoukankan      html  css  js  c++  java
  • 前端学习之一_html学习

    html元素分类
    内连元素:出现在行内的元素
               <img>,<q>,<a>
    块元素:前后自动插入换行的元素
            <h1>,<p>,<blockquote>
    空元素:元素的开始标志和结束标志没有内容的元素
            <br>,<img>
     

    特殊元素

    <q>
    内连元素(出现在行内),用于简短文字的引用

    <blockquote>

    块元素(前后有换行符),引用一大段文字并独立显示

    <br>

    没有内容的元素即空元素,表示换行

    <a>

    链接元素
    1)可以用title属性提供提示;
    2)可以跳转到其他页面(herf属性),也可以通过锚跳转到同一个页面其他地方(id属性);
    3)target属性控制本窗口还是新窗口打开

    <img>

    图像元素,提供一种途径指定需要在页面中显示图像的位置;html是纯文本文件,图像并非是html文件的一部分,需要进行额外的依次请求和显示。
    1)目前使用最广的图像格式是gif(支持透明),jpg;
    2)可以使用alt属性,在图像不能正常显示时,给出文字提示信息;
    3)最好给出图像的width和height属性,并不是为了控制样式,而是在图像下载之前,告诉浏览器图像的大小来调整布局,但不建议利用width和height属性来调整图像大小,因为这样的话,首先需要下载整张图像,因此,最好事先将图像大小调整为需要的类型。
     
     

    html结构要点以及嵌套规则

    1)html元素名称不区分大小写,不过最好都用小写
    2)html总是用一个DOCTYPE开始,用于说明超文本类别(如协议版本4.0.1)
    3)在DOCTYPE之后,网页以<html>标记开始,以</html>标记结束
    4)<title>,<meta>和<style>元素可以放置的唯一位置就是<head>
    5)<body>元素只能直接放置块元素<h1>,<p>,<blockquote>等,所有的内联元素和文本都必须在块元素中才能运行。
    6)块状元素禁止包含在<p>元素中,因为只有文本才能组成段落,当然,段落中可以包含任何内联元素。
    7)列表<ul>,<ol>只能包含列表项<li>,列表项<li>可以使任何内容,包括内联元素或者块元素。
    8)和其他块元素不同,<blockqoute>只能直接包含块元素,请将文本或内联元素置于块元素之内,再一起加入<blockqoute>
    9)可以讲内联元素任意嵌入另外一个内联元素中,不过有两种例外,<a>不能自我嵌套,<img>是空元素,也不能嵌套。
    10)div用来将块级的内容分成不同的逻辑结构;在页面中,使用而不要滥用div,借用div将页面分成几个合理的逻辑结构,有助于网页结构的清晰和样式化,如果添加<div>仅仅使得页面拥有更多的结构,那除了使得页面变得更复杂之外,没有任何好处。
    11)span可以把内联内容分成不同的逻辑部分,不会造成换行。
     

    css样式

    1)text-align只能用于块元素,可以使得块元素中的所有内联元素集中(不仅仅限于文本),也可以被任何嵌套的块元素继承。
    2)可以设置内联元素的宽度,但是只有排版时才能看到效果,也可以为内联元素增添边界或补白——如果在内敛元素的四周都添加了边界,只能看到左边和右边的空间。可以在内敛元素的上侧和下侧添加补白,不过这些补白不影响周围其他内连元素的空间,所以补白会跟其他内联元素重叠。图像跟其他内联元素不同,其width,padding和margin属性更接近于块元素。
     
     
  • 相关阅读:
    洛谷P2066 机器分配【dp】
    [HNOI2004]打鼹鼠【dp】
    [ZJOI2008][BZOJ1037] 生日聚会Party|动态规划]
    Java中Map<Key, Value>存储结构根据值排序(sort by values)
    LATEX如何写多个条件推导式推出一个结论
    书列荐书 |《黑天鹅&#183;如何应对不可预知的未来》【美】纳西姆 尼古拉斯 塔勒布 著
    Java | Stream流、泛型、多线程 | 整理自用
    书列荐书 |《代码整洁之道》之 类 的设计
    书列荐书 |《认知红利》 谢春霖著
    eclipse集成processing、PApplet、proclipsing 问题
  • 原文地址:https://www.cnblogs.com/bobodeboke/p/4460322.html
Copyright © 2011-2022 走看看