零基础学前端(三)重点讲解 HTML

1. 该篇适用于从零基础学习前端的小白

2. 初学者不懂代码得含义也要坚持模仿逐行敲代码,以身体感悟带动头脑去理解新知识

3. 初学者切忌,不要眼花缭乱,不要四处找其它文档,要坚定一个教授者的方式,将其学通透,才是好的学习方式。

 一、HTML导言

HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签,通过这些标签表示文字,图形、动画、视频、声音、表格、链接等。 

二、具体标签效果演示 

1. 视频标签

 

运行效果

零基础学前端(三)重点讲解 HTML_第1张图片

2. 图片标签

  

效果图

零基础学前端(三)重点讲解 HTML_第2张图片

3. 标题 和 文本标签

   

第一级标题

第二级标题

第三级标题

第四级标题

普通文本:风急天高猿啸哀⑵, 渚清沙白鸟飞回⑶。无边落木萧萧下⑷, 不尽长江滚滚来。万里悲秋常作客⑸,百年多病独登台⑹。艰难苦恨繁霜鬓⑺, 潦倒新停浊酒杯

零基础学前端(三)重点讲解 HTML_第3张图片

4. 输入框 和 按钮

 
 

零基础学前端(三)重点讲解 HTML_第4张图片

5. 表格

  
列标题1 列标题2 列标题3
行1列1 行1列2 行1列3
行2列1 行2列2 行2列3

零基础学前端(三)重点讲解 HTML_第5张图片

三、实践是检验一切真理的唯一标准

接下来,我们依旧以实践为主,概念为辅的方式,讲述HTML标签

1. 初学者都是以模仿现有页面为开始的,我们来模仿写一个简单的百度网站的首页,效果图如下

零基础学前端(三)重点讲解 HTML_第6张图片

2. 看了效果图,我们在头脑里需要明白两件事

第一,我们要做百度网站的首页

第二,我们需要分析百度网站首页有那些内容,这些内容都对应什么HTML标签(重点

3. 分析我们要做的内容,对应什么标签

目前作为初学者,还不晓得有哪些标签,先不要慌张,接下来直接从我对百度网站内容分析上,直接学习标签以及使用方式。因为常用标签就那几个,不需要全部一个一个敲代码。

分析内容对应的标签效果图如下

零基础学前端(三)重点讲解 HTML_第7张图片

4. 完成左上角内容:新闻、ha0123、地图、贴吧、视频、图片、更多

我在上面的标签效果图中说到使用li列表标签,其实div标签可以同样做到,因为div标签几乎是万能的,可以替代大多数标签。目前为了初学者理解 “标签语义化” ,就使用li标签做。

 
  • 新闻
  • hao123
  • 地图
  • 贴吧
  • 视频
  • 图片
  • 网盘
  • 更多

运行效果图如下

零基础学前端(三)重点讲解 HTML_第8张图片

效果上有两个问题:

第一,每个内容前面有一个黑点(这个黑点就是li标签默认自带的)

第二,它没有横着排列(此刻初学者可以模糊的感受到,li标签内容是独占一行的)

接下来就来解决一下,代码如下




    
    
    
    Document
    


    
  • 新闻
  • hao123
  • 地图
  • 贴吧
  • 视频
  • 图片
  • 网盘
  • 更多

运行效果如图

零基础学前端(三)重点讲解 HTML_第9张图片

        看着终于和百度网站首页的做右上角接近了。这次代码里面包含了一点css的样式,根本原因是写网页布局时 HTML和 CSS 知识是关联在一起的。先体会,带着疑问走下去,完成本篇章内容后,下一篇博客为您解惑。(千万别打乱现在的节奏,四处乱跳着学习)

5. 完成右上角内容 




    
    
    
    Document
    


   
    
设置

运行效果图

零基础学前端(三)重点讲解 HTML_第10张图片

目前观察图要让左上角 和 右上角保持对其,我们需要用css样式调整一下它的结构,给他们两个最外层添加一个div ,class命名为 head , 里面的样式用flex布局。




    

    效果图如下

    零基础学前端(三)重点讲解 HTML_第11张图片

    四、结束语

            我担心继续写太多,会让初学者更加困惑,剩下的部分还是等CSS讲解完后,再将百度网站首页代码写完。

            记下来,继续学习css 

    零基础学前端(四)重点讲解 CSS-CSDN博客

    你可能感兴趣的:(零基础学习前端开发,前端)