关于前端:HTML5CSS3前端入门教程从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第2章HTML基础知识

29次阅读

共计 2887 个字符,预计需要花费 8 分钟才能阅读完成。

本教程案例在线演示

有路网 PC 端
有路网挪动端

收费配套视频教程

收费配套视频教程

教程配套源码资源

教程配套源码资源

网页开发工具

VSCode

WebStorm

HTML 简介

HTML:Hyper Text Markup Language

html 文本的外部根本构造

<!--
    文档申明,标识以后网页的版本的
    该申明标识网页是遵循 html5 语法标准的
    编写网页时,肯定要编写的文档申明,在某些浏览器中,如果不写文档申明,会导致浏览器进入到怪异模式
 -->
<!doctype html>
<!-- html 网页中根标签,一个页面中有且只有一个根标签
    网页中的所有内容都应该写在根标签的外部
 -->
<html>

    <!-- 
        网页的头部,head 标签中的内容,不会在页面中间接显示
        浏览器依据 head 中的内容来解析网页,搜索引擎也能够依据他们来检索网页
     -->
    <head>
                <!-- 应用 meta 来设置页面的字符集 -->
        <meta charset="utf-8" />
        <!-- 
            网页的题目,个别会在页面的标签头部显示 
            所属引擎在检索一个网页时,会次要检索 title 中的内容
            并根据该内容,来判断网页的次要内容,title 中的内容会影响到网站在搜索引擎中的排名
        -->
        <title> 我是 title</title>

    </head>

    
    <!-- 网页的主体,网页中所有的可见内容,都应该写在 body 中 -->

    <body>
        <h1> 这是一个十分丑陋的网页 </h1>
    </body>
    
</html>

html 的正文

<html>  
    <head>  
        <title> 网页的题目 </title>  
    </head>  
    <body>  
        <!--   
            正文 HTML 正文中的内容,不会在页面中显示,然而能够在源代码中查看  
              
            通过正文能够对代码进行解释阐明  
            肯定要养成良好的编写正文的习惯  
            编写正文时,要求简单明了  
  
            日期:作者:性能:通过正文能够将不心愿在页面中显示代码暗藏  
            HTML 正文不能嵌套(所有的多行正文都不能嵌套)-->  
  
        <!-- 这是页面的 1 级题目 -->  
        <h1> 这是我的第二个网页 </h1>  
  
        <!-- 我是一个正文 <!-- 我是正文中的正文 --> -->  
          
  
  
    </body>  
</html>  

题目标签,段落标签,水平线,换行,加粗,斜体

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title> 罕用的标签 </title>
</head>
<body>

<!-- 题目标签
    在 HTML 一共有 h1 ~ h6 六级题目
    6 级题目中 h1 最大 h6 最小
    从 h1 到 h6 重要性顺次升高
    h1 最重要,h2 其次 顺次递加

    搜索引擎检索页面时,h1 仅次于 title,也会影响到页面在搜索引擎中的排名
        一个页面个别只有一个 h1 标签

    个别页面中只会应用 h1 ~ h3

-->
<h1> 一级题目标签 </h1>
<h2> 二级题目标签 </h2>
<h3> 三级题目标签 </h3>
<h4> 四级题目标签 </h4>
<h5> 五级题目标签 </h5>
<h6> 六级题目标签 </h6>

<!-- 段落标签 应用 p 标签来示意一个段落
        段落标签会独占一行,并和其余内容会有一个间隔
-->
<p> 第一次 </p>
<p> 今天天气真不错 </p>
<hr />
<!--
    在 HTML 中,默认将多个空格和换行认为是一个空格
    应用 br 标签来示意一个换行
-->
<p>
    床前明月光 <br />
    疑是地上霜 <br />
    举头望明月 <br />
    抬头思故土 <br />
</p>

<!-- 水平线,能够在页面的指定地位输入一条水平线 -->
<hr />

<!-- 加粗:<strong>…</strong>-->
<!-- 斜体:<em>…</em>-->

<strong> 简介 </strong>
<p>
    <em>2008</em> 年设立人才实训核心 <br/>
    <em>2009</em> 年成为教育部软件工程业余大学生实习基地 <br/>
</p>

</body>
</html>

列表标签

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> 列表 </title>
    </head>
    <body>
        <!-- 
            列表相似于购物清单
                HTML 中一共有三种列表
                1. 无序列表
                    - 应用 ul 标签来创立一个无序列表
                    - 应用 li 向无序列表中增加列表项
                    - 无序列表默认应用 圆点 来作为我的项目符号    
                2. 有序列表
                    - 有序列表和无序列表相似,不同的是它应用 ol 来创立其余的都和无序列表一样
                    - 有序列表应用有序的序号 作为我的项目符号    
                3. 定义列表    
                    - 定义列表用来对一些内容做解释阐明的
                    - 应用 dl 来创立一个定义列表
                    - 在 dl 中应用 dt,来创立一个定义项
                    - 应用 dd 来创立一个对定义项的形容
                
                
                - 列表之间能够相互嵌套,能够在有序列表中放无序列表,也能够在无序列表放有序列表
        -->
        <ul>
            <li> 西红柿 </li>
            <li> 大茄子 </li>
            <li> 小辣椒 </li>
        </ul>
        
        <ol>
            <li> 桃花源记 </li>
            <li> 岳阳楼记 </li>
            <li> 小石潭记 </li>
            <li> 醉翁亭记 </li>
        </ol>
        
        <p> 菜谱 </p>
        <ul>
            <li>
                鱼香肉丝
                <ol>
                    <li> 鱼 </li>
                    <li> 香 </li>
                    <li> 肉丝 </li>
                </ol>
            </li>
            <li> 宫保鸡丁 </li>
            <li> 青椒肉丝 </li>
        </ul>
        
        <dl>
            <dt> 武松 </dt>
            <dd> 景阳冈上的大虎英雄,战斗力 99</dd>
            <dd> 起初打死西门大官人,后逃逸,还俗为僧 </dd>
            <dt> 武大 </dt>
            <dd> 驰名餐饮企业家,战斗力 0 </dd>
        </dl>
        
    
    </body>
</html>

图像标签

常见的图像格式
JPG
GIF
PNG
BMP

图片的相对路径


所谓相对路径,就是绝对于本人的指标文件地位。例如下面的例子,“11111111.html”文件里援用了“11ha.jpg”图片,因为“11ha.jpg”图片绝对于“11111111.html”来说,是在同一个目录的,那么在“11111111.html”文件里应用以下代码后:

<img src=“11ha.jpg”alt=“小女孩”/>  

只有这两个文件的绝对地位没有变 (也就是说还是在同一个目录内),那么无论上传到 Web 服务器的哪个地位,在浏览器里都能正确地显示图片。

当图片在 image 文件夹里时:

src="image/11ha.jpg" alt="小女孩" />  

如果在 image 里很深的文件夹,也能够始终列举上来:

<img src="image/renwu/11ha.jpg" alt="小女孩" />  

如果 html 文件在比图片深一层的文件夹里:

<img src="../11ha.jpg" alt="小女孩" />  

如果 html 文件在比图片深两层的文件夹里,就在后面再列举两个点“..”,深几层列举几次。

<img src=“../../11ha.jpg”alt=“小女孩”/>  

图片在 html 文件上两级 image 文件夹中的 renwu 文件夹里

<img src=“../../image/renwu/11ha.jpg”/>  

链接标签

<a href="path" target="指标窗口地位"> 链接文本或图像 </a>

href: 链接门路
target: 链接在哪个窗口关上, 罕用值:_self、_blank

正文完
 0