前端学习第一次-CSDN博客

本文链接：https://blog.csdn.net/li20221120/article/details/130665647

一.什么是网页？

网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。网页是网站中的一页，通常是HTML格式的文件，它要通过浏览器来阅读。

网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。

二.什么是HTML？

HTML不是一种编程语言，而是一种标记语言，标记语言是一套标记标签。

三.web标准

主要包括结构、表现、行为三个方面。

四.语法基础

1.HTML标签是由尖括号包围的关键词，例如<html>。

2.HTML标签通常是承兑出现的，例如<html>和</html>,称为双标签，分别对应开始与结束。

3.有些特殊的标签必须是单个标签，例如<br />,称为单标签。

五.各种标签

1.标题、段落、换行、文本格式化、div、span标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个页面</title>
</head>
<body>
    <p>在我们这个年龄，阳光帅气，没有忧愁。每次下课铃声在我耳畔游荡，<br />
        我就会冲向操场，和小伙伴们疯狂地奔跑，望着望着天上的朵朵白云，心里没有惆怅；
        望着望着地上刚发芽的小草，一股暖流在内心流淌，正如那滔滔的黄河水.</p>
    <P>望着望着那宏伟的教学楼，这里是我们学习知识的地方，和操场相反，<br />
        它供我们玩耍，足球、跳远、跑步，我样样精通。但玩过头还是不行。</P>
        我是<strong>加粗</strong>标签
        我是<em>倾斜</em>标签
        我是<del>删除线</del>标签
        我是<ins>下划线</ins>标签
        <div>我是div标签我单独占一行</div>
        <span>百度</span>
        <span>新浪</span>
        <span>搜狐</span>
</body>
</html>

2.图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片</title>
    <h4>图片标签</h4>
</head>
<body>
    <img src="downloadfile.jpeg" alt="很棒" title="你好棒啊！" width="300" border="15"/>
</body>
</html>

3.超链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接使用</title>
</head>
<body>
    <h4>1.外部链接</h4>
    <a href="https://www.qq.com/" target="_blank">腾讯</a>
    <h4>2.内部链接</h4>
    <a href="gogsijianjie.html" target="_blank">公司简介</a>
    <h4>3.空链接</h4>
    <a href="#">公司地址</a>
    <h4>4.下载链接</h4>
    <a href="downloadfile.zip">下载文件</a>
    <h4>5.网页元素超链接</h4>
    <a href="http://www.baidu.com"><img src="downloadfile.jpeg" width="300"/></a>
</body>
</html>

锚点链接：我们点击链接，可以快速定位到网页中的某个位置

4.表格、表格单元头、相关属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="500">
        <tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
        <tr><td>张三</td> <td>男</td> <td>30</td></tr>
        <tr><td>李四</td> <td>男</td> <td>40</td></tr>
        <tr><td>王五</td> <td>男</td> <td>50</td></tr>
    </table>
</body>
</html>