初识HTML

最新推荐文章于 2024-09-11 10:49:17 发布

uuukkyo

最新推荐文章于 2024-09-11 10:49:17 发布

阅读量474

点赞数 17

文章标签： html 算法前端

本文链接：https://blog.csdn.net/uuukkyo/article/details/135590702

版权

本文介绍了HTML的基础结构，包括doctype声明、元素如<head>、<body>、<p>、<h1>-<h6>、<a>、<img>、<ul>/<ol>/<li>、<table>、<form>、<input>等标签的用法，以及注释的作用。

摘要由CSDN通过智能技术生成

HTML（Hypertext Markup Language）是用于构建网页结构的标记语言，HTML中文全名叫做：超文本标记语言。超文本的意思就是不止是文本，还可以包含图片，链接，音乐，等非文字元素。

1.HTML的基础结构

<!DOCTYPE html>：
- 作用：声明文档类型和HTML版本，帮助浏览器正确渲染页面。
- 示例：
  <!DOCTYPE html>
<html>：
- 作用：定义HTML文档的根元素。
- 示例：
  <!DOCTYPE html> <html>  </html>
<head>：
- 作用：包含关于文档的元信息，如标题、字符集、样式链接等。
- 示例：
  <!DOCTYPE html> <html> <head>  </head>  </html>
<body>：
- 作用：包含文档的主要内容，如文本、图片、链接等。
- 示例：
  <!DOCTYPE html> <html> <head>  </head> <body>  </body> </html>

段落标签 <p>：
图片示例：
- 一段文字被包裹在<p>标签中，展示段落的效果。
标题标签 <h1> - <h6>：
- 图片示例：
- 展示不同级别标题的样式，如一个页面标题使用<h1>，子标题使用<h2>等。
链接标签 <a>：
- 图片示例：
- 一个超链接的样例，包含链接文本和链接目标。
图片标签 <img>：
- 图片示例：
- 展示如何使用<img>标签插入图片，并包含src和alt属性。
列表标签 <ul>、<ol> 和 <li>：
- 图片示例：
- 展示无序列表和有序列表的外观，包含列表项。乍一看好像差不多，确实确实差不多qwq，无序列表也能通过样式改变为有序的样子，不过那都是后话
表格标签 <table>、<tr> 和 <td>：
- 图片示例：
- 这是一个普通的表格，我在table标签中加入了 border="1"所以表格的边框就有了长度
表单标签 <form>、<input> 和 <button>：
- 图片示例：
- 其中具体代码
  <form>
  
  
  
  <label for="username">用户名:</label>
  
  <input type="text" id="username" name="username" placeholder="请输入用户名">
  
  <br>
  
  
  
  <label for="password">密码:</label>
  
  <input type="password" id="password" name="password" placeholder="请输入密码">
  
  <br>
  
  
  
  <input type="submit" value="登录">
  
  </form>
注释 ：
- 按住ctrl加/就可以把你的代码注释掉，就是让你的代码不起作用或者说是一个提醒作用
- 一个HTML文件中包含注释的示例。