HTML&CSS知识点

其他 2020-05-21 11:55:37 阅读次数: 0

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（当对象内文本溢出是显示省略标记）

猜你喜欢

转载自blog.csdn.net/mryjf/article/details/106153884
今日推荐
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
周排行
Family Tree 题解
BZOJ 1093 最大半连通子图 SCC + DP
幂等处理
Spring----学习（2）----XML 配置Bean 自动装配
SQL Server 远程更新目标表数据
HIbernate3.6 环境搭建
特殊符号正则表达式
【Linux】第一章 进程的理解
843. n-皇后问题（dfs+输出各种情况）
空间数据库2
每日归档
更多
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022