HTML与CSS

HTML概述

  HTML指的是超文本标记语言

      超文本：是指页面内可以包含图片、链接、声音、视频等内容

      标记：标签（通过标记符号来告诉浏览器网页内容该如何显示）

用HTML语言把我们需要显示的内容显示在浏览器上，但是HTML语言本身并不显示

 HTML基本语法

Head标签包含了所有的头部标签

头部区域的标签为

<title>, <style>, <meta>, <link>, <script>, <base>.

<title>标签可定义网页的标题

<meta> 标签可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新

频度的描述和关键词。

<meta> 标签位于文档的头部

<meta charset="utf-8" />

<meta name=“keywords” content=“手机,家电">

标题处添加图标

<link rel="icon" href="ico地址">

HTML注释：

<!--注释内容-->注释后的内容不会显示在网页上

基本常用标签

标题标签<h1></h1>…..<h6></h6>

段落标签<p></p>

换行标签<br/>

列表  

        无序列表  <ul><li></li></ul>

         有序列表 <ol><li></li></ol>

超链接 <a></a>

图像标签<img/>

<a>超链接

 

 a标签：HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是

通过连接来访问其他网页资源。

表格

表格的基本构成标签

   table 标签：表格标签

   tr 标签：表格中的行

   th 标签 : 表格的表头

   td 标签：表格单元格

 

表格的基本结构

<table>定义表格

<tr>定义表行

<th>定义表头</th>

</tr>

<tr>

<td>定义单元格</td>

</tr>

</table>

表单

form标签：表单

 网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终 提交表单,把客户端数据提交至服务器

 CSS

CSS概述

CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如，

CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面

CSS与HTML的关系

HTML是网页内容

CSS定义页面的样式

 

选择器

要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这就需要用到CSS选

择器

常用的选择器：

标签选择器：通过标签选择器可以选择页面中的所有指定标签

语法：标签名 {}

类选择器：通过标签的 class 属性值选中一组标签

语法：

.class 属性值 {}

id 选择器：通过标签的 id 属性值选中唯一的一个标签

语法：

#id 属性值 {}

选择器组合：通过选择器分组可以同时选中多个选择器对应的标签

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

通配选择器 : 可以用来选中页面中的所有的标签

语法： *{}

文本

● color ：字体颜色

● font-size ：字体大小

● font-family ：字体

● text-align ：文本对齐

● text-decoration:line-through ：定义穿过文本下的一条线

● text-decoration:underline ：定义文本下的一条线

● text-decoration:none ：定义标准的文本

● font-style: italic; 斜体文本

● font-weight: 字体粗细

● line-height: 设置行高

● letter-spacing 可以指定字符间距

● text-indent 用来设置首行缩进

背景

● background-color 背景颜色

● background-image 背景图片

● background-repeat 背景重复

● background-size 背景尺寸

● background- position 背景位置

CSS伪类

● CSS 伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状

态的标签设置样式时，就可以使用伪类 。

● 伪类的语法 ：

:hover 伪类表示鼠标移入的状态

:active 表示的是被点击的状态

:focus 向拥有键盘输入焦点的标签添加样式。

透明效果

定义透明效果的属性是 opacity 。

opacity 属性设置标签的不透明级别 值为 1 。

规定不透明度：从 0.0 （完全透明）到 1.0 （完全不透明）。

块级标签：无论内容多少 都会独自占据一行的

行级标签：只占自身大小的标签，不会占一行

div和span

div 标签

  div 是块级标签，可以放置任何标签。

  div 没有任何附加功能，给了什么属性就能变成什么样。

  div 主要的作用是被用来布局网页。

span 标签

   span 是行级标签

    span 没有任何附加功能，给了什么属性就能变成什么样。

    span 标签被用来选中文档中的文字

相对定位与绝对定位