zoukankan      html  css  js  c++  java
  • html和css区别


    html基本结构
    <html>内容</html> html开始标记
    <head>内容</head> html文件头标记
    <title>内容</title> htmlhtml文件标题标记
    <meta>内容</meta> 文件的元信息(网页的描述信息),必须在head元素里
    <body>内容</body> 文件主体部分


    格式标记
    <br> 强制换行标记
    <hn> 标题标记:共6级,对应不同的大小
    <font> 字体设置标记,设置字体格式,其中:
    size 大小 color 颜色 face 字体 例如:<font size='7' color="red" face="宋体">
    <b> 粗字体标记
    <i> 斜字体标记
    <sub> 文字下标字体标记 例如:2<sub>2</sub>
    <sup> 文字上标标字体标记,用法与下标类似
    <tt> 打印机字体标记
    <cite> 引用方式的字体,通常为斜体
    <em> 表示强调,通常为斜体
    <strong> 表示强调,通常为粗体
    <small> 小型字体标记
    <big> 大型字体标记
    <u> 下划线字体标记
    <p> 换段落标记
    <center> 居中对齐标记
    <pre> 预格式化标记
    <li> 列表项目标记:相当于列表中行
    <ul> 无序列表标记
    <ol> 有序列表标记:type属性表示排序类别
    1 数字
    A 字母
    a 小写字母
    I 大写罗马数字
    i 小写罗马数字 i ii iii
    <dl><dt><dd> 定义型列表
    <hr> 对平分割线标记
    <div> 分区显示标记:划分区域,为了美观


    图像标记
    <img> 图像标记,例如:
    <img src='文件位置' width='宽' height='高' border='边框高度' alt='下行分解'>
    单位:px, em, cm, mm

    alt 有是三个作用:
    1.图片加载成功后,鼠标移动到上面,会显示其指定的文字
    2.图片加载失败后,用文字代替图片显示
    3.搜索引擎通过其指定的文字来抓取图片

    <img>为单标记


    超链接
    <a>标记基本语法 例如:
    <a href='超链接地址' target='打开方式' name='页面锚点名称'>文字或者图片</a>
    target属性值:
    _blank 在新窗口打开链接
    _self(默认值)在当前窗口打开链接
    _parent 在父窗口打开链接
    _top 在顶层窗口打开链接


    表格
    <table 属性1='属性值'...>表格内容</table>
    width:表格宽度,值可以是像素(px)或父级元素百分比(%)
    height:表格高度,值可以是像素(px)或父级元素百分比(%)
    border:表格外边框的宽度
    align:表格的显示位置,left居左显示 center居中显示 right居右显示
    cellspacing:单元格的间距 默认为2px,单位为像素
    cellpadding:单元格内容与单元格边框的间距,单位为像素
    frame:控制表格最外层的四条线框:
    void 无边框,above 仅顶部有,below 仅底部有,hsides 仅顶部和底部有
    lhs 仅左侧有,rhs 仅右侧有,vsides仅左右侧有,border 全部都有
    rules:控制单元格之间的分割线:
    none(默认值)无分割先,all 全部有分割线,rows 仅行分割线
    clos 仅列分割线,groups 仅行组与列组之间有分割线

    <table>之后,<tr>之前,<caption> 指在表格中使用标题,align属性有四个值:
    top 放在表格的上部,bottom 放在表格的下部
    left 放在表格的左部,right 放在表格的右部

    <tr>...</tr> 定义表格的行,可以嵌套多个<td>或<th>,常见属性:
    bgcolor='颜色值' align='值' 设置垂直对齐方式:
    top 顶端对齐,bottom 底端对齐 middle 居中对齐
    valign='值' 设置水平对齐方式:
    left 靠左对齐,right 靠右对齐,center 居中对齐

    <td>和<th> 必须嵌套在<tr>内,成对出现,
    <th> 表头标记,通常位于行首或列首,字体默认加粗
    <td> 数据标记,默认不会加粗
    两者属性一样:都是设置单元格
    bgcolor 背景,align 对齐方式,valign 垂直对齐方式
    width 宽度,height 高度,rowspan 所占行数,colspan 所占列数

    css 层叠样式表,由选择器以及一条或多条申请构成
    根据选择器的定义方式,将样式表的定义分为三种方式:
    1.HTML标记定义:例如 p{属性:属性值;属性1:属性值1},多个样式用;隔开
    2.ID选择器定义:例如 #word{test-align:center;color:red;} #定义id
    3.class选择器:例如 p.center{test-align:center;} .定义class

    颜色属性
    color:green 颜色名称
    color:#ff6600 十六进制
    color:#f60 简写方式
    rgb(255,255,255) RGB方式 红(R),绿(G),蓝(B)
    Rcolor:rgba(255,255,255,1)GBA方式 Alpha 透明度

    字体属性
    font-size 定义字体大小 例如:font-size:14px
    font-family 定义字体 例如:font-family:字体1,字体2
    font-weight 定义字体加粗,默认normal
    1.名称 bold (粗),bolder (更粗),lighter (更细)
    2.数字 100~900 400=normal 700=bold

    背景属性
    background-color 定义背景颜色
    backgroud-image 定义背景图片 例如:backgroud-image:url(none)
    backgroud-repeat 定义背景重复方式,省
    backgroud-position 定义背景位置
    横向上 left,right,center 纵向上 top,bottom,middle

    文本属性
    text-align 设置文本对齐方式 left,right,center
    line-height 设置文本行高 取具体指或百分比
    text-indent 行首缩进 例如:text-indent:50px
    letter-spacing 设置字符间距 默认normal

    列表
    list-style-type 表明列表项标记,省
    list-style-position 表明列表项中标记的位置,省
    list-style-images 设置设置图像列表标记,省

  • 相关阅读:
    Hadoop 的版本问题
    SSH 端口转发原理
    KM算法
    最大流算法小结
    pku 2195 KM算法求最小权二分匹配
    SAP(最短增广路算法) 最大流模板
    最大流模板
    pku 1459 最大流 SAP
    pku Drainage Ditches 简单最大流 直接套模板 注意可能有重边
    推荐:吴军 谷歌黑板报 《浪潮之颠》
  • 原文地址:https://www.cnblogs.com/christinejia/p/9069014.html
Copyright © 2011-2022 走看看