HTML基础

秦俊杰
178 阅读4分钟

HTML教程

[toc]

1. HTML网页的基本结构

  • 1、HTML——超文本标记语言，浏览器解析html标记后，展示内容
  • 2、H5——HTML5(目前流行比较火）
  • 3、网页的基本结构 　　 - 3.1 静态网页的拓展名htm或html 　　 - 3.2 新建网页的步骤： - 1、新建文本文档，更改拓展名为htm或html - 2、编写网页的基本结构，并报春 - 3、双击html文件，在浏览器中运行
  • 3.3 网页的基本结构
<html>
　　　<head>
　　　　　　<title>网页的标题</title>
　　　　　　<body>网页显示的内容</body>
　　　</head>
</html>
  • 4、HTML语言的特点 标记，大部分的都是成对存在 不区分大小写 H5区分大小写 浏览器解析HTML标记
  • 5、前端页面的三层结构：
    • 结构层 html
    • 表示层 css
    • 行为层 JavaScript

2. HTML基础

2.1 HTML标题

  • HTML标题是通过<h1>-<h6>标签来定义的
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>

2.2 HTML段落

  • HTML 段落是通过标签 <p> 来定义的
  • 特点：
    • 1.文本在一个段落中会根据浏览器窗口的大小自动换行
    • 2.段落和段落之间保有空隙
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>

2.3 HTML 换行

  • 换行标签
    • 1.是一个单标签(强制换行标签)
    • 2.<br/>只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距

2.4 HTML 链接

  • HTML 链接是通过标签<a>来定义的
<a href="https://www.baidu.com">百度链接</a>

2.5 HTML 图像

  • HTML 图像是通过标签 <img> 来定义的
    • <img src=""/>是个单标签
//本地路径
<img src="/images/meizi.png" />
  • alt 当图片显示不出来时，可使用为文字替换
<img src="" alt="你要找的图片丢失啦"/>
  • title 提示文本，鼠标放到图像上，即可提示文字 常用
<img src="" alt="你要找的图片丢失啦" title="提示信息！"/>

2.6 HTML 元素

  • HTML元素组成：行内元素，块级元素，空元素（没有结束标签称之为空元素）
    • 行内：只占据自己内容这么大一块 - 行内元素跟在行内元素的后面 - 宽高无用（dispaly：block；将内联元素转换为块级元素）
    • 块级：单独占一行 - 宽高有用 （dispaly：inline；将块级元素转换为内联元素）
  • HTML 元素语法
    • HTML 元素以开始标签起始
    • HTML 元素以结束标签终止
    • 元素的内容是开始标签与结束标签之间的内容
    • 某些 HTML 元素具有空内容（empty content）
    • 嵌套的 HTML 元素
    • 大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。
    • HTML 文档由相互嵌套的 HTML 元素构成。

2.7 HTML 文本格式化

  • 加粗（推荐使用strong）
<strong>加粗文字</strong>
<b>加粗文字</b>
  • 倾斜（推荐使用em）
<em>倾斜文字</em>
<i>倾斜文字</i>
  • 删除线（推荐使用del）
<del>删除</del>
<s>删除</s>
  • 下划线（推荐使用insl）
<ins>下划线</ins>
<u>下划线</u>

2.8 HTML 布局

  • <div>和<span>

    • <div>这是一个div标签，一个标签占一行
    • <span>这是一个span标签，一行可以放多个span

  • 图片高宽设置

    • width="px" （宽度）
    • height="px" （高度）
      • 一般情况下宽高修改其中之一，另一个等比例缩放即可，可以避免图片压缩失真

2.9 HTML 头部

  • HTML <head> 元素

    • <head> 元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

  • HTML <base> 元素

    • <base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
<head>
<base href="http://www.baidu.com/images/" target="_blank">
</head>
  • HTML <link> 元素
    • 标签定义了文档与外部资源之间的关系
    • 标签通常用于链接到样式表 
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
  • HTML <style> 元素
    • <style> 标签定义了HTML文档的样式文件引用地址.
    • 在<style> 元素中你也可以直接添加样式来渲染 HTML 文档
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
  • HTML <meta> 元素
    • 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析
    • META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
    • 一般放置于 区域
//定义搜索关键词
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
//为网页定义描述内容
<meta name="description" content="免费 Web & 编程 教程">

2.10 HTML 列表

  • HTML 支持有序、无序和自定义列表:
  • HTML无序列表
    • 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。 无序列表使用 <ul> 标签
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

如图：

QQ图片20220324171054.png

  • HTML 有序列表
    • 有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于
        标签。每个列表项始于 <li> 标签。 
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

如图：

QQ图片20220324171239.png 同样如果使用A，a,I等字符同样能识别并按照顺序标记

  • HTML 自定义列表
    • 自定义列表不仅仅是一列项目，而是项目及其注释的组合
    • 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
avatar
文章
阅读
粉丝