HTML

标签

  • meta

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

  • charset

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

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

  • input

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

  • a

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

  • 美化网页

  • 编写格式

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

  • CSS的3种书写形式

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

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

    • 第二种: 页内样式

      • 在本网页的style标签中书写
      1. <style>
      2. 	body {
      3. 		color: red
      4. 	}
      5. <style>

    • 第三种: 外部样式

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

  • CSS的规律

    • 就近原则

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

  • 网站

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

  • CSS的两大重点

    • 属性

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

  • CSS中的选择器

    • 选择器的作用

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

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

      • 根据标签名找到标签
      1. <div>div1</div>
      2. <div>div2</div>
      1. // 注意:这里不一定是div,也可能是别的标签
      2. div {
      3. 	color: red
      4. }

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

      1. <p class="high">第一段文件</p>
      2. <p>第二段文字</p>
      4. <div class="high">div1</div>
      5. <div>div2</div>
      1. .high {
      2. 	color: red
      3. }

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

      1. <p id="first">第一段文件</p>
      2. <p>第二段文字</p>
      1. #first {
      2. 	color: red;
      3. }

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

      1. <p class="high">第一段文件</p>
      2. <p>第二段文字</p>
      4. <div class="high">div1</div>
      5. <div>div2</div>
      1. div , .high {
      2. 	color: red;
      3. }

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

      1. <p class="high">第一段文件</p>
      2. <p>第二段文字</p>
      4. <div class="high">div1</div>
      5. <div>div2</div>
      1. div.high {
      2. 	color: red;
      3. }

    • 后代选择器

      1. <div>
      2. 	<p>div里面的p</p>
      3. 	<span>
      4. 		<p>div里面的span里面的p</p>
      5. 	</span>
      6. </div>
      8. <p>外面的p</p>
      1. div p {
      2. 	color: red;
      3. }

    • 相邻兄弟选择器

      1. <div>
      2. 	<p>div里面的p</p>
      3. 	<span>
      4. 		<p>div里面的span里面的p</p>
      5. 	</span>
      6. <div>
      8. <p>与div相邻的p</p>
      9. <p>与p相邻的p</p>
      1. div + p {
      2. 	color: red;
      3. }

    • 属性选择器

      1. // 第一种写法
      2. <div name="jack">1111</div>
      3. <div name="rose">2222</div>
      4. <div>3333</div>
      1. // 第一种写法
      2. div[name] {
      3. 	color: red;
      4. }
      1. <!--第二种写法-->
      2. <div name="jack">1111</div>
      3. <div name="rose" age="20">2222</div>
      4. <div age="10">3333</div>
      1. <!--第二种写法-->
      2. div[name][age] {
      3. 	color: red;
      4. }

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

      • :active

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

    • 伪元素

      • :first-letter

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

  • 选择器的优先级别

    • 通配符

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

    • css样式遵循的规律

      1. 1.相同类型的选择器遵循: a.就近原则  b.叠加原则
      2. 2.不同类型的选择器遵循:
      3. a.选择器的针对性越强,它的优先级就越高
      4. b.选择器的权值加到一起,大的优先;如果权值相同,后定义的优先
      5. 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. /// 1.这两个-所有标签都可继承
        2. // 属性规定元素是否可见
        3. visibility: hidden
        5. // 规定要显示的光标的类型(形状)
        6. cursor: move
        8. /// 2.内联标签可继承(w3school查询,太多了)
        9. line-height: 行高,用来做垂直居中
        10. text-decoration: none  去掉下划线
        12. /// 3.块级标签可继承
        13. text-indent: 首行缩进
        14. text-align: 水平居中
        16. /// 4.列表标签可继承
        17. list-style: 声明列表的属性,就是列表前面那个小圆点

    • 不可继承属性

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

  • 盒子模型

    • content(内容)

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

    • padding(填充,内边距)

      • 属性
      1. 1.padding: 在一个声明中设置所有内边距属性
      2. 2.padding-bottom: 设置元素的下内边距
      3. 3.padding-left: 左内边距
      4. 4.padding-right: 右内边距
      5. 5.padding-top: 上内边距
      1. // 上, 右, 下, 左
      2. padding: 10px 5px 15px 20px;
      4. // 上, 右＆左, 下
      5. padding: 10px 5px 15px;
      7. // 上＆下, 右＆左
      8. padding: 10px 5px
      10. // 所有的4个内边距都是10px
      11. padding: 10px

    • border(边框)

      1. p {
      2. 	// 实线边框5px
      3. 	borde: 5px solid red;
      5. }
      7. // 设置边框圆角
      8. border-radius

    • margin(外边距)

  • CSS3新增特性

    • RGBA透明度

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

    • 块阴影和圆角阴影

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

    • 圆角

      1. 1.border-radius

  • CSS布局

    • 默认,所有网页布局都是在 标准流中

      • 标准流: 从上到下,从左到右
    • 脱离标准流

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

      • float属性

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

      • position属性

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

      • 内容居中

        • 所有标签水平居中

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

        • 所有标签垂直居中

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

      • box-sizing

        • 以特定的方式定义匹配某个区域的特定元素,默认值content-box
        • 将box-sizing设置为border-box,可以把边框和内边距放入框中

HTML＆CSS日常知识点总结的更多相关文章

  1. HTML和CSS的知识点

    HTML的知识点 HTML的结构: <!DOCTYPE html>: 文档类型性为HTML5文件 文档声明:在HTML的文档中必不可少,且必须在文档的第一行 文档声明的编码格式<!- ...

  2. Web前端-CSS必备知识点

    Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...

  3. CSS 基础知识点 样式 选择器 伪类

    CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...

  4. css入门知识点整理

    css入门知识点整理 不要嘲笑我这个蒟蒻..例子来源:w3school css其实就分为两个东西,一个是选择器,另外一个是声明.声明定义了某个对象的属性的值,这都是html的内容.重点要关注的是选择器 ...

  5. HTML&&CSS基础知识点整理

    HTML&&CSS基础知识点整理 一.WEB标准:一系列标准的集合 1. 结构(Structure):html 语言:XHTML[可扩展超文本标识语言]和XML[可扩展标记语言] 2. ...

  6. CSS基本知识点——带你走进CSS的新世界

    CSS基本知识点 我们在学习HTML之后,前端三件套第二件便是CSS,但CSS内容较多,我们分几部分讲解: (如果没有学习HTML,请参考之前文章:HTML知识点概括--一篇文章带你完全掌握HTML& ...

  7. 前端知识点-CSS相关知识点

    1.解释一下CSS的盒子模型? 回答一: a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度 b.网页设计中常听的属性名:内容(content).填充(padding).边框(b ...

  8. [总结]WEB前端开发常用的CSS/CSS3知识点

    css3新单位vw.vh.vmin.vmax vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度 ...

  9. css相关知识点

    一.CSS的引入方式 1.1 css的介绍 HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...

随机推荐

  1. 懒加载session 无法打开 no session or session was closed 解决办法（完美解决）

           首先说明一下,hibernate的延迟加载特性(lazy).所谓的延迟加载就是当真正需要查询数据时才执行数据加载操作.因为hibernate当中支持实体对象,外键会与实体对象关联起来.如 ...

  2. 深入理解C#

    简单认识.NET框架    (1)首先我们得知道 .NET框架具有两个主要组件:公共语言进行时CLR(Common Language Runtime)和框架类库FCL(Framework Class ...

  3. 重撸JS_1

    1.声明 用 var 或 let 声明的未赋初值的变量,值会被设定为undefined(译注:即未定义值,本身也是一个值) 试图访问一个未初始化的变量会导致一个 ReferenceError 异常被抛 ...

  4. Android Ormlite 学习笔记2 -- 主外键关系

    以上一篇为例子,进行主外键的查询 定义Users.java 和 Role.java Users -- Role 关系为:1对1 即父表关系 Role -- Users 关系为:1对多 即子表关系 下面 ...

  5. Hawk 5.1 数据导入和导出

    除了一般的数据库导入导出,Hawk还支持从文件导入和导出,支持的文件类型包括: Excel CSV(逗号分割文本文件) TXT (制表符分割文本文件) Json xml Excel 目前来看,Exce ...

  6. 简单酷炫的canvas动画

    作为一个新人怀着激动而紧张的心情写了第一篇帖子还请大家多多支持,小弟在次拜谢. 驯鹿拉圣诞老人动画效果图如下 html如下: <div style="width:400px;heigh ...

  7. 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践

    提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...

  8. Linux实战教学笔记01:计算机硬件组成与基本原理

    标签(空格分隔): Linux实战教学笔记 第1章 如何学习Linux 要想学好任何一门学问,不仅要眼睛看,耳朵听,还要动手记,勤思考,多交流甚至尝试着去教会别人. 第2章 服务器 2.1 运维的基本 ...

  9. CSS笔记

    初级篇===========================选择器============================元素选择器css:h1{color: red}html:<h1> ...

  10. Xamarin.Android之SQLiteOpenHelper

    一.前言 在手机中进行网络连接不仅是耗时也是耗电的,而耗电却是致命的.所以我们就需要数据库帮助我们存储离线数据,以便在用户未使用网络的情况下也可以能够使用应用的部分功能,而在需要网络连接的功能上采用提 ...