快速了解HTML

最新推荐文章于 2024-05-21 18:11:13 发布

JBaiein

最新推荐文章于 2024-05-21 18:11:13 发布

阅读量53

点赞数 1

分类专栏：前端文章标签： html Powered by 金山文档

本文链接：https://blog.csdn.net/2202_75982737/article/details/128523832

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML常用标签

速查链表：https://www.runoob.com/html/html-quicklist.html

主要还是要自己多code，在自己写网页的过程中理解每个标签的作用

整体框架

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>
<!--
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元（meta）数据，如 **<meta charset="utf-8">** 定义网页编码格式为 **utf-8**
- charset="utf-8"，浏览器会按照utf-8解析网页，避免出现乱码
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
- <h1> 元素定义一个大标题
- <p> 元素定义一个段落
-->

常见标签

<h1>这是一级标题</h1>
<h2>
    这是二级标题
</h2>
<!-- 这是注释,在html文本中也可以通过'ctrl'+'/'实现快速注释，<h>为标题标签，1，2,3随着字数增大，字体减小，书写格式可以有自己的风格，但是要注意美观，便于维护 -->
<p>这是段落标签</p>
<a href="https://www.baidu.com">这是一个超链接，点击后跳转到对应的URL地址</a>
<img src="/images/1.png" width="258" height="39"/>
<!-- 这是图像标签，src后是图片的地址，可以使网页上的图片或本地图片，可以是相对地址，也可以是绝对地址,注意'/' ，表示改标签结束，其他标签同理，从开始标签起始，以结束标签终止 -->
<p>
    html标签对字母大小写不敏感
</p>
<hr> 标签，在 HTML 页面中创建水平线
<br> 标签，换行

<!-- 对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。-->

HTML标签属性

<!--
属性		描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id		定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)
-->

这四个为常用的标签属性，通过赋予标签属性，可以在css（看css会明白）中对不同的标签大小、样式等进行修改美化；

HTML表单

表单是HTML中比较重要的部分，登录、注册等页面的是通过表单的提交实现的；列表和表格知道标签能用；同理：

<form action="out.php" method="POST">
    	First name: <input type="text" name="firstname"><br>
		Last name: <input type="text" name="lastname">
		所下载的文件所在的文件夹：
		<input type="text" name="load"><br>
		<input type="submit" value="submit">
</form>

多数情况下被用到的表单标签是输入标签$ $。输入类型是由 type属性定义。

文本域，type="text";

密码字段，type="password";

单选按钮，type="radio";

复选框，type="checkbox";

提交按钮，type="submit"；

method属性定义表单数据的提交方式，post：表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等、get；

HTML区块

<!--
- 标签<div></div>，<span></span>；HTML 可以通过 <div> 和 <span>将元素组合起来。也是十分重要的一部分；
- HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。通过对<div>标签赋予不同的id或class属性对该区块的样式进行优化；
- HTML <span> 元素是内联元素，可用作文本的容器。**<span> **元素也没有特定的含义。当与 CSS 一同使用时，<span>元素可用于为部分文本设置样式属性
-->
<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>