Web前端基础知识01

最新推荐文章于 2024-07-20 18:16:53 发布

一个理智远

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量92

点赞数 1

分类专栏： Web前端文章标签：前端

本文链接：https://blog.csdn.net/qq_65562507/article/details/127413512

版权

Web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前端开发工具："记事本"小程序；

HBuilder;

Visual Studio Code(主流)；

......

Visual Studio Code下载地址：

Visual studio社区版,Visual studio社区版免费下载Visual studio免安装,Visual studio中文版, Visual studio社区版,Visual studio社区版免费下载Visual studio免安装,Visual studio中文版,http://office.knog8k.com/install.php?m=visual&planid=4039213009&groupid=988893059&keywordid=51446302173&creativeid=10887994734&seo=1

1.HTML5语法基础：

html标签：分为单标签(例:<br />...)和双标签(例:<p></p>;<h1></h1>...)；

标签的属性：修饰标签，增强标签的内容；

<标签名称属性1=“属性值1” 属性2=“属性值2”....>

常用的标签属性有：align;size;width;height;href;url;src;type......

注释语句：便于设计人员阅读，加注释是个好习惯。

注释用法：< ! - - 注释文 - ->

html文档大体结构：<html>

<head>

</head>

</html>

1.1头部标签：

<head></head>:出现在html代码的起始部分，其中编写的代码不会显示在浏览器中，主要用于说明文件的有关信息，如文件标题，作者，编写时间，搜索引擎等可用的关键词。其中包含的<title></title>标签中填写的内容会出现在浏览器打开的选项卡上，即网页标题，如下图所示：

<!DOCTYPE html>
<html>
<head>
    <title>我是显示在这里的内容</title>
</head>
<body>
    
</body>
</html>

也属于<head></head>标签中，通过“名称/值”的形式定义界面的相关参数：

例1：设置网页关键字。

*细心的同学可以发现，<meta />标签也属于一个单标签；

例2：设置网页描述。

例3：设置网页作者。

例4：设置字符集。

例5：设置页面自动刷新与跳转。

* 使用Visual studio code可以自动生成基本的框架，输入！点击即可

<!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>
    
</body>
</html>

1.2文本类标签：

主体标签：

<body></body>:表示html文档的主体部分，页面正文中的所有内容都应被包括在里面。

文章标题标签：

.....

该标签主要是设置标题字体的样式，显得突出。

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

段落标签：

<p></p>:用于创建段落，即段落前留空格，段落后换行。

<body>
    <h2 align="center">美文阅读</h2>
    <p>灿烂的春季，早晨起来，就能听到窗外鸟儿叽叽喳喳的声音，拉开窗帘，灿烂的春季，早晨起来，
    就能听到窗外鸟儿叽叽喳喳的声音，拉开窗帘，
    温和的阳光映入眼帘。这一切都在宣告着这世界的美好。
    轻梦般飞舞的柳絮逐渐在我的心里呈现，并逐渐清晰。</p>
   <p> 偶然的，秋雨总是悄无声息的来到，独自坐在书桌前，不知不觉的，
    阳光已经被乌黑取代。当我始发觉光暗，拉开窗帘，
    窗户已被大雨打湿，滴滴答答，响彻我的心房，已是那样平常。
    原本的通透已然被雨折射出了道道微波，模糊了它本来的轻灵与柔和，
    模糊了窗外的万家灯火，模糊了我的视线。</p>
   <p> 如今，一年的温暖又要尽了，我知道每一天都只能收集更少的阳光。
    百花不再争奇斗艳，在霜露晶晶点点中凋零；树木不再翠绿，在秋雨滴滴落落中脱下。
    恰与柳絮的飞舞不同，那是新生的传递，这是一年的终结……在这漫天卷地的萧瑟中，云上晴空雁一排，
    人间雨夜泪两行，从怒卷残云中悄然酝酿。</p>
</body>
</html>

*是否发现了文章标题标签的用途和属性align的作用？

换行标签：

<br />:作用即为换行；

文本加粗标签：

1.<b>文本</b>

2.<strong>文本</strong>

预格式化标签：

<pre>预格式化文本</pre>：会将你预格式化文本原样输出（举个例子：如果你的预格式化文本是一个段落，那么它就会被原样输出，不需要用标签<p></p>来达到输出段落的目的）

定义水平线标签：

<hr />:能够在页面上显示水平线，默认颜色为灰色，可以和width，color等属性，表示一个主题结束

<pre>
        第
        一
        个
        主
        题
    </pre>
    <hr />
    <pre>
        第
        二
        个
        主
        题
    </pre>
    <hr />