html学习笔记（一）

时隔一年，又翻出了html书与视频，从头再来。

这几天回顾了一些常用标签。

1.html是什么？

html又称为超文本标记语言，是一种标识性的语言。它包括一系列标签，通过这些标签可以将网络上的分散的Internet资源连接为一个逻辑整体。html文本石油html命令组成的描述性文本，html命令可以说明文字，图形，绘画，声音，表格，链接等。

2.html使用什么IDE？

目前博主在用的是HBulider X,之前也有用过Sublime Text，但是博主觉得HBulider X更加好用一些。HBulider X相较于Sublime Text更快一些，而且本身较小，下载方便，对代码的补全反应也很快，但有时也会出现卡顿的情况。

3.新建的html文件`

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
  </body>
</html>

其中在文档的最外层， 文档中的所有文本和html标签都包含在其中，它表示该文档是以超文本标识语专言（HTML）编属写的。

元素是所有头部元素的容器。 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。以下标签都可以添加到 head 部分：

、、、、</meta></link></base>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>今天很喜欢小水的网页</title>
  </head>
  <body>
  </body>
</html>

实现效果如下图

html学习笔记（一）_html

4.几个简单标签。（以下标签均写在中）

（1）.标题标签

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>今天很喜欢小水的网页</title>
  </head>
  <body>
  <h1>标题1</h1>
  <h2>标题2</h2>
  <h3>标题3</h3>
  <h4>标题4</h4>
  </body>
</html>

实现效果

html学习笔记（一）_html_02

（2）.段落标签

html学习笔记（一）_代码实现_03

(3).a标签 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>今天很喜欢小水的网页</title>
  </head>
  <body>
    <a href="https://i.csdn.net/#/uc/profile">跳转链接</a>
  <p>今天真是美好的一天呢。</p>
  <p>祖国是哺育我们的母亲,是生命的摇篮,是每一个中国人的骄傲,在庆祝您62周年华诞之际,我热血沸腾,思绪澎湃。每当我们仰望五星红旗,每一次唱起国歌,爱国之情就在我们心中激荡。</p>
  </body>
</html>

实现效果

html学习笔记（一）_html_04

其中 href 属性引bai号中写链接的地址，两个尖括号之间为网页上要点击链接的字符。 (4).标签 图片和HTML文本在同一目录下：直接选中图片，添加到scr中 例如：html学习笔记（一）_ide_05 代码实现`


<img src="1.gif" >


实现效果

 (5).列表标签
 ul>li无序列表
 代码实现
<ul>
      <li>无序列表1</li>
      <li>无序列表2</li>
      <li>无序列表3</li>
      <li>无序列表4</li>
      <li>无序列表5</li>
    </ul>

效果
 有序列表
代码实现    <ol>
      <li>有序列表</li>
      <li>有序列表</li>
      <li>有序列表</li>
      <li>有序列表</li>
      <li>有序列表</li>
    </ol>

实现效果

over



更多内容详见微信公众号：Python研究所

html学习笔记（一）_ide_06