【石家庄校区】HTML&CSS 学习笔记 - 黑马程序员技术交流社区

HTML&CSS 学习笔记

HTML
HTML概述:

HTML:Hyper Text Markup Language---超文本标记语言
标记语言：指的是通过一组标签的形式描述事物的一门语言.
作用: 制作页面(静态页面)

结构标签

根标签:<html>
头标签:<head>
体标签:<body>

字体标签<font>

colors属性中颜色顺序: 红绿蓝 RGB
size属性取值范围是1-7
face字体

排版标签

段落<p>
横线<hr>
加粗<b> 或<strong>
倾斜<i>
下划线<u>
居中<center>
标题<h1> <h2>
换行<br />
原生标签<pre>

图片标签<img>

src :相对路径或绝对路径(网址)
width :默认单位是px
height:默认单位是px
alt: 如果找不到图片显示的内容

列表标签

无序列表:<ul>
- 列表项:<li> 内容</ li>
- type属性
有序列表: <ol>
- 列表项:<li>内容<li>
- type属性
- start属性

超链接标签<a>

href: 相对路径或绝对路径(网址)
target:打开的方式
- _self: 在当前页面打开
- _blank: 信件标签打开
- _parent

表格标签<table>

属性;
- border:边框,值表示边框宽度
- width:表格宽度,可以写值,也可以写百分比
- height:表格宽度,可以写值,也可以写百分比
- aglin:水平位置
- bgcolor:背景图片
行标签:<tr>
- height
- weight
列标签: <td>
- 属性:
  - height
  - weight
  - colspan
  - rowspan

表单标签<form>

作用:用于向服务器传输数据
常用属性:
- action:提交路径,默认提交到当前页面
- method:请求的方式,常用的有get和post,默认用get
  - get:数据会显示到地址栏中.GET方式提交是有大小的限制
  - post:数据不会显示到地址栏中.POST方式提交的是没有大小限制
- Enctype:规定在发送表单数据之前如何对其进行编码
表单元素:
- <input>
  - type="text"--文本框
    常用属性:
    name:文本框的名称.name是必要的,不然后台无法获取该文本框的数据
    value:文本框的默认值
    size:文本框的长度
    maxlength:文本框输入的最大长度
    readonly:只读属性
    disable:不可用的,数据不会提交到后台
  - type="password"--密码框
    常用属性:
    name:密码框的名称.name是必要的,不然后台无法获取该文本框的数据
    value:密码框的默认值
    size:密码框的长度
    maxlength:密码框输入的最大长度
  - type="radio"--单选按钮
    常用属性:
    name:同一组的单选按钮的name属性需要相同
    value
    checked
  - type="checkbox"--复选框
    常用属性:
    name:同一组的单选按钮的name属性需要相同
    value
    checked
  - type="button"--默认没有任何功能的按钮,需添加功能
  - type="submit"--提交按钮
  - type="reset"--重置按钮
  - type="file"--文件上传表单项
  - type="hidden"--隐藏字段
  - type="image"--图片按钮
  - HTML5扩展标签:
    - type="email"
    - type="date"
    - type="number"
    - type="color"
- <select>下拉列表
  - <option value="提交到后台的值">
- <textarea>文本域
  - rows:行数
  - cols:列数

框架标签

<frameset>
- rows="20%,20%,*"行
- cols="20%,20%,*"*列
<frame>
- src
- name

常用特殊字符

空格:
<:<
> :>

CSS

HTML的块标签

<div>:默认一个<div>独占一行
<span>:默认在同一行

引入方式

行内样式:直接在HTML的元素上使用style属性设置CSS
页面内样式:在HTML的<head>标签中使用<style>标签设置CSS
外部样式:定义一个CSS文件,用<link>引入文件
优先级关系:就近原则

选择器

元素选择器
- p{}
ID选择器
- #id名{}
类选择器
- .类名{}
- 在class属性中可以写多个.class类选择器,如果类选择器定义的属性有重复,则会有覆盖的情况
选择器分组
属性选择器
子元素选择器
- p > span{}
后代选择器
- p span{}
并列选择器

CSS的浮动float

float浮动属性
clear清除浮动

CSS的样式背景

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

文本

属性	描述
color	设置文本颜色
direction	设置文本方向
line-height	设置行高
letter-spacing	设置字符间距
text-align	对齐元素中文本的首行
text-decoration	向文本中添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字母
unicode-bidi	设置文本方向
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

字体

属性	描述
font	简写属性.把所有针对字体的属性设置在一个声明中.
font-family	设置字体系列
font-size	设置字体的尺寸
font-size-adjust	当首选字体不可用是,对替换字体进行智能缩放
font-stretch	对字体进行水平拉伸
font-style	设置字体风格
font-variant	以小型大写字体或正常字体显示文本
font-weight	设置字体的粗细

列表

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image	将图象设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。
marker-offset

CSS的盒子模型

margin外边距
border边框
padding内边距
将<div>居中的方法:style="margin-left: auto;margin-right: auto;"

CSS的定位

position
- absolute:绝对位置
- relative:相对位置
- fixed:固定位置
left
top

显示和隐藏

display
- block:显示
- none:隐藏
- inline:同一行显示