【前端web入门第一天】01 开发环境、HTML基本语法文本标签

文章目录:

  • 1. 准备开发环境

    • 1.1 vs Code基本使用
  • 2.HTML文本标签

    • 2.1 标签语法
    • 2.2 HTML基本骨架
    • 2.3 标签的关系
    • 2.4 注释
    • 2.5 标题标签
    • 2.6 段落标签
    • 2.7 换行与水平线标签
    • 2.8 文本格式化标签

1. 准备开发环境

VSCode与谷歌浏览器离线版,安装包评论区自提.
VSCode默认安装位置:C:\Users\hp\AppData\Local\Programs\Microsoft VS Code

1.1 vs Code基本使用

  • 打开文件夹
    • 任意文件夹→拖拽至vs Code空白位置即可安装插件
  • 安装插件
    • 左边栏选择扩展→搜索插件→安装→重启Vs Code·
  • 安装两种插件名
    • 汉化菜单插件:Chinese
    • 打开网页插件: open in browser

2.HTML文本标签

HTML超文本标记语言一―HyperText Markup Language。

  • 超文本是什么? 链接
  • 标记是什么? 标记也叫标签,带尖括号的文本

2.1 标签语法

【前端web入门第一天】01 开发环境、HTML基本语法文本标签_第1张图片

  • 标签成对出现,中间包裹内容<>
  • 里面放英文字母(标签名)
  • 结束标签比开始标签多/

例子:加粗文字(双标签,要包裹内容所以是双标签)

<strong>加粗的文字strong>

加粗的文字

例子:水平线(单标签,不需要包裹内容所以是单标签)

<hr>

2.2 HTML基本骨架

HTML基本骨架是网页模板.

<html>
	<head>
		<title>网页标题title>
	head>
	<body>
		网页主体
	body>
html>
  • html:整个网页
  • head:网页头部,存放给浏览器看的代码,例如CSS
  • body:网页主体,存放给用户看的代码,例如图片、文字
  • title:网页标题

vs code 快速生成骨架:
在HTML文件(.html)中,!(英文)配合Enter / Tab键


2.3 标签的关系

作用:明确代码的书写位置

标签的两种关系:

  • 父子关系(嵌套关系)
  • 兄弟关系(并列关系)

【前端web入门第一天】01 开发环境、HTML基本语法文本标签_第2张图片
上面的图片和文字是兄弟关系,他们与整个大方框是父子关系


2.4 注释

注释就是对代码的解释和说明,其目的是让人们能够更加轻松地了解代码。注释是编写程序时,写程序的人给一个语句、程序段、函数等的解释或提示,能提高程序代码的可读性。

在编写HTML代码时,我们经常要在一些关键代码旁做一下注释,这样做的好处很多,比如:方便理解、方便查找或方便项目组里的其它程序员了解你的代码,而且可以方便以后你对自己代码进行修改。学习和工作中,关键代码都要加注释

注释标签用来在源文档中插入注释,注释不会在浏览器中显示。

2.5 标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。
【前端web入门第一天】01 开发环境、HTML基本语法文本标签_第3张图片

标签名: h1 ~h6(双标签)

  • 显示特点:
    • 文字加粗
    • 字号逐渐减小
    • 独占一行(换行)
<html>
    <head>
        <title>
            凡界每日一报
        title>
    head>
    <body>
        <h1>
            一级标题
        h1>
        <h2>
            二级标题
        h2>
        <h3>
            三级标题
        h3>
    body>
html>

经验分享:

  • h1标签在一个网页中只能用一次,用来放新闻标题或网页的logo.
  • h2~ h6没有使用次数的限制

2.6 段落标签

显示效果:
【前端web入门第一天】01 开发环境、HTML基本语法文本标签_第4张图片
标签名:p(双标签)

  • 显示特点:独占一行
  • 段落之间存在间隙
<html>
    <body>
     	<p>
     	这里写段落
     	p>
    body>
html>

2.7 换行与水平线标签

都是单标签,因为不需要包裹内容

 换行: <br>(单标签)
 水平线: <hr>(单标签)

注意:

代码中敲回车,浏览器显示是不会换行的


2.8 文本格式化标签

作用:为文本添加特殊格式,以突出重点。常见的文本格式:加粗、倾斜、下划线、删除线等。
【前端web入门第一天】01 开发环境、HTML基本语法文本标签_第5张图片

你可能感兴趣的:(前端web开发,前端,html)