欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML&CSS知识点

程序员文章站 2022-05-29 15:55:19
...

HTML&CSS知识点

HTML

  • 概念:HTML是最基础的网页开发语言
  • Hyper Text Markup Language:超文本标记语言
  • 超文本:
    • 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本
  • 标记语言:
    • 由标签构成的语言。<标签名称> 如 html,xml
    • 标记语言不是编程语言
  • 快速入门:
    1. html文档后缀名 .html 或者 .htm
    2. 标签分为
      1. 围堵标签:有开始标签和结束标签。如 <html> </html>
      2. 自闭和标签:开始标签和结束标签在一起。如<br/>
      3. 标签可以嵌套:
        • 需要正确嵌套,不能你中有我,我中有你
          • 错误:<a><b></a></b>
          • 正确:<a><b></b></a>
      4. 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可)引起来
      5. html的标签不区分大小写,但是建议使用小写。
<!DOCTYPE html>
<html lang="ch">
	<head>
        <meta charset="UTF-8">
		<title>title</title>
	</head>
			
	<body>
		<FONT color='red'>Hello World</font><br/>
		<font color='green'>Hello World</font>
	</body>
</html>

HTML标签

标签学习

  • 文件标签:构成html最基本的标签
    • <html></html>:html文档的根标签
    • <head></head>:头标签。用于指定html文档的一些属性。引入外部的资源
    • <title></title>:标题标签
    • <body></body>:体标签
    • <!DOCTYPE html>:html5中定义该文档是html文档
  • 文本标签
    • 注释:<!-- 注释内容 -->

单标签

  • 水平线:<hr>
  • 换行:<br>
  • 图像:<img>
    • 图像属性:
      • src:指定图片的位置
      • alt:图像无法显示时替换图像
      • title:鼠标悬停时的显示文本
      • width:宽度
      • height:高度(宽高不要同时设置)
      • border:边框

双标签

  • 标签:h1—h6

  • 段落:<p></p>

  • 无语义标签:

    • <div></div>:每一个div占满一整行。块级标签
    • <span></span>:文本信息在一行展示,行内标签 内联标签
  • 语义化标签:html5中为了提高程序的可读性,提供了一些标签

    • <header></header>:页眉
    • <footer></footer>:页脚
  • 粗体:<strong></strong>

  • 斜体:<em></em>

  • 下划线:<ins></ins>

  • 删除线:<del></del>

  • 链接:<a href="#" target="_self"></a>

    1. 创建超级链接:链接本地文件 链接外部文件
    2. 查看同一页面的指定位置:href="#名称" name="名称"
    3. 在新的浏览器窗口打开:target="_blank"
    • href:指定访问资源的URL(统一资源定位符)

    • target:指定打开资源的方式

      • "_self":默认值,在当前页面打开
      • "_blank":在新建的空白页面打开
    • 设置整体链接的打开状态:base

      1. 放在<head></head>之间
      2. target="_blank"
      3. 所有链接默认都是在新标签页中打开
  • 列表

    • 无序列表:ul li (type:disc,square,circle)
    • 有序列表:ol li (type:1,a,A,i,I)
    • 自定义列表:dl dt dd
  • 表格:<table></table>

    • 标题:<caption></caption>
    • 表示表格的头部分:<thead></thead>
    • 表示表格的体部分:<tbody></tbody>
    • 表示表格的脚部分:<tfoot></tfoot>
    • 定义行:<tr></tr>
    • 定义单元格:<td></td>
      • 合并行(竖):rowspan=“合并个数”
      • 合并列(横):colspan=“合并个数”
    • 定义表头单元格:<th></th>
    • 表头:thead-tr-th
    • 表格主体:tbody-tr-td
    • 属性:
      • 宽度:width
      • 高度:height
      • 表格边框:border
      • 单元格与单元格之间的间隙:cellspacing(一般设置为0)
      • 单元格内容与边框之间的间隙:collspadding(一般设置为0)
      • 表格的对齐方式:align

表单标签

  • 概念:用于采集用户输入的数据的,用于和服务器进行交互。

  • 定义表单:<form></form>

  • 属性:

    • action:指定提交数据的URL
    • method:指定提交方式
      • 分类:一共7种,2种比较常用
        • get
          1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
          2. 请求参数大小是有限制的。
          3. 不太安全。
        • post
          1. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
          2. 请求参数的大小没有限制。
          3. 较为安全。
  • 注意:表单项中的数据要想被提交,必须指定其name属性

  • 表单项标签:

    • <input>:可以通过type属性值,改变元素展示的样式

      • type属性:
        • text:文本输入框,默认值
          • placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息
        • password:密码输入框
        • radio:单选框
          • 注意:
            1. 要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样。
            2. 一般会给每一个单选框提供value属性,指定其被选中后提交的值
            3. checked属性,可以指定默认值
        • checkbox:复选框
          • 注意:
            1. 一般会给每一个单选框提供value属性,指定其被选中后提交的值
            2. checked属性,可以指定默认值
        • file:文件选择框
        • hidden:隐藏域,用于提交一些信息。
        • 按钮:
          • submit:提交按钮。可以提交表单
          • button:普通按钮
          • image:图片提交按钮(src属性指定图片的路径)
          • reset:重置按钮
    • label:指定输入项的文字描述信息

      • 注意:
        • label的for属性一般会和 input 的 id 属性值 对应。如果对应了,则点击label区域,会让input输入框获取焦点。
      <form>
        <label for="male">Male</label>
        <input type="radio" name="sex" id="male" />
        <br />
        <label for="female">Female</label>
        <input type="radio" name="sex" id="female" />
      </form>
      
    • select: 下拉列表

      • 子元素:option,指定列表项
      <select>
        <option value ="1">a</option>
        <option value ="2">b</option>
        <option value="3">c</option>
        <option value="4">d</option>
      </select>
      
    • textarea:文本域

      • cols:指定列数,每一行有多少个字符
      • rows:默认多少行。

CSS

  • 概念: Cascading Style Sheets 层叠样式表

  • 层叠:多个样式可以作用在同一个html的元素上,同时生效

  • 好处:

    1. 功能强大
    2. 将内容展示和样式控制分离
      • 降低耦合度。解耦
      • 让分工协作更容易
      • 提高开发效率

    CSS的使用:CSS与html结合方式

    • 内联样式\行内样式

      • 在标签内使用style属性指定css代码
      • <div style="color:red;">hello css</div>
    • 内部样式

      • 在head标签内,定义style标签,style标签的标签体内容就是css代码
      <style>
      	div{
      		color:blue;
      	}
      </style>
      
      <div>hello css</div>
      
    • 外部样式

      1. 定义css资源文件
      2. 在head标签内,定义link标签,引入外部的资源文件
      <!--a.css文件-->
      div{
      	color:green;
      }
      
      <!--链接使用-->
      <link rel="stylesheet" href="css/a.css">
      <div>hello css</div>
      <div>hello css</div>
      
    • 注意:

      • 三种方式css的作用范围越来越大
      • 后期常用:内部样式、外部样式
      <!--外部样式可以写为-->
      <style>
      	@import "css/a.css";
      </style>
      

    css语法:

    选择器 {
    	属性名1:属性值1;
    	属性名2:属性值2;
    	...
    }
    
    • 选择器:筛选具有相似特征的元素(div、span…)
    • 注意:每一对属性需要使用 ; 隔开,最后一对属性可以不加

    选择器:筛选具有相似特征的元素

    1. 基础选择器
      1. id选择器:选择具体的id属性值的元素(建议在一个html页面中id值唯一)
        • 语法:#id属性值{}
      2. 元素选择器:选择具有相同标签名称的元素
        • 语法:标签名称{}
        • id选择器优先级 > 元素选择器
      3. 类选择器:选择具有相同的class属性值的元素。
        • 语法:.class属性值{}
        • 类选择器优先级 > 元素选择器
    2. 扩展选择器:
      1. 通配符选择器(选择所有元素)
        • 语法:*{}
      2. 交集选择器
        • h2.ab{ } (类名为ab的h2标签)
      3. 并集选择器
        • 语法:选择器1,选择器2{}
        • div,p, .ab{ }(多个选择器一起选中)
      4. 子选择器:筛选 选择器1元素下 的 选择器2元素
        • 语法:选择器1 选择器2{}
      5. 父选择器:筛选 选择器2的父元素选择器1
        • 语法:选择器1 > 选择器2{}
        • div>p { }(div标签的亲儿子p标签)
      6. 后代选择器
        • div p{ }(div中包裹的p标签。可以是父子关系,可以是爷孙关系)
      7. 属性选择器:选择元素名称,属性名=属性值的元素
        • 语法:元素名称[属性名="属性值"]{}
      8. 伪类选择器:选择一些元素具有的状态
        • 语法:元素:状态{}
        • <a></a>状态
          • -:link:初始化的状态
          • -:visited:被访问过的状态
          • -:active:正在访问状态
          • -:hover:鼠标悬浮状态

CSS字体样式属性

  • font-size:字体大小

  • font-family:字体

  • font-weight:字体粗细(normal=400, bold=700, bolder, lighter)

  • font-style:字体风格(normal, italic斜体, oblique倾斜)

  • font 综合设置字体样式:

    • 选择器 {font:font-style font-weight font-size/line-height font-family}

CSS外观属性

  • color:颜色
  • line-height:行间距
  • text-indent:首行缩进(em)
  • text-aligh:水平对齐方式(left, center, right)
  • text-decoration:文本修饰(none, underline下划线, overline文本上的一条线, line-through穿过文本的线)

标签显示模式

块级元素

  • 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素
  1. 总是从新行开始
  2. 高度,行高、外边距以及内边距都可以控制
  3. 宽度默认是容器的100%
  4. 可以容纳内联元素和其他块元素

行内元素

  • 常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签是最典型的行内元素
  1. 和相邻行内元素在一行上
  2. 高、宽无效,但水平方向的 padding 和 margin 可以设置,垂直反向的无效
  3. 默认宽度就是它本身内容的宽度
  4. 行内元素只能容纳文本或则其他行内元素。(a 特殊 a里面可以放块级元素)

行内块元素

  • 在行内元素中有几个特殊的标签——<img />、<input />、<td>
  1. 和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙
  2. 默认宽度就是它本身内容的宽度
  3. 高度,行高、外边距以及内边距都可以控制

显示模式的转换

  • 块级元素转换为行内元素:display: inline
  • 行内元素的转换为块级元素:display: block
  • 块级元素/行内元素转换为行内元素:display: inline-block

注意点

  1. div中不能放一个有宽度的块级标签
  2. 文本类标签(p,h1~h6,dt)中只能放文本,不能放块级标签
  3. 链接里面不能再放链接

行高:line-height

  1. div中不能放一个有宽度的块级标签
  2. 文本类标签(p,h1~h6,dt)中只能放文本,不能放块级标签
  3. 链接里面不能再放链接

CSS三大特性

  1. 层叠性:样式冲突时,遵循就近原则;样式不冲突时,则互不影响
  2. 继承性:子元素可以继承父元素的样式(text-,font-,line-这些元素开头的都可以继承,以及color属性)
  3. 优先级:通配符选择器 < 标签选择器 < 类选择器 < id选择器 <!important

背景图片

  1. background-color 背景颜色
  2. background-img:url(图片地址) 背景图片
  3. 背景图片是否平铺:background-repeat:repeat(默认平铺)/no-repeat(不平铺)/repeat-x(水平平铺)/repeat-y(垂直平铺)
  4. 背景图像方位 background-position:length(数值)/position(top、bottom、left、right、center)
    ①position后面可以跟方位名词,之间没有顺序
    ②position如果只写一个值,另一个默认居中
    ③position后面也可以跟值px,但是必须有顺序,x在前,y在后
  5. 背景图尺寸设置 background-size:width, height
  6. 背景附着 background-attachment:scroll(默认随对象内容滚动)/fixed(背景图像固定)
  7. 背景简写 background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
  8. 背景透明:background:rgba(0,0,0,0~1)

盒子模型

  • 盒子模型由元素内容、内边距、外边距、边框构成
  • 盒子边框
    1. border:border-width border-style border-color
    2. border-style:solid(单实线)/dashed(虚线)/dotted(点线)/double(双实线)
    3. border-top / border-left / border-right / border-bottom
    4. border-width:
      • 20px(上下左右均为20像素)
      • 20px 30px(上下为20像素,左右为30像素)
      • 20px 30px 40px(上为20像素,左右为30像素,下为40像素)
      • 20px 30px 40px 50px(上为20像素,右为30像素,下为40像素,左为50像素)
  • 表格细线边框:table{ border-collapse:collapse;}
  • 设置内边距(padding)后会撑开盒子
  • 外边距(margin)
    • 外边距水平居中(margin:0 auto)
    • 外边距塌陷
      • 相邻块元素垂直外边距合并,选取较大的外边距,避免即可
      • 嵌套块元素垂直外边距合并
        ①父级元素定义1px上边框或上内边距
        ②为父级元素添加 overflow:hidden
  • 盒子默认宽度
    • 当父盒子有宽度定值时,则父盒子padding会撑开父盒子
    • 如果盒子没有给定宽度,用的是默认父盒子宽度,则给予的padding值不会撑开盒子
  • 圆角边框
    • border-radius:50%(也可以取数值)
  • 盒子阴影
    • box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色(rgba)内(inset)/外阴影(默认)

浮动:float

  • float:left / right

  • 浮动特性:

    1. 浮动是指脱离本身的位置,把原先自己的位置让出来了
    2. 父级没有高度,则子级浮动不会再撑开父级盒子
    3. 浮动其实就是隐藏的模式转换
  • 清除浮动的方法

    1. 额外标签法 .clear(clear:both;)在浮动的标签后面加一个类名为clear的空标签
    2. 给浮动的元素父级添加 overflow:hidden
    3. 使用after伪元素清除浮动, 在浮动的元素的父级元素添加 class=“clearfix”
    .clearfix:after{
    	content="";
    	display:block;
    	height:0;
    	clear:both;
    	visibility:hidden;
    }
    .clearfix{*zoom:1;}
    
    1. 使用after和before双伪元素清除浮动, 在浮动的元素的父级元素添加class=“clearfix”
    .clearfix:after,clearfix:before{ content="";display:table;}
    .clearfix:after { clear:both}
    .clearfix{*zoom:1;}
    

定位 position

  • 静态定位 position: static
    • 静态位置就是各个元素在HTML文档流中默认的位置。
  • 相对定位 position: relative
    • 相对定位通过边偏移移动位置,但 原来所占据的位置继续占有
    • 每次移动位置,以自己的左上角基点移动
  • 绝对定位 position: absolute
    • 通过边偏移移动位置,但 完全不占据位置
    • 若写定绝对定位的子元素的所有父级元素都没有定位的时候,以浏览器为准进行偏移,若父元素有定位,则以父元素位置。
  • 绝对定位盒子居中
    1. left:50%,父盒子的一半
    2. 子盒子自己外边距负一半的值
  • 固定定位 position: fixed;
    • 固定定位元素与父级元素无关,只认浏览器
    • 固定定位完全脱标,不占有位置,不随着滚动条滚动
  • 叠放顺序 z-index
    • z-index的默认属性值是0,取值越大,定位元素在层叠元素中越居上。
    • 如果取值相同,则根据书写顺序,后来居上。
    • 后面数字一定不能加单位。
    • 只有相对定位,绝对定位,固定定位有此属性。

CSS高级技巧

  1. 元素的显示和隐藏
    1. display: none; 隐藏之后,不再保留位置
    2. display: block; 显示元素
    3. visibility: hidden; 隐藏之后保留原有位置
    4. visibility: visible; 元素可见
  2. 溢出显示与隐藏
    1. overflow: visible; 默认不剪切内容也不添加滚动条
    2. overflow: auto; 超出自动显示滚动条
    3. overflow: hidden; 超出部分隐藏
    4. overflow:scroll; 不管是否超出内容,总是显示滚动条
  3. 鼠标样式
    1. cursor: default 小白(一般状态)
    2. cursor: pointer 小手
    3. cursor: move 移动(十字)
    4. cursor: text 文本(I 字型)
  4. 取消input 等的轮廓线
    1. outline: none;
  5. 防止文本域拖拽
    1. resize: none;
  6. 垂直对齐
    1. vertical-align: baseline; 默认图片与文字基线对齐
    2. vertical-align: middle; 图片与文字垂直居中
    3. vertical-align: top; 图片与文字顶部对齐
  7. 去除图片底部空白缝隙
    1. 给img添加 vertical-align: top / middle
    2. 将img转为块级元素display: block;
  8. 溢出的文字隐藏(步骤)
    1. 强制在一行内显示所有文本直到文本结束或遭遇br标签对象来才换行
      • white-space:nowrap
    2. 溢出隐藏
      • overflow:hidden
    3. 文字溢出
      • text-overflow:clip(不显示省略标记直接裁剪)/ ellipsis(当对象内文本溢出是显示省略标记)
相关标签: 操作手册 html