HTML基础标签和CSS基础样式总结

HTML

1. 基础

HTML 英文全称 Hyper Text Markuo Language 超文本标记语言 描述网页内容和外观的标准

1.1HTML文件的基本结构

2.HTML基本标记

2.1 头部信息标记

不会显示在网页上


    
    
    
    页面标题标记

  • name的参数

    1. keyword 定义具体的参数值为关键字
    2. description 定义网页的描述
    3. robots 告诉爬虫页面权限，具体参数值有：all, none, index, noindex, follow, nofollow,默认all
    4. author 标注网页作者

  • http-equiv有三个参数

    1. content-type: 在content中定义文档类型和编码

    2. default-style: 规定预定义的样式

    3. expires 期限 超时后重新从服务器获取 时间格式：GMT格林威治标准时间

    4. pragma （cache模式）禁止从缓存中访问页面内容

    5. refresh 在规定时间跳转到指定网页

      2s后跳转到URL指定页面

    6. set-cookie

      网页过期后删除cookie

    7. window-type

      强制以当前窗口独立页面显示

    8. content-language 显示语言的设定

    9. cache-control 缓存控制 no-cache, no-store, max-age等

2.2 页面的标记主体body

2.3

页面注释标记

3. 文字与段落

3.1 标题


对齐方式=[left,center, right]


......


h为headline的简写

3.2文字font

3.3文本格式化标记

  1. 粗体标记

  2. 斜体标记

  3. 上标标记

  4. 下标标记

  5. 大字号标记

  6. 小字号标记

  7. 下划线标记

3.4 段落标记

  1. 段落标记

    • align属性值：center、right

  2. 换行标记/不换行标记


    文字内容

连续多个标记可以实现多次换行ngying

  1. 水平线

    
noshade=去除水平线阴影

3.5 特殊符号和代码

HTML 原代码 显示结果 描述
< < 小于号或显示标记
> > 大于号或显示标记
& & 可用于显示其它特殊字符
" “ 引号
® ? 已注册
© ? 版权
™ ? 商标
  ? 半个空白位
  一个空白位
  不断行的空白

4. 图像

  • GIF：可以制作动图
  • JPEG：不支持透明图和动态图
  • PNG：提供了最小压缩又不失真的技术

4.1 图像插入

提示文字


提示文字

  • align的取值

    • buttom：与当前行文字底部对齐
    • top：与当前行文字顶端对齐
    • middle、center 图片水平中线与文字中线对齐
    • left：左对齐
    • right：右对齐

  • 图像热区链接

5. 列表

5.1 有序列表

    
    
  1. 
    
  2. 
    
  3.
  • 序号类型：1、A、a、I、i

5.2 无序列表

    
    
  • 
    
  • 
    
  • 




	
  • 
    
  • 
    
  • 
    


	
  • 
    
  • 
    
  •
    • 序号类型：Disc、circle、square分别对应实心圆、空心圆，和空心方块

    5.3 定义列表

    
    
    定义
    对定义的描述
    
    
    定义
    对定义的描述
    
    
    定义
    对定义的描述

    6. 表格

    6.1 表格及基本样式

    
    表格的标题
    
    表头1表头2

    6.2 表格的结构

    7. 超链接

    7.1 内部链接
    • target参数
      • _self：当前页面打开
      • _blank：新页面打开
      • _top：顶层框架中打开
      • _parent：当前的上一层框架中打开

    7.2 锚点

    7.3 外部链接

    
发生邮件
发生邮件
发生邮件
下载文件

    8. 添加多媒体

    8.1 滚动标记

    滚动内容
    • 滚动方向：
      • up
      • down
      • left(默认)
      • right
    • 滚动方式：
      • scrool：（默认）循环滚动
      • slide：滚动一次停止
      • altermate：来回交替滚动
    • 滚动速度：每次滚动的长度，像素为单位
    • 时间间隔：单位毫秒

    8.2 插入音视频，动画

    8.3 背景音乐

    8.4 Java applet

    9. 框架

    9.1 框架基本使用

    
    
    
	
	...

不支持frame时显示的内容
    • 高度、宽度为像素值或者百分比组成

    9.2 浮动框架

    9.3 创建框架链接

    通过target互相连接起来
    • 浮动框架可以设置target为自己的名字

    10. 使用表单

    10.1 表单标记

    10.2 表单对象

    


 //可以设置属性checked 默认选中





 //隐藏提交的，对用户不可见的数据

    10.3 按钮

    10.3 菜单和列表

    10.3.1 下拉菜单

    10.3.2 列表

    10.4文字域

    10.5 ID标记

    id=元素标识名

    11. HTML的元素分类

    11.1块元素：

    常见块状元素：div,p,ul,ol,li,dl,dt,dd,form,hr,table,tr,td,h1-h6,filedset,caption
    块状元素特点：

    1. 以块的形式显示为一个矩形区域；

    2. 块状元素独占一行，自上而下排列；

    3. 块状元素可以定义自己的宽度和高度，以及盒模型中的margin,padding,border；

    4. 块状元素可以作为一个容器包含其他的块状元素或内联元素。

    11.2 内联元素（行内元素）

    常见内联元素：a,strong,b,i,em,span,label

    内联元素特点：

    （a）内联元素在一行逐个进行显示；

    （b）内联元素没有自己的形状，不能定义宽度和高度，它的宽高由内容来决定；

    （c）内联元素设置与高度相关的一些属性（如margin-top,margin-bottom,padding-top,padding-bottom,line-height），显示无效或显示不准确；

    （d）内联元素设置左右填充和外间距是可以的。

    11.3内联块级元素

    img,input,textarea

    内联块状元素特点：

    　　（a）即具有内联元素特点，也具有块状元素特点

    　　（b）即可以定义容器的宽，高，margin，padding等，还可以和其他内联元素在一行显示

    11.4元素类型转换

    display:block|inline|inline-block|none|list-item;

    　　block:将元素转换为块状元素（大部分块状元素的默认display属性值）

    　　inline:将元素转换为内联元素（大部分内联元素的默认display属性值）

    　　inline-block:将元素转换为内联块状元素（img,input等元素的默认display属性值）

    　　list-item:将元素转换为列表类型（li的默认display属性值）

    　　none:元素隐藏不可见

    12. 布局标签

    布局标签就是对div语义化

    • header ：头部信息
    • nav：导航栏
    • aside：侧边栏
    • main：内容区域
    • footer：底部信息
    • article：文章详情
    • section：页面分区

    CSS样式表

    1. 基本使用

    选择符{
样式属性：取值；
……
}
    • 选择符可以为标签或定义了id或class的对象
    1. html中引用外部样式表
    1. 内部样式表