HTML快速入门及简单的创建网页实战演示

目录

HTML文件结构

HTML元素

 第一个HTML代码

添加标题 

添加并修改图片

添加超链接 

 修改网页标题

内容居中


HTML文件结构

<!DOCTYPE html>——————————HTML文档声明,告诉浏览器我是一个HTML文件
<html lang="en">——————————HTML根元素
    <head>————————--————————————————HTML头(一般放入原数据,搜索引擎的keyword,title,脚本,css文件链接等)
        <meta charset="UTF—8">
        <title>Document</title>
    <head>——————————————————————————HTML头
    <body>——------------------------HTMLbody(放入HTML元素,上网时所看到的页面内容就是body里的内容)
        
    <body>--------------------------HTMLbody
        </html>——————————HTML根元素

HTML元素

<a>百度</a>
<a>:开始标签
</a>:结束标签             开始标签和结束标签成对出现,结束表现多个/
<a href="https://www.baidu.com">百度</a>
href="https://www.baidu.com即为属性
属性规则:属性名=“属性值” “百度”是内容

 HTML元素太多了记不住怎么办,这里给出一个网站https://developer.mozilla.org/zh-CN/does/Web/HTML/Element

 记录了所有的html元素及其属性

下面直接进入实战

 第一个HTML代码

1.首先打开cscode,下载两个辅助我们的插件给我们提示和节省时间

Live Server

HTML CSS Support

2.在phpstudy中创建好网站(详细可见《第一个PHP程序》)

3.点开这个网站的根目录并且创建一个HTML文件index.html

4.使用vs code打开这个文件  ,即可在编译器敲我们的代码了

5.直接输入感叹号(记得是英文状态下)点击回车,我们的插件就已经生效了,HTML的基本框架已经出现  

 

6.删除第五行第六行(没用的东西)  

7.接下来在body中即可输入我们的内容,输入经典语句Hello,World!

访问刚刚创建的网站  

 第一步已迈出

添加标题 

 我们从标题开始,将刚刚的hello world删除,输入h1按下Tab键,标题格式即自动生成,在中间输入“第一个HTML”

 

 刷新刚刚创建的网页

 

 同理输入h2按tab键生成副标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   
    <title>Document</title>
</head>
<body>
    <h1>第一个HTML</h1>
    <h2>一起努力</h2>
</body>
</html>

保存刷新  

 

添加并修改图片

首先先把我们相加的图片保存在根目录中

 

 图片标签是img,同样先输入img再按tab键,则会自动生成图片标签,在src的双引号里输入./,选择图片,回车,这里我从百度复制来一张励志图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   
    <title>Document</title>
</head>
<body>
    <h1>第一个HTML</h1>
    <h2>一起努力</h2>
    <img src="./inews.gtimg.jpeg" alt="">
</body>
</html>

 保存并刷新网站

 

 后面的alt是alternative的缩写,也就是替换,当前面图片不可用的时候时候可显示文本,如输入alt=图片,这样如果前面的图片不可用即会出现“图片”两字

 如果图片太大怎么办,我们可以再其后设置图片的宽度,如

<img src="./inews.gtimg.jpeg" alt="图片" width="200px">

 刷新网页即可看见图片变小了

添加超链接 

下面添加超链接,即<a>标签,可以跳转其他网站

 同样是输入a再按tab键,在双引号中输入我们想要跳转的链接,这里以百度为例

 <a href="https://www.baidu.com/">百度</a>

 

       我们可以看到超链接在图片的右方,因为HTML 的元素分为两种,一个是块状元素一个是行内元素,像h1,h2就是块状元素,可以占满一行,但是img标签和a标签为行内元素,所以不会占满

那么如何换行呢,我们可以输入一个块状元素

<br>

也就是PHP中的换行,此时百度则到了图片下面

我们点击网页中的超链接会发现原来的页面被超链接覆盖了,那么如何新开一个窗口呢,此时我们需要添加一个新的东西target="_black"

 <a href="https://www.baidu.com/" target="_blank">百度</a>

 再次点击超链接即可新出来一个页面

 修改网页标题

 直接在title里即可修改

打开网页  

 

内容居中

现在我们发现靠左的不是很美观,现在我们居中一下,加一个内嵌的CSS样式,对代码进行如下修改

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
   
        <title>努力学习</title>
        <style>
            .box{
            width: 600px;
            height: 1200px;
            margin: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="box">
        <h1>第一个HTML</h1>
        <h2>一起努力</h2>
        <img src="./inews.gtimg.jpeg" alt="图片" width="200px">
        <br>
        <a href="https://www.baidu.com/" target="_blank">百度</a>
    </div>
   
</body>
</html>

 此时我们再打开页面会发现全部居中了

 

 此时一个简单的网页就已经写出来了

 tips:最后这一段居中属于CSS,还没学,等学了再解释