HTML CSS常见的小问题

红太狼 2021-10-23 09:45 380阅读 0赞

相对路径：  
图像文件和HTML 文件位于同一文件夹：只需输入图像文件的名称即可，  
如< img src=“logo.gif " />。  
图像文件位于HTML 文件的下一级文件夹：输入文件夹名和文件名，之间  
用“/”隔开，如< img src=“img/img01/logo.gif” / >。  
图像文件位于HTML 文件的上一级文件夹：在文件名之前加入“…/” ，如果  
是上两级，则需要使用“…/ …/”，以此类推，如< img src=”…/logo.gif" / >。  
绝对路径：  
绝对路径以Web 站点根目录为参考基础的目录路径。之所以称为绝对，意指当  
所有网页引用同一个文件时，所使用的路径都是一样的。

表格属性  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODg3NjU1_size_16_color_FFFFFF_t_70]  
合并单元格：rowspan上下两行合并  
colspan左右两列合并

input  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODg3NjU1_size_16_color_FFFFFF_t_70 1]  
CSS选择器  
ID 选择器：  
id 选择器使用“\#”进行标识，后面紧跟id 名。\#id 名\{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; \}该语法中，id 名即为HTML 元素的id 属性值，大多数HTML 元素都可以定义id 属性，元素的id 值是唯一的，只能对应于文档中某一个具体的元素。  
通配符选择器：  
通配符选择器用“\*”号表示，他是所有选择器中作用范围最广的，能匹配页面中  
所有的元素。

*  \{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; \}  
    子元素选择器：  
    子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个> 进行连接，注意，符号左右两侧各保留一个空格。  
    后代选择器：  
    后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。  
    并集选择器：  
    并集选择器（CSS 选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class 类选择器id 选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS 样式。  
    交集选择器：  
    交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class 选择器，两个选择器之间不能有空格，如h3.special。  
    交集选择器是并且的意思。即…又…的意思比如： p.one 选择的是： 类名为.one 的段落标签。用的比较少，不建议这样使用。

隐藏元素的四种方法：  
![在这里插入图片描述][20190819102222461.png]

复习HTML

1.常用标签
          head，body，div，span，p，hn，html，img，table，ol，ul，li，a，hr，br，b，i，u，del，input，textarea，form，tr，td
          th，caption,dl,dt,dd，meta
    
        2.单双标签
          <></>  双标签   
          < />/<>   单标签  img a hr br meta
        3.组成页面的三个基本元素
          html， head body
        4.web的标准
         html css js
        5.如何写html文件？
        以.html后缀结尾的都是html文件
        6.如何把.txt文件改成html文件
        7.标签语义化
        8.相对路径，绝对路径
        相对路径：通过本身文件找其他文件
        绝对路径：固定位置，比如在c：//windows/destop/....
                 还有一种是：https://www.baidu.com/img/xinshouye_46cc6be3783724af1729ba51cfcde494.png
        ../   当前文件的上一级文件
        ./或者直接写文件名
        9.浏览器内核：
        常用浏览器：IE，chrome，safari，Firefox，opera
        浏览器内核：trident，webkit，gecko
        10.table
        <talbel>
            <tr>
                <td><td>
            </tr>
        </table>
        合并单元格：
        上下合并 ：rowspan
        左右合并：colspan
        11标签
        input
         type=“text,radio,checkbox,password,submit，reset,button,image,file”
        <select>
            <option>a</option>
            <option>a</option>
        </select> 
        12锚点    
        <a href='#名字'></a>
        <标签 id=‘名字’></标签>
        13.标签属性
        a（href ，target）
        img（src，alt，title，width，height，border）
        
    
        
    
         复习CSS
    1.css之定位
    position：absolute   绝对定位，相对于其父元素，如果父元素没有定位，则从头文件开始，脱离文档流，不占位。    
              fixed      固定定位，按照屏幕大小来定位。 不占位置。
              relative   相对定位，相对于自身定位，占位置。
    
    父相子绝：父元素相对定位，子元素绝对定位，目的是为了保证子元素在父元素盒子内。
    2.居中：
        盒子居中：margin: 0 auto
        图片居中：外层盒子居中，或者是文字居中带动图片，图片作为背景居中
        图片+文字：text-align，vertical-aligin（图片与文字分别加）
        定位居中：小盒子再大盒子中，小盒子的top，left分别50%，然后margin-left，margin-top是小盒子自身宽高的一半（负值）。
        单行文字居中：line-height
    3.溢出隐藏
    overflow：hidden   溢出隐藏
    text-overflow：clips（不显示省略号）,ellipsis(显示省略号) ,white-space: nowrap;
    4.特殊效果
    cursor：pointer（划过小手），default（默认的），move（移动）,text（文本）
    
    
    5.盒子模型
    
      外盒子高度：height=margin+border+padding+content
      内容高度：    height=content
      内盒子高度：height=content+padding+border
        IEtest（这是个工具）
    6.浮动(float)
      left，right，none
      清除浮动：clear：both,以写在任意标签内
    7.页面引入css的方式：
        内联，外联，行内。
        外联：link
        内联：style写在head中
        行内：写在标签中
    8.选择器类型：
      ID选择器（#）,类名选择器(.)，标签选择器（标签名）,子代（>），后代(空格)，交集(标签名+类名)，并集(类名1，类名2),多类名，通配符
    9.伪类
    用：表示，:link  :visited  :hover  :actived         :hover可以应用与所有标签  
    10.display
    行元素与块元素转换     
    block，inline，inline-block;
    行元素与块元素区别：
    行元素：span  不能设置宽高，只能设置左右，所有元素在一行显示。没有默认样式
    块元素：div   独占一行，可以设置宽高，margin，padding都可以设置。
    
    行元素：span，（a，img）
    块元素： div，p，hn,ul,li,table,
    11.属性
    
      width,heoight,background,color,font-size,font-weight,font-family,border,text-indent,text-decoration,text-align,
      vertical-align,display,
    
      img的属性：width,height,alt（不显示时提示文字）, title(鼠标划过显示提示),src（图片路径）
    
      background的属性：images(url)，position-x，position-y，repeat-x，repeat-y,no-repeat,color,scroll，
    
      a的属性：href，alt，title
    
    12.布局
        先水平，后垂直。
        外层一定包大盒子。
        div span可以随便使用。
    
    13.权重：
    !important>ID>class>标签
    
    14.css继承
    text-，font-，line-这些元素开头的都可以继承，以及 color 属性

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODg3NjU1_size_16_color_FFFFFF_t_70]: /images/20211023/975a5fb74f5945b79a68b00f79bd6509.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODg3NjU1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190819102206495.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODg3NjU1,size_16,color_FFFFFF,t_70
[20190819102222461.png]: https://img-blog.csdnimg.cn/20190819102222461.png