HTML初识-CSDN博客

本文链接：https://blog.csdn.net/tst116/article/details/70226554
开发环境：一般使用火狐，IE，谷歌浏览器，编辑可以使用任何文本编辑器。
       一般以.html为后缀名的文件为网页文件
三大块：
     1、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
            规定文本的规范，dtd为规定。
  2、head   头文件，一般为网页展开的标签规定显示文字。
  3、body   网页主体。

div布局
    将div标签和CSS结合，实现网页的分布排列，

盒子模型:

     1、盒子与盒子之间有外 边距
     2、盒子与里面有内边距
HTML笔记：

  <span>:内联标记，
   只在行内包裹几个行内元素，在行内使用包含，标记某些元素，可以设置左右边距，但无法设置山下边距。

   其中内联标签和div标签可相互转化，只需要在CSS中设置display就行了，值有block 块状  inline 内联
           display ：block；

 CSS控制文本段落：
    <p>为一段文字的标签
   CSS中的控制段落文本的属性：
     text-indent:20px; 段落缩进，设置像素。
     text-align:center;段落居中。
     text-decoration: line-through;  可以设置文本字体有穿过线。
   设置文本属性的有：
      letter-spacing: 20px;  设置每个字之间的距离。
   设置文本的字体和颜色：
      color:blue;  设置字体的颜色；
      font-style:     设置字体的显示形式。
      font-weight:    设置字体的粗细
      foont-size:    设置字体的大小。
      line-height：  设置每一行的高度，继而设置每行间距，
    设置文本字体的有衬线和无衬线。
        有衬线   宋体 serif
        无衬线   sans-serif

 CSS 选择器，引用CSS， 有ID， class  和标签
       ID要用 #ID
       class   .class
       标签    标签
    修饰有冲突，既有ID又有class
       这个要一个一个级别确定，那个控制的越精细，就显示那

 CSS的四种引入方式：
    1、外部链接一个CSS文件，我们在HTML头部分标明：<link href="css/my.css" rel="stylesheet" type="text/css"/>
    2、头部直接写入CSS: <style type="text/css"> div{margin:0;padding:0;border:1px solid red;}</style>
    3、外接多个CSS文件时：<style type="text/css"> @import url(my.css); </style>
    4、直接在html标签里写入对这个标签的CSS控制，如：<div style="border:1px solid red;">测试信息</div>
 CSS初始化：
    相同的元素，如li ，在不同的浏览器下，显示的效果稍有不
    同，是因为浏览器对各元素的margin，border，font-size等
    略有不同，为杜绝这种情况，我们通过CSS强制让所有元素的属性值都一样，这样浏览器就一致了，减少了不兼容，这个过程就叫CSS的初始化。

本帖最后由 mishi001 于 2013-11-20 02:10 编辑

先用div布局 用CSS控制显示 根据需要用有语义标签或无语义标签
先用div布局 用CSS控制显示 根据需要用有语义标签或无语义标签
编码与charset 不一致 则会导致乱码
如果id取名字用 数字命名 则会导致css文件无效
如果不声明DOCTYPE 低版本IE 显示效果不一样
盒子长 width+border-left+border-right+margin-left+margin-right+padding-left+padding-right
盒子高 height+border-top+border-bottom+margin-top+margin-bottom+padding-top+padding-bottom
盒子里面 文本占地的大小 等于width和height的大小 与padding margin border无关
padding会导致 所占空间发生变化 可以破坏布局
解决方法 为了不破坏布局 在增加padding后 要减少原来width和height的值
父子div 竖直方向margin会重叠 父DIV 与外界的margin值为子DIV的margin 子DIV与父DIV之间的margin 无效
普通元素 margin会重叠 值为重叠margin 的最大值
块元素(block element)
    address - 地址
    blockquote - 块引用
    center - 举中对齐块
    dir - 目录列表
    div - 常用块级容易，也是CSS layout的主要标签
    dl - 定义列表
    fieldset - form控制组
    form - 交互表单
    h1 - 大标题
    h2 - 副标题
    h3 - 3级标题
    h4 - 4级标题
    h5 - 5级标题
    h6 - 6级标题
    hr - 水平分隔线
    isindex - input prompt
    menu - 菜单列表
    noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
    noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
    ol - 排序表单
    p - 段落
    pre - 格式化文本
    table - 表格
    ul - 非排序列表

    内联元素(inline element)
    a - 锚点
    abbr - 缩写
    acronym - 首字
    b - 粗体(不推荐)
    bdo - bidi override
    big - 大字体
    br - 换行
    cite - 引用
    code - 计算机代码(在引用源码的时候需要)
    dfn - 定义字段
    em - 强调
    font - 字体设定(不推荐)
    i - 斜体
    img - 图片
    input - 输入框
    kbd - 定义键盘文本
    label - 表格标签
    q - 短引用
    s - 中划线(不推荐)
    samp - 定义范例计算机代码
    select - 项目选择
    small - 小字体文本
    span - 常用内联容器，定义文本内区块
    strike - 中划线
    strong - 粗体强调
    sub - 下标
    sup - 上标
    textarea - 多行文本输入框
    tt - 电传文本
    u - 下划线
    var - 定义变量
text-decoration  none         默认。定义标准的文本。的一条线。
   text-decoration          overline         定义文本上的一条线。
text-decoration           line-through         定义穿过文本下的一条线。
text-decoration           blink         定义闪烁的文本。 //IE不支持 火狐下可以使用
text-decoration       inherit         规定应该从父元素继承 text-decoration 属性的值。
text-decoration      underline         定义文本下的一条线。
background-color文本背景颜色
color 文本字体的颜色
text-indent 首行文本的缩进
text-align 文本对齐 方式 left center right
letter-spacing  字体间的距离
text-transform  none 默认值 不变text-transform uppercase 文本全大写text-transform lowercase 文本全小写
text-transform 每个单词首字母大写
word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近：
white-space 值为normal时 去除空白字符
white-space 属性设置为 pre 时，浏览器不会合并空白符，也不会忽略换行符 ，与之相对的值是 nowrap，它会防止元素中的文本换行，除非使用了一个 br 元素。在 CSS 中使用 nowrap 非常类似于 HTML 4 中用 <td nowrap> 将一个表单元格设置为不能换行，不过 white-space 值可以应用到任何元素。
当 white-space 属性设置为 pre-wrap 时，浏览器不仅会保留空白符并保留换行符，还允许自动换行。
衬线字体及无衬线字体的区别是 字体是否大小整齐 无衬线字体 在字体拐弯处明显大小不一样
有衬线字体 一般都用左标题 无衬线字体一般用于正文
程序员一般常用宋体 Courier New  Courier New 9pt, Verdana,   Lucida Cons
background-attachment :  scroll默认值 滚动 fiixed背景固定
background-color : transparent 默认值 背景透明
background-color：颜色  背景颜色
background-image：none默认值 无背景 url（背景路径）背景图片
background-position：left  top center right  可以选择背景所在的位置
background-repeat：repeat-x X轴平铺 repeat-y  Y轴平铺 no-repeat  背景图片不重复
background-position：X值 Y值
以左上角为原点 分别 向右 和向下 X Y值为正 反之像素则为负
background-position：100px 200px；
background-position：-100px -200px；
background-position：100px -200px；
background-position：-100px 200px；
id选择器 class 选择器  标签选择器    派生选择器（必须有家谱关系）
通用选择器 *{} 相邻同胞选择器（相邻的标签） 群组选择器 div，p{}
属性选择器  abbr[title]{color:#FF0000;}
p[title='app']{　color:#FF0000;}
子代选择器 后代的第一个子元素#links > a {color:blue;}
伪类选择器
定位范围越精确的优先级 越大
直接写在标签里的的style优先级最高，然后是id > class >tag
html中   <style>间的CSS优先级</style> 大于 link引入过来的优先级
@import 优先级 大于link的优先级