HTML和CSS知识汇总1

一、HTML

1.排版标签

标题标签：<h1>~<h6> 标题字体依次减小     注意：一个网页只能存在一个一级标题

段落：<p> 块级元素

横线：<hr>

换行：<br>

2.div和span

div:块级元素 独占一行 

span：行级元素 横向排列

注意：div和p的区别 div可以包裹盒子 包裹任何标签 p不可以包裹div

3.文本格式化

  <b>加粗</b>

    <strong>也是加粗</strong>

    <i>斜体</i>

    <em>也是斜体</em>

    <s>删除线</s>

    <del>也是删除线</del>

    <u>下划线</u>

    <ins>也是下划线</ins>

<!--建议用strong，em，del，ins  -->

    <!-- 都是行内元素 -->

4.img标签和属性

<img src="图片.jpg" alt=""> 从本地文件获取图片

<img src="http://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">从网站获取图片

<img src="img/图片" alt="图片"> alt：当网络加载加载出错时，进行文字提示

<img src="img/l图片.jpg" width="200" title="图片"> 可以对图片进行大小（width）设置

5.超链接标签

<!-- href:超文本引用  target：_blank _self(默认) 新打开页面-->

    <a href="http://www.baidu.com">  百度一下 </a>

    <a href="05-img的属性.html" target="_blank"> 本地文件 </a>

    <!-- 没有网址时可以用#代替 用#时不刷新界面-->

    <a href="#">logo</a>

6.特殊字符

    <!-- 特殊字符 -->

    <!-- &lt;小于号 -->

    <!-- &gt;大于号 -->

    <!-- &nbsp;：半角空格 -->

    <!-- &emsp;：全角空格 -->

    &lt; &gt; &nbsp; &emsp;

7.无序列表、有序列表和自定义列表

无序列表：ul和li是无序列表 具体表现如下

有序列表：ol和li为有序列表 

自定义列表：dl dt dd 自定义列表 dt dd并列关系

8.input控件

<!-- 单行文本输入框 -->

    <lable>用户名:</lable><input type="text" name="username">

    <!-- 密码框  placeholoder:占位符-->

    密码<input type="password" placeholder="请输入密码" name="password">

<!-- name:与后台交互时必修要设置 -->

  <!-- 按钮 -->

    <input type="button" value="登录">

    <button>按钮</button>

    <button>

        <img src="img/liuyifei.jpg" alt="" width="20">

    </button>

二、css

1.css的使用方式

<!-- 1.行内样式 -->

    <p style="font-size: 10px; color:red;">

        关于迷茫 当你不知道如何抉择时，可以假想五年后你回顾青春，你就知道如何抉择了

    </p>

<!-- 2.内连接样式 -->

    <style>

        div {

            font-size: 100px;

            color: blue;

        }

    </style>

<!-- 3.外连接样式 -->

    <link rel="stylesheet" href="css/common.css">

外连接需要在外部文件把css样式表提前创建好，外连接样式可以重复用于多个网页

2.选择器

<style>

        /* 标签选择器:可以选择到所有的该标签*/

        div {

            color: aqua;

        }

        span {

            color: blueviolet;

        }

        /* class选择器 类选择器 */

        /* 如果页面有相同的样式时,采用相同的class */

        .item {

            color: brown;

        }

        /* ID选择器 */

        #main {

            color: black;

        }

        /* 通配符选择器  所有的标签都适用,谨慎使用*/

        * {

            border: 1px solid red;

        }

    </style>