html(超文本标记语言(Hyper Text Markup Language))初学

1. 首先是开头部分,这里以vscode自动生成的开头为例。

<!DOCTYPE html><!--定义文档的类型;指示使用哪个版本的html,html5只有这一种表示,HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明,分别是:Strict、Transitional 和 Frameset>
<html lang="en">
<!--定义网页语言,en为English,zh为Chinese,(可以不声明语言,但是声明后浏览器和搜索引擎都可识别,浏览器也可以进行相应的翻译,不声明的话初始是unknown未知)-->
<head> //定义头部元素,一般不会显示在页面中
    <meta charset="UTF-8">//定义字符编码格式
    <meta name="viewport" content="width=device-width, initial-scale=1.0">//定义网页视窗显示比例,初始为宽度为设备宽度,初始比例为1.0
    <title>Document</title>//为文档页面定义一个标题(必要)
</head>
<body>//定义文档主体内容
    -----
</body>
</html>

2. 然后说一下常用的标签

1. <h1>-<h6> 标签被用来定义 HTML 标题

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

<h1>这是1级标题</h1> 
<h2>这是2级标题</h2> 
<h3>这是3级标题</h3> 
<h4>这是4级标题</h4> 
<h5>这是5级标题</h5> 
<h6>这是6级标题</h6>

2. <p> 标签定义段落。

3. 一些短语标签可搭配p标签使用

<strong>加粗
<em>斜体
<code>定义计算机代码文本;等宽、类似电传打字机样式的字体
<kbd>定义键盘文本;等宽字体
<samp>定义样本文本 防止内容被转换,例:字符序列 ae 可能会被转换为 æ 连字字符。不常用
<var>定义变量 标签表示变量的名称,或者由用户提供的值。通常为斜体,可与 <pre> 及 <code> 标签配合使用。
<dfn>定义一个定义项目 对文档中的文本进行格式化;少用
<cite>定义一个引用;通常为斜体

<p>Lorem ipsum <strong>加粗strong</strong> amet, consectetur<br> <strong><em>adipisicing斜体strong和加粗em</em></strong> elit. Architecto<a
        href="http://182.92.219.49" target="_blank">my homepage</a> <br> 
        代码 <code>#include&lt;iostream&gt;</code>facere <br> 
        键盘文本:键入 <kbd>quit</kbd> 来退出程序,或者键入 <kbd>menu</kbd> 来返回主菜单。<br> 
        样本 字符序列 <samp>ae</samp> 可能会被转换为 &aelig; 连字字符。<br> 
        定义变量<var>156</var><br> 
        定义项目<dfn>initial格式化</dfn><br> 
        引用<cite>cumt is a college</cite> me
    </p>

Lorem ipsum 加粗strong amet, consectetur
adipisicing斜体strong和加粗em elit. Architectomy homepage
代码 #include<iostream>facere
键盘文本:键入 quit 来退出程序,或者键入 menu 来返回主菜单。
样本 字符序列 ae 可能会被转换为 æ 连字字符。
定义变量156
定义项目initial格式化
引用cumt is a college me

##2. <pre> 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre>
此例演示如何使用 pre  标签
对空行和 空格
进行控制
</pre>

此例演示如何使用 pre 标签
对空行和 空格
进行控制

后面懒得写了

<ul> <!-- 无序列表-->
    <li>list 1</li>
    <li>list 2</li>
    <li>list 3</li>
    <li>list 4</li>
</ul>
<ol><!--有序列表-->
    <li>565</li>
    <li>565</li>
    <li>565</li>
</ol>
<table> <!--表-->
    <thead>
    <tr>
        <th>name</th>
        <th>age</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>wo</td>
    <td>12</td>
    </tr>
    <tr>
    <td>wo</td>
    <td>12</td>
    </tr>
    <tr>
    <td>wo</td>
    <td>12</td>
    </tr>
    </tbody>
</table>
<br>
<br>
<br>
<hr>

<form action="1.js" method="post"><!--表单 post和get两种提交
HTML <div> 元素是块级元素,它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。-->
    <div>
        <label>name</label>
        <input type="text" name="first" placeholder="shuru">

    </div>
    <div>
        <label>email</label>
        <input type="email" name="email" placeholder="shuru">
    </div>

        <input type="submit"name="su" value="SUBMIT">
</form>
<button>a bt</button>
<img style="50vw" src="C:UsersshiyuehangDesktopimg8e0418fcc9adeadd0db725a4054ebbb.jpg" alt="
加载不出来显示的东西1"> <!--图片-->
<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, veniam.</blockquote><!--引用-->
<p><abbr title="中国矿业大学">CUMT</abbr> is a college</p>
<p><cite>cumt is a college</cite>by me</p><!--引用名言-->
<div style="margin-top:1000px"></div><!--下面加空-->

原文地址:https://www.cnblogs.com/yzmy/p/13971987.html