【HTML学习】——HTML基础知识

HTML(Hyper Text Markup Language 超文本标记语言)


【1】HTML结构

(1)“头”部分:提供网页信息
(2)“主体”部分:提供网页页面的内容

  • HTML使用标签(markup tag) 描述网页
  • 例子:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>小杨</title>
  </head>
  <body>
    <h1>我是小杨我就这样</h1>
    <hr />
    {% for i in list(range(1, 20)) %}
    <li>{{ i }}</li>
    {% endfor %}
  </body>
</html>

在这里插入图片描述

<html>...</html>之间的文本描述网页
<body>...</body>之间的文本描述页面主体内容
<h1>...</h1>之间的文本显示为页面内容的标题
<p>...</p>之间的文本显示为段落(paragraph)
<html lang='en'>lang为属性language,表示语言为英语
{{ ... }}双括号里面表示为参数变量
<li>...</li>表示为列表(默认默认无序)


【2】HTML元素

  • HTML元素是从==开始标签(开放标签)到结束标签(闭合标签)==的所有代码
  • HTML标签对大小写不敏感
  • 空元素:没有内容的HTML元素标签

【3】HTML属性

  • HTML标签可以添加属性
<html lang="en"> # lang就是属性语言
  • 链接:标签<a>定义,属性href指定链接地址
<a href="http://www.baidu.com">...</a> # 这是一个连接

【4】HTML标题

  • 标题是通过<h1>~~<h6>六个等级定义的

<h1>...</h1>:最大号标题
...
<h6>..</h6>:最小号标题

  • 浏览器会自动的在标题的前后添加空行

注意:请使用<h>..</h>仅仅用于标题,不要用于加粗。
因为搜索引擎会使用标题作为网页的结构和内容的索引


【5】HTML水平线

  • <hr/>用于创建水平线(分割线)
<p>我是</p>
<hr/>
<p>小杨</p>
<hr/>
<p>我就这样</p>

在这里插入图片描述


【6】HTML段落

  • 可以把HTML文档分割成多个段落<p>
  • 浏览器会自动在段落前后添加空行

【7】HTML空行

  • <br/>

【8】HTML输出

  • HTML无法确定输出的效果

猜你喜欢

转载自blog.csdn.net/weixin_44478378/article/details/105833196