HTML和CSS的详细介绍

 

目录

 

1.HTML的主要内容

1.1.标题的使用

 1.2段落标签的使用

1.3超链接标签的使用

1.4列表标签的使用

1.5表单标签的使用

2.CSS的主要内容

2.1.css引入

 2.2CSS的选择器


1.HTML的主要内容

1.1.标题的使用

  HTML中最基本的文本标签,该标签的作用是在页面文本内容信息的时候设置文本内容标题,该标签一般有6个依次由大到小为:h1~h6,h1的标题最大,h6的标题最小,在标签中可以用style样式来设置标签的样式,展示部分代码如下。

<body>

    <h1>这是h标签</h1>

    <h2>这是h标签</h2>

    <h3>这是h标签</h3>

    <h4>这是h标签</h4>

    <h5>这是h标签</h5>

    <h6>这是h标签</h6>

</body>

运行结果如下:

 1.2段落标签的使用

  段落标签是HTML中常用的文本标签,使用<p>来表示段落标签,在里面也是可以使用style来进行修饰的。部分代码如下

<body>

    <!-- 这里是使用style中的color来修饰p标签 -->

    <p style="color: red;">这是段落标签</p>

</body>

运行结果如下:

1.3超链接标签的使用

超链接标签是能够进行页面跳转或者是到当前页面指定位置的标签,用<a herf=" "><\a>表示,herf作用是跳转的地方,里面可以写其它的网页地址或者是当前网页的id,当点击a标签修饰的内容后会跳转到你设置的地方去。部分代码如下:

<body>

    <a href="https://www.baidu.com">点击跳转百度</a>

</body>

运行结果如图:

点击后进去百度的网页,这里就不展示给各位看了。

1.4列表标签的使用

 列表可以分为三种:有序列表,无序列表,自定义列表。分别是ul>li,ol>li,dl>dt,(大于号指的是他们的子标签)。部分代码如下:

<body>

    <ul>

        <li>张三</li>

        <li>李四</li>

        <li>王五</li>

    </ul>

    <ol>

        <li>张三</li>

        <li>李四</li>

        <li>王五</li>

    </ol>

    <dl>

        <dt>张三</dt>

        <dt>李四</dt>

        <dt>王五</dt>

    </dl>

</body>

运行结果如下:

1.5表单标签的使用

表单是用<form>标签来使用的,在HTML标签中<form>标签用于定义表单域,来实现信息的传递(<form>标签会把范围之内的信息提交给服务器)在其中用的最多的子类标签就是input熟悉,它具有丰富的内容,一般是用<input type="属性值"/>来使用。

2.CSS的主要内容

2.1.css引入

  在HTML中css是必不可少的部分,是用来美化页面的,引入css有四种方法,但是最常用的有三种方法,接下来我回演示三种css的引入。
第一种引入:
<body>
    <p style="color: red;">你好</p>
</body>
第二种引入

<style>

    p{

        color: red;

    }

</style>

<body>

    <p>你好</p>

</body>
第三种引入:

 2.2CSS的选择器

 CSS中有类选择器,标签选择器,id选择器,通配符选择器,伪类选择器,各有各的优势。类选择器是用的标签来选定的位置,id选择器是用的每个标签设置的id名字来选定标签,是用的时候id要用#name来使用,通配符选择器是用符号来代表选定的标签,比如说*是选定所有的标签等,伪类选择器是用:来使用的,比如说hover是鼠标指向某个标签后改标签之后发生的改变。