Html与css

最新推荐文章于 2023-03-12 16:38:04 发布

crush丨

最新推荐文章于 2023-03-12 16:38:04 发布

阅读量66

点赞数

本文链接：https://blog.csdn.net/m0_60284037/article/details/119794775

版权

HTML

HTML指的是超文本标记语言（Hyper Text Markip Language），它不是一种编程语言而是一种标记语言，通过使用标签来描述网页。

header — 头部标签
nav — 导航标签
article — 内容标签
section — 块级标签
aside — 侧边栏标签
footer — 尾部标签

多媒体标签包含两个：

音频：<audio>
视频：<video>
使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件。

<audio>音频标签

HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的。

在这里插入图片描述

	<ul>
	<li>邮箱：<input type="email" /></li>
	<li>网址：<input type="url" /></li>
	<li>日期：<input type="date" /></li>
	<li>时间：<input type="date" /></li>
	<li>数量：<input type="number" /></li>
	<li>手机号码：<input type="tel" /></li>
	<li>搜索：<input type="search" /></li>
	<li>颜色：<input type="color" /></li>
	<input type="submit" value="提交">
	</ul>

在这里插入图片描述

注意

这种语义化标签主要针对搜索引擎的
这些新标签在页面中可以使用多次
在 IE9 浏览器中，需要把这些语义化标签都转换为块级元素
语义化标签，在移动端支持比较友好

CSS

CSS （Cascading Style Sheets）是层叠样式表用来定义网页的显示效果。

可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。

简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

在这里插入图片描述

1. CSS3属性(结构)选择器

在这里插入图片描述

2. CSS3结构伪类选择器

在这里插入图片描述

例：

<!DOCTYPE html>

<html>
    <!--头部 标签head 成对出现-->
    <head>
        <!--meta：设置页面的参数-->
        <!--charset=“utf-8”:字符编码集-->
        <meta charset="utf-8" />
        <!--标题标签-->
        <title>我的第一个网页</title>
    </head>
    <!--主体 标签body 成对出现-->
    <body>
        <!--标题标签-->
        <!--标题标签h1到h6 从大到小-->
        <h1>我是一个一级标签</h1>
        <h2>我是一个二级标签</h2>
        <h3>我是一个三级标签</h3>
        <h4>我是一个四级标签</h4>
        <h5>我是一个五级标签</h5>
        <h6>我是一个六级标签</h6>
        <!--<hr/>单标签  水平线标签-->
        <hr/>
        <!--段落标签<p></p>-->
        <!--<br/>单标签  强制换行-->
        <p>我有一段话要显示 <br/> 就要使用p标签展示</p>
        <hr/>
        &gt;&lt;&quot;&nbsp;&copy;
        <!--img：用于展示图片-->
        <!--src属性  填写当前图片的路径-->
        <!--img：用于展示图片-->
        <!-- <a href="index.html">showStudent.html</a> a href 页面跳转-->
        <!--target="_blank"在新的页面打开-->
        <!--target="_parent在当前的页面打开-->
        
        <!--
            无序列表 <ul></ul>  <li></li>：内容
            有序列表 <ol></ol>  <li></li>:内容
            定义列表 <dl>
                          <dt></dt>  标题
                          <dd></dd>  内容
                          <dd></dd>  内容
                          <dd></dd>  内容
                    </dl>
        -->
    </body>
</html>