HTML与CSS知识点

一、HTML

1.含义：

2.HTML基本结构

3.HTML基本标签

4.表单

1.基本属性

2.输入标签

二、CSS

1.含义：

2.使用

(1) 行内样式

(2) 内部样式

（3）外部样式

（4）注意：

3.选择器

（1）基础

（2）选择器类型

4.盒子模型

（1）盒子构成：

（2）内边距与外边距与边框:

（3）浮动

（4）定位

一、HTML

1.含义：

超文本标记语言

2.HTML基本结构

<html>
    <head>
       <meta name="xx" value="xxx"/>
       <title>标题</title>
    </head>
    <body>
         <!--注释-->
         <h1>页面内容</h1>
    </body>
</html>

3.HTML基本标签

标题标签: hx(x：1-6)
段落标签: p
加粗： strong
斜体: em
删除线:del
上下标: sup ,sub
分割线: hr
换行标签: br
超链接标签: a
内联框架: iframe
图片标签:img
视频: video
音频：audio

列表标签
1.无序 ul->li
2.有序 ol->li
3.自定义 dl->dt->dd

表格标签：
1. table : 表格标签
2. tr: 行标签
3. td: 单元格
4. th: 表头
5. caption: 表格标题

4.表单

1.基本属性

<form action="" method="">
</form>
注意
-action: 指定数据提交的服务器
-method: GET|POST
*GET: 不安全 , 效率高 , 数据长度不能超过3KB.
*POST: 安全 , 效率低 , 数据长度理论上无限制
作用：把数据以指定的方式提交给指定的服务器。

2.输入标签

<input type="" name="" value=""/>
type: 输入控件类型
name: 控件名称(key)
value: 控件的值
checked: 是否被选中
max:最大值
step:步长
pattern：输入内容的格式规范（正则表达式）
readonly：只读
disabled:禁用
size:控件尺寸
placeholder：文字提示内容
maxlength：最大输入长度
required：是否必填

二、CSS

1.含义：

级联样式表

2.使用

(1) 行内样式

<标签 style="color:blue;font-size: 16px">xxx</标签>

(2) 内部样式

<style type="text/css">
        标签{
          属性 : 值;
        }
</style>

（3）外部样式

导入式

<style type="text/css">
        @import url("路径/css文件名");
</style>

链接式(推荐)

<link type="text/css" rel="stylesheet" href="路径/css文件名">

（4）注意：

当三种方式发生冲突时，遵循 就近原则 ，即标签距离那个方式近，就使用那个方式。底层实际是因为HTML是一种 边解释边运行 的语言。

3.选择器

（1）基础

选择器: 选择对应的元素设置对应样式效果。

语法：选择器名称{
                         属性：属性值;
                         属性：属性值;
                         属性：属性值;
                         .....
                 }

（2）选择器类型

·元素选择器

h1 {font-family: sans-serif;}

·选择器分组

body, h2, p, table, th, td, pre, strong, em {color:gray;}

·类选择器

.important {color:red;}

<h1 class="important">
This heading is very important.
</h1>

<p class="important">
This paragraph is very important.
</p>

·ID选择器

#intro {font-weight:bold;}

<p id="intro">This is a paragraph of introduction.</p>

·属性选择器

*[title] {color:red;}

·后代选择器

h1 em {color:red;}

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

·子元素选择器

h1 > strong {color:red;}

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

·相邻兄弟选择器

h1 + p {margin-top:50px;}

·伪类

selector : pseudo-class {property: value}

·伪元素

selector:pseudo-element {property:value;}

4.盒子模型

（1）盒子构成：

内容+内边距+边框+外边距

（2）内边距与外边距与边框:

内边距含义：内容与边框之间的距离

padding

padding-[top,bottom,left,right]: 设置指定位置的内边距
          padding: 上下左右
        padding: 上下左右
          padding: 上左右下
          padding: 上右下左

外边距含义：边框以外的距离

margin

margin-[top,bottom,left,right]: 设置指定位置的外边距
          margin: 上下左右
          margin: 上下左右
        margin: 上左右下
        margin: 上右下左

        border
          border-color:边框颜色
          border-style:边框风格
        border-width:边框粗细

（3）浮动

元素按照默认的从上到下或者从左到右顺序排序，标准文档流。
float: 1.left 2.right 3.none(默认)

clear: 清除浮动影响 1.left 2.right 3.both

（4）定位

static：默认值，没有定位

         relative：相对定位
         特点:
                 1.不脱离标准文档流，对周边元素没有影响。
                 2.相对于本身原来的位置定位。

         absolute：绝对定位
         特点：
                 1.脱离标准文档流，对周边元素产生影响。
                 2.【当祖先元素有定位，则相对于最近的祖先元素定位】。
          当祖先元素没有定位，则相对于浏览器定位。

         fixed：固定定位
         特点：
                 1.脱离标准文档流，对周边元素产生影响。
                 2.永远相对于浏览器定位。

HTML与CSS知识点

一、HTML

1.含义：

2.HTML基本结构

3.HTML基本标签

4.表单

1.基本属性

2.输入标签

二、CSS

1.含义：

2.使用

(1) 行内样式

(2) 内部样式

（3）外部样式

（4）注意 ：

3.选择器

（1）基础

（2）选择器类型

4.盒子模型

（1）盒子构成：

（2）内边距与外边距与边框:

（3）浮动

（4）定位

（4）注意：