HTML与CSS基础

一、HTML

1.概念

最基础的网页开发语言

全称： Hyper Text Markup Language 超文本标记语言

超文本：
是用超链接的方式，将各种不同空间的文字信息组织在一起的网状文本
标记语言：
由标签构成的语言，标记语言并非编程语言

2.快速入门

语法

1. html文档后缀名为".html" 或者 “.htm”
2. 标签分为：围堵标签（有开始标签和结束标签）、自闭合标签（开始标签和结束标签在一起，如
   )
3. 标签可以嵌套
4. 在开始标签中定义可以定义属性。属性由键值对构成，值需要用引号（单双都可）引起来
5. html标签不区分大小写，然而推荐小写

3.标签学习

（1）文件标签：构成html最基本的标签

• html：html文档的根标签
• head：头标签，用于指定html文档的一些属性，引入外部的资源
• title：标题标签
• body：体标签
• < !DOCTYPE html>：定义文档标签

（2）文本标签：和文本有关的标签

• 注释： <!-- 注释内容 -->
• <h1> 到<h6>：标题标签，字体大小递减
• <p>：段落标签
• <br>：换行标签
• <hr>：展示一条水平线
• <b>：字体加粗
• <i>：字体斜体
• <font>：字体标签（已淘汰）
• <center>：文本居中

（3）图片标签

示例：

<img src="images/pic1.jpg" align="right" alt="map" width="300"/>

（4）列表标签

有序列表：<ol> 加 <li>

<ol>
	<li>内容1</li>
	<li>内容2</li>
</ol>

无序列表：<ul>加<li>

（5）链接标签

<a> </a>：定义一个超链接
常用属性：

• href：指定访问资源的URL（统一资源定位符）
• target：指定打开资源的方式：
  • _self：默认值，在当前页面打开
  • _blank：在空白页面打开

（6）div和span

• div：每一个div占满一整行，属于块级标签
• span：文本信息在一行显示，属于行级标签，也叫内联标签

（7）语义化标签

html5中为了提高程序的可读性，提供了一些标签

• <header>：一般用在网页头部
• <footer>：一般用在网页尾部

（8）表格标签

• table：定义表格
  • width：宽度
  • border：边框
  • cellpadding：定义内容和单元格之间的距离
  • cellspacing：定义单元格之间的距离，如果指定为0，则单元格的线会合为一条
  • bgcolor：背景色
  • align：对齐方式
• tr：定义行
• td：定义单元格
• th：定义表头单元格
• caption：表格标题
• thead：定义表格的头部分
• tbody：定义表格的体部分
• tfoot：定义表格的脚部分

（9）表单标签：

• 表单
  • 概念：用于采集用户输入的数据，用于和服务器进行交互
  • form：用于定义表单，可以定义一个范围，范围代表采集用户数据的范围。
    • 常用属性：
      • action：指定提交数据的URL
      • method：提交数据的方式
  • 表单提交的数据应指定name属性
• 表单项标签
  • input：可以通过type属性值，改变元素展示的样式
    • type属性：
      • text：文本输入框，默认值
        • placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
      • password：密码输入框
      • radio：单选框
        • 注意
          • 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一致
          • 一般会给每一个单选框提供value属性，指定其被选中后提交的值
          • checked属性，可以指定默认值
      • checkbox：复选框
      • file：文件选择框
      • hidden：隐藏域，用于提交一些信息
      • 按钮：
        • submit：提交按钮，可以提交表单
        • button：普通按钮
        • image：图片提交按钮
  • label：指定输入项的文字描述信息
  • select：下拉列表
  • textarea：文本域

二、CSS

1.概念

Cascading style sheets：层叠样式表
层叠：多个样式可以作用在同一个html元素上，同时生效

2.使用CSS的好处

• 功能强大
• 将内容展示和样式控制分离，降低耦合度
• 让分工协作变得更加容易
• 提高开发效率

3.CSS的使用，与html结合方式

内联样式

在标签内使用style属性指定css代码

<div style="color:red;">Hello CSS</div>

内部样式

在head标签内，定义style标签，style标签的标签体内容就是css代码

...
<style>
	div {
		color:blue;
	}
</style>

...
<div>Hello CSS2</div>

外部样式

定义css资源文件，在head标签内，定义link标签，引入外部的资源文件

假设：
有一first.css文件，存放在css文件夹下

div {
	color:green;
}

可以在html中引入first.css，使其生效

...
<link rel="stylesheet" href="css/first.css"></link>
...
<div>Hello CSS3</div>
...

4.CSS语法

格式：

选择器 {
	属性名1：属性值1;
	...
}

选择器：筛选具有相似特征的元素
注意：每一个属性需要使用";"分隔，最后一个可以不加

5.选择器

筛选具有相似特征的元素

分类：

• 基础选择器（优先级：id选择器 > 元素选择器 > 类选择器）
  • id选择器： #id { }
  • 元素选择器()：标签名称 { }
  • 类选择器： .class { }
• 扩展选择器
  • 选择所有元素： * { }
  • 并集选择器： 选择器1, 选择器2… { }
  • 子选择器： 选择器1 选择器2 { } --> 选择器1下的选择器2
  • 父选择器： 选择器1 > 选择器2 { } --> 选择器2的父选择器1
  • 属性选择器： 元素名称[属性名=“属性值”] { } --> 选择属性名称，属性名=属性值的元素
  • 伪类选择器： 元素: 状态 { } --> 选择一些元素具有的状态