HTML入门

网页的构成HTML：通常用来定义网页内容的含义和基本结构。
CSS：通常用来描述网页的表现与展示效果。
JavaScript：通常用来执行网页的功能与行为

HTML的组成

HTML页面由一系列的元素（elements）组成，而元素是使用标签创建的。

标签
一对标签（ tags）可以设置一段文字样式，添加一张图片或者添加超链接等等。

例如：<h1> 今天是个好日子</h1>

属性
HTML标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。我们只能在开始标签中，加入属性。通常以名称=值成对的形式出现，比如：name=‘value’。

例如：<h1 align=\"center\">今天是个好日子!!!</h1>

总结

HTML是一种标记语言，用来组织页面，使用元素和属性
元素的主要部分
1.元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
2.开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
3.结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
4.内容（Content）：元素的内容，本例中就是所输入的文本本身。
5.属性（Attribute）：标签的附加信息。

基本语法

注释

<!-- <p>我在注释内！</p> -->

块级元素
独占一行。块级元素（block）在页面中以块的形式展现。相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。比如
< p > < hr > < li > * < div > **等。
行内元素
行内显示。行内元素不会导致换行。通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。比如
< b >，< a >，< i >，< span > 等。
2.div 和 span
< div >是一个通用的内容容器，并没有任何特殊语义。它可以被用来对其它元素进行分组，一般用于样式化相关的需求。它是一个块级元素
< span >是短语内容的通用行内容器，并没有任何特殊语义。它可以被用来编组元素以达到某种样式。它是一个行内元素

注意：div和span在页面布局中有重要作用。

属性

标签属性，主要用于拓展标签。属性包含元素的额外信息，这些信息不会出现在实际的内容中。但是可以改变标签的一些行为或者提供数据，属性总是以name = value的格式展现。

属性名：同一个标签中，属性名不得重复。
大小写：属性和属性值对大小写不敏感。不过W3C标准中，推荐使用小写的属性/属性值。
引号：双引号是最常用的，不过使用单引号也没有问题。
常用属性：

特殊字符

中文空格 & emsp;

举例

1.div的class值

<style>div { border: 1px solid blue;}</style><div >left</div><div >center</div><div>right</div>

2.浮动

float：none；不浮动float：left；左浮动float：right；右浮动<!-- 清除浮动 -->clear：both；清除两侧浮动，此元素不再收浮动元素布局影响。

设置背景

背景色:background-color: black;背景图:background-image: url(\"../img/bg.png\");

<!--//  文档声明--><!DOCTYPE html><!--//  根标签--><!--这里可以换成 \"zh\" 代表中文格式--><html lang=\"en\"><!--在这个标签里可以设置--><head><meta charset=\"UTF-8\"><title>csdn</title><!-- 在head里头写css文件的路径--><link rel=\"stylesheet\" href=\"denglucss.css\"><!--或者在head里全套style标签 然后在style里写 --><style>/*       1. 标签名{*//*            属性名:属性值;*//*        }*//*       *//*       2. 标签名{*//*            属性名1:属性值1;*//*            属性名2:属性值2;*//*            属性名3:属性值3;*//*        */div {width: 60%;/*外间距*/margin: auto;}/*       3.   标签名{*//*            属性名:属性值1 属性值2 属性值3;*//*        } *//*        */div {border: 1px solid blue;}/* 这里与下面body标签中的  <div class=\"left\">left</div>  class属性相对应 */.left {/*在这里设置body中特有div标签的属性*/background: red;line-height: 30px;}</style></head><body><p>  文本标签 </p><h1> 标题标签 </h1> <!-- 分6级,h1~h6 --><ul> 无序列表</ul><ol> 有序列表</ol><li> 列表里的条目 </li><i>斜体标签</i>  &  <em>斜体标签</em><strong>加粗文本</strong>  &  <b>加粗文本</b><!--文字标签 size color--><font color=\"red\" size=\"50px\"></font><!--标签嵌套--><div><hr><em><font color=\"gray\" size=\"2\">哈哈哈</font></em></div><div class=\"left\">left</div><!--src后代表着 图片的路径   alt 代表如果访问不到图片显示的内容--><img src=\"img1/logo.png\" alt=\"你所选图片已不存在\"><!--超链接  href 后代表链接地址--><a href=\"#\">啊哈哈</a></body></html>

CSS

概述

CSS (层叠样式表——Cascading Style Sheets，缩写为 CSS）

简单的说，它是用于设置和布局网页的计算机语言。会告知浏览器如何渲染页面元素。例如，调整内容的字体，颜色，大小等样式，设置边框的样式，调整模块的间距等。

**选择器：**指定将要添加样式的 HTML元素的方式。可以使用标签名，class值，id值等多种方式。

声明：形式为属性(property):值(value)，用于设置特定元素的属性信息。

属性：指示文体特征，例如 font-size，width，background-color。

值：每个指定的属性都有一个值，该值指示您如何更改这些样式。

定义

定义 : 层叠（级联）样式表 cascading style sheet

组成：选择器（selector），样式 style

引入方式

内联样式 : <标签 style=“样式:值;”> 优先级最高
内部样式 :

<style> 选择器 { 样式:值; } </style>

外部样式 :

<link rel=\"stylesheet\" href=\"css文件的路径\">

选择器 (*)

#id值 – 某一个元素时（优先级最高）
.class值 – 某一类元素时
标签名 – 某一种标签，都会应用相同的样式（优先级最低）

1.元素选择器

页面元素<div><ul><li>List item 1</li><li>List item 2</li><li>List item 3</li></ul><ol><li>List item 1</li><li>List item 2</li><li>List item 3</li></ol></div>

选择器：选择所有li标签,背景变成蓝色li{background-color: aqua;}

2.类选择器

3.ID选择器

选择器

#two{background-color: aqua;}

组合选择器

页面元素：<div><ul class=\"l1\"><li>List item 1</li><li>List item 2</li><li>List item 3</li><ul class=\"l2\"><li id=\"four\">List item 1</li><li id=\"five\">List item 2</li><li id=\"six\">List item 3</li></ul></ul></div>1）后代选择器选择器：.l1 li{background-color: aqua;}2）子级选择器选择器：.l1 > li{background-color: aqua;}3）同级选择器选择器：.l1 ~ li{background-color: aqua;}4）相邻选择器选择器：.l1 + li{background-color: aqua;}

小总结:

凡是class属性就要 \” . 属性 + 标签 \”
使用ID 就得用\” # + id \”
标签就直接写

语义化标签

常见样式属性

Table标签

ps : tr > td

tr*3>th*5   + table键快捷方式创建3行5列的表格

HTML&CSS