HTML、CSS、JS浅浅浅浅浅解

初识Web

web标准

• web标准也被称为网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Cnsortium，万维网联盟）负责制定。
• 三个组成部分
  • HTML:负责网页的结构（页面元素和内容）。
  • CSS：负责网页的表现（页面元素的外观，位置等页面样式，如：颜色、大小等）。
  • JavaScript：负责网页的行为（交互效果）。

HTML

HTML：超文本标记语言

• 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片，音频，视频等内容。
• 标记语言：由标签构成的语言。
  • HTML标签都是预定义好的。例如：使用展示超链接，使用展示图片，展示时评。
  • HYML代码直接在浏览器中运行，HTMl标签由浏览器解析。

快速入门：

1. 新建文本文件，后缀名改为.html。
2. 编写HTML结构标签
3. 在中填写内容。

CSS

CSS:层叠样式表，用于控制页面的样式（表现）

• CSS引入方式：

  • 行内样式：

    <h1 style ="…">复制

  • 内嵌样式

    <style>_</style>复制

  • 外联样式

    xxx.css	<link href="…">复制

颜色表示形式：

• CSS选择器：用来选取需要设置样式的元素（标签）

  • 元素选择器

    元素名称{
    	color:red;
    }
     
    h1{
    	color:red;
    }
    <h1> Hello CSS</h1>复制

  • id选择器

    #id属性值{
    	color:red;
    }
     
    #hid{
    	color:red;
    }
    <h1 id="hid"> CSS id Selectop</h1>复制

  • 类选择器

    .class属性值{
    	color:red;
    }
     
    .cls{
    	color:red;
    }
    <h1 class="cls">CSS class复制

  • 优先级：id选择器 > 类选择器 > 元素选择器

超链接

标签<a>
属性：
	href：指定资源访问的url
	target：指定在何处打开资源
	_self：默认值，在当前页面打开
	_blank：在空白页面打开复制

CSS属性

text-decoration:对丁添加到文本的修饰，none表示定义标准的文本
color：定义文本的颜色复制

• 音频视频标签

  <audio> <video>复制

• 换行、段落标签

  换行：<br>;段落：<p>复制

• 文本加粗标签

  <b><strong>复制

• CSS样式

  line-height:设置行高
  text-indent:定义第一个行内容的缩进
  text-align:规定元素中的文本的对齐方式复制

• 注意：

  在html中无论输入多少个空格，只会显示一个。可以使用空格占位符： 

页面布局

• 布局标签：实际开发网页中，会大量频繁的使用div和span这两个没有语义的布局标签
• 标签：