zoukankan      html  css  js  c++  java

  • HTML＆CSS日常知识点总结

    HTML

    标签

    • meta

      • 标签永远位于文档的头部,即head元素内部
      • 可提供有关页面的元信息,如针对搜索引擎和更新频度的描述和关键词

    • charset

      • 这个属性规定在外部脚本文件中使用的字符编码
      • 如果外部文件中的字符编码与主文件中的编码方式不同,就要用到charset属性
      • 默认的字符编码是 ISO-8859-1

      • 标记了一个段落
      • p元素会自动在其前后创建一些空白.浏览器会自动添加这些空间

    • input

      • 用于搜集用户信息
      // 规定input元素的值
<input value="请输入姓名...">

    • a

      • 一般鼠标放到一个页面显示小手的时候,绝对有a标签
      • 用于定义超链接,用于从一张页面链接到另一张页面
      • 这个元素最重要的属性是href属性,它指示链接的目标
      • target = "_blank"
      // _blank 在新窗口中打开链接
<a href="http://baidu.com" target="_blank">百度一下,你就知道</a>
    <br>
// _parent 在父窗体中打开链接
<a href="http://baidu.com" target="_parent">百度一下,你就知道</a>
    <br>
// _self 在当前窗体中打开链接,此为默认值
<a href="http://baidu.com" target="_self">lalala</a>
    <br>
// _top 在当前窗体打开链接,并替换当前的整个窗体(框架页),一个对应的框架页的名称,在对应框架页中打开    
<a href="http://baidu.com" target="_top">百度一下,你就知道</a>

    • p

      • 标签定义段落
      • p元素会自动在其前后创建一些空白,浏览器会自动添加这些空间,您也可以在样式表中规定

    • section

      • 标签定义文档中的节(section,区段).比如章节,页眉,页脚,或文档中的其他部分
      • 属性
        • cite
          • 值
          • section的URL,假如section摘自web的话

    • src

      • src属性规定外部脚本文件的URL
        • URL
          • 外部脚本的URL.可能的值有
            • 绝对URL - 指向其他站点(如 src="www.example.com/example.js")
            • 相对URL - 指向站点内的文件(如src="/scripts/example.js")

    • src和href的区别

      • href是引用,相当于iOS中的import,不是必须的
      • src是引入,是必须的,没有这个资源,标签就用不起来
      • 给#表示跳转到当前界面

    • border: 5px dashed purple

      • 边框5px 边框为虚线,颜色紫色

    • border: 5px solid purple

      • 边框5px 边框为实线,颜色紫色

    • line-height

      • 这个属性设置行间的距离 (行高)
      • 不允许使用负值
      • 该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
      • line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
      • 原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。

    • text-align: right

      • 右对齐

    • class

      • 这个属性用来规定元素的类名
      • 大多数时候用于指向样式表中的类. 不过,也可以利用它通过JavaScript来改变带有指定class的HTML元素
      • class 属性不能在以下 HTML 元素中使用：base, head, html, meta, param, script, style 以及 title。
      • 可以给 HTML 元素赋予多个 class，例如：。这么做可以把若干个 CSS 类合并到一个 HTML 元素。
      • 类名不能以数字开头！只有 Internet Explorer 支持这种做法。

    • box-shadow: 0 0 2px orangered

    • float: right;

    • font-family

      • 规定元素的字体系列
      • font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。
      • 有两种类型的字体系列名称：
        • 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
          通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
        • 提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。
        • 注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。

    • ul

      • 大的,是列表的盒子
      • 无序列表,ul里面放li

    • ol

      • 大的,是列表的盒子
      • 有序列表,ol里面放li
      • 有个属性type,可以改变序列号的值

    • hr

      • 分割线

    • li

      • 标签定义列表项目
      • 标签可用在有序列表<ol>和无序列表<ul>中

    • display

      • 该属性规定元素应该生成的框的类型
      • 这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。

    • 响应式布局

      • 它是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.
      • 这个概念是为解决移动互联网浏览而诞生的

    • 相对路径

      • 资源在当前的项目中
      • ./ ../ ././

    • 绝对路径

      • 资源不在当前的项目中 网络上 本地
      • http:// https:// ftp:// file://

    • div

      • 优势: 可以自定义
      • div本身很纯洁

    HTML5新增标签

    • HTML5新增了27个标签元素,废弃了16个标签元素
    • 主要包括如下:
    • 结构性标签
      • article 文章主题内容(博客,帖子,..)
      • header 标记头部区域内容
      • footer 标记脚部区域内容
      • section 区域章节表述
      • nav 菜单导航,链接导航
    • 级块性标签(很少用)
    • 行内语义性标签
      • meter 特定范围内的数值,如工资,数量,百分比
      • time 时间值
      • progress 进度条,可用max,min,step进行控制,完成对进度的表示和监听
      • video 视频元素,用于视频播放,支持缓冲预载和多种视频媒体格式
      • audio 音频元素,用于音频播放,支持缓冲预载和多种音频媒体格式
    • 交互性标签

    CSS

    • Cascading Style Sheets, 层叠样式表

    • 美化网页

    • 编写格式

      • 键值对的
      // 左边属性,右边值
color: red

    • CSS的3种书写形式

      • 第一种: 行内样式(也叫内联样式)

        • 直接在标签的style属性中书写
        <body style="color: red;">

      • 第二种: 页内样式

        • 在本网页的style标签中书写
        <style>
	body {
		color: red
	}
<style>

      • 第三种: 外部样式

        • 在单独的CSS文件中书写,然后在网页中用link标签引用
        <link rel="stylesheet" href="index.css">

    • CSS的规律

      • 就近原则
        • 网页从上到下依次执行
      • 叠加原则

    • 网站

      • N个网页
      • 服务器
      • 数据库
      • ...

    • CSS的两大重点

      • 属性
        • 通过属性的复杂叠加才能做出漂亮的网页
      • 选择器
        • 通过选择器找到对应的标签设置样式

    • CSS中的选择器

      • 选择器的作用

        • 选择对应的标签,为之添加样式

      • 标签选择器 - 关键字标签

        • 根据标签名找到标签
        <div>div1</div>
<div>div2</div>

        // 注意:这里不一定是div,也可能是别的标签
div {
	color: red
}

      • 类选择器 - 关键字class, "."加上"类名"

        <p class="high">第一段文件</p>
<p>第二段文字</p>

<div class="high">div1</div>
<div>div2</div>

        .high {
	color: red
}

      • id选择器 - "#"加上"id名称"

        <p id="first">第一段文件</p>
<p>第二段文字</p>

        #first {
	color: red;
}

      • 并列选择器 - ","隔开

        <p class="high">第一段文件</p>
<p>第二段文字</p>

<div class="high">div1</div>
<div>div2</div>

        div , .high {
	color: red;
}

      • 复合选择器 - 精准定位: "标签名" + "." + "class名", 中间不是用的","

        <p class="high">第一段文件</p>
<p>第二段文字</p>

<div class="high">div1</div>
<div>div2</div>

        div.high {
	color: red;
}

      • 后代选择器

        <div>
	<p>div里面的p</p>
	<span>
		<p>div里面的span里面的p</p>
	</span>
</div>

<p>外面的p</p>

        div p {
	color: red;
}

      • 相邻兄弟选择器

        <div>
	<p>div里面的p</p>
	<span>
		<p>div里面的span里面的p</p>
	</span>
<div>

<p>与div相邻的p</p>
<p>与p相邻的p</p>

        div + p {
	color: red;
}

      • 属性选择器

        // 第一种写法
<div name="jack">1111</div>
<div name="rose">2222</div> 
<div>3333</div>

        // 第一种写法
div[name] {
	color: red;
}

        <!--第二种写法-->
<div name="jack">1111</div>
<div name="rose" age="20">2222</div>
<div age="10">3333</div>

        <!--第二种写法-->
div[name][age] {
	color: red;
}

      • 伪类 - 触发某些操作的时候

        • :active
          • 向被激活的元素添加样式
        • :focus(掌握)
          • 向拥有键盘输入焦点的元素添加样式
          • 一般用在input上
        • :hover(掌握)
          • 当鼠标悬浮在元素上方时,向元素添加样式
        • :link
          • 向未被访问的链接添加样式
        • :visited
          • 向已被访问的链接添加样式
        • :first-child
          • 向元素的第一个子元素添加样式
        • :lang
          • 向带有指定lang属性的元素添加样式

      • 伪元素

        • :first-letter
          • 向文本的第一个字母添加特殊样式
        • :first-line
          • 向文本的首行添加特殊样式
        • :before
          • 在元素之前添加内容
        • :after
          • 在元素之后添加内容

    • 选择器的优先级别

      • 通配符

        <!--通配符:
1.优先级别非常低
2.性能比较差-->
<style>
	* {

	}
<style>

      • css样式遵循的规律

        1.相同类型的选择器遵循: a.就近原则  b.叠加原则
2.不同类型的选择器遵循:
a.选择器的针对性越强,它的优先级就越高
b.选择器的权值加到一起,大的优先;如果权值相同,后定义的优先
c.important(1000) > 内联 > id选择器(100) > 类选择器(10) | 伪类(10) | 属性选择(10) | 伪元素(10)   > 标签选择器(1) > 通配符(0) > 继承

    • 标签的类型

      • 块级标签

        • 独占一行
        • 能随时设置宽度和高度
        • 如: div, p, h1, h2, ul, li

      • 行内标签(内联标签)

        • 多个行内标签能同时显示在一行
        • 宽度和高度取决于内容的尺寸
        • 如: span, a, label

      • 行内-块级标签(内联-块级标签)

        • 多个行内-块级标签可以显示在同一行
        • 能随时设置宽度和高度
        • 如: input, button

    • 修改标签的显示类型

      • CSS中有个display属性,能修改标签的显示类型
        • none: 隐藏标签
        • block: 让标签变为块级标签
        • inline: 让标签变为行内标签
        • inline-block: 让标签变为行内-块级标签(内联-块级标签)

    • CSS属性

      • 可继承属性

        • 父标签的属性值会传递给子标签

        • 一般是文字控制属性

        • 如:

          /// 1.这两个-所有标签都可继承
// 属性规定元素是否可见
visibility: hidden

// 规定要显示的光标的类型(形状)
cursor: move

/// 2.内联标签可继承(w3school查询,太多了)
line-height: 行高,用来做垂直居中
text-decoration: none  去掉下划线

/// 3.块级标签可继承
text-indent: 首行缩进
text-align: 水平居中

/// 4.列表标签可继承
list-style: 声明列表的属性,就是列表前面那个小圆点

      • 不可继承属性

        • 父标签的属性值不能传递给子标签
        • 一般是区块控制属性
        • 如
        1.display:
2.background: 可设置背景图片和背景颜色
3.overflow: 处理超出的内容
4.盒子模型

    • 盒子模型

      • content(内容)

        • 盒子里装的东西
        • 网页中通常指文字和图片
        • 属性如下:
        1.height: 设置元素高度
2.max-height: 设置元素的最大高度
3.max- 设置元素的最大宽度
4.min-height: 设置元素的最小高度
5.min- 设置元素的最小宽度
6. 设置元素的宽度

      • padding(填充,内边距)

        • 属性
        1.padding: 在一个声明中设置所有内边距属性
2.padding-bottom: 设置元素的下内边距
3.padding-left: 左内边距
4.padding-right: 右内边距
5.padding-top: 上内边距

        // 上, 右, 下, 左
padding: 10px 5px 15px 20px;

// 上, 右＆左, 下
padding: 10px 5px 15px;

// 上＆下, 右＆左
padding: 10px 5px

// 所有的4个内边距都是10px
padding: 10px

      • border(边框)

        p {
	// 实线边框5px
	borde: 5px solid red;
	
}

// 设置边框圆角
border-radius

      • margin(外边距)

    • CSS3新增特性

      • RGBA透明度

        • RGB取值: 从0255(OC中是01)

      • 块阴影和圆角阴影

        1.box-shadow:
h-shadow: [必须].水平阴影的位置,允许负值
v-shadow: [必须].垂直阴影的位置,允许负值
blur: [可选]. 模糊距离
spread: [可选].阴影的尺寸
color: [可选].阴影的颜色.请参阅CSS颜色值
inset: [可选].将外部阴影(outset)改为内部阴影
2.text-shadow

      • 圆角

        1.border-radius

    • CSS布局

      • 默认,所有网页布局都是在 标准流中
        • 标准流: 从上到下,从左到右
      • 脱离标准流

        • 任何标签,一旦脱离标准流,就会被强制转换为行内块级标签

        • float属性

          常用取值:
1.left: 浮动到父标签的最左边
2.right: 浮动到父标签的最右边

        • position属性

          // 子绝父相
常用取值:
1.absolute: 绝对定位, 相对于static定位以外的第一个父元素进行定位
2.fixed: 绝对定位, 相对于浏览器窗口进行定位
3.relative: 相对定位, 相对于其正常位置进行定位
4.static: 默认值. 没有定位,元素出现在正常的流中
5.inherit: 规定应该从父元素继承position属性的值

        • 内容居中

          • 所有标签水平居中

            1.行内标签 和 行内-块级标签: 在父标签中设置
text-align: center;
2.块级标签: 在自身设置
margin: 0 auto;

          • 所有标签垂直居中

            1.行内标签 和 行内-块级标签: 在父标签中设置
line-height
2.块级标签:
position: absolute;
left: 50%
top: 50%;
transform: translate(-50%, -50%);

        • box-sizing

          • 以特定的方式定义匹配某个区域的特定元素,默认值content-box
          • 将box-sizing设置为border-box,可以把边框和内边距放入框中
  • 相关阅读:
    notepad++一次去掉所有空行，然后加上2个空行
    mysql设置timpstamp的默认值为 '0000-00-00 00:00:00' 时报错
    Xshell 5的快捷键
    word2010文档如何隐藏右侧灰色空白不可编辑区域
    记一次惊险的系统和分区修复
    nohup command 2>&1 & 的含义
    alexkn android第一行代码－7.广播
    android第一行代码－6.自定义控件的实现
    android第一行代码－5.监听器的两种用法和context
    android第一行代码－3.activity之间的调用跟数据传递
  • 原文地址：https://www.cnblogs.com/mtystar/p/6128081.html
Copyright © 2011-2022 走看看