您的位置:首页 > Web前端 > CSS

简单自学web前端——HTML+CSS基础入门

2018-08-01 14:17 956 查看

  虽然以前学过,不过还是有一些点忘记啦,所以用一晚上的时间看视频回顾了一下,以下记录自己一些记得不牢固的知识点。

  1. html的语法
      (1)语法不区分大小写,但尽量使用小写。
      (2)文档的注释 < ! - - - ->
      (3)< !DOCTYPE html>他是指示web浏览器关于页面使用哪个HTML版本进行编写的指令。
      (4)字符实体
       空格      &nbsp;
       <小于      &lt;
       >大于      &qt;
       &和号      &amp;
       ®注册商标      &reg;
       ©版权符号      &copy;
      
  2. html的基本结构
      < meat>`单标记 记录页面的元信息
      功能:提供有关页面的原信息,比如针对搜索引擎的关键字。
      常见的属性name content。
      
  3. 文档设置标记
      < li>< /li>代表一列。
      < ul>无序列表
      < ol>有序列表  < ol type=”A”> type属性改样式,可以嵌套。
      < hr>单标记 段落之间的分割线,很好用。
      
  4. 图像标记a标签
      < img src=”” width=”” height=”” border=”” alt=”“> alt记得写,很重要。
      a标签 name属性——指定页面的锚点名称
      可以借此实现回到顶部的效果:
        < a name=”top”>< /a>
        < a herf=”#”top>< /a>
        
  5. 表格和表单
      < caption>< /caption>表格标题
      < th>< /th>表头标记,放在首行或首列,会有加粗的效果。
      
      表单form
      标签中的name属性,提交表单时会用到。
      < form action=”服务器地址” name=”表单名” method=”post | get”>
      单选 
        < input type=”radio” name=”性别” value=”男” checked>男
        < input type=”radio” name=”性别” value=”女”>女
      多选 
        < input type=”checkbox” name=”车”>宝马
        < input type=”checkbox” name=”车”>奔驰
      下拉菜单
       < select>
         < option selected>1< /option>
         < option selected>2< /option>
         < option selected>3< /option>
       < /select>
       
  6. css简记
      < link rel=”stylesheet” type=”text/css” href=”.css”>
      < style type=”text/css”>< /style>
      优先级问题 ID>class>html
      class 用于css
      id   用于js也可以用于css
      name 用于表单提交

      伪元素选择器:
        a:link  正常连接的样式
        a:hover 鼠标放上去时的样式
        a:active 选择链接时的样式
        a:visited 访问过的样式
      
      无序列表前面可以用图片进行代替:
        ul{ list-style-image:url(地址)}
      < div>是块级元素,会占据一行。
      < span>是内联元素,不会占据一行。
      z-index层覆盖先后顺序(优先级)
      display显示属性:
        none:不显示
        block:块级元素
        inline:内联显示
        
      内联元素的特点:高度、宽度、行高都是不可改变的!!!

      在同一个div中,前面元素float,后面的元素要想不受float的影响,就要条件清除浮动clean:both,但添加清除浮动的div,padding、margin是无效的!!!所以可以在两者之间专门添加一个div用于清除浮动。
      溢出处理overflow:
        hidden:隐藏超出部分
        scoll:无论怎样都会添加滚动条
        auto:当内容超出时添加滚动条   

想要学习HTML+CSS基础入门的同学可以自行看视频学习。
链接:https://pan.baidu.com/s/1yv8HakksTmVkHpZlsI97Xg
密码:n87f

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: