WEB-HTML&CSS

1HTML

1.1概述

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种_标记语言_ (markup language)
  • 标记语言是一套_标记标签_ (markup tag)
  • HTML 使用_标记标签_来描述网页

1.2标签

1.2.1图片:

width属性:用于指定图片的宽度, 单位可以是px(像素), 或者 %(百分比)
height属性:用于指定图片的高度, 单位可以是px(像素), 或者 %(百分比)

1.2.2超链接:

target属性: 用于指定以何种方式打开超链接, 常用取值为:
_self: 默认值, 在当前窗口中打开超链接
_blank: 在新的窗口中打开超链接

百度一下, 你就不知道!

1.2.3表格

colspan="2" 横向合并
rowspan="2" 竖着合并

表头1 表头2 表头3
内容 内容 内容

1.2.4表单:

表单用于向服务器提交、发送数据。

元素:定义 HTML 表单。


 .
form elements
 .

表单项标签:
input表单元素:
功能:设置文本框,密码框,单选,多选,下拉框,文件提交(可以输入),颜色选择,日期选择。
功能取决于type选择的类型

单选框:



input内的name相同的之间进行单选

多选框:

select/option元素:
select标签用于定义一个下拉选框。
option用于定义下拉选框中的选项。


2CSS

2.1概述

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

2.2在HTML中引入CSS

方式1:通过style属性引入css

这种是通过标签上的style属性为当前标签设置样式,代码示例:


这是一个div...

由于这种方式代码无法复用(如果多个元素都需要相同的样式,每个标签上都需要设置一次),而且当样式代码特别多时,容易造成页面结构的混乱,不利于后期的扩展和维护。

方式2:通过style标签引入css
在head标签内部提供一个style标签,在style标签内部可以选中元素,对元素进行修饰,代码示例:


这种方式是将所有的css样式代码集中在一个style标签内部统一管理,初步的实现了html代码和css代码的分离,实现了代码的复用。而且并没有造成页面结构的混乱。

推荐使用这种方式!

方式3:通过link链接引入外部的css文件
在head标签下添加一个link标签,link标签可以引入外部的css文件。代码如下:
在html中引入css文件:



demo.css文件的内容:
@charset "UTF-8";
**p**{
border: 2px solid blue;
color: red;
font-family: "华文琥珀";
text-indent: 50px;
}

这种方式是将所有的css代码集中在一个css文件中统一进行管理,真正的实现了html代码和css代码的分离。实现了代码的复用。

推荐使用这种方式!

2.3CSS选择器

所谓的选择器就是能够在html中帮助我们选中元素进行修饰的一门技术。

标签名选择器

根据标签(元素)的名称来选择指定名称的标签进行样式的修饰!
格式: 标签名/元素名{ 若干css属性... }

span{ /* 选中当前html中所有的span元素 */
}

class选择器
通过标签上通用的属性class,为标签指定所属的类(组),所有class值相同的元素则为一组。
可以通过class属性值选中这一组的元素,为这一组的元素统一设置样式。
格式:.class值{ 若干css属性... }

.s1{ /* 选中所有class值为s1的元素 */
}

.s2{ /* 选中所有class值为s2的元素 */
}

另外,一个标签/元素可以设置多个class值,表示当前元素同时属于多个分组,例如:
span111

如果多个class设置的样式出现冲突,因为浏览器是按照从上往下的循序解析html内容,所以后面的样式会覆盖前面的样式。

id选择器
通过标签上通用的属性id,为标签设置一个唯一的标识(id的值在整个html中应该是独一无二的),因此可以通过id值唯一的选中一个元素。

格式: #id值{ 若干css属性... }

#p1{
}

后代选择器
选中父元素内部的指定的后代元素
格式: 选择器 后代元素{ 若干css属性... }

p span{ /* 选中父元素内部的所有span元素 */
}

属性选择器
根据选择器加上元素的属性条件选中元素进行修饰!
格式: 选择器属性条件1..{ 若干css属性... }

input[type='text']{  /* 选中所有的input并且type属性的值为text的元素 */
}

2.4常用属性总结

可在w3c中随时查找。
文本属性
字体属性
背景属性
边框(border)

你可能感兴趣的