美文网首页
天津H5edu-企业实训第一周知识点总结

天津H5edu-企业实训第一周知识点总结

作者: 保锦 | 来源:发表于2017-07-30 21:05 被阅读0次

    1、<! DOCTYPE> 网页的声明,指示浏览器关于本页面使用哪个HTML版本进行编写指令
    2、utf-8 (国际通用字库),一个汉字占3个字节,gbk(gb2312)(国标,中国字库),一个汉字占2个字节,gbk只有汉字
    3、空白折叠现象:无论多少空格、换行都显示为一个空格
    HTML中一个空格&nbsp
    4、页面跳转 <a>属性target=“_blank”外部跳转
    5、页面中的锚点 <a href="#dibu">跳转到底部</a>点击该链接会跳转到id =“dibu”的位置
    <a id="dibu">底部</a>
    跳转到其他页面 <a href="页面地址#dibu">跳转到其他页面</a>

    image.png image.png
    6、块级元素:
    <address> 定义地址
    <caption> 定义表格标题
    <dd> 定义列表中定义条目
    <div> 定义文档中的分区或节
    <dl> 定义列表
    <dt> 定义列表中的项目
    <fieldset> 定义一个框架集
    <form> 创建 HTML 表单
    <h1> 定义最大的标题
    <h2> 定义副标题
    <h3> 定义标题
    <h4> 定义标题
    <h5> 定义标题
    <h6> 定义最小的标题

    创建一条水平线
    <legend> 元素为 fieldset 元素定义标题
    <li> 标签定义列表项目
    <noframes> 为那些不支持框架的浏览器显示文本,于 frameset 元素内部
    <noscript> 定义在脚本未被执行时的替代内容
    <ol> 定义有序列表
    <ul> 定义无序列表
    <p> 标签定义段落
    <pre> 定义预格式化的文本
    <table> 标签定义 HTML 表格
    <tbody> 标签表格主体(正文)
    <td> 表格中的标准单元格
    <tfoot> 定义表格的页脚(脚注或表注)
    <th> 定义表头单元格
    <thead> 标签定义表格的表头
    <tr> 定义表格中的行
    7、行内元素
    <a> 标签可定义锚
    <abbr> 表示一个缩写形式
    <acronym> 定义只取首字母缩写
    <b> 字体加粗
    <bdo> 可覆盖默认的文本方向
    <big> 大号字体加粗

    换行
    <cite> 引用进行定义
    <code> 定义计算机代码文本
    <dfn> 定义一个定义项目
    <em> 定义为强调的内容
    <i> 斜体文本效果
    <img> 向网页中嵌入一幅图像
    <input> 输入框
    <kbd> 定义键盘文本
    <label> 标签为 input 元素定义标注(标记)
    <q> 定义短的引用
    <samp> 定义样本文本
    <select> 创建单选或多选菜单
    <small> 呈现小号字体效果
    <span> 组合文档中的行内元素
    <strong> 语气更强的强调的内容
    定义下标文本
    定义上标文本
    <textarea> 多行的文本输入控件
    <tt> 打字机或者等宽的文本效果
    <var> 定义变量
    8、单选按钮通过相同的 name 属性 关联起来
    9、相对路径 .. 两个点是向上一级
    CSS
    1、样式优先级:
    内联样式---优先级最高(就近原则),内部样式表,外部样式表优先级不确定,后面的会将前面的覆盖
    2、px 像素
    em 1em = 1个父级元素字体的大小
    rem 由HTML 根节点字体大小决定
    3、选择器
    基础选择器
    id选择器 #id
    class 类选择器 .class
    标签选择器
    组合选择器
    “ ”两个选择器间加一空格, 后面的是前面的后代
    “,” 逗号 分组选择器 不同元素设置相同样式时使用
    “> ” 大于号 子元素选择器---只选择直系子节点
    伪类选择器
    4、选择器权重计算公式 image.png

    从父级继承过来的权重为0;
    权重相同使用就近原则
    !important 将权重设置为最高,只对本身有用,不能够继承。
    5、盒模型

    image.png

    6、清除浮动
    1、方法一:clear:both,会导致margin失效
    2、方法二:给父级元素添加一个高度,必须能把东西放进去,将浮动元素锁在一个有高度的盒子中
    3、方法三:隔墙法,
    在浮动元素的后面加一个div ,将这个div清除浮动clear:both
    4、方法五:overflow:hidden
    7、z-index 只有绝对定位的元素才能使用
    8、margin 塌陷现象
    <1>标准文档流中,竖直方向的margin不叠加,以较大的为准
    <2>如果不在标准流中,比如盒子都浮动了,那么两个盒子之间的距离相加
    9、margin:0 auto;使盒子居中,使用条件必须有width
    10、元素的定位
    position:absolute;绝对定位
    元素脱离标准文档流,所以行内元素不用变为块级元素就能够设置宽高了。 参考点,在页面的左上角(使用top定位) 使用bottom 定位时,参考的是浏览器的首屏大小对应的左下角
    一个绝对定位的元素,如果父辈元素中出现了也定位了的元素,那么将以父辈这个元素,为参考点
    position:relative; 相对定位,相对原来自己的位置定位,还继续占着空间,只是影子到处飘
    position:fixed; 固定定位,相对与浏览器窗口定位

    相关文章

      网友评论

          本文标题:天津H5edu-企业实训第一周知识点总结

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