码迷,mamicode.com
首页 > Web开发 > 详细

HTML与CSS基础知识

时间:2018-10-02 14:15:58      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:web   了解   alt   eth   input   数据   显示   本地图片   选项   

HTML

1.文本标签

- 水平分隔符标签: <hr>
- 预格式化文本标签(保留文本的原有格式): <pre>文字</pre>
- 将文字设置为上标或下标: <sup>文字</sup>, <sub>文字</sub>
- 块引用标签: <blockquote>内容</blockquote>(在这个标签内部的元素显示的时候都会向右边缩一个单位。)
- 行内标记:<span>内容</span>:<span> 标签被用来组合文档中的行内元素。
  可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。
- 区隔标记:<div>内容</div>:<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
  注释:<div> 是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。
  提示:请使用 <div> 元素来组合块级元素,这样就可以使用样式对它们进行格式化。

2.图片标签(img)

<img src="图片地址"  alt="图片说明" />
img标签必选属性:
    src:图片地址,可以是本地图片,也可以是其他网页的图片
    alt:规定图像的替代文本。当图片无法正常显示的时候会显示这里的文本。
img标签常用属性:
    height:设置图像高度
    width:设置图片宽度
    border:图片边框的设置
img标签的所有属性及其描述:
    http://www.w3school.com.cn/tags/tag_img.asp

3.序列标签

- 标签列表:<li></li>
  <li>标签定义列表项目。
  <li>标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。
  常用属性:type(规定使用哪种项目符号。)
- 无序标签:<ul></ul>
- 有序标签:<ol></ol>
可以设置样式:text-decoration: none;  ---去掉原有标签的文本装饰

4.表格标签(table)

    表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
    表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本。
    表格的边框属性boeder:设置表格的边框。如果不定义边框属性,表格将不显示边框。
    单元格边距cellpadding:设置表格的内边距,即每个<td>中的内容与<td>格子的距离。
    单元格间距cellspacing:设置表格的外边距,即每个<td>格子之间的距离。
    合并列单元格colspan:合并同一行的某几列(横向)
    合并行单元格rowspan:合并同一列的某几行(纵向)

5.表单标签(form)

    HTML 表单用于收集用户输入。表单包含许多表单元素,表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。多数情况下被用到的表单标签是输入标签(<input>),输入类型是由类型属性(type)定义的。

<form>标签常用属性:
    1.Action 属性:action 属性定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。通常,表单会被提交到 web 服务器上的网页。如果省略 action 属性,则 action 会被设置为当前页面。
    2.Method 属性:method 属性规定在提交表单时所用的 HTTP 方法(一般为GET 或 POST,默认为GET)
    何时使用 GET?
如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息。(当您使用 GET 时,表单数据在页面地址栏中是可见的)。注:GET 最适合少量数据的提交。浏览器会设定容量限制。
    何时使用 POST?
如果表单正在更新数据,或者包含敏感信息(例如密码)。POST 的安全性更加,因为在页面地址栏中被提交的数据是不可见的。

<input>元素常用属性:
    name 属性:如果要正确地被提交,每个输入字段必须设置一个name属性。name属性规定<input>元素的名称。
    value 属性:指定<input>元素value的值。
    type 属性:type属性规定要显示的<input>元素的类型。大多数经常被用到的输入类型有:
类型 描述
text 定义常规文本输入
password 输入字符不可见,而是以星号或圆点替代显示
radio 定义单选按钮输入(选择多个选择之一)
checkbox 定义了复选框. 选取一个或若干选项
submit 定义提交按钮(提交表单)
button 定义普通的按钮

其他类型详见:http://www.runoob.com/tags/tag-input.html

6.块

div与span

  1. div是一个html标签, 一个块级元素(单独显示一行), 单独使用没有任何意义, 必须结合CSS来使用, 主要用于页面的布局;
  2. span是一个html标签, 一个内联元素(显示一行), 它单独使用没有任何意义, 必须结合css使用, 主要对括起来的内容进行样式的修饰;
    总结:
    1. 常见的行内标签和 块级元素分别有哪些?
      行内标签:span, strong, a, img, input, textarea
      块级元素:div, h1->h6, p, hr, pre, ul, ol, dd, dt, th. tr, td
    2. 两者的区别与特性;
      1).块级元素独占一行空间, 行内元素只占据自身宽度的空间;
      2).块级元素是可以包含块级元素和行内元素; 行内元素只能包含文本信息和行内元素;
      3). 块级元素可以设置宽和高, 行内元素设置的宽和高失效;
    3. 如何让块级元素居中? 如何让行内元素居中?
      1).块级元素居中: margin: 0 auto
      2).行内元素居中: text-aligin:center

CSS

1.CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets)
    样式定义如何显示 HTML 元素
    样式通常存储在样式表中
    把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
    外部样式表可以极大提高工作效率
    外部样式表通常存储在 CSS 文件中
    多个样式定义可层叠为一

2.CSS 语法

CSS 规则由两个主要的部分构成:选择器,一条或多条声明。
    selector {property: value}
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
多重声明:
    提示:如果要定义不止一个声明,则需要用分号将每个声明分开。

3.四类选择器

1.元素选择器(类型选择器)
最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。
在 W3C 标准中,元素选择器又称为类型选择器(type selector)。
“类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”
参考网址:http://www.w3school.com.cn/css/css_selector_type.asp
2.id选择器
id选择器以 符号"#" 来定义。
id选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。
参考网址:http://www.w3school.com.cn/css/css_selector_id.asp
3.类选择器
类选择器以一个点号"."来定义
类选择器使得所有使用这个样式的标签具有同样的效果
参考网址:http://www.w3school.com.cn/css/css_selector_class.asp
4.属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。
参考网址:http://www.w3school.com.cn/css/css_selector_attribute.asp

4.插入样式表的三种方法:

1.外部样式表(External style sheet)

当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在(文档的)头部:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。

2.内部样式表(Internal style sheet)

当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表,就像这样:

<head>
<style>
样式......
</style>
</head>
3.内联样式(Inline style)

由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。

一般情况下,优先级如下:
内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

HTML与CSS基础知识

标签:web   了解   alt   eth   input   数据   显示   本地图片   选项   

原文地址:http://blog.51cto.com/13885935/2288365

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!