今天就让我们一起来看一看HTML最基础的东西

HTML基础与代码实现
基础组件
文本格式化
- 看代码和效果便知
其他标签介绍
- base
- head
- link
- style
- meta
- script
- 前面的汇总表格

HTML基础与代码实现

说实话HTML的这些不太陌生，因为在ccf的考试中往年的真题第三题经常会出现HTML的相关知识，世界是圆的，怎么都能绕回来！世界大同！

基础组件

HTML标题

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

HTML段落

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

HTML链接

target属性设置为"_blank", 链接将在新窗口打开

 <a href="https://www.baidu.com">这是一个链接</a>
 <a href="https://www.runoob.com/" target="_blank">访问菜鸟教程!</a>

HTML图像

<img src="/images/1.jpg" /><!--width="258" height="39" -->

HTML空行与水平线

空行

<br>

水平线

<hr>

HTML其他标签(标签参考手册)

HTML参考手册(HTML5标准)

总代码与运行结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <h2>这是一个标题</h2>
    <h3>这是一个标题</h3>
    <p>这是一个段落。</p>
    <p>这是另外一个段落。</p>
    <a href="https://www.baidu.com">这是一个链接</a>
    <br>
     <img src="/images/1.jpg" /><!--width="258" height="39" -->
</body>
</html>

在这里插入图片描述

文本格式化

看代码和效果便知

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <b>这个文本是加粗的</b>
    <br />  
    <strong>这个文本是加粗的</strong>  
    <br /> 
    <big>这个文本字体放大</big>  
    <br /> 
    <em>这个文本是斜体的</em>  
    <br />   
    <i>这个文本是斜体的</i>   
    <br />
    <small>这个文本是缩小的</small>
    <br /> 
    这个文本包含
    <sub>下标</sub>   
    <br />
    这个文本包含
    <sup>上标</sup>
    <br />
    <abbr title="etcetera">etc.</abbr>
    <br />
    <acronym title="World Wide Web">WWW</acronym>
    <br>
    <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
</body>
</html>

在这里插入图片描述

其他标签介绍

base

使用定义页面中所有链接默认的链接目标地址。

<base href="//www.runoob.com/images/" target="_blank">
<a href="//www.runoob.com">菜鸟教程</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。

head

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

可以添加在头部区域的元素标签为: title, style, meta, link, script, noscript 和 base。

link

link 标签定义了文档与外部资源之间的关系。

link 标签通常用于链接到样式表:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

style

style 标签定义了HTML文档的样式文件引用地址.

在style>元素中你也可以直接添加样式来渲染 HTML 文档:

<head>
<style type="text/css">
body {
     
     background-color:yellow}
p {
     
     color:blue}
</style>
</head>

script

script标签用于加载脚本文件，如： JavaScript。

script 元素在以后的章节中会详细描述。

前面的汇总表格

标签	描述
head	定义了文档的信息
title	定义了文档的标题
base	定义了页面链接标签的默认链接地址
link	定义了一个文档和外部资源之间的关系
meta	定义了HTML文档中的元数据
script	定义了客户端的脚本文件
style	定义了HTML文档的样式文件

[零基础俯冲前端]HTML基础与元素(前端入门门槛不太高！)