web前端学习——html+css

最新推荐文章于 2024-07-25 11:52:08 发布

空の鱼

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量94

点赞数

分类专栏： web前端文章标签： html

本文链接：https://blog.csdn.net/xinghen1993/article/details/118548402

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学习资料

html标签学习：https://man.ilovefishc.com/html5/

css学习：https://man.ilovefishc.com/css3/

案例库：https://ilovefishc.com/html5/

标签篇

基础标签

1、<!DOCTYPE html> 声明，表示该文档是由 HTML5 进行编写的

2、<html></html> 根标签，限定了文档的开始点和结束点，在它们之间是文档的头部和主体

3、<head> 用于定义文档的头部，下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>，<title>。<title> 是 head 部分中唯一必需的标签。

4、<title> 标签用于定义文档的标题，浏览器通常将其内容显示在浏览器窗口的标题栏或状态栏上。

5、<body> 标签定义文档的主体，body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。

6、<meta> 标签用于描述页面内容，关键词，作者，最新修订时间以及其它元信息。<meta> 标签的内容不会显示在网页中，但经常被机器（比如网页爬虫）解析。

<!-- 设置编码-->
<meta charset="utf-8">
<!-- 网页自适应设置 -->
<meta name="viewport" content="width=device-width,inital-scale=1.0">
<!-- 当搜索下面的关键字时，关键字下会显示下面的content -->
<meta name="keyword" content="空鱼，开发，html，css，js，李丹阳">
<meta name="description" content="《搜索关键字会默认展示这些文字》">
<!-- 网页作者 -->
<meta name="author" content="sola-fish">
<!-- 自动跳转，当前网页会在5s后自动跳转到下面链接的网页 -->
<meta http-equiv="refresh" content="5; https://ilovefishc.com/html5/">

7、<h1> - <h6> 标签可定义文档标题，<h1> 定义最大的标题。<h6> 定义最小的标题。请不要利用标题标签来改变同一行中的字体大小。

8、<p> 标签用于定义一个段落

9、<style> 标签用于为 HTML 文档定义样式信息，style 元素可以出现在 HTML 文档中的各个部分，一个文档可以包含多个 style 元素。media 属性指定样式适用的媒体。

<style>
        body {    <!-- 定义下文的body标签的内容显示背景为一个图片 -->
            background-image: url("../img/bc.png")
        }
        h1 {
            text-align: center;
            color: white;
        }
        h2 {
            margin-left: 60%;
            color: white;
        }
        p {
            text-indent: 32px;
            font-size: 16px;
            line-height: 32px;
            color: white;
        }
        img {
            position: absolute;
            left: 50%;
            margin-left: -181px;
        }
    </style>
    
    <style media="print">
        h1 {       <!-- 定义下文的h1标签的内容显示为红色 -->
            color: black;
        }
        h2 {
            color: black;
        }
        p {
            color: black;
        }
    </style>
    <!-- 作用：当浏览器窗口缩放到一定程度时背景图片改变 -->
    <style media="screen and (min-width:512px) and (max-width:1024px)">
        body {
            background-image: url("../img/bc2.png");
        }
    </style>

超链接标签

1、<a> 标签用于定义超链接。

<!-- target属性用于在新tab页打开超链接 -->
<a href="http:www.baidu.com" target="_blank">超链接显示的文字</a>

图片标签

1、<img> 标签用于向网页中嵌入一幅图像，标签有两个必需的属性：src 属性和 alt 属性

<img alt="图片无法加载时显示的内容" src="https://fishc.com.cn/static/image/common/logo.png" width="256px" height="156px">

空の鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端学习——html+css

目录标签篇基础标签标签篇基础标签<!DOCTYPE html> 声明，表示该文档是由 HTML5 进行编写的 <html></html> 根标签，限定了文档的开始点和结束点，在它们之间是文档的头部和主体 <head> 用于定义文档的头部，下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>，<ti...
复制链接

扫一扫

专栏目录