HTML入门

最新推荐文章于 2024-05-20 22:08:52 发布

LYE_LYE

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量108

点赞数 1

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/LYE_LYE/article/details/119001369

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML入门教程

HTML，全称 Hyper Text Markup Language，又称作超文本标记语言。 HTML 并不是一门编程语言，而是一门描述性的“标记语言”。

一、如何编译

1.在线网站进行编译。例如 https://c.runoob.com/front-end/61
2.在记事本中保存由 HTML 代码构成的纯文本，然后将.txt重命名为.html。拖动到对应浏览器拉开即可。
3.建议下载HBuilder软件。

二、HTML代码的简单例子

<!DOCTYPE html>//用来包围当前网页的所有 HTML 代码，声明文档
<html lang="zh-CN">
<head>//表示网页的头部，用来设置一些网页的参数，在浏览器中是看不到的
    <meta charset="UTF-8">//指明当前网页的编码格式是 UTF-8
    <title>网页的标题</title>//设置当前网页的标题
</head>
<body>//表示网页的正文内容
    <p>一段文本</p>//用来表示一个段落，能容纳一段文本
    <a href="https://blog.csdn.net/LYE_LYE/article/details/115354066">一个超链接</a>//用来表示一个超链接，用鼠标点击后可以跳转到其它网页
    <ul>//用来表示一个列表，其中的每个 <li> 都是子标签，用来表示一个列表项
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>//表示正文结束
</html>//表示HTML文档结束

上面的代码中有大量的<>符号，这个是HTML的标签，一般<***>表示刚开始，</***>表示结束。

三、URL介绍

网站都具有一个唯一的地址，这种地址称为统一资源定位符（Uniform Resource Locator，URL），也被称为网址。

1.URL的构成

URL 遵守一种标准的语法，它由协议、主机名、域名、端口、路径、以及文件名这六个部分构成. 具体语法如下

scheme://host.domain:port/path/filename//分别表示协议、主机名、域名、端口、路径、以及文件名

             协议	                                                                      使用场景
http（HyperText Transfer Protocol）	                            超文本传输协议。http 协议可以将编码为超文本的数据从
                                                                一台计算机传送到另一台计算机，不进行加密。
                                                                
https（HyperText Transfer Protocol over SecureSocket Layer）	安全超文本传输协议。以安全为目标的 http 通道，安全
                                                                网页，进行加密交换。
                                                                
ftp（File Transfer Protocol）	                                文件传输协议。

file	                                                        本机上的文件。


            主机名  ：  例如www
            
            域名    ：Web 服务器遵守数字网际协议（Internet Protocol，IP），每一台连接到因特网的计算机都有一个固定的 IP 地址。
            
            端口    ：端口用来定义主机上的端口号。如果不写，http 的默认端口号是 80，
                      https 的默认端口号是 443，ftp 的默认端口号是 21。
            路径    ：路径指定服务器上文件的所在位置。
            文件名  ：无。
            .com  或者  .net  叫做域扩展名。

四、块级元素与行内元素

块级元素	说明	行内元素	说明
div	最典型的块元素	a	超链接
p	表示段落	span	常用行级
h1-h6	表示一到六级标题（加粗）	strong	加粗强调
br	表示换行	b	加粗不强调
ol	有序列表	em	斜体不强调
ul	无序列表	img	图片
		input	输入框
		select	下拉列表

块级元素与行内元素可以相互嵌套，但是不建议行内套块级。

五、各标签的用法及例子

1、ol有序列表

<ol>
      <li>第一</li>
      <li>第二</li>
      <li>第三</li>
</ol>

运行结果：

第一
第二
第三

2、ul无序列表

 <ul>
      <li>第一</li>
      <li>第二</li>
      <li>第三</li>
</ul>

运行结果：

第一
第二
第三

3、ol定义列表

<dl>
        <dt>第一章</dt>
        <dd>第一节</dd>
        <dd>第二节</dd>
        <dd>第三节</dd>
</dl>
<dl>
        <dt>第二章</dt>
        <dd>第一节</dd>
        <dd>第二节</dd>
        <dd>第三节</dd>
</dl>

运行结果：

第一章

第一节

第二节

第三节

第二章

第一节

第二节

第三节

4、table表格

<table border="1" style="border-collapse: collapse;">
//border表示边框线的宽度   
//style="border-collapse: collapse表示设置为单线边框
   <caption>成绩单</caption>
   <tr>
     <th rowspan="2">姓名 </th>//表示将这个和这个下面的一个单元格合并，以此类推。
     <th rowspan="2">班级 </th>
     <th colspan="3">成绩</th>//表示将这个和这个右边的俩个的单元格合并，以此类推
   </tr>
   <tr>//表示一行
     <th>语文</th>//表示一行里面的第一个元素
     <th>数学</th>//同上
     <th>英语</th>//同上
   </tr>
   <tr>
     <td>张三</td>
     <td>一班</td>
     <td>100</td>
     <td>100</td>
     <td>100</td>
   </tr>
    <tr>
     <td>李四</td>
     <td>二班</td>
     <td>100</td>
     <td>100</td>
     <td>100</td>
     </tr>
</table>

注意：

合并以后需要在下一行的<tr>中少写一个的<th>。
即使一个单元格里面没有任何内容，但是我们依然需要加入&nbsp(空格）

运行结果：

成绩单
姓名	班级	成绩
姓名	班级	语文	数学	英语
张三	一班	100	100	100
李四	二班	100	100	100

5、锚点链接

回到指定位置，也可以设置为跳转到其他页面的指定位置，需设置好id的值

<body>
   <p id="content"></p>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
    <p>12</p>
    <p>13</p>
    <p>14</p>
    <p>15</p>
    <p>16</p>
    <p>17</p>
    <p>18</p>
    <p>19</p>
    <p>20</p>
    <p>21</p>
    <a href="#content">回到1</a>
</body>

回到1

6、head标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="LYELYE" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="expires" content="31 Dec 2090">
    <title>文档的标题</title>//表示网站的名称
    <link rel="stylesheet" href="URL">//通过href 外部引用CSS文件
    <style></style>//在内部编写CSS
    <script src="url"></script>//通过src 外部引用CSS文件
</head>
<body>
</body>
</html>

然后就是特别的说一下href 与src的区别：
href：浏览器在解析当前文件时，用href浏览器不会停下来，只是添加一个去该网站的接口，相当于网址导航里面，只是给一个入口，并不会全部网站都给你加载出来，需要哪个，然后点哪个，才会去加载出来。
src:会把该地址里的文件或者别的加载到该网页中。

7、img标签

<img src="URL" 图片的地址
      width="100"  图片的宽，单位为像素
      height="100" 高
      title="鼠标移动到该图片上面的提示" 
      alt="无法载入时显示" 
/>

8、a超链接

<a href="url"  target="opentype">链接文本</a>

例如链接到2048小游戏

<a href="https://blog.csdn.net/LYE_LYE/article/details/115354066" target="_blank">2048小游戏</a>

运行结果：
2048小游戏

target属性是指该链接的打开方式，例如在新的窗口中打开新页面、在现有的窗口中打开新页面，原来的窗口将会被覆盖。

常见的打开方式如下

_self	默认的，在现有的窗口中打开新页面，原窗口将被覆盖。
_blank	在新的窗口中打开新页面。
_parent	在当前框架的上一层打开新页面。
_top	在顶层框架中打开新页面。

9、form标签

表单：类似于各网站的登录框

在这里插入代码片

10、meta

后续会补。

LYE_LYE

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML入门

HTML入门教程一、如何编译在记事本中保存由 HTML 代码构成的纯文本，然后将.txt重命名为.html。拖动到对应浏览器拉开即可。二、HTML代码的简单例子<!DOCTYPE html>//用来包围当前网页的所有 HTML 代码<html lang="zh-CN"><head>//表示网页的头部，用来设置一些网页的参数，在浏览器中是看不到的 <meta charset="UTF-8">//指明当前网页的编码格式是 UTF-8 &
复制链接

扫一扫