• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

【复习向】30分钟快速回顾HTML&CSS基础

互联网 diligentman 2周前 (02-20) 7次浏览

文章目录

          • HTML基础
          • CSS基础
          • 列表
          • 表格
          • 表单
          • 块元素、内联元素、内联块元素
HTML基础
  • 定义
    超文本标记语言 HyperText Markup Language
  • 基本结构
<!DOCTYPE html>   <!--文档声明类型,声明帮助浏览器正确地显示网页-->
<html> <!--html文档的根标签-->

    <head>  <!--网页头部信息,用来做网页的基本配置-->
        <meta charset="utf-8"> <!--网页字符编码-->
        <title>html的基本结构</title> <!--网页在浏览器窗口中显示的标题-->
    </head>

<body>此标签中写网页中显示的内容</body>
</html>
  • 相对路径与绝对路径
    • 相对路径
      相对于引用文件本身去定位被引用的文件地址
      • ./” 表示当前文件所在目录下
      • …/” 表示当前文件所在目录下的上一级目录
    • 绝对路径
      相对于磁盘的位置去定位文件的地址
  • 常用字符实体
    • 空格 &nbsp;
    • “<” &lt;
    • “>” &gt;
  • 标签
    • 标签类型
      • 单标签
        <br />
      • 双标签
        <h1></h1>
    • 常用标签
      • 块元素标签
        • 标题标签
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>
        
        • 段落标签
        <p>段落1</p>
        <p>段落2</p>
        
        • 通用块容器标签
        <div>第一个div元素</div>
        <div>第二个div元素</div>
        
      • 内联元素标签
        • 超链接标签
        <!--target常用属性:_blank:在新窗口中打开;_self:默认。在相同的框架中打开;-->
        <a href="http://www.baidu.com"  target="_blank">内容元素</a>
        <a href="本地.html">本地链接</a>
        <!--空链接写法:1、# 2、javascript:; 3、javascript:void(0) -->
        <!--锚点链接:设置ID,href属性写#id名-->
        
        • 通用内联容器标签
        <span>内联容器标签</span>
        
        • 图片标签
        <img src="images/pic.jpg" alt="图片加载失败时的提示文字" title="光标放在图片上的提示文字"/>
        
      • 其他标签
        • 换行标签 <br />
        • html注释
        <!-- 这是一段注释  -->
        
  • 标签语义化
    在合适的地方用合适的标签;语义化做的好的,搜索引擎排名更前
    • 带语义的标签
      • h1~h6
      • p
      • img
      • a
      • <em>标签 表示语气中的强调词
      • <i>标签 表示专业词汇
      • <b> 表示文档中的关键词或产品名
      • <strong> 表示非常重要的内容
    • 不带语义的标签
      • div
      • span
  • HTML5新标签
    这些新标签只能使用在手机网站的书写中,可以提升搜索引擎对网站的优化,不能用在PC端网站上,因为IE低版本不识别这些新标签。
    • <header>头部</header>
    • <nav>导航栏</nav>
    • <aside>侧导航</aside>
    • <article>文章块</article>
    • <footer>底部</footer>
CSS基础
  • 定义
    Cascading Style Sheets,层叠样式表
  • 用途
    html只负责文档的结构和内容,表现形式完全交给CSS,使html文档变得更加简洁
  • 注释
    /*注释内容*/
  • 基本语法
    选择器 { 属性:值; 属性:值; 属性:值;}
  • 引入方式
    • 内联式
    <div style="width:100px; height:100px; background:red ">......</div>
    
    • 嵌入式
    <head>
        <style type="text/css">
            div{ width:100px; height:100px; background:red }
            ......
        </style>
    </head>
    
    • 外链式
    <head>
        <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    
  • 常用选择器
    • 标签选择器 –> 一般用来样式重置(清除默认样式)
    <style>
        div{color:red}
    </style>
         ......
    <div>这是第一个div</div>
    <div>这是第二个div</div>
    
    • 类选择器
      通过类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,可复用
    <style>
        .blue{color:blue}
        .big{font-size:20px}
        .box{width:100px;height:100px;background:gold} 
    </style>
    ......
    <div class="blue">....</div>
    <h3 class="blue big box">....</h3>
    <p class="blue box">....</p>
    
    • id选择器
      通过id来选择元素,id唯一,但类名可以有多个,一般配合js使用(不常用)
    <style>
        #id1{color: blue}
    </style>
    ......
    <p id="id1">content</p>
    
    • 层级选择器
      主要应用在标签嵌套的结构中,层级选择器可与标签选择器结合使用,减少命名,同时也可以通过层级,限制样式的作用范围
    <style>
        .con{width:300px;height:80px;background:green}
        .con span{color:red}
        .con .pink{color:pink}
        .con .gold{color:gold}
    </style>
    ......
    <div class="con">
        <span>....</span>
        <a href="#" class="pink">....</a>
        <a href="#" class="gold">...</a>
    </div>
    <span>....</span>
    <a href="#" class="pink">....</a>
    
    • 组选择器
      多个选择器有同样的样式设置
    <style>
        .box1,.box2,.box3{width:100px;height:100px}
        .box1{background:red}
        .box2{background:pink}
        .box2{background:gold}
    </style>
    ...
    <div class="box1">....</div>
    <div class="box2">....</div>
    <div class="box3">....</div>
    
    • 伪类及伪元素选择器
      常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态;伪元素选择器有before和after,它们可以通过样式在元素中插入内容
    <style>
        .box1:hover{color:red}
        .box2:before{content:'行首文字';}
        .box3:after{content:'行尾文字';}
    </style>
    ...
    <div class="box1">....</div>
    <div class="box2">....</div>
    <div class="box3">....</div>
    
  • 权重对比
    • 引入方式
      • 外链和内嵌权重相同,先写的会被后写的覆盖;
      • 行内css权重最大,如果想覆盖他,就只能给样式中添加** !import** 来把权重提高
    • 选择器权重计算
      • 标签选择器权重值:1
      • 类/伪类选择器权重值:10
      • id选择器权重值:100
      • css行内式写法权重值:1000
      • !important修饰权重值:10000
      • 层级选择器权重值累加计算
      • 组选择器权重值不会累加
      • 权重值相等时先写的会被后写的覆盖
      • 从父元素继承的选择器权重值为0
  • 常用属性
    • 布局常用样式属性

      • width
      • height
      • background
      • border
        border:1px solid/dashed black –> 设置元素四周边框是1像素宽的黑色实线/虚线
        • border-top
        • border-left
        • border-right
        • border-bottom
      • float 设置元素浮动
        • float:left; float:right;
        • 浮动的元素会向左或向右浮动,碰到父元素边界、其他元素才停下来
        • 浮动让行内元素或块元素转化为有浮动特性的行内块元素(此时不会有行内块元素间隙问题)
        • 父元素如果没有设置尺寸(一般是高度不设置),父元素内整体浮动的子元素无法撑开父元素,父元素需要清除浮动
        • 清除浮动
          • 父级上增加属性overflow:hidden
          • 在最后一个子元素的后面加一个空的div,给它样式属性 clear:both(不推荐)
          • 使用成熟的清除浮动样式类,clearfix
          <style>
              .clearfix:after,.clearfix:before{ content: "";display: table;}
              .clearfix:after{ clear:both;}
              .clearfix{zoom:1;}
          </style>
          ...
          <div class="con2 clearfix">
          
        • 设置浮动可以解决的问题小结
          • 行内元素及行内块元素的间距问题
          • 垂直外边距margin-top/bottom不再合并问题
          • margin-top塌陷问题 –> 子元素无法定位父元素的边界,也可以给父元素加border
          • 排列一行的元素默认以文字基线对齐的问题
          • 但如果要实现子元素在父元素中水平居中时不能用浮动
      • margin 设置外边距(元素和父元素的距离)
        • margin的写法:
          • 四边都为10px –> margin:10px;
          • 上下10px,左右20px –> margin:10px 20px;
          • 上10px,左右20px,下30px –> margin:10px 20px 30px;
          • 上10px,右20px,下30px,左40px(顺时针) –> margin:10px 20px 30px 40px;
          • margin-top、margin-left、margin-right、margin-bottom
        • margin左右值设为auto可以实现水平居中
      • padding 设置内边距(元素包含的内容和元素边框的距离)
        写法同margin
      • 盒子模型 –> 区分margin,padding
        margin是与父元素的关系,padding是与子元素的关系
        真实大小:width/height+border+padding(margin不影响
        【复习向】30分钟快速回顾HTML&amp;CSS基础
    • 文本常用样式属性

      • color
      • font-size
      • font-family
      • font-weight
      • font-style:normal/italic
      • line-height 设置行高
        line-height:24px; –> 表示文字高度+文字上下的间距是24px,也就是每一行占有的高度是24px
      • text-align
        一般用在块元素中,内联元素宽度和内容决定
      • text-indent 设置文字首行缩进
        em为相对长度单位,缩进两格即为2em
      • text-decoration 修饰文本
        text-decoration:none; –> 将文字下划线去掉
    • overflow属性设置元素溢出
      当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式 –> overflow:hidden

      • visible 默认值。内容不会被修剪,会呈现在元素框之外
      • hidden 内容会被修剪,并且其余内容是不可见的,此属性还有清除浮动、清除margin-top塌陷的功能
      • scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容
      • auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
列表
  • 无序列表
<ul>
    <li><a href="#">列表标题一</a></li>
    <li><a href="#">列表标题二</a></li>
    <li><a href="#">列表标题三</a></li>
</ul>
  • 有序列表
<ol>
    <li><a href="#">列表标题一</a></li>
    <li><a href="#">列表标题二</a></li>
    <li><a href="#">列表标题三</a></li>
</ol>
  • 自定义列表
<!--以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。-->
<dl>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>
  • 列表常用样式属性
    list-style 设置列表中的小圆点/标号 –> list-style:none
表格
  • 表格相关标签和属性
    • <table> 定义表格
    • <caption> 定义表格标题
    • <th>定义表格的表头
    • <tr>定义表格的行
    • <td>定义表格单元
    • <col>定义用于表格列的属性
    • colspan属性 设置单元格水平合并,设置值是数值
    • rowspan属性 设置单元格垂直合并,设置值是数值
  • 表格常用样式属性
    border-collapse 设置表格的边线合并,如:border-collapse:collapse;
表单
  • 表单相关标签和属性
    • <form>标签 定义整体的表单区域
      • action属性 定义表单数据提交地址
      • method属性 定义表单提交的方式,一般有“get”方式(默认)和“post”方式
    • <label>标签 为表单元素定义文字标注
    • <input>标签 定义通用的表单元素
      • type属性
        • type=“text” 定义单行文本输入框
        • type=“password” 定义密码输入框
        • type=“radio” 定义单选框
          • 如果想让文字点击能切换,那么要加label标签,并设置for属性和对应的单选按钮的ID属性值一致;
          • 必须给一组单选按钮添加name值,才可以实现单选效果;
          • 设置默认选中状态,要给单选按钮添加checked=“checked”
        <form action="" method="post">    
            性别:
            <input type="radio" name="xb" id="man" checked="checked"/><label for="man"></label>
            <input type="radio" name="xb" id="woman" /><label for="woman"></label>   
            <input type="radio" name="xb" id="secret" /><label for="secret">保密</label>
        </form>
        
        • type=“checkbox” 定义复选框
        • type=“file” 定义上传文件
        • type=“submit” 定义提交按钮
        • type=“reset” 定义重置按钮
        • type=“button” 定义一个普通按钮
      • value属性 定义表单元素的值
      • name属性 定义表单元素的名称,此名称是提交数据时的键名 –> name和value属性配合传值到后端
      • autofocus="autofocus"属性 刷新后让第一个输入框呈默认选中状态
      • outline:none属性 文本输入框清除高亮效果
      • placeholder属性 代表提示信息
        placeholder属性IE低版本不兼容,但实际工作中还要使用,符合渐进增强(随着浏览器版本的提升,效果越来越好)、优雅降级(在高版本显示效果好的前提下,保证了低版本浏览器不混乱)理论
    • <textarea>标签 定义多行文本输入框
      不能设置rows、cols属性,因为浏览器解析的结果都不一样,必须要设置width、height属性才可以
    • <select>标签 定义下拉表单元素
    • <option>标签 与<select>标签配合,定义下拉表单元素中的选项
      • 多组下拉菜单:添加一个optgroup标签,并设置label属性作为提示文字
      • 默认选中状态:需要给对应的option添加selected属性
      <select name="" id="">    
          <optgroup label="北京">        
              <option>顺义</option>        
              <option>昌平</option>        
              <option>海淀</option>    
          </optgroup>    
          <optgroup label="深圳">        
              <option>罗湖区</option>        
              <option selected="selected">福田区</option>        
              <option>宝山区</option>    
          </optgroup>
      </select>
      
块元素、内联元素、内联块元素
  • 块元素(行元素)
    • 支持全部的样式
    • 如果没有设置宽度,默认的宽度为父级宽度100%
    • 盒子占据一行(即使设置了宽度)
  • 内联元素(行内元素)
    • 不支持宽、高、margin上下、padding上下
    • 宽高由内容决定
    • 多个元素并在一行,如果遇到父元素边界会自动换行
    • 代码换行,盒子之间会产生间距
      • 解决内联元素间隙方式
        1. 去掉内联元素之间的换行
        2. 将内联元素的父级设置font-size为0,内联元素自身再设置font-size
        3. 设置浮动
    • 内联元素直接设置文本水平对齐无效果,但父元素可以用text-align属性设置子元素水平对齐方式
  • 内联块元素(行内块元素)–> 主要特性是内联元素,结合了块元素
    • 支持全部样式(支持宽高、margin、padding)
    • 如果没有设置宽高,宽高由内容决定
    • 多个元素并在一行,如果遇到父元素边界会自动换行
    • 代码换行,盒子会产生间距
    • 可以用text-align属性设置子元素水平对齐方式
  • display属性相互转化元素类型
    • none 元素隐藏且不占位置
    • block 元素以块元素显示
    • inline 元素以内联元素显示
    • inline-block 元素以内联块元素显示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>横向页码显示</title>
    <style>
        .page{
            /* 列表样式重置 */
            margin: 0px;
            padding: 0px;
            list-style: none;

            width: 960px;
            height: 40px;
            border: 1px solid lightgray;
            
            /*设置整个列表水平居中*/
            margin: 50px auto 0px;
            /* 设置父元素的水平居中来让子元素整体水平居中 */
            text-align: center;
            /* 让内部的子元素之间没有间距(解决内联元素间隙方式2) */
            font-size: 0px;
        }

        .page li{
            /* li标签是块元素,默认纵向排列,转成行内块之后就可以排列在一行 */
            display: inline-block;
            /* 控制子元素的子体大小 因为字体大小会继承 */
            font-size: 12px;
        }

        .page a{
            color: black;
            text-decoration: none;
            background-color: gold;

            /* 让a标签中的文字在黄色框中垂直居中 */
            line-height: 26px;
            /* 变相让a标签加大  */
            padding: 0px 9px;
            font-family: "Microsoft YaHei";
            /* 把行内元素转换成行内块 让它可以设置宽高或内边距 */
            display: inline-block;

            height: 26px;

            /*增加间距*/
            margin: 7px 5px 0px;
        }

        .page a:hover {
            color: white;
            background-color: red;
        }
    </style>
</head>
<body>
    <ul class="page">
        <li><a href="#">上一页</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><span>...</span></li>
        <li><a href="#">17</a></li>
        <li><a href="#">18</a></li>
        <li><a href="#">19</a></li>
        <li><a href="#">20</a></li>
        <li><a href="#">下一页</a></li>
    </ul>
</body>
</html>


程序员灯塔
转载请注明原文链接:【复习向】30分钟快速回顾HTML&CSS基础
喜欢 (0)