初识HTML

weixin_41355956

已于 2022-05-27 08:59:22 修改

阅读量94

点赞数

分类专栏： HTML 文章标签： html 学习前端

于 2022-05-26 09:36:45 首次发布

本文链接：https://blog.csdn.net/weixin_41355956/article/details/124950336

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、什么是HTML？

超文本标记语言，是一种标记语言，不做逻辑处理，不是编程语言，它告诉浏览器如何构造网页。
HTML由一个个标签组成：
在这里插入图片描述
标签很多，常用如下：

二、简单HTML5页面结构

在这里插入图片描述
html页面的组成部分：
1、DOCTYPE声明部分，可以告知Web浏览器页面使用了哪种HTML版本；
2、head头部，主要包含编码声明、标题、样式表嵌入等；
3、body内容部分，包含文档的所有内容；
4、footer底部，定义文档或节的页脚。

三、HTML的hello world

推荐使用vs code，下面是几个常用快捷方式：

输入一个英文叹号“！”，然后按一下tab键或者回车键，可以生成一个简单的HTML网页。
注释快捷键：ctrl+/，格式如下：

<!--这个是一条注释-->

alt+shift+方向键向上可以快速复制上一行代码
在标签中输入lorem加字数（eg：lorem100），然后按tab键或者回车键，可以生成要求字数的文字，也可以不加数字

<h1>标签是标题的标签，最多到h6，大小依次减小

<!DOCTYPE html>
<html>
    <head>
        <title>你好</title>
    </head>
    <body>
        <h1>hello world!</h1>
        <h2>two</h2>
        <h3>three</h3>
        <h4>four</h4>
        <h5>five</h5>
        <h6>six</h6>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam perspiciatis soluta sed a culpa reiciendis mollitia, adipisci nulla quasi et ad itaque ut sapiente praesentium deleniti officia quaerat, aliquid enim totam excepturi sit laudantium est! Corrupti repellat debitis eos ad autem! Et commodi nam quia reiciendis quasi at sint aperiam recusandae soluta, accusamus error repellat, ipsa officiis debitis. Enim rerum ducimus cumque molestias exercitationem iste quam accusantium officia quidem nemo. Accusamus quos ab cumque ipsam dolore amet odit sequi unde iusto molestiae ratione eum libero nulla laborum saepe consequuntur labore neque ducimus nisi corrupti vitae eaque ut, quibusdam sit. Delectus!</p>
    </body>
</html>

在这里插入图片描述

四、HTML常用标签

请参考https://www.w3school.com.cn/tags/index.asp

<h1>标签是标题的标签，最多到h6，大小依次减小
<p>标签是段落标签
<br> 可插入一个简单的换行符,他没有结束标签
<div> 和 <span> 是没有语义的，用来装内容的，<div>是块级元素，定义分区,<span>组合行内元素，以便通过样式来格式化它们。
<meta> 标签永远位于 head 元素内部。可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<blockquote> 标签定义块引用。<blockquote> 与</blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。

<blockquote>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet ad aliquid ut fuga, cupiditate velit officia asperiores enim autem eligendi perspiciatis voluptate commodi modi aut! Fuga sequi quo iste minus!</blockquote>

<img> 标签向网页中嵌入一幅图像。标签并不会在网页中插入图像，而是从网页上链接图像。标签创建的是被引用图像的占位空间。

<img src="/img/pic.jpeg" alt="this is a picture about monton">

在这里插入图片描述

<abbr> 标签指示简称或缩写，比如 “WWW” 或 “NATO”。通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。

<p>
       <abbr title="Massachusetts Institute of Technology">MIT</abbr> is a collage.
</p>

在这里插入图片描述

<cite> 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。默认引用的文本将以斜体显示。

<p><cite>Lorem ipsum dolor sit amet consectetur adipisicing elit</cite> said by Sun.</p>

在这里插入图片描述

<a> 标签定义超链接，用于从一张页面链接到另一张页面。<a> 元素最重要的属性是 href 属性，它指示链接的目标。

 <a href="https://www.baidu.com">这是一个超链接</a>

在这里插入图片描述

<em> <strong> <dfn> <code> <samp> <kbd><var> <cite>虽然这些标签定义的文本大多会呈现出特殊的样式，但这些标签都拥有确切的语义。如果只是为了达到某种视觉效果而使用这些标签的话，我们建议您使用样式表css。

<style> 标签定义 HTML 文档的样式信息。在 style 元素中，您规定的是 HTML 元素如何在浏览器中呈现。具体见下一节CSS。
<link> 标签定义文档与外部资源之间的关系。<link> 标签大多数时候都用来连接样式表。具体见下一节CSS。

<button>和<input>:
<input> 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。type类型可以是：button、checkbox、file、hidden、image、password、radio、reset、submit、text、email。
<button> 标签定义一个按钮。在 button 元素内部可以放置内容，比如文本或图像。这是<button>与使用 <input type=“button”>创建的按钮之间的不同之处。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。请始终为按钮规定 type 属性,Internet Explorer 的默认类型是 “button”，而其他浏览器中（包括 W3C 规范）的默认值是 “submit”。

列表list：

<ul>标签是无序列表标签
<ol>标签是有序列表标签
标签定义列表项目，可用在有序列表 (
1. ) 和无序列表 (
  - ) 中。

<ol>
            <li>apple</li>
            <li>banana</li>
            <li>peach</li>
            <li>orange</li>
        </ol>
        <ul>
            <li>洗手</li>
            <li>做饭</li>
            <li>吃饭</li>
        </ul>

在这里插入图片描述

表格table:
HTML 表格有两类单元格：
表头单元包含头部信息（由 th 元素创建）<th>
标准单元包含数据（由 td 元素创建）<td>
th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。
<tr> 标签定义 HTML 表格中的行。tr 元素包含一个或多个 th 或 td 元素。
<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
<tbody>标签用于对 HTML 表格中的主体内容进行分组
< tfoot> 标签用于对 HTML 表格中的表注（页脚）内容进行分组。
如果使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody
<thead>、<tbody> 以及 <tfoot> 很少被使用，这是因为糟糕的浏览器支持。

<table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>学校</th>
                <th>学号</th>
                <th>班级</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>平均分</td>
                <td>100</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>小明</td>
                <td>13</td>
                <td>实验中学</td>
                <td>003</td>
                <td>3班</td>
                <td>100</td>
            </tr>
        </tbody>
    </table>

在这里插入图片描述
表单form：
<form> 标签用于为用户输入创建 HTML 表单,用于向服务器传输数据。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

<form action="/demo/demo_form.asp" method="post">
    <div>
        <label>first name</label>
        <input type="text" name="firstname" placeholder="enter your first name">
    </div>
    <div>
        <label>last name</label>
        <input type="text" name="lastname" placeholder="emter your last name">
    </div>
    <div>
        <label>email</label>
        <input type="email" name="email" placeholder="emter email">
    </div>
    <div>
        <input type="submit" name="submit" value="Submit">
    </div>
</form>

在这里插入图片描述

五、块级元素和内联元素

块级元素：

在页面内以块的形式展示
出现在新的一行
默认占全部宽度
<div> <h1>-<h6> <p>

内联元素:

通常在块级元素内
不会导致文本换行
只占必要的部分宽度
<a> <img> <em> <strong>

七、标签属性

在这里插入图片描述

weixin_41355956

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识HTML

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、什么是HTML？二、简单HTML5页面结构三、HTML的hello world2.读入数据总结前言什么是HTML一、什么是HTML？超文本标记语言，是一种标记语言，不做逻辑处理，不是编程语言，它告诉浏览器如何构造网页。HTML由一个个标签组成：标签很多，常用如下：二、简单HTML5页面结构html页面的组成部分：1、DOCTYPE声明部分，可以告知Web浏览器页面使用了哪种HTML版本；2、h.
复制链接

扫一扫