HTML和CSS的详细介绍
目录
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是鼠标指向某个标签后改标签之后发生的改变。