WEB之HTML

最新推荐文章于 2023-07-07 19:00:15 发布

大海是蓝色的

最新推荐文章于 2023-07-07 19:00:15 发布

阅读量812

点赞数

分类专栏： WEB

本文链接：https://blog.csdn.net/weixin_47314449/article/details/114789559

版权

WEB 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、HTML简介

HTML是超文本标记语言（Hyper Text Markup Language)。其中，超文本是指连接单个网站或多个网站间的网页的链接。HTML不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML、CSS、JavaScript是构建web程序的三剑客。

二、HTML文档

1、创建html文件

我使用的软件是Visual Studio Code
       首先打开Visual Studio Code软件，点击左上角File,选择Open Folder…,选择创建好的文件夹打开。文件夹的位置可以自己确定，但是不建议在C盘创建。
在这里插入图片描述
       我创建夹名为WEB,在web网页制作中一般不只是有html文件，还有css、javascript等等，所以最好进行分类存放，因此，我们可以在WEB这个文件夹之下再创建一个html文件夹专门存放html文件。

       接下来就可以创建html文件开始写了，在创建html文件的时候一定要加上后缀.html，以表示是html格式。
在这里插入图片描述

在这里插入图片描述

2、编写html文件内容

在文件里面写入如下内容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>页面标题</title>
</head>
<body>
    <h1>我的第一个WEB页</h1>
    <p>当前有点丑：）</p>
</body>
</html>

编辑好之后，在编辑区点击鼠标右键选择Open with Live Server，就可以看到其展示效果;
在这里插入图片描述

3、html文档结构

html使用“标记”来注明文本、图片和其他内容，便于在浏览器中显示。HTML标记包含一些规定元素，如<head>,<title>,<body>,<header>,<footer>等等。html文档由一个个元素组成，而元素由一对标签组成。
如：

<p>当前有点丑：）</p>

①开始标签（Opening tag):包含元素的名称，比如上例中的p，被左右角括号包围起来。表示元素从这里开始或开始起作用；
②结束标签(Closing tag)：与开始标签相似，只是其在元素名之前包含了一个斜杠。标志着元素的结尾；
③内容(Content):元素的内容。比如上面的例子：当前有点丑：）；
④元素（Element):开始标签、结束标签与内容相结合，便是一个完整的元素。

html文档基本结构，包含以下内容：
①<!DOCTYPE html>:声明文档类型。可有可无。
②<html></html>:<html>元素里面包含html整个页面的所有内容。
③<head></head>:包含了所有在HTML页面中但是不想在html页面中显示的内容。
④<meta charset="utf-8">:设置文档使用utf-8字符集编码。
⑤<title></title>:设置页面标题，出现在浏览器标签上。
⑥<body></body>:包含所有我们在页面上看到的内容。如：文本，图片，音频。

在HTML中如果要将内容设置为注释，需要用括起来。
快速生成HTML骨架可以采用的方法有：
1、html:5+Tab键
2、!+Tab键

三、HTML中常用的标签

HTML中的标签有双标签和单标签。
双标签的格式：<标签名>内容</标签名>,例如：<body></body>就是双标签。
单标签的格式：<标签名 />,例如：<br />、<hr />
标签之间的关系可以是并列关系，也可以是嵌套关系。

1、排版标签

（1）标题标签

HTML中提供了从大到小6级标题，分别是：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。

<body>
    <h1>我的第一个WEB页</h1>
    <p>当前有点丑：）</p>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
</body>

显示效果如下：
在这里插入图片描述

（2）段落标签

段落标签格式：<p>内容</p>。例如：

      <p>我是第一个段落。</p>
      <p>我是第二个段落。清晨醒来，打开窗帘，一抹慵懒的阳光照进来，暖暖的，柔柔的，时光瞬间变得温婉静美，打开音乐，沏一杯花茶，躺在床上，
        暖阳淼淼，茶香淡淡，音乐袅袅，闭上眼睛，嘴角轻轻上扬，算是对着光阴的镜子，和自己撒个娇。时钟滴答滴答，一秒一秒的走着，毫无表情，
        不缓不急，过去了就是过去了，或许，有很多事情，我们会缅怀，会留恋，会铭刻，会珍藏，但那还是属于过去，还是被盖上了刻有“曾经”两字的印章，
        来不及细思量，来不及描绘，来不及逗留，转瞬即逝，洒下一地落英碎碎念，留下一串心语声声慢。生命只是时间中的一个停顿，一切的意义都只在它发生的那一时刻，如果可以，不要等！</p>
      <p>我是第三个段落。</p>

效果如下：
在这里插入图片描述

（3）水平线标签

水平线标签格式：<hr />。如：

	  <p>我是第一个段落。</p>
      <hr />
      <p>我是第二个段落。</p>

结果如下：
在这里插入图片描述

（4）换行标签

水平线标签格式：<br />。如：

      <p>我是第一个段落。</p>
      <br />
      <p>我是第二个段落。</p>

结果如下：
在这里插入图片描述

（5）div、span标签

<div></div>和<span></span>标签均无语义，其主要用于布局。

2、超链接

超链接在网页制作中是常用的标签，比如图片、文本等，都可以使用超链接。
超链接的语法:

<a href="https://www.baidu.com/" target="-blank">百度一下</a>

href代表我们要跳转到的地址URL(Uniform Resorce Locator)
target的属性为-blank表示在新的页面打开超链接（在当前页面打开用-self)
在<a>和</a>之间的内容是显示在网页中，提示用户这个链接的内容。

锚点：用于标记页面的某个元素或位置。通过锚点，可以在长页面内实现跳转。先使用id属性生成元素锚点，然后再利用超链接指向该锚点。
注意：元素id值必须是唯一的，超链接中的地址需要有#号。

3、图片

<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">

src属性代表要显示的图片文件的位置URL，即是图片文件的路径。
alt属性当获取图片出现问题时显示的文字（占位符）。
可以指定图片的宽度和高度。

对于文件的路径，一般分绝对路径和相对路径两种。上面的例子是绝对路径。相对路径如下:

示例解释
<img src=“picture.jpg”> 该图片文件与当前文档在同一目录
<img src=./images/picture.jpg"> 该图片文件在当前目录下的images目录中
<img src="…/picture.jpg"> 该图片位于上级目录
<img src="…/…/picture.jpg"> 该图片位于上级目录的上级目录

示例	解释
<img src=“picture.jpg”>	该图片文件与当前文档在同一目录
<img src=./images/picture.jpg">	该图片文件在当前目录下的images目录中
<img src="…/picture.jpg">	该图片位于上级目录
<img src="…/…/picture.jpg">	该图片位于上级目录的上级目录

如何用图片做成一个超链接？
想要实现图片超链接，首先需要一张图片，然后还需要一个超链接，把他们合在一起就可以实现图片链接了。代码展示如下：

<a href="brief.html"><img src="../images/1.jpeg" height="500px"></a>

4、表格

表格的实现是由<table></table>标签来实现的。具体实例如下：

<table>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Age</th>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Smith</td>
          <td>50</td>
        </tr>
        <tr>
          <td>Eve</td>
          <td>Jackson</td>
          <td>94</td>
        </tr>
      </table>

效果如下：
在这里插入图片描述
<tr>表示行, <td>表示行中的单元, <th>是表头的单元（将会加粗显示）。

5、列表

列表可分为有序列表、无序列表、自定义列表。

无序列表
无序列表由<ul></ul>标签来实现。默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。
如：

<ul type="square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

结果如下：
在这里插入图片描述

其中，<li></li>标签表示列。<ul></ul>标签里面只能放<li></li>标签。

有序列表
有序列表由<ol></ol>标签来实现。默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。
代码如下：

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

效果如下：
在这里插入图片描述

自定义列表
自定义列表由<dl></dl>标签来实现。
如：

      <dl>
        <dt>BeiJing</dt>
        <dd>昌平</dd>
        <dd>通州</dd>
      </dl>

效果如下：
在这里插入图片描述

6、表单

当网站需要获取我们的一些信息如：用户名、密码、选择买什么、买多少、提出意见等等时，我们就需要使用表单（form）来让用户填写或选择。
例如：

<form>
  <!-- 文本框，注意有 placeholder 提示符 -->
  用户名：<br>
  <input type="text" name="name" placeholder="请输入用户名"><br>
  <!-- 密码框 -->
  密码：<br>
  <input type="password" name="ps" placeholder="请输入密码"><br>
  年龄：<br>
  <!-- 数字输入框，注意 min 和 value 属性-->
  <input type="number" name="age" min="18" value="18"><br>
  <!-- 单选按钮, 注意 checked 属性 -->
  性别：<br>
  <input type="radio" name="gender" value="male" checked> 男<br>
  <input type="radio" name="gender" value="female"> 女<br>
  <input type="radio" name="gender" value="other"> 其它<br>
  <!-- 下拉列表，注意 selected 属性 -->
  党派：<br>
  <select name="party">
    <option value="D">民主党</option>
    <option value="R" selected>共和党</option>
    <option value="N">无党派</option>
  </select><br>
  <!-- 多选框 -->
  您有哪些交通工具：<br>
  <input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
  <input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
  <input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
  <input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
  <!-- 日期选择器 -->
  您的工作日期：<br>
  <input type="date"><br>
  <!-- 文件选择器 -->
  上传您的照片:<br>
  <input type="file" name="photo"><br>
  <!-- 文本输入区域，注意 rows 和 cols 属性 -->
  您的建议：<br>
  <textarea name="message" rows="5" cols="30">
    The cat was playing in the garden.
  </textarea><br><hr>
  <!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
  <input type="submit" value="提 交">
  <input type="reset" value="重 置">
</form>

当提交时，表单中没有name属性的元素将不会提交，比如上面工作日期的选择器。有name属性的元素其value的值将提交给服务器。

7、文本格式化标签

经常使用的格式化标签如下：

加粗：<b></b>或<strong></strong>.
斜体：<i></i>或<em></em>
加删除线：<s></s>或<del></del>
加下划线：<u></u>或<ins></ins>

例如：

      <b>我是一行加粗的文字</b>
      <strong>我是也一行加粗的文字</strong>
      <i>我是斜体的</i>
      <em>我也是斜体的</em>
      <s>我有删除线</s>
      <del>我也有删除线</del>
      <u>我有下划线</u>
      <ins>我也有下划线</ins>

结果如下：
在这里插入图片描述

可以看到在浏览器打开后，它们都在一行里面，可以得出，这些元素都是行元素。

四、总结

HTML是一种超文本标记语言。他有自己的基本结构格式，HTML的内容是由一个个标签来组成的，这些标签可以是双标签，也可以单标签，大部分都是双标签。常用的单标签有：<hr />、<br />、<img />。HTML的标签元素可以分为行元素和块元素。有兴趣的伙伴可以去查一查行元素和块元素都有哪些。欢迎大家再下方评论留言！♥

大海是蓝色的

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
WEB之HTML

一、HTML简介二、HTML文档1、创建html文件2、编写html文件内容3、html文档结构一、HTML简介       HTML是超文本标记语言（Hyper Text Markup Language)。其中，超文本是指连接单个网站或多个网站间的网页的链接。HTML不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML、CSS、JavaScript是构建web程序的三剑客。二、HTML文档1、创建html文件我使用.
复制链接

扫一扫