HTML CSS

HTML&&CSS学习笔记(持续更新中)

Posted by ShawCai on Monday, August 5, 2019

TOC

前端简介

  1. 结构：HTML用于描述页面的结构

  2. 表现：CSS用于控制页面元素的样式

  3. 行为：JaveScript用于响应用户操作

HTML

基础

注释

<!--
	这是一段注释
    功能：
	作者：
	日期：
-->

文档声明

<!--
	h5的文档声明，声明当前网页是按照HTML5标准版写的
-->
<!doctype html>

乱码问题

  • 中文系统默认编码方式为GB2312

  • UTF-8编码方式可以适用于各种语言，前端常用编码方式

  • 记事本的编码方式 ： ANSI–参照系统的自动编码

  • <!doctype html>
<html>
  <head>
      <!--
        需要告诉浏览器，网页所采用的编码字符集
    -->
      <meta charset="UTF-8"/>
  </head>
</html>

  • meta标签用来设置网页的 一些元数据 ，比如网页的字符集，关键字、简介

常用标签

  1. 标题标签
    • 在HTML 中， 一共有六级标题标签：h1~h6
    • 显示效果上h1最大，h6最小
    • 使用HTML标签时，关心的是标签的语义
    • 6级标签中，h1的最重要，表示一个网页中的主要内容
    • 对于搜索引擎来说，h1的重要性仅次于title,搜索引擎检索完title，会立即查看h1中的内容，页面只能写一个h1
  2. 段落标签

  3. 换行标签
  4. 水平线标签

实体

  1. 在HTML中，一些如< >这种特殊字符是不能直接使用的，需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称为实体（转义字符串）

  2. 实体的语法：
    &实体的名称；

  3. 常用实体：

    • 小于号 <
    • 大于号 >
    • 空格  

相对路径

<!--
    可以用 ../来返回一级目录，返回积极目录就写几个../
-->
<img src="../../img1.jpg"/>

meta标签

  • 使用meta标签设置网页的关键字

    <meta name="keywords" content="HTML5,JS,"/>

  • 可以用来指定网页的描述搜索引擎在检索页面时，会同时检索页面中的关键词和描述

    <meta name="description" content="HTML5教程"/>

  • 使用meta可以用来做请求的重定向

    <meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>

  • X-UA-Compatible是IE8的一个专有属性，它告诉IE8采用何种IE版本去渲染网页

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

超链接a标签

a元素可以包含任意元素，除了自身

  1. target属性：a 标签的 target 属性规定在何处打开链接文档。

    • 四个特殊目标(后三个不常用)：

      1. _blank 总是在一个新打开、未命名的窗口中载入目标文档。
      2. _self 默认值,载入并显示在相同的框架或者窗口中
      3. _present 载入父窗口或者包含来超链接引用的框架的框架集
      4. _top 文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口

    • 指定窗口名

      <html>
<body>
     
<h3>Table of Contents</h3>
<ul>
<li><a href="/example/html/pref.html" target="view_window">Preface</a></li>
<li><a href="/example/html/chap1.html" target="view_window">Chapter 1</a></li>
<li><a href="/example/html/chap2.html" target="view_window">Chapter 2</a></li>
<li><a href="/example/html/chap3.html" target="view_window">Chapter 3</a></li>
</ul>
     
</body>
</html>

  2. href属性：用于指定超链接目标的 URL

    • 绝对URL： 指向另一个站点

      <a href="http://www.example.com/index.htm"/>

    • 相对URL:指向站点内的某个文件

      <a href="index.htm"/>

    • 锚URL - 指向页面中的锚（href=“#id属性值”）

块元素和内联元素

块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式

div标签
  • div元素是一个块元素，无论内容多少都独占一行

  • 自身没有任何语义

  • 主要用来对页面进行布局

span标签
  • span是一个内联元素（行内元素），只占用自身大小
  • 自身没有任何语义，span标签专门用来选中文字

CSS

基础

使用方式

  1. 内联样式（不推荐）

  2. 内联样式表

    <head>
<style type="text/css">
    p{
        color:red;
        font-size:40px;
    }
</style>
</head>

  3. 外部样式表

    /*
 这是CSS的注释方式
*/
p{
   color:red;
   font-size:40px;
}

    <!--
将CSS样式统一编写到外部的样式表中，然后通过link标签引入
-->
<head>
   <link rel="stylesheet" type="text/css" href="style.css"/>
</head>

选择器

标签选择器

  1. 作用：通过元素标签名选中一组元素

  2. 语法：标签名{}

    <head>
<style type="text/css">
    p{
        color:red;
        font-size:40px;
    }
</style>
</head>
id选择器

  1. 作用：通过元素id属性值选中唯一的一个元素

  2. 语法：#id{}

类选择器

  1. 作用：通过元素的class属性值选中一组元素

  2. 语法：.class{}

选择器分组(并集选择器)

  1. 作用：通过选择器分组可以同时选中多个选择器对应的元素

  2. 语法：选择器1，选择器2，…，选择器N{}

复合选择器(交集选择器)

  1. 作用：选中同时满足多个选择器的元素

  2. 语法：选择器1选择器2选择器N{}

后代元素选择器

  1. 作用：选中指定元素的后代元素

  2. 语法：祖先元素 后代元素{}

  3. 注意：注意区分交集选择器和后代选择器

子元素选择器

  1. 作用：选中指定父元素的指定子元素

  2. 语法：

    • 父元素 > 子元素{}
    • 父元素：firstchild{}
    • 父元素：lastchild{}
伪类选择器

  1. 作用：用来表示元素的一种的特殊的状态

  2. 用途：访问过的超链接，普通的超链接，获取焦点的文本框等

  3. 使用：

    • 对于a超链接标签

      /*表示普通的链接*/
a:link{}
/*
-表示访问过的链接
-由于隐私问题，visited伪类选择器只能设置字体颜色
*/
a:visited{}
/*表示鼠标移入的状态*/
a:hover{}
/*表示鼠标点击的状态*/
a:active{}

    • 对于普通标签(仅支持hover和active伪类)

      p:hover{}
p:active{}

    • 其他伪类

      /*文本框获取焦点后样式*/
input:focus{}
/*选中文本内容样式*/
p::selection{}
属性选择器
  1. 作用：可以根据元素中的属性或属性值来选取指定元素
  2. 语法：
    • [属性名] 选取具有指定属性的元素
    • [属性名=属性值] 选取属性等于指定属性值的元素
    • [属性名^=”属性值“] 选取属性值以指定内容开头的元素
    • [属性名$=“属性值”] 选取属性值以指定内容结尾的元素
伪元素

  1. 段落首字母

    p:first-letter{}

  2. 段落首行

    p:first-line{}

「真诚赞赏，手留余香」

SleepyXU.C Blog

真诚赞赏，手留余香

使用微信扫描二维码完成支付

FEATURED TAGS
blog css git html javascript ss/ssr