HTML学习

最新推荐文章于 2024-11-12 09:35:16 发布
最新推荐文章于 2024-11-12 09:35:16 发布
阅读量299 收藏
点赞数 2
文章标签： HTML 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43540463/article/details/96572338
版权
  1. HTML概述
    1. 什么是HTML？

超文本标记语言(Hypertext markup language的简称)，HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。“超文本”就是指比普通文本更强大的，页面内可以包含图片、链接，甚至音乐、程序等非文字的各种元素。

    1. 为什么学习HTML？

1、可以使用 HTML 来建立自己的 WEB 网站，HTML 运行在浏览器上，由浏览器来解析运行出来对应的效果的。

2、制作用户的操作网页界面

    1. HTML的结构

超文本标记语言(或超文本标签语言)的结构包括“头”部分、和“主体”部分。

1.<head></head>：这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。

以下表格列出了 HTML head 元素：

标签

描述

<head>

定义了文档的信息

<title>

定义了文档的标题（最常用到的）

<base>

定义了页面链接标签的默认链接地址

<link>

定义了一个文档和外部资源之间的关系

<meta>

定义了HTML文档中的元数据（最常用到的）

<script>

定义了客户端的脚本文件

<style>

定义了HTML文档的样式文件

<title>：标题标记符用于定义网页的标题，它的内容显示在网页窗口的标题栏中，网页标题可被浏览器用作书签和收藏清单。

2. <body></body>：网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。

    1. 语法规范

1.通过标签来对内容进行描述,标签通常都是由开始标签和结束标签组成，也存在单个标签。

2. htmL是一个不严谨的，不区分大小写的一门语言，标签不区分大小写, 建议使用小写。

  1. HTML具体使用 
    1. 常用标签

<a>

定义锚。

<b>

定义粗体字。

<big>

定义大号文本。

<body>

定义文档的主体。

<br>

定义简单的折行。

<button>

定义按钮 (push button)。

<caption>

定义表格标题。

<center>

不赞成使用。定义居中文本。

<div>

定义文档中的节。

<dl>

定义定义列表。

<dt>

定义定义列表中的项目。

<em>

定义强调文本。

<font>

不赞成使用。定义文字的字体、尺寸和颜色。

<form>

定义供用户输入的 HTML 表单。

<frame>

定义框架集的窗口或框架。

<frameset>

定义框架集。

<h1> to <h6>

定义 HTML 标题。

<head>

定义关于文档的信息。

<hr>

定义水平线。

<i>

定义斜体字。

<iframe>

定义内联框架。

<img>

定义图像。

<input>

定义输入控件。

<li>

定义列表的项目。

<meta>

定义关于 HTML 文档的元信息。

<ol>

定义有序列表。

<option>

定义选择列表中的选项。

<p>

定义段落。

<pre>

定义预格式文本。

<small>

定义小号文本。

<span>

定义文档中的节。

<strong>

定义强调文本。

<table>

定义表格。

<tbody>

定义表格中的主体内容。

<td>

定义表格中的单元。

<textarea>

定义多行的文本输入控件。

<th>

定义表格中的表头单元格。

<thead>

定义表格中的表头内容。

<title>

定义文档的标题。

<tr>

定义表格中的行。

<u>

定义下划线文本。

<ul>

定义无序列表。

    1. 标签使用

1.标题标签  h1-h6

                   

2.段落标签<p></p>:里面包含文本段落，会自动在段前和段后空出一行。

3. img 图片标签: <img src="" width="" height="" alt=""/>

​width : 设置图片宽度

​height: 设置图片高度

src :  设置图片指定文件路径信息

alt:  图片加载失败时在图片位置上现实的文字

4.a超链接标签：用于从一个页面链接到另一个页面<a href="" target=""></a>

href属性：指定链接的目标 URL。如href=http://www.baidu.com

target属性：规定在何处打开目标 URL。仅在 href 属性存在时使用。

_blank:在浏览器打开一个新的标签页打开目标 URL。

_parent：在当前页面的父页面打开目标 URL。

_self:在浏览器的当前页面打开目标 URL。

_top：在当前页面的上一级页面打开目标 URL。

5.列表标签 uploading.gif转存失败重新上传取消

无序列表：<ul type=""><li></li></ul>

Type属性：circle(圆圈)、disc（实心圆）、square（方块）。

有序列表：<ol type=""><li></li></ol>

Type属性：编号起始值1、a、A、I、i。

6.表格标签

cellpadding：规定单元边沿与其内容之间的空白。

cellspacing：规定单元格之间的空白

colspan: 跨列操作

- rowspan: 跨行操作

注意: 跨行或者跨列操作之后,被占掉的格子需要删除掉

 

uploading.gif转存失败重新上传取消

 

uploading.gif转存失败重新上传取消

 

    1. 表单标签form         

uploading.gif转存失败重新上传取消

action : 直接提交的地址url

method 的属性值:

get 方式：  默认提交方式 ,会将参数拼接在链接后面 , 有大小限制4k,安全无保障。

post 方式：  会将参数封装在请求体中, 没有这样的限制

                    

         

    1. Input标签 :

<input type="" name="" id="" value="" />

type: 指定输入项的类型

text : 文本框

   

uploading.gif转存失败重新上传取消uploading.gif转存失败重新上传取消

  password :  密码框

uploading.gif转存失败重新上传取消uploading.gif转存失败重新上传取消

  radio :       单选按钮

uploading.gif转存失败重新上传取消uploading.gif转存失败重新上传取消

  checkbox :  复选框

  file    : 上传文件

  submit   : 提交按钮

  button      : 普通按钮

  reset  : 重置按钮

  hidden  : 隐藏域

  date    : 日期类型

  tel     : 手机号

  number   : 只允许输入数字

  placeholder : 指定默认的提示信息

  name : 在表单提交的时候,当作参数的名称

  id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它

  textarea : 文本域, 可以输入一段文本

          cols : 指定宽度

          rows : 指定的是高度

select  : 下拉列表

  option : 选择项

 

可木可易
关注
html个个代码的意思,网页HTML中各个代码意思大全
weixin_29911401的博客
06-07 5896
网页HTML代码中的h1,p,a,tr,td……分别代表什么意思？相信还有很多人都不太了解,现在我们就具体讲一下它们的意思及用法：网页HTML中各个代码意思大全网页HTML代码中的h1，p，a，tr，td……分别代表什么意思？相信还有很多人都不太了解，现在我们就具体讲一下它们的意思及用法： h1 一级标题，h2 二级标题，p 段落，a 超连接，tr 表格 行，td 表格 列，li ...
head标记
小小唐僧的博客
05-13 1279
目录<head>标记 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> </body> </html> 初始自带源代码构成了HTML5文档的基本格式，主要包括<!doct
vscode笔记——＜head＞标签
weixin_59122579的博客
03-11 2235
HTML中的<head>部分
html中head标记的含义,< head>< /head>标签指的是什么意思？
weixin_28856787的博客
06-09 1683
、、 、 、、 等标签。那么，这些元素放入头部标签有什么用呢？主要是用于描述该文档的各种属性和信息。这样看定义好像很抽象，没事，如乐老师举例说明，比如：这个base标签放在与之间，可以让页面中的所有标签在新窗口中打开。也就是说，当你用鼠标点击该页面中的所有标签时，页面会在新窗口打开而不会覆盖当前的页面。呃~这个例子好像对新手同学来说，也好难理解，没事，我再举一个：如乐老师好帅这个title标签放在...
HTML语言基础
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
11-23 535
HTML头部及其标签 ，表示这是HTML网页的头文件部分，用来说明文件命名和与文件本身的相关信息。通常这部分标签是声明次网页的：默认语言、关键字、使用软件等，个别的标签产生页面动作。在复杂的网页中，如CSS样式表，Javascript语言等，这部分十分的重要。 1. meta标签 是head部分的一个辅助标签，位于html文档头部的标签和标签之间，提供用户不可见的东西。可分为两大部分：htt
HTML学习内容总结
qq_48681023的博客
07-10 2320
HTML学习总结
HTML学习指南：从基础到实践总结
在本文档中，我们将会深入探讨HTML学习的基础知识和重要性，特别针对初学者可能遇到的困惑，如HTML标签的记忆和理解。HTML，全称为HyperText Markup Language，是构建网页结构的核心语言，对于前端开发至关重要。 ...
html如何制作左侧导航栏,Html学习之十三（导航栏的制作）
weixin_29968283的博客
05-31 6550
导航效果.tab-item{list-style: none;font-family: "宋体";font-size: 18px;text-decoration: none;cursor: pointer;float: left;border: 1px darkgray solid;overflow: hidden;background-image: none;margin: 0px 5px;}....
几个HTML5入门学习的好例子(代码)
10-16
HTML5是现代网页开发的核心，它为开发者提供了更强大、更灵活的功能，使得网页应用程序能够实现前所未有的交互性和用户体验。...每个特性都有其独特的应用场景，结合实际案例学习，将有助于快速掌握HTML5的精髓。
HTML入门与进阶以及HTML5
热门推荐
wuyxinu的博客
12-12 38万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
<head></head>都可以放什么，什么作用？
aikuai7711的博客
06-28 1041
HTML<head></head>头部元素包含关于文档的概要信息，也被称为元信息（meta-information）。 <head></head>元素包含了所有的头部标签元素。在<head>元素中你可以插入脚本（scripts）,样式文件（CSS），及各种meta信息。 可以添加在头部区域的元素标签为:&...
HTML<head></head>中标签的含义
weixin_30871701的博客
05-30 807
我们都知道，HTML的标签可以分为很多种，head 里面的我们称为元信息类标签，诸如title、meta、style、link、base、script这些，他们用来描述文档的一些基本信息。 1. title 标签 可定义文档的标题。 <title> 标签是 <head> 标签中唯一要求包含的东西。 浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标...
php头代码,PHP常用header头定义代码示例汇总
weixin_34665627的博客
03-10 144
在php的开发中，我们常常需要使用到header函数头来进行做标记header() 函数向客户端发送原始的 HTTP 报头。常用header设置列表如下：header("HTTP/1.1 200 OK"); // ok 正常访问header("HTTP/1.1 404 Not Found"); //通知浏览器 页面不存在header("HTTP/1.1 301 Moved Permanently"...
[Dreamweaver教程]Meta标签详解
12-20 2289
[Dreamweaver教程]Meta标签详解原作者：indian出处：5D多媒体发表时间：2004-12-8关键词：版权信息：传统媒体及商业网站禁止擅自转载；个人网站转载需经作者同意，并注明作者及出处。<!--google_ad_client = "pub-1259
HTML语言标记详解
青梅煮酒
10-20 1万+
    开发过Android的同学都知道，Android应用程序中的界面是由一个个控件组合而成的，比如说按钮控件，图片控件，文本输入框控件等。HTML语言的标记就可以理解成控件的标记，一个标记指定了一个控件，但是标记并不是控件本身，仅仅是那个控件的标记。HTML文件中的标记由浏览器来解析，产生相应的界面元素（控件），最终生成网页上可见的那些内容。     标记可以有自己的属性和内容。标记的属性指...
蓝凌OA-EKP hrStaffWebService 任意文件读取漏洞
最新发布
iSee857的博客
11-12 512
它集成了流程管理、知识管理、会议管理、公文管理、合同管理、费用管控等多个模块，旨在帮助企业解决基础OA应用、系统集成、开发平台和创新业务定制等长期扩展需求，推动企业实现管理在线化、知识赋能化、运营数字化和人机智能化‌。漏洞，未经身份验证攻击者可通过该漏洞读取系统重要文件（如数据库配置文件、系统配置文件）、数据库配置文件等等，导致网站处于极度不安全状态。在处理客户端输入的参数时，进行严格的验证和过滤，防止未授权的文件访问。返回数据经过base64编码 解码后可得读取数据。
前端 Flex 布局语法详解
ning的博客
11-10 1130
Flex是Flexible Box的缩写，意为“弹性布局”。它允许容器内的项目（子元素）自动调整大小，以适应不同屏幕尺寸和布局需求。如果需要行内Flex布局，可以使用Flex布局提供了一种强大而灵活的方式来创建响应式布局。通过理解并应用上述属性，你可以轻松地创建出复杂且适应不同屏幕尺寸的布局。随着现代浏览器对Flex布局的广泛支持，它已经成为前端开发中不可或缺的一部分。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章CSDN - Flex布局详解菜鸟教程 - Flex 布局语法教程。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值