（_init_）
（_init_）

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

文章目录

          • HTML基础
          • CSS基础
          • 列表
          • 表格
          • 表单
          • 块元素、内联元素、内联块元素

HTML基础
  • 定义
    超文本标记语言 HyperText Markup Language
  • 基本结构
   
<html> 

    <head>  
        <meta charset="utf-8"> 
        <title>html的基本结构title> 
    head>

<body>此标签中写网页中显示的内容body>
html>
  • 相对路径与绝对路径
    • 相对路径
      相对于引用文件本身去定位被引用的文件地址
      • “./” 表示当前文件所在目录下
      • “…/” 表示当前文件所在目录下的上一级目录
    • 绝对路径
      相对于磁盘的位置去定位文件的地址
  • 常用字符实体
    • 空格  
    • “<” <
    • “>” >
  • 标签
    • 标签类型
      • 单标签

      • 双标签

    • 常用标签
      • 块元素标签
        • 标题标签
        <h1>一级标题h1>
<h2>二级标题h2>
<h3>三级标题h3>
<h4>四级标题h4>
<h5>五级标题h5>
<h6>六级标题h6>
        • 段落标签
        <p>段落1p>
<p>段落2p>
        • 通用块容器标签
        <div>第一个div元素div>
<div>第二个div元素div>
      • 内联元素标签
        • 超链接标签
        
<a href="http://www.baidu.com"  target="_blank">内容元素a>
<a href="本地.html">本地链接a>
        • 通用内联容器标签
        <span>内联容器标签span>
        • 图片标签
        <img src="images/pic.jpg" alt="图片加载失败时的提示文字" title="光标放在图片上的提示文字"/>
      • 其他标签
        • 换行标签
        • html注释
  • 标签语义化
    在合适的地方用合适的标签；语义化做的好的，搜索引擎排名更前
    • 带语义的标签
      • h1~h6
      • p
      • img
      • a
      • 标签 表示语气中的强调词
      • 标签 表示专业词汇
      • 表示文档中的关键词或产品名
      • 表示非常重要的内容
      • …
    • 不带语义的标签
      • div
      • span
  • HTML5新标签
    这些新标签只能使用在手机网站的书写中，可以提升搜索引擎对网站的优化，不能用在PC端网站上，因为IE低版本不识别这些新标签。
    • 头部
    • 文章块
    • 底部
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>这是第一个divdiv>
<div>这是第二个divdiv>
    • 类选择器
      通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，可复用
    <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">contentp>
    • 层级选择器
      主要应用在标签嵌套的结构中，层级选择器可与标签选择器结合使用，减少命名，同时也可以通过层级，限制样式的作用范围
    <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&CSS基础_第1张图片

    • 文本常用样式属性

      • 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>Coffeedt>
    <dd>Black hot drinkdd>
    <dt>Milkdt>
    <dd>White cold drinkdd>
dl>
  • 列表常用样式属性
    list-style 设置列表中的小圆点/标号 --> list-style:none
表格
  • 表格相关标签和属性
    • 定义表格
    • 定义表格的行
    • 定义用于表格列的属性
    • colspan属性 设置单元格水平合并，设置值是数值
    • rowspan属性 设置单元格垂直合并，设置值是数值
    • 表格常用样式属性
      border-collapse 设置表格的边线合并，如：border-collapse:collapse;
      • 表单
      • 表单相关标签和属性
        • 标签 定义整体的表单区域
          • action属性 定义表单数据提交地址
          • method属性 定义表单提交的方式，一般有“get”方式（默认）和“post”方式
        • 标签 定义通用的表单元素
          • 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低版本不兼容，但实际工作中还要使用，符合渐进增强（随着浏览器版本的提升，效果越来越好）、优雅降级（在高版本显示效果好的前提下，保证了低版本浏览器不混乱）理论
      定义表格标题
    • 定义表格的表头
    • 定义表格单元