html基础

最新推荐文章于 2024-11-01 15:19:31 发布

hao120929655

最新推荐文章于 2024-11-01 15:19:31 发布

阅读量62

点赞数

分类专栏： 2022前端开发学习笔记文章标签： html 前端

本文链接：https://blog.csdn.net/hao120929655/article/details/126895614

版权

2022前端开发学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

引导语
一、html是什么？
二、html语言
总结

引导语

提示：这里可以添加本文要记录的大概内容：

我们要想一下网页中都有哪些内容，比如文字，图片，音频，视频，超链接，列表，表格，表单等，这些内容又是放在什么样的结构中的。

提示：以下是本篇文章正文内容，下面案例可供参考

一、html是什么？

HTML（超文本标记语言——HyperText Markup Language）定义了网页内容的含义和结构。HTML 使用“标记”（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。HTML往往用一对标签或一个标签来包含内容，可以把一个个标签看成是一个个盒子，在盒子里面放内容。盒子之间要么是并列，要么就是嵌套关系。html元素是<开始标签>+内容+</结束标签>，内容可以为空，或者我们可以元素简单的认为就是标签。

二、html语言

1.html基本结构

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My first web page</title>
  </head>
  <body>
  	hello, world!
  </body>
</html>

<!DOCTYPE html> —表明这是html5文档。
<html></html>—html标签，该标签包含整个页面的内容。
<head></head>—head标签，该标签内的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。
<meta charset="utf-8"> — meta指定文档使用 UTF-8 字符编码。
<title></title> — <title> 标签。该标签设置页面的标题，显示在浏览器标签页上。
<body></body> — <body> 标签。该标签包含期望让用户在访问页面时看到的内容。

2.基本标签

2.1 文字标签

标签	含义
`<h1></h1>`	一级标题，标题有六级h1–h6
`<h2></h2>`	二级标题
`<h6></h6>`	六级标题
`<p></p>`	段落

2.2 图片标签

标签	含义
`<img src="" alt="">`	图片，src写图片路径，alt是图片加载不出时的提示文本。

2.3 超链接标签

标签	含义
`<a href="#"></a>`	超链接，#表示这是一个空连接。

2.4 列表标签

<!-- 无序列表 -->
    <ul>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
    </ul>

<!-- 有序列表 -->
    <ol>
        <li>中国</li>
        <li>美国</li>
        <li>日本</li>
    </ol>

<!-- 自定义列表 -->
<dl>
        <dt>四大名著</dt>
        <dd>西游记</dd>
        <dd>三国演义</dd>
        <dd>水浒传</dd>
        <dd>红楼梦</dd>
    </dl>

2.5 表格标签

<table>
        <caption>表格标题</caption>
        <tr>
            <td>(1,1)</td>
            <td>(1,2)</td>
        </tr>
        <tr>
            <td>(2,1)</td>
            <td>(2,2)</td>
        </tr>
    </table>

2.6 表单标签

    <form action="">
        <!-- 1.单行文本框 -->
        <input type="text" name="" id="">
        <input type="password" name="" id="">
        <!-- 2.多行文本框 -->
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <!-- 3.单选框 -->
        <input type="radio" name="" id="">
        <!-- 4.复选框 -->
        <input type="checkbox" name="" id="">
        <input type="checkbox" name="" id="">
        <input type="checkbox" name="" id="">
        <!-- 5.按钮 -->
        <input type="button" value="普通">
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <!-- 6.文件上传 -->
        <input type="file" name="" id="">
        <!-- 7.下拉列表 -->
        <select name="" id="">
            <option value="">C语言</option>
            <option value="">Python语言</option>
            <option value="">Java语言</option>
        </select>
    </form>