HTML

1.HTML简介

HTML与XML类似, 都是一种标记语言; XML是 可扩展标记语言, 而HTML是 超文本标记语言; XML主要用来当作配置文件存储数据, 而HTML是用来 在网页上显示数据 的;




    
    
    第一个html页面

标签用于定义文档的头部, 描述了文档的属性和各种信息; 包括文档的标题, 样式(css), 以及文件(css,js)引入路径等, 标签中的内容不会展示在浏览器上让用户看到;
标签中的内容是要显示在浏览器上的;

2.HTML标签

2.1 文本,字体相关的标签




    
    HTML学习


    
    标题1
    标题2
    标题3
    标题4
    标题5
    标题6

    
    

    
      大神杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀大神杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀大神杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀大神杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀大神杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀
      大神杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀大神杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀大神杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀大神杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀大神杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀

    
    红色大小为3的字体
    

    红色大小为4的字体
    

    
    
    加粗后的字
    加斜体标签后的字

2.2 图片标签




    
    HTML学习

2.3 列表标签




    
    HTML学习


    
    
    
        一代大神
        一代二神
        一代三神
    
    
    
        一代大神
        一代三神
        一代二神

2.4 超链接标签

2.5 表格标签

学生信息表
姓名	年龄	性别
123	789
123	456	789
123	456	789
456	789

2.6 表单标签

2.7 音频标签




    
    HTML学习

2.8 视频标签




    
    HTML学习

2.9 图片链接




    
    图片链接

2.10 div和span标签




    
    HTML学习



    
        hello div1
    
    
        hello div2
    
    
        hello span1
    
    
        hello span2

2.11 details 标签




    
    详情概要


    
    
        大概的一些描述信息
        详细内容...................详细内容
        详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容
        详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容

CSS

1.CSS简介

HTML的主要工作是页面布局, 不负责页面美化的工作, 而CSS是负责页面美化工作的;

这么设计的目的是为了功能分离, 解耦; 复用, 简化页面的美化工作;

CSS是一种 style 样式;

示例: 让表格居中, 并且让表格中的所有单元格内容居中显示, 设置了CSS就不用在每个 tr 中设置 align 居中属性;

2.CSS的三种引入方式




    
    CSS学习

    
    
    
    



    
    hello world
    hello world
    hello span1
    hello span2

3.CSS的选择器

3.1.1 通配符选择器
3.1.2 id选择器
3.1.3 类选择器
3.1.4 标签选择器




    
    CSS学习
    



    
    hello world!
    
    
    hello world!
    
    
    hello world!
    
    
    hello world!

3.2 扩展选择器

3.2.1 层级选择器
3.2.2 属性选择器
3.2.3 并集选择器
3.2.4 伪类选择器




    
    CSS学习
    


    
    
        hello world!
    
    
        hello world!
    

    
    
    

    

    
    hello world

    
    
    跳转到黑马

4.CSS的常用属性

4.1 背景属性

/*
背景属性:
    1. 背景颜色 background-color
    2. 背景图片 background-image
    3. 背景图片的平铺方式 background-repeat
默认情况下是横向、纵向都平铺

简写方式:
    background: 颜色 图片 平铺方式
*/
body{
    /*background-color: green;
    background-image: url("../img/girl.jpg");
    background-repeat: repeat;*/
    background: green url("../img/girl.jpg") no-repeat;
}

4.2 文本属性

1. color: 文本颜色
2. line-height: 行高
3. text-decoration: 文本装饰
   none表示没有装饰
   underline表示下划线
   line-through 删除线
   overline 上划线
4. text-align: 文本的水平对齐方式
5. text-indent: 文本缩进,文本缩进的单位是em，一个em表示一个字符

4.3 字体属性

1. font-family 字体的样式(宋体、楷体)
2. font-size 字体的大小
3. font-style ：italic 就是斜体
4. font-weight : bold 就是粗体

11	12	13	14
21	22	23	24
31	32	33	34
41	42	43	44

HTML_CSS笔记

HTML

1.HTML简介

2.HTML标签

2.1 文本,字体相关的标签

标题1

标题2

标题3

标题4

标题5

标题6

2.2 图片标签

2.3 列表标签

2.4 超链接标签

2.5 表格标签

2.6 表单标签

2.7 音频标签

2.8 视频标签

2.9 图片链接

2.10 div和span标签

2.11 details 标签

CSS

1.CSS简介

2.CSS的三种引入方式

3.CSS的选择器

3.2 扩展选择器

4.CSS的常用属性

4.1 背景属性

4.2 文本属性

4.3 字体属性

你可能感兴趣的:(HTML_CSS笔记)