web前端入门-HTML

最新推荐文章于 2024-06-02 21:27:33 发布

_雨_

最新推荐文章于 2024-06-02 21:27:33 发布

阅读量392

点赞数

分类专栏： Javaweb #HTML 文章标签：前端 html

本文链接：https://blog.csdn.net/weixin_53616401/article/details/130534201

版权

Javaweb 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

#HTML

2 篇文章 0 订阅

订阅专栏

前言

所谓的web开发就是值我们在网页上看到的前端的页面，比如我们在逛京东淘宝等等，看到一些精美的网页的时候，那么这些网页都是通过前端的代码来实现的。那么最主要的就是网页

那么什么是网页？

网页就是由文字、图片、音频、视频、超链接、表格、表单等等，组成在一起的

那么我们看到的网页，背后的本质是什么 ?

就是前端代码

那么前端的代码是如何转换成用户眼中的网页的 ?

通过浏览器转化（解析和渲染）成用户看到的网页

网页的主要组成部分

那么网页主要由这三个组成

HTML：负责网页的结构（页面元素和内容）。
CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
JavaScript：负责网页的行为（交互效果）。俗称JS

当然目前已经不仅局限这些技术了，还有目前流行的VUE & Ajax & Axios & ElementUI & Nginx等等

HTML与CSS

什么是HTML，

HTMl也称超文本标记语言

标记语言：由标签构成的语言

HTMl代码直接在浏览器中运行，标签由浏览器进行解析

什么是CSS

CSS: Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）

HTML快速入门

一个最基础的网页由这三部分组成

其中<html>是根标签，<head>中的标签<title>是用来定义网页的标题的，里面定义的内容会显示在浏览器网页的标题位置。

而 <body> 中编写的内容，就网页中显示的核心内容。

而<body>中定义的h1标签，后面我们会讲，这里的意识是设置字体的大小

代码演示：

<html>
	<head>
		<title>HTML 快速入门</title>
	</head>
	<body>
		<h1>Hello HTML</h1>
		<img src="1.jpg"/>
	</body>
</html>

HTML中的标签特点

1.HTML标签不区分大小写

2.HTML标签的属性值，采用单引号、双引号都可以

3.HTML语法相对比较松散

代码演示：

然后说明HTML的语法比较松散，看下面的代码即使<HTML后面少写了一个尖括号还是可以正常运行的，也没有报错。主要看最后的一个HTML标签少了一个尖括号，但是你在浏览器运行暂时的时候，是不会报错的

<html>
	<head>
		<title>HTML 快速入门</title>
	</head>
	<body>
		<h1>Hello HTML</h1>
		<img src="1.jpg"/>
	</body>
</html

图像标签img

图像标签: <img>

常见属性:

src: 指定图像的url (可以指定绝对路径 , 也可以指定相对路径)
width: 图像的宽度 (像素 / 百分比 , 相对于父元素的百分比)
height: 图像的高度 (像素 / 百分比 , 相对于父元素的百分比)
备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。

路径书写方式: 分为两张，分别是 绝对路径: 相对路径:

相对路径
./ : 当前目录 , ./ 可以省略的
../: 上一级目录

h标签

标题标签: <h1> - <h6>

   <h1>1</h1>
   <h2>1</h2>
   <h3>1</h3>
   <h4>1</h4>
   <h5>1</h5>
   <h6>1</h6>

其中效果 : h1为一级标题，字体也是最大的； h6为六级标题，字体是最小的。

水平分页线标签 <hr>

<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 字符集为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置浏览器兼容性 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间</title>
</head>
<body>
    <!-- 
    img标签: 
        src: 图片资源路径
        width: 宽度(px, 像素 ; % , 相对于父元素的百分比)
        height: 高度(px, 像素 ; % , 相对于父元素的百分比)
    

    路径书写方式:
        绝对路径:
            绝对路径由分为两种一种是，绝对磁盘路径，还有一种就是绝对网络路径
        
        相对路径:
            ./ : 当前目录 , ./ 可以省略的
            ../: 上一级目录
     -->

     <!-- 主要这里要写自己图片存放入门的位置 -->
    <img src="1.png"> 新浪政务 > 正文


    <h1>Hello HTML</h1>
    
    <hr>
    hi
    <hr>

</body>
</html>

CSS引入方式

名称	语法描述	示例
行内样式	在标签内使用style属性，属性值是css属性键值对	<h1 style="xxx:xxx;">中国新闻网</h1>
内嵌样式	定义<style>标签，在标签内部定义css样式	<style> h1 {...} </style>
外联样式	定义<link>标签，通过href属性引入外部css文件	<link rel="stylesheet" href="css/news.css">

内联样式会出现大量的代码冗余，不方便后期的维护，所以不常用。
内部样式，通过定义css选择器，让样式作用于当前页面的指定的标签上。
外部样式，html和css实现了完全的分离，企业开发常用方式。

代码演示：

<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 字符集为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置浏览器兼容性 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间</title>
    <!-- 方式二: 内嵌样式 -->
    <style>
        h1 {
            /* color: red; */
            /* color: rgb(0, 0, 255); */
            color: #4D4F53;
        }
    </style>


    <!-- 方式三: 外联样式 -->
    <!-- <link rel="stylesheet" href="css/news.css"> -->
</head>

<body>
    <!-- 
    img标签: 
        src: 图片资源路径
        width: 宽度(px, 像素 ; % , 相对于父元素的百分比)
        height: 高度(px, 像素 ; % , 相对于父元素的百分比)
    

    路径书写方式:
        绝对路径:
            绝对路径由分为两种一种是，绝对磁盘路径，还有一种就是绝对网络路径
        
        相对路径:
            ./ : 当前目录 , ./ 可以省略的
            ../: 上一级目录
     -->

    <!-- 主要这里要写自己图片存放入门的位置 -->
    <img src="1.png"> 新浪政务 > 正文


    <h1 style="color: red;">Hello HTML</h1>

    <hr>
    hi
    <hr>

</body>

</html>

CSS选择器

css的选择器分为三种分别是

元素选择器

作用：选择器中的样式会作用于所有同名的标签上

代码演示：

 div{
     color: red;
 }

id选择器

主要要在选择器名前加#

作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签（由于id是唯一的）

代码演示：

#did {
    color: blue;
}

类选择器

使用点来访问

作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个

代码演示：

.cls{
     color: green;
 }

总结

代码演示：

注意：css的属性 font-size , 用来设置字体的大小。但是需要注意，在设置字体的大小时，单位px不能省略，否则不生效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间</title>
    <style>
        h1 {
            color: #4D4F53;
        }

        /* 元素选择器 */
        /* span {
            color: red;
        } */

        /* 类选择器 */
        /* .cls {
            color: green;
        } */
        
        /* ID选择器 */
        #time {
            color: #968D92;
            font-size: 13px; /* 设置字体大小 */
        }

    </style>
</head>
<body>

    <img src="1.png"> 新浪政务 > 正文


    <h1 style="color: red;">Hello HTML</h1>

    <hr>
    hi
    <hr>

    <hr>
    <span class="cls" id="time">2023年03月02日 21:50</span>  <span class="cls">央视网</span>
    <hr>

</body>
</html>

超链接

标签: <a href="..." target="...">央视网</a>
属性:
href: 指定资源访问的url
target: 指定在何处打开资源链接
_blank: 在空白页面打开
_self: 默认值，在当前页面打开

代码演示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间</title>
    <style>
        h1 {
            color: #4D4F53;
        }

        /* 元素选择器 */
        /* span {
            color: red;
        } */

        /* 类选择器 */
        /* .cls {
            color: green;
        } */

        /* ID选择器 */
        #time {
            color: #968D92;
            font-size: 13px;
            /* 设置字体大小 */
        }
    </style>
</head>

<body>

    <img src="1.png"> 新浪政务 > 正文


    <h1 style="color: red;">Hello HTML</h1>

    <hr>
    hi
    <hr>

    <hr>
    <span id="time">2023年03月02日 21:50</span>
    <span>
        <a href="www.4399.com" target="_blank">游戏</a>
    </span>
    <hr>


</body>

</html>