前端开发（一）：HTML入门之标签

最新推荐文章于 2024-08-01 11:39:49 发布

lyd1995

最新推荐文章于 2024-08-01 11:39:49 发布

阅读量527

点赞数

分类专栏：前端开发 HTML

本文链接：https://blog.csdn.net/lyd1995/article/details/87720499

版权

前端开发同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

前端开发（一）：HTML入门之标签

1、前端开发：也称为web前端开发，它指的是基于web的互联网产品的页面（界面）开发及功能开发

互联网产品：指网站为满足用户需求而创建的用于运营的功能及服务。百度搜索、淘宝、QQ、微博等等都是互联网产品。

前端工程师：按照UI设计师的效果图，完成产品动态页面、动态效果

后端工程师：数据库设计、业务功能开发

2、前端开发需要的技术
（1）与UI设计师沟通，需要掌握一些Photoshop技能
（2）HTML语言和CSS语言：将效果图布局为页面
（3）JavaScript语言：页面功能开发
（4）JavaScript的库和框架：统一开发，提高效率

一、HTML概述

超文本标记语言，标准通用标记语言下的一个应用。是网页制作必备的编程语言。

“超文本”就是指页面内可以包含图片、链接（超链接），甚至音乐、程序等非文字元素。

超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

这种语言由一个个的标签组成，用这种语言制作的文件保存的一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页。

主流的网页编写：XHTML1.0和HTML5

HTML5格式：

<!DOCTYPE html>
<html lang="en">    <! lang="en"    定义网页的语言为英文。 lang="zh-CN"定义网页语言为中文>

<head>      <!设置标题>
    <meta charset="UTF-8">  <!设置编码格式>
    <title>test</title>     <!设置网页标题标题>
</head>

<body>      <!显示网页内容>
    hello world！

</body>

</html>

用<>括起来的是标签
用<!>或者<!-- -->括起来的是注释

二、HTML标签

1、标题标签

通过<h1>、<h2>、<h3>、<h4>、<h5>、<h6>标签可以在网页上定义6种级别的标题。这些网页标题都是显示在网页上的，因此写在body标签内部。

2、P标签

<p>表示段落，注意：
（1）首行空格无效
（2）多个空格只显示一个
（3）换行无效
（4）无法显示<和>，因为会被误认为标签

3、字符实体

对于代码中成段的文字，如果文字间想空多个空格或者是想换行可以使用文字实体
（1）空格： 
（2）尖括号：>（大于号），<（小于号）

4、换行标签

使用<br />可以强制换行

5、块标签

<div>标签：块元素，类似于p标签（不过p标签是有具体语义的，它表示段落），表示一块内容，没有具体语义，不带有任何样式（p标签本身带有样式）
块标签里面可以嵌套其他的标签，比如标题，或者是别的

<span>标签：行内元素，表示一行中的一小段内容，没有具体语义，本身不带样式。

6、含样式与语义的标签

（1）<em>标签：行内元素，表示语气中的强调词。实际使用，是为了给行内元素样式，把文字变成斜体
（2）<i>标签：行内元素，表示专业词汇，也能把文字变成斜体
（3）<b>标签：行内元素，表示文档中的关键字或者产品名，能够加粗字体
（4）<strong>标签：行内元素，表示非常重要的内容，可以加粗字体

7、语义化的标签

主要是为了搜索引擎在爬网的时候能够认识这些标签，理解文档结构，方便网站的收录。
主要的语义有：
h1：表示标题
p：表示段落
ul、li：表示列表
a：表示链接
dl、dt、dd：表示定义列表

三、HTML图片标签

1、img标签

<img>标签：可以在网页上插入一张图片，它是独立使用的标签，它的常用属性：

src属性：定义图片的引用地址
alt属性：定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片，盲人读屏软件会读取这个文字，让盲人识别图片

使用示例：
<img src="./images/pic.jpg" alt="产品图片" />

2、相对路径与绝对路径

<img src="./images/pic.jpg" alt="产品图片" />相对路径的写法，“./”表示当前目录，可以省略。

绝对路径是从根文件目录开始找起

写网页一般用相对路径，兼容性更好一些

四、HTML链接标签

`````标签可以在网页上定义一个链接地址，它的常用属性有：

href属性：定义跳转的地址
可以写#，默认返回当前页面顶部
title属性：定义鼠标悬停时，弹出的提示文字框
target属性：定义链接窗口打开的位置
target="_self"：缺省值，新的页面会替换原来的页面
target="_blank"：新页面会在新开的一个浏览器窗口打开

示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>个人主页</h1>

    <h2>简介：</h2>

    <a href="b.html" target="_blank">
        前往另一个网页
    </a><br />

    <a href="https://blog.csdn.net/lyd1995" target="_blank">
        我的博客
    </a><br />

    <a href="https://www.baidu.com" title="前往百度" target="_blank">
        <img src="1.jpg" alt="图片" />
    </a>

    <a href="#">
        缺省链接
    </a>

</body>
</html>

五、HTML列表标签

1、有序列表

<ol>标签：表示列表整体
<li>标签：列表内容（会有1、2、3…）

2、无序列表

<ul>标签：表示列表整体
<li>标签：列表内容（没有1、2、3…）

3、定义列表

<dl>标签：表示列表整体
<dt>标签：定义术语的题目
<dd>标签：术语的解释

六、HTML表格标签

（1）<table>标签：声明一个表格，常用属性：

border：定义表格的边框，设置值为数值
cellpadding：定义单元格内容与边框距离
cellspacing：定义单元格与单元格之间的距离
align：设置整体表格相对于浏览器的水平对齐方式，设置值：left、center、right

（1）<tr>标签：定义表格中的一行

（1）<td>和<th>标签：定义一行中的一个单元格
<td>：普通单元格
<th>：表头单元格
常用属性：

align：设置单元格中内容的水平对齐方式
valign：设置单元格中内容的垂直对齐方式：top、middle、bottom
colspan：设置单元格水平合并
rowspan：设置单元格垂直合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>表格</h1>
    <!-- table>(tr>td*5)*4 -->
    <table border="1" width="400" height="600">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>