html零基础入门

W--婷

已于 2022-09-29 23:17:04 修改

阅读量323

点赞数 1

文章标签： html 前端

于 2022-09-29 17:43:58 首次发布

本文链接：https://blog.csdn.net/weixin_69503515/article/details/127108397

版权

一、什么是html

html的全称是超文本标记语言，描述网页的一种语言。

1.基本语法概述

html标签是由尖括号包围的关键词，eg. <html>。
html标签通常是成对出现的，例如<html>和</html>,我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
有些特殊的标签必须是单个标签（极少情况），例如<br />，我们称为单标签。

2.第一个html

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写

标签名	定义	说明
<html></html>	html标签	页面中最大的标签，我们称为根标签
<head></head>	文档的头部	注意在head标签中我们必须要设置的标签是title
<title></title>	文档的标题	让页面拥有一个属于自己的网页标签
<body></body>	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

第一个页面

<html>
      <head>
            <title>第一个页面</title>
      </head>
      <body>
             第一个页面！
      </body>
</html>

运行后，在浏览器中打开

3.网页开发工具

<html>、<head>和<title>是vscode自动生成，基本不需要我们重写。
<!DOCTYPE html>文档类型声明标签，告诉浏览器这个页面采取html5版本来显示页面。
<html lang="en">告诉浏览器或者搜索引擎这是一个英文网站，本页采取英文来显示。
<meta charset="UIF-8"/>必须写，采取UTF-8来保存文字，如果不写就会出现乱码。

4.部分详解

标题+段落

<h1>到<h6>都是标题标签

<p>是段落标签

<br />是换行标签

<!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>Document</title>
</head>
<body>
    <h1>标题标签</h1>
    <h1>标题一共六级选</h1>
    <h2>文字加粗一行显</h2>
    <h3>由大到小依次减</h3>
    <h4>从重到轻随之变</h4>
    <h5>语法规范书写后</h5>
    <h6>具体效果刷新见</h6>
    <p>快乐才人心之所向，至于不快乐的事还是远离吧！</p>
    <p>快乐才人心之所向，<br />至于不快乐的事还是远离吧！</p>
</body>
</html>

运行后，在浏览器中打开

文本格式化标签

语义	标签	说明
加粗	<strong></strong>或<b></b>	更推荐<strong> 标签加粗语义更强烈
倾斜	<em></em>或<i></i>	更推荐<em> 标签倾斜语义更强烈
删除线	<del></del>或<s></s>	更推荐<del> 标签删除语义更强烈
下划线	<ins></ins>或<s></s>	更推荐<ins> 标签加下划线语义更强烈

<!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>
</head>
<body>
    我是<strong>加粗</strong>的字体<br />
    我是<b>加粗</b>的字体<br />
    我是<em>倾斜</em>的文字<br />
    我是<i>倾斜</i>的文字<br />
    我是<del>删除</del>的文字<br />
    我是<s>删除</s>的文字<br />
    我是<ins>下划线</ins><br />
    我是<u>下划线</u>
</body>
</html>

运行后

<div>和<span>标签

<div>和<span>是没有语义的，它们就是一个盒子，用来装内容

<div>用来布局，但是现在一行只能放一个<div>。大盒子

<span>也是用来布局，一行上可以多个<span>。小盒子

<!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>div+span</title>
</head>
<body>
    <div>我是一个div标签我一个人占一行</div>123
    <div>我是一个div标签我一个人占一行</div>123
    <span>百度</span>
    <span>百度</span>
    <span>百度</span>

</body>
</html>

运行后

图像标签

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示，显示文字
title	文本	提示文本，鼠标放到图像上，显示文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

<!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>
</head>
<body>
    图像标签的使用：<br />
    <img src="风景.png"/>
    <h4>alt 替换文本 图像显示不出来的时候用文字替换</h4>
    <img src="风景2.png" alt="好看的风景"/>
    <h4>title 提示文本 鼠标放到图像上，提示文字</h4>
    <img src="风景.png" alt="好看的风景" title="好看的风景"/>
    <h4>width 给图像设定宽度</h4>
    <img src="风景.png" alt="好看的风景" title="好看的风景" width="500"/>
    
    <h4>border 给图像设定边框</h4>
    <img src="风景.png" alt="好看的风景" title="好看的风景" width="500" border="15"/>
</body>
</html>

运行后