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

目录

HTML文件结构

HTML元素

 第一个HTML代码

添加标题 

添加并修改图片

添加超链接 

 修改网页标题

内容居中


HTML文件结构

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

HTML元素

百度
:开始标签
:结束标签             开始标签和结束标签成对出现,结束表现多个/
百度
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的基本框架已经出现  

 HTML快速入门及简单的创建网页实战演示_第1张图片

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

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

HTML快速入门及简单的创建网页实战演示_第2张图片

访问刚刚创建的网站  

HTML快速入门及简单的创建网页实战演示_第3张图片

 第一步已迈出

添加标题 

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

 HTML快速入门及简单的创建网页实战演示_第4张图片

 刷新刚刚创建的网页

 HTML快速入门及简单的创建网页实战演示_第5张图片

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




    
   
    Document


    

第一个HTML

一起努力

保存刷新  

 HTML快速入门及简单的创建网页实战演示_第6张图片

添加并修改图片

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

 HTML快速入门及简单的创建网页实战演示_第7张图片

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




    
   
    Document


    

第一个HTML

一起努力

 保存并刷新网站

 HTML快速入门及简单的创建网页实战演示_第8张图片

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

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

图片

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

添加超链接 

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

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

 百度

 HTML快速入门及简单的创建网页实战演示_第9张图片

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

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


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

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

 百度

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

 修改网页标题

 直接在title里即可修改

HTML快速入门及简单的创建网页实战演示_第10张图片

打开网页  

 HTML快速入门及简单的创建网页实战演示_第11张图片

内容居中

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



    
        
   
        努力学习
        
    
    
        

第一个HTML

一起努力

图片
百度

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

 HTML快速入门及简单的创建网页实战演示_第12张图片

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

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

你可能感兴趣的:(网安基础,前端基础,html,前端)