前端基础——HTML（自学用，未完待续）

最新推荐文章于 2024-03-24 22:01:26 发布

Fruit_Caller

最新推荐文章于 2024-03-24 22:01:26 发布

阅读量203

点赞数

分类专栏：前端网页制作文章标签： html 前端

本文链接：https://blog.csdn.net/CHUANZExiaodaima/article/details/119318777

版权

前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

网页制作

8 篇文章 0 订阅

订阅专栏

先贴一个学习前端的好网站：Web入门
废话不多说直接上代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的测试站点</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>

这是一段简短的HTML代码，很清楚的我们看到除了最上面那一行之外，其他的代码都被<html>和</html>括起来了，接着看嵌套里面还有嵌套，我们可以把整个html文档看做是一个人，他有头 <head></head>，也有体 <body></body>，头和体中间分别有自己相应的代码。
回过头来用英文看第一行，意思很简单就是文档类型 html。
下面这是运行结果：
在这里插入图片描述
可以看出<title>指的是网页的名称，而<p>指的是段落文本。

<meta charset="utf-8">  

utf-8 是一个通用的字符集，它包含了任何人类语言中的大部分的字符。

在HTML中应用CSS和JavaScript
我们通常用两种方式来在我们的html中使用css和JavaScript

<script>元素来引入JavaScript文档，一般将其放在 </body>标签之前
<link> 元素来引入css文档，一般将其放在文档头部
下面是两个例子：

<link rel="stylesheet" href="my-css-file.css">
<script src="my-js-file.js"></script>

href跟src均为路径的意思，也就是.css和.js文档所在位置

HTML 文字处理基础
介绍了 HTML的使用方法：在一段文本中添加标题和段落，强调语句，创建列表等等。
基础: 标题和段落

标题用元素<hn>来标识，这里的n代表多少级标题，一级就是h1，二级就是h2
段落用来标识，将段落文本放在和之间

例：

<h1>三国演义</h1>

<p>罗贯中</p>

<h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>

<p>话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉……</p>

<h2>第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</h2>

<p>且说董卓字仲颖，陇西临洮人也，官拜河东太守，自来骄傲。当日怠慢了玄德，张飞性发，便欲杀之……</p>

<h3>却说张飞</h3>

<p>却说张飞饮了数杯闷酒，乘马从馆驿前过，见五六十个老人，皆在门前痛哭。飞问其故，众老人答曰：“督邮逼勒县吏，欲害刘公；我等皆来苦告，不得放入，反遭把门人赶打！”……</p>

在这里插入图片描述

列表 Lists
列表我们有两种：

无序列表，用ul元素标识，意思就是unordered list
有序列表，用ol元素标识，意思就是ordered list

例一：

<ul>
  <li>豆浆</li>
  <li>油条</li>
  <li>豆汁</li>
  <li>焦圈</li>
</ul>

在这里插入图片描述
例二：

<ol>
  <li>沿着条路走到头</li>
  <li>右转</li>
  <li>直行穿过第一个十字路口</li>
  <li>在第三个十字路口处左转</li>
  <li>继续走 300 米，学校就在你的右手边</li>
</ol>

在这里插入图片描述

每一项要用li元素括起来，不然将会以横着而不是竖着的方式排列
还可以进行两种列表的嵌套：

<ol>
  <li>先用蛋白一个、盐半茶匙及淀粉两大匙搅拌均匀，调成“腌料”，鸡胸肉切成约一厘米见方的碎丁并用“腌料”搅拌均匀，腌渍半小时。</li>
  <li>用酱油一大匙、淀粉水一大匙、糖半茶匙、盐四分之一茶匙、白醋一茶匙、蒜末半茶匙调拌均匀，调成“综合调味料”。</li>
  <li>鸡丁腌好以后，色拉油下锅烧热，先将鸡丁倒入锅内，用大火快炸半分钟，炸到变色之后，捞出来沥干油汁备用。</li>
  <li>在锅里留下约两大匙油，烧热后将切好的干辣椒下锅，用小火炒香后，再放入花椒粒和葱段一起爆香。随后鸡丁重新下锅，用大火快炒片刻后，再倒入“综合调味料”继续快炒。
    <ul>
      <li>如果你采用正宗川菜做法，最后只需加入花生米，炒拌几下就可以起锅了。</li>
      <li>如果你在北方，可加入黄瓜丁、胡萝卜丁和花生米，翻炒后起锅。</li>
    </ul>
  </li>
</ol>

在这里插入图片描述
强调语句
我们强调一句话中的某些词语，或者强调整句话，有多种方式实现：

粗体，有两种元素来标记strong和b
斜体，有两种元素来标记em和i
下划线，用元素u来标记

例一：

<p>This liquid is <strong>highly toxic</strong>.</p>

<p>I am counting on you. <b>Do not</b> be late!</p>

p和strong，p和b是可以嵌套的
文本的东西几乎都可以嵌套

在这里插入图片描述
例二：

<p>This liquid is <strong>highly toxic</strong> —
if you drink it, <strong>you may <em>die</em></strong>.</p>

在这里插入图片描述
例三：

<p>
  红喉北蜂鸟（学名：<i>Archilocus colubris</i>）
  <u>是北美东部最常见的蜂鸟品种。<u>
</p>

在这里插入图片描述
建立超链接

<p>我创建了一个指向
<a href="https://www.mozilla.org/zh-CN/">Mozilla 主页</a>
的超链接。
</p>

Fruit_Caller

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端基础——HTML（自学用，未完待续）

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>我的测试站点</title> </head> <body> 这是我的页面 </body></html>这是一段简短的HTML代码，很清楚的我们看到除了最上面那一行之外，其他的代码都被&lt
复制链接

扫一扫