HTML入门学习

c_master__

已于 2022-09-24 20:52:07 修改

阅读量278

点赞数

文章标签： html 学习前端

于 2022-09-24 20:35:20 首次发布

本文链接：https://blog.csdn.net/c_master__/article/details/127030147

版权

HTML

介绍：html是一种超文本标记语言

超文本：不限于文字，可以为视频，图片等。

标记语言：不同于java等编程语言，标记语言是一套标记标签，更容易上手。

（有照片标签，文字标签等）

网页是由链接，图片，视频，声音，文字等元素组成的。

而网页的制作就依靠于HTML。

语法规范

所有的标签(关键词)包括在<>之间

标签基本成对出现

结束的多一个” / “斜杠

单标签很罕见

eg：<br />

双标签可以分为两类：包含于并列

<head> 包含
    <title></title>
    <body></body>并列
</head>

html基本结构标签

在这里插入图片描述

用 ! + tab即可生成框架

<!-- <!DOCTYPE html>告诉浏览器我们的html版本，在<html>之前，属于文档类型声明标签 -->

<!DOCTYPE html>
<!-- language为English，用来定义当前文档的语言,zh-CN为中文。对浏览器搜索有用 -->
<!-- 并且浏览器会检测来进行翻译 -->
<html lang="en">
<head>
    <!-- charest为字符集，来存储文字 -->
    <!-- UTF-8为万国码，基本包含全世界所有语言，若没有UTF-8则容易出现乱码 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哥们在这给你说唱</title>
</head>
<body>
    L！t！c！理塘顶真~
</body>
</html>

html常用标签

标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哥们名叫丁真</title>
</head>
<body>
    <h1>Smokin round e-cigarettes new</h1>
    <h2>我的小马名字叫珍珠</h2>
    <h3>假烟发现就跑路</h3>
    <h4>baby i ain't smoking by your rules</h4>
    <h5>臭要饭的别挡我财路</h5>
    <h6>.</h6>
</body>
</html>

段落标签

在body中直接换行在网页中无法体现，需要使用<p>
在段前加入<p>段末加入</p>
(p为paragraph的缩写)

换行标签

使用<br />来强制换行

- **格式化标签**

<strong>加粗

<em>倾斜

<del>删除线

<ins>下划线

div&span标签

div和span为一个容器

div是大盒子(独占一行)，span是小盒子(不独占一行，可多span同一行)

图像标签

<img src="图片名称" alt="图片无法显示时出现的字符" title="指针在图片上时显示的字符" >

<img src="图片名称" width="宽度" height="高度" border="边框大小" >

//宽度等单位都是像素

属性写在标签名后面，无先后顺序，用空格隔开。

属性采取键值对的模式，即key=“value”的格式，属性=“属性值”

图片的引用有相对路径的引用和绝对路径的引用

在这里插入图片描述

链接标签

链接标签<a href="the web" target="the web way of open">link name</a>

其中target="__self"为默认值，点开链接后直接跳转

其中target="__blank"为点开链接弹出链接的网页，不删除原网页

在这里插入图片描述

link name为网站上可点击的文字，也可以为图片，视频等

链接标签分类

在这里插入图片描述

链接标签中还有一种叫做锚点标签

在这里插入图片描述

特殊字符

见下表

在这里插入图片描述

表格标签

用<table>来建立表格<tr>为行列<td>为单元格<th>为表头单元格<thead>表格头部<tbody>表格主体

在这里插入图片描述

列表标签

列表分为有序列表，无序列表与自定义列表

无序列表

在这里插入图片描述

无序列表标签

标签只能放
，不可以放其他文字或标签，
可以容纳所有元素
实际开发时，我们会使用css配置

有序列表

有序列表标签

标签只能放
，同上

自定义列表

自定义列表<dl>标签只能放<dt>和<dd>

在这里插入图片描述

表单标签

Q：为什么需要表单

A：收集用户信息，在网页中与用户交互，收集用户信息

表单组成

在这里插入图片描述

表单域标签<form>    
</form>

<input />标签用于收集用户信息

在这里插入图片描述

radio和checkbox需要设置相同的name

<label>标签可以让用户点击文字时即可开始输入

.<select>即向下扩张标签，可以**减少占用空间**

在这里插入图片描述

Web

浏览器

主流浏览器：chrome，ie，edge等

浏览器的作用是读取html

web标准

因为一个网页在不同浏览器可能会排版不同，所以W3C制定了web标准。

标准主要包括：结构，表现，行为三方面。

在这里插入图片描述

主流浏览器：chrome，ie，edge等

浏览器的作用是读取html

web标准

因为一个网页在不同浏览器可能会排版不同，所以W3C制定了web标准。

标准主要包括：结构，表现，行为三方面。

在这里插入图片描述

c_master__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML入门学习

Html的入门以及Web的简单介绍
复制链接

扫一扫

HTML入门学习

HTML

介绍：html是一种超文本标记语言

超文本：不限于文字，可以为视频，图片等。

标记语言：不同于java等编程语言，标记语言是一套标记标签，更容易上手。

（有照片标签，文字标签等）

而网页的制作就依靠于HTML。

语法规范

html基本结构标签

html常用标签

链接标签

Web

浏览器

web标准

web标准

“相关推荐”对你有帮助么？