HTML+CSS知识点

kemisama

已于 2022-09-20 22:48:51 修改

阅读量365

点赞数

文章标签： html css 前端

于 2022-09-18 22:12:31 首次发布

本文链接：https://blog.csdn.net/kemisama/article/details/126368224

版权

本文详细介绍了HTML和CSS的基础与进阶知识点，包括HTML的各种标签，如iframe、表格、表单，以及CSS的选择器、特性、布局技巧等。通过此文章，读者可以全面了解HTML和CSS在网页设计中的应用。

摘要由CSDN通过智能技术生成

格式化标签

1.快速生成HTML结构语法

 	<!-- 直接写.red自动生成div类选择器 -->
    <div class="red"></div>
    <!-- 直接写#red自动生成div id选择器 -->
    <div id="red"></div>
    <!-- 写p.red生成p 类选择器 -->
    <p class="red"></p>
    <!-- 写p.red#red同时生成类选择器,id选择器 -->
    <p class="red" id="red"></p>
    <!-- 同级加号div+p -->
    <div></div>
    <p></p>
    <!-- 子集大于号ul>li -->
    <ul>
        <li></li>
    </ul>
    <!-- 实现多个用乘号* h6*3 -->
    <h6></h6>
    <h6></h6>
    <h6></h6>
    <!-- 添加文本内容ul>li{内容} -->
    <ol>
        <li>我是内容</li>
    </ol>
    <!-- 文本内容实现递增ol>li{$}* -->
    <ol>
        <li>1a</li>
        <li>2a</li>
        <li>3a</li>
    </ol>
	<!-- $符号排序 -->
	.sss$*5
	<div class="sss1"></div>
    <div class="sss2"></div>
    <div class="sss3"></div>
    <div class="sss4"></div>
    <div class="sss5"></div>
	div{$}*5
	<div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

2.快速生成css样式

w100+h100+bgc

需要清除的样式

/*清除默认内外边距*/
    *{
   
    margin: 0;
    
     padding: 0;
    
    }
 
 /*內减模式*/
    * {
   
 	 
      box-sizing: border-box;
    
    }

 /*设置网页统一的字体大小、行高、字体系列相关属性，根据需要设置，此项不唯一*/ 
    body {
   
  	  
     font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
    
      "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
    
     color: #333;
    
    }

	 /*去除列表默认样式*/
    ul,
    ol,
    dl{
   
    
     list-style: none;
     
    }
    
  /*去除默认的倾斜效果*/
    em,
    i {
   
    
     font-style: normal;
   
    }

  /*去除a标签默认下划线，其他样式需要对单独a标签设置，设置父级不生效*/
    a {
   
  
     text-decoration: none;
    
    }

   /*设置img的垂直对齐方式为居中对齐，去除img默认下间隙*/
    img {
   
 
     vertical-align: middle;
    
    }

   /*去除input默认样式*/
    input {
   
    
     border: none;
    
     outline: none;
    
    }

  /*左浮动，直接调用类名添加给需要修改的标签*/
    .fl {
   
    
     float: left;
    
    }

   /*右浮动*/
    .fr {
   
    
     float: right;
    
    }

/*双伪元素清除法*/

.clearfix::before,

.clearfix::after {
   

     content: "";

     display: table;/*插入元素必须是块级,并在一行显示*/
     
    /* height:0;不让看见这个元素，这两行可以不加
    
     visibility:hidden;*/

}

.clearfix::after {
   

	 clear: both; /*在所有元素后边插入块级元素清除浮动*/

}

HTML

基础标签（经常用）

标题<h></h>
换行<br />

水平线<hr />

空格符&nbsp;
小于号&lt;
大于号&gt;
上标<sup>
下标<sub>

段落<p></p>

块级标签<div></div>

行内标签<span></span>

<!--预格式文本，保留空格和换行，适合显示算法代码-->
<pre></pre>

超链接

<a href= "http://www.qq.com">腾讯</a>（外部链接）

<a href="目标网页.html" target="_blank">超链接</a>(内部链接)
[^ target="_blank"]:加载新窗口，不加默认覆盖本窗口显示

<a href="#target">锚点位置</a> 
跳转到其他页面的锚点位置：在地址的最后加上#target