前端笔记 02:HTML入门

文章目录

  • 目的
  • 基础说明
  • 常用标签介绍
  • 总结

目的

HTML是前端基础内容中最简单的一个部分,这篇文章将对HTML入门相关的内容做个记录。

基础说明

简单点说HTML就是一个个的标签,用来描述网页的文档结构和内容,下面是一个简单的示例:


<html>
<head>
    
    <meta charset="UTF-8">
    
    <title>这里是网页标题title>
    
    <link rel="shortcut icon" href="favicon.ico">
    
    <meta name="viewport" content="width=device-width, user-scalable=no">

    <style>
        /* 清除浏览器默认样式 */
        * {
      
            margin: 0;
            padding: 0;
        }
    style>
head>
<body>
	这里填充网页内容
body>
html>

前端笔记 02:HTML入门_第1张图片
上面代码中 包围部分是HTML注释 。上面的代码再精简下就是下面这样:


<html>
    <head>
    head>
    <body>
    body>
html>

第一行 以前有很多写法,一般固定就这样写就行了,不用去理解他。之后就是 ... 标签,该标签下面是 ... ... 标签。 head标签中的内容不会在网页页面主体中显示,一般用来放网页的基本描述信息和一些外部链接的内容等。body标签中的内容主要是要显示在网页页面主体中的东西。 下面的示例中就在body中放了内容:
前端笔记 02:HTML入门_第2张图片
事实上html、head、body这些基本的标签也完全可以省略,你只写上面示例中body中的内容浏览器也能显示内容。但是除非特殊情况,一般还是按照结构完整的来编写的好。

下面演示下在body中进行结构布局:


<html>

<head>
    <meta charset="UTF-8">
    <style>
        * {
      
            margin: 0;
            padding: 0;
        }
    style>
    <style>
        html,
        body {
      
            height: 100%;
        }

        body {
      
            display: flex;
            flex-wrap: wrap;
        }

        .header {
      
            width: 100%;
            height: 10%;
            background-color: salmon;
        }

        .nav {
      
            width: 100%;
            height: 10%;
            background-color: darkkhaki;
        }

        .aside {
      
            width: 20%;
            height: 70%;
            background-color: lightgreen;
        }

        .main {
      
            width: 80%;
            height: 70%;
            background-color: mediumturquoise;
        }

        .footer {
      
            width: 100%;
            height: 10%;
            background-color: orchid;
        }

        div {
      
            text-align: center;
        }
    style>
head>

<body>
    <div class="header"> 标题栏 div>
    <div class="nav"> 导航栏 div>
    <div class="aside"> 侧边栏 div>
    <div class="main"> 正文 div>
    <div class="footer"> 页脚 div>
body>

html>

前端笔记 02:HTML入门_第3张图片
上面示例中 用了

...
标签和CSS结合进行了结构布局 ,div标签作为内容容器,CSS进行具体的布局描述,这是最常见的布局方式。

上面代码中div标签前半部分有一个 class="" 的内容,这个是该标签的属性。大部分标签都有很多属性,其中body中大部分标签都有class、id等属性。

div标签是用的最广泛的标签,它的作用也就作为容器。通常的开发中可以先进行布局,然后再填充内容。上面示例也可以换成下面的方式:
前端笔记 02:HTML入门_第4张图片
上面示例中 header、nav、aside、main、footer 这些标签替换了前面示例中的 div + class 的形式(相应的CSS部分也稍有改动)。这些标签和 div 标签从功能上来说可以说是完全一样的,不过名称上更加偏向于专业用途,用这些标签来搭建上面的结构代码上会更加容易阅读理解,这个称为 HTML语义化 。语义化标签一方面有助于文档阅读,另一方面在搜索引擎收录排名优化等方面有优势。虽说如此,但是很多情况下其实也不用管那么多, div 用用就行了。

上面例子中出现在body中的 h1~h6、p、div 等标签在HTML中被称之为 块级元素 。在默认情况下块级元素会单独占用页面中的一行,可以手动设置宽度、高度、外边距、内边距。块级元素会单独占一行, 行内元素 就不会单独占一行,常见的比如 span 标签:
前端笔记 02:HTML入门_第5张图片
上图中被 span 标签包围的内容都在页面中同一行,并没有每个元素单独一行,这就是行内元素。默认情况下是无法手动设置行内元素的宽度、高度以及垂直方向上的内外边距的。此外还有 行内块元素 ,这类元素不会单独占一行,但可以手动设置宽度、高度、外边距、内边距,常见的标签有 img、input 。

块级元素、行内元素、行内块元素 会因为CSS的设置而导致性质改变,同样的我们也可以手动改变其属性,当然这些就属于CSS的内容了。另外有些时候我们可以会需要 手动进行换行,这时候可以用 br 标签


三种写法都可以。
前端笔记 02:HTML入门_第6张图片
在HTML中写文本,有些字符是无法正确显示的,比如 " & < > 这些,另外空格在显示上也会有问题,这时候就需要用转义符了,常见的转义符如下:

字符 十进制表达 字符表达
" " "
& & &
< < <
> > >
不断开空格(non-breaking space)    

前端笔记 02:HTML入门_第7张图片

常用标签介绍

HTML标签总共一百个出头的样子,但是真正用的多的估计一半都不到,除了上面演示中用到的 h1~h6、p、div 等标签外还有一些常用的标签,这里将稍微进行介绍:

  • input
    该标签用于用户输入组件,通过其 type 属性可以获得不同类型的功能;
    前端笔记 02:HTML入门_第8张图片
  • form
    该标签通常在其内部嵌套 input 标签使用,用于向后台提交数据,通常所说的 “提交表单” 就是指这个;
  • textarea
    该标签和 input 的text类似,支持多行文本;
  • button
    该标签和 input 类似,type类型只支持button、reset、submit,默认为button;
    该标签和 input 最大不同点在于其内部可以嵌入文本图像等;
    前端笔记 02:HTML入门_第9张图片
  • img audio video
    分别用于在页面中嵌入图片、声音、视频;
  • ol - li ul - li dl - dt - dd
    分别为三种类型的列表;
    前端笔记 02:HTML入门_第10张图片
  • a
    该标签可以用于点击跳转到内部或外部的链接;
    前端笔记 02:HTML入门_第11张图片
  • link
    该标签通常用于链接到外部文件,常用的比如链接网页图标、样式文件等;
  • del
    该标签用于在文字中间加上一条横线;
    前端笔记 02:HTML入门_第12张图片
  • iframe
    该标签用于在页面中内嵌其它页面;
    前端笔记 02:HTML入门_第13张图片

总结

HTML很简单,上面这些内容对于入门来说足够了,更多的还是需要自主练习。更多详细内容可以自行在CSDN、博客园、百度w3c、B站、慕课网等地方学习。

你可能感兴趣的:(WEB前端相关,html,前端,网页)