HTML知识小结

1.html常用标签

br 换行; hr 分界线;

title 网页标题

strong 字体加粗; em:倾斜; ins:下划线; del:删除

h1,h2,h3,h4,h5,h6 :标题标签

p段落标签

div span :无意义标签需要配合css使用

1.a 标签 超链接

 <!-- a 标签 超链接 -->
     <!-- 
        href：链接的地址，不知道跳转到哪里，可以用 # 先进行占位
        target="_blank":点击后跳转到新的页面,而不是在老页面直接打开
      -->
 eg:    <a href="#" target="_blank">超链接</a>
 ​
 a:link{
     /* 进行对未点击的超链接进行样式设置 */
     color: rebeccapurple;
 }
 a:visited{
     /* 进行对已点击的超链接进行设置； */
     color: #f5f5f5;
 }
 a:hover{
     /* 鼠标经过悬停超链接时字体颜色为白色 */
     color:#fff;   
 }

2.图片标签 img

 <!-- 图片标签 img {src alt title weight hight } -->
     <!-- src:图片的地址 -->
     <!-- alt:图片出现错误以后所显示的文字 -->
     <!-- title:鼠标悬停在图片上后所显示的文字 -->
     <!-- weight,hight:规定图片的高和宽 -->
     <!-- 
     
 相对路径:  ./  :从当前文件位置出发查找目标文件
 ​
 绝对路径: ../:上一级
         ../../:上两级 
     -->

3.音频标签 audio

 <!-- audio 音频 -->
     <!-- 
         controls:控制面板
         src:音频资源地址
         loop:循环播放
         autoplay:自动播放,不推荐
      -->

4.视频标签 video

 <!-- video 视频 -->
     <!-- 
         controls:控制面板
         src:视频资源地址
         loop:循环播放
         autoplay:自动播放
         muted:静音播放,可结合autoplay一起使用
         poster:视频预览图
      -->

5.字符实体标签

  <!-- 字符实体标签 -->
     <!-- 
         &lt; 这是小于号(<)
         &gt; 这是大于号(>)
         &amp; 这是&符号
         &nbsp; 这是一个空格
      -->

2.css样式

1.选择器

1.1 通配符选择器(*)

用于全局默认样式

通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距、内边距

{
 ​
   margin: 0;
 ​
   padding: 0;
 ​
   /*自减模式  */
 ​
   box-sizing: border-box;
 ​
 }

1.2 标签选择器

使用标签名作为选择器 → 选中同名标签设置相同的样式。 例如：p, h1, div, a, img......

1.3 类选择器

作用：查找标签，差异化设置标签的显示效果。 步骤：

• 定义类选择器 → .类名

• 使用类选择器 → 标签添加 class="类名“

1.4 id选择器 (# )

1.5 伪类选择器

选择器：伪类{ 属性：值 ; }

eg:

:hover 伪类标签：当鼠标悬停在元素上时触发。例如，可以通过以下CSS代码改变悬停状态下文本的颜色：a:hover { color: red;}

:active 伪类标签：当元素被激活时触发，这通常发生在用户点击链接后。例如，可以将激活状态下链接的文字变为蓝色：a:active { color: blue;}

:focus 伪类标签：当元素被选中或获得焦点时触发，如用户在表单中输入文本时。例如，可以让输入框获得一个黄色背景色以突出显示当前焦点：input:focus { background-color: yellow;}

:link 伪类标签: 访问前元素的状态: a:hover { color: red;}

2.文本属性

color文本颜色

1. 单词表示

2. rgb(r,g,b)

3. rgba(r,g,b,a)

4. 十六进制表示: #rrggbb

text-indent->文本缩进; em->倍数
 text-indent: 2em;
 text-align->文本对齐  (center:居中;right:右对齐)
 font-style->文字倾斜 (italic:倾斜 normal:正常)
 font-weight->文字粗细 (主要使用100,400,700)
 ​
 text-decoration->文本修饰线  
 属性:(none:无; underline:下划线; line-through:删除线; overline:上划线)
 ​
 垂直居中技巧：行高属性值等于盒子高度属性值 注意：该技巧适用于单行文字垂直居中效果(height=line-height)
 eg:  height: 40px;(盒子高度)
      line-height: 40px;(行高)

3.盒子模型

3.1 内容

 .box{
             /* 内容的宽 */
             width: 300px;
             /* 内容的高 */
             height: 300px;
             /* 盒子的边框:边框的粗细 边框的样式(solid:实线 dashed:虚线 dotted:点线 ) 颜色 */
             border: 10px dashed red;
             background-color: yellowgreen;
         }
         /* 
             盒子的总宽 = 内容的宽 + 左边框 + 右边框
             盒子的总高 = 内容的高 + 上边框 + 下边框
          */
div {
  margin: 50px;
  border: 5px solid brown; 
  padding: 20px;
  width: 200px;
  height: 200px; 
  background-color: pink;
}
<div class="box"></div>

3.2 边框线

设置单方向边框线 border-方位名词(top:上; bottom:下; left:左; right:右)

.box-1{
   width: 300px;
   height: 300px;
   background-color: violet;
/* 设置单方向边框线 border-方位名词(top:上; bottom:下; left:左; right:右) */
   border-top: 5px solid rebeccapurple;
   border-bottom: 10px solid red;
   border-left: 5px solid black;
   border-right: 9px solid yellow;
}
<div class="box-1"></div>

3.3 内外边距

.box{
		 border: 30px solid red;

     width: 300px;

     height: 300px;

     background-color: pink;
     /*  1.内边距 padding / padding-方位名词, 用于设置 内容 与盒子边缘之间的距离。*/
     padding-top: 30px;
     /* 多值写法 */
     padding: 30px 50px;
     /* 技巧：从上开始顺时针赋值，当前方向没有数值则与对面取值相同。 */
     /* 盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸 */
     /* 2.外边距 margin / margin-方位名词 ,用于拉开两个盒子之间的距离 */
     margin: 39px;
     margin-top: 30px;
     /* 技巧：版心居中 – 左右 margin 值 为 auto（盒子要有宽度） */
     margin-left: auto;
     margin-right: auto;
     }
     
   <div class="box"></div>

清除默认样式

/* 清除默认内外边距 */
* {
  margin: 0;
  padding: 0; 
/*自减模式  */
  box-sizing: border-box;
}
/* 清除列表项目符号 */ 
li {
  list-style: none;
}

4.Flex(弹性容器/盒子)

display: flex; =>弹性盒子,让子元素从块元素变为行内块, 让他们在同一行出现

1. 主轴:(默认)水平向右

justify-content

属性值	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
flex-wrap	控制容器子元素的是否进行换行
space-between	弹性盒子沿主轴均匀排列，空白间距分在弹性盒子之间
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

2.侧轴(交叉轴):(默认)垂直向下

属性名

• align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）

• align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

属性值	效果
stretch	弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）
center	弹性盒子沿侧轴居中排列
flex-start	弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列

3.修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向

属性名：flex-direction

属性值	效果
row	水平方向，从左向右（默认）
column	垂直方向，从上向下
row-reverse	水平方向，从右向左
column-reverse	垂直方向，从下向上

知识补充

cursor改便鼠标样式 default(默认样式,一个箭头),pointer(指针光标,一个小手),move(移动光标,表示可移动的元素),text(文本光标,表示可编辑的文本内容)

鼠标样式属性值	鼠标样式功能
default	默认的箭头鼠标
pointer	五指抓手
move	十字箭头，代表可以拖动
text	文本，大写英文 I
not-allowed	红圆圈加斜杠，禁止符号

示例: cursor: pointer;

/* 用于去除鼠标悬停后的黑框 */

outline: none;

form 标签用来采集数据,属性则是用来规定如何把采集到的数据发送到服务器

示例:

 <!-- action :服务器的地址,默认为当前页面 -->
    <form action="https://www.soso.com/tx?">
        <div class="ss">
            <input type="text" class="text" name="query">
            <input type="submit" value="搜索" class="submit">
        </div>
    </form>